Skip to content

class-01.md

Latest commit

 

History

History
197 lines (162 loc) · 10.6 KB

class-01.md

File metadata and controls

197 lines (162 loc) · 10.6 KB

Class 1

📋 Introductions

  • Review the course description. This isn't a frontend course!
  • Your instructor
    • Interests: music, graphics, interaction, games
    • Show some projects
  • Tutor / Code Helper
  • 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

Student introductions & interests

  • What topics are you interested in?
  • How can we merge our interests with code?
  • Special requests to make this course work for you?

📋 What is code?

Code is software, code is everywhere

  • Code is usually written in text files, but there are also node editors and other ways to build interactive software
  • Writing code is ultimately 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

Why code?

  • Interdisciplinary & creative work
  • It's fun and magic!
  • Jobs & employment
  • Digital literacy

How to love it

  • 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

How to learn it

  • Coding Was HARD Until I Learned These 5 Things...
    1. Learn by doing
    2. Learn to program, not programming language
    3. Create a roadmap for yourself
    4. Prioritize understanding
    5. Get use to failing
  • Self-directed and meandering exploration - this is an important ethos of approaching programming from a creative coding perspective
  • Practice! Try, fail, repeat
    • Write a lot of code
    • It's better to start writing bad code than to let yourself get stuck
    • meme
  • Q: Which language/tool should I learn? A: Any!
  • Where to find answers?
    • Break problems down & iterate
      • Ask the questions in English (or your preferred language) - How do I make a circle? How do I make a circle move?
    • Places to search for code answers
    • Community learning - ask each other questions
      • Since we don't have much class time together, this will be an important part of the class. Ask questions along the way. Use Canvas or the ATLAS Slack to communicate online.
      • Slacks/Discords
  • Don't get overwhelmed - some concepts take a long time, and this is a (life)long journey
  • We're learning a new language, but we don't have to memorize everything like a spoken language. We can always look things up on the fly. It's more important to learn the capabilities of the tools than to memorize syntax.
  • Finally, let's talk about AI

How to do code

  • Get an IDE that's good for your language of choice
    • VS Code is a popular choice for web and general development
    • p5js has its own online editor
    • Other languages/tools like Processing sometimes come with their own IDE
    • Most popular languages have IDEs and tools that have been developed to work well with that language. For example:
      • Java is usually written in IntelliJ IDEA or Eclipse
      • C# is usually written in Visual Studio
      • Swift is usually written in Xcode
      • But VS Code has been extended to work with almost any language
  • Type your code into text files
    • Or connect nodes in a node editor
  • Compile or run your program

📋 What is "creative" code?

  • 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:
  • 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 your tools ready

p5js (or Processing)

  • For 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
  • For Processing, install the IDE
  • If you'd like to use other tools like Unity, TouchDesigner, THREE.js, 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
  • Slack
    • Use this to help each other out - my coworkers and I use Slack to chat about engineering problems
  • Screen capture

🛠️ Code basics overview

Basic coding concepts:

  • Variables
  • Functions
  • Conditionals (if/else)
  • for() loops
  • Arrays
  • Objects
  • Classes

for() loops were invented in 1972

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 👇

📝 Homework:

Get familiar (or refamiliarize) with basic programming concepts

The actual assignment

If this is easy for you, try some stretch goals:

  • 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"

Turn in your work via Canvas

  • 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.