- Review the course description. This isn't a frontend course!
- Your instructor
- Interests: music, graphics, interaction, games
- Show some projects
- Tutor / Learning Assistant: Reid Pritchard!
- Various skill levels
- Everyone: Learn about the craft, the state of the art, and express yourself creatively with code
- Beginners: I want you to learn to find joy in coding, and get comfortable with tools, techniques, and nomenclature
- Advanced: I want you to dig deep, explore concepts, seek out additional challenges to hone your skills, and build a more robust portfolio
- Expectations of conduct & ethos for learning code
- See the original works policy
- What topics are you interested in?
- How can we merge our interests with code?
- Special requests to make this course work for you?
- Code is usually written in text files, but there are also node editors and other ways to build interactive software
- Writing code is the practice of building a web of logic and data
- Code isn't hard, but it is frustrating
- Language & syntax
- Most modern languages are very similar
// C++ example
// this syntax of for() loops originated in 1972!
for (int i = 0; i < 10; i++) {
cout << "Hello, world!" << endl;
}// JavaScript example
for (let i = 0; i < 10; i++) {
console.log("Hello, world!");
}// Java example
for (int i = 0; i < 10; i++) {
System.out.println("Hello, world!");
}# Python example
for i in range(10):
print("Hello, world!")
At a minimum, we'll be exploring the following coding concepts this semester. If these are already familiar, then let's practice them, and choose our own adventure for further exploration.
- Variables
- Functions
- Conditionals (if/else)
- for() loops
- Arrays
- Objects
- Classes
Every language has these features - the first goal is to understand these constructs & tools.
If you're not comfortable with these concepts yet, come to office hours and study the following links 👇
- Opens doors to interdisciplinary & creative work
- It's fun and magic ✨ You can build such unique and varied things with codem abd is a reqarding creative outlet
- Digital literacy. If algorithms and AI are impacting our lives in so many ways, we should understand how they work
- Jobs & employment. Even if you don't pursue a career in coding, understanding code can be an enormous advantage across fields
- Find something that speaks to your interests
- You'll each find your own path with code (languages, career paths)
- Find the magic
- Personal story of failure & persistence in Computer Science
- Practice! Try, fail, repeat - it's better to start writing bad code than to let yourself get stuck meme
- Self-directed and meandering exploration - this is an important ethos of approaching programming from a creative coding perspective
- Which language/tool should I learn? Any! This will change over time.
- Where to find answers: break the problem down, ask it in spoken language ("how do I make a circle move?"), then search - your AI assistant, Google/YouTube, docs, Stack Overflow, or each other (Canvas/Slack - since we don't have much class time together, this matters)
- Don't get overwhelmed - some concepts take a long time, and this is a (life)long journey. It's more important to learn the capabilities of the tools than to memorize syntax
- More places to look: Articles/Blogs/Tutorials, Slacks/Discords where coders talk
- Finally, let's talk about AI
- It's still just code! But with an emphasis on media, graphics, audio, and interactivity
- "Creative coding", is a buzzword that most commonly refers to:
- Generative art
- Interactive installations
- New Media Art
- Making games, toys, apps, instruments, or anything creative, that's not just a typical website or app
- But, all code is creative!
- Solving any engineering problem is a creative process
- What kind of creative coder do you want to be?
- Some artists for inspiration
- Let's use this class to learn, build a portfolio, and make conceptual work. Generative art becomes much more meaningful with an artist statement, a unique personal perspective, or a story to tell.
- Get an IDE that's good for your language of choice - VS Code for web/general dev, or p5js's own online editor
- Type your code into text files (or connect nodes in a node editor), then compile or run your program
Examples of IDEs used with different languages:
- Java: IntelliJ IDEA or Eclipse
- C#: Visual Studio
- Swift: Xcode
- VS Code has been extended to work with almost any language
- p5js: create an account for the editor
- Get the VS Code IDE, and then install the p5js extension
- There's a good setup explainer here p5js in VS Code
- If you use an external editor for p5js, please paste your code back into the p5js web editor to turn in your assignments
- If you'd like to use other tools like Unity, TouchDesigner, THREE.js, Processing, Openframeworks:
- I can help during office hours, but if I don't have experience with the tool, you'll be on your own
- I expect video documentation of your projects, since you can't turn them in via a link to the p5js editor. Use Canvas to pass in your video documentation if you go this route
- Use GitHub to post your code, and upload a video to Canvas
- Canvas & Slack
- Use this to help each other out - my coworkers and I use Slack to chat about engineering problems
- Screen capture - you'll need this to document your work
- OS X: Quicktime
- Windows 10: Windows Snipping Tool or Xbox Game Bar
- Pull up the p5js editor together and build a tiny preview of the first assignment
background(),fill(), a couple of shapes (rect(),ellipse(),triangle()) - just enough to show it's not scary- This is the bare minimum of every assignment this semester: open the editor, build something small, and see how far we can take it!
- If you have little or no code experience, start here with sections 1-5:
- Go through the 1st section of articles at Welcome to Coding
- Even if you're comfortable with the basic concepts, there are lots of important tips within.
- Books to bookmark:
- p5.js examples
- Prepare your tools & workspace
- Prepare to share & document your work
- Build an ATLAS logo "A" of your choice with code. Use basic drawing tools to set colors and create shapes:
- w/p5js:
- Color
- Shapes
- w/p5js:
- Add animation or interactivity
- Get creative with color
- Build an "A" with different drawing functions. For example: ellipse() circle() and a rounded rect() can all draw the same shape
- Make your own "A" designs
- Build several different "A" logos
- Explore p5 API and learn how to create even more shapes
- Build the "A" in a larger, designed layout with code
- Morph one "A" to another
- Make it "pixel-perfect": Load an image and draw your shapes on top to make sure it's perfect
- Make an interesting background - use an image or generate a pattern
- Build a larger story or concept around the "A"
- Use a different tool (Shadertoy, TouchDesigner, Unity) to make an "A"
- Post the link to your code on https://editor.p5js.org/
- Add a description of your intent, your successes, and failures
- If you're using a different tool, upload a video to Canvas or post a link to a video on YouTube (or elsewhere) and post your code to Canvas
- If you use tutorials or other resources, please credit them in your comments. I don't care if your work is impressive, I care that you're learning and practicing. It's okay to borrow other people's code and use AI tools, but don't pretend that it's your own. Attribution is an important skill to develop, and communicating your process is key to defending your work and informing your audience and collaborators.