Skip to content

Latest commit

 

History

History
201 lines (166 loc) · 9.77 KB

class-01.md

File metadata and controls

201 lines (166 loc) · 9.77 KB

Class 1

📋 Introductions

  • Review the course description. This isn't a frontend course!
  • Your instructor
    • Interests: music, graphics, interaction, games
    • Show some projects
  • Please sign up for Slack if you haven't yet
  • 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

Why code?

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

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
  • Practice! Try, fail, repeat
    • Write a lot of code
    • It's better to start writing bad code than to let yourself get stuck
    • meme
  • Which language/tool should I learn?
  • 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 Slack.
      • Slacks/Discords
  • Don't get overwhelmed - some concepts take a long time, and this is a 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
  • Documentation

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 the online editor, and other apps like Processing may come with their very own IDE
    • Other languages often have specific IDEs and tools that work with that 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
  • 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 you're largely 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 hand 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 do this
  • Screen capture

🛠️ Code basics overview

Basic creative coding concepts:

  • Variables
  • Functions
  • Conditionals (if/else)
  • for() loops
  • Arrays
  • Animation
  • Input
  • 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, 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
  • 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 use other people's code, but it's not okay to pretend it's your own. Attribution is an important skill to develop.