Homework John Henry 02

ICM Section 02 • Meeting Wednesday 12:10PM - 2:40PM EST ET in Room 411

Contents

• Week 1 • Sept 7 • Introduction and Drawing in p5.js
• Week 2 • Sept 14 • Animation with Variables
• Week 3 • Sept 21 • Interaction with Conditionals
• Week 4 • Sept 28 • Repetition with Loops
• Week 5 • Oct 5 • Organization with Functions
• Week 6 • Oct 12 • More Repetition with Classes
• Week 7 • Oct 19 • The DOM: HTML and CSS / Present Final Assignment

Contacting John Henry

• Office Hours

Homework Form

Submit all assignments using our homework form

All assignments are due the night before class

Week 1 • Sept 7 • Introduction and Drawing in p5.js

Week 1 Slides

In class:

• Welcome! and introductions
• Course overview
• What is p5?
• p5 web editor
• p5 functions
• Tips for learning to code
• Syllabus / schedule
• What can we do with creative coding?

Examples:

• Week 1 Syllabus Resources
• HTML, CSS, JavaScript / p5.js Website Demos | Code
• p5 getting started

Assignment due the night before our next class:

• DO
  • Create a p5 web editor account.
  • Have a place online to document your creative assignments. This could be a website/blog, Notion page, or even a Google document. If you’re not sure what to use, please reach out to me for help.

• WATCH (BEFORE EXERCISES) • Coding Train videos 1.1-1.6 ~1hr 20min
• (OPTIONAL) if you prefer to READ:
  • First steps - by Allison Parrish
  • Chapters 1-3 of Getting Started with p5.js cover the same material. Log into the NYU network to read it for free
• PRACTICE • Week 1 Worksheet
• CREATE • SELF-PORTRAIT
  • Think about what a self-portrait means to you. Is it a depiction of what you look like? A bridge between your private and public regard? Or a collection of your lived experiences?
  • Consult the p5 Reference. Add comments to your code to describe the different parts.
  • Submit your assignment on our homework form.
• WATCH (AFTER EXERCISES) • Coding Train Videos 2.1-2.5 about variables, random(), and map() ~1hr
• WATCH • Eyeo 2019 - Amon Millner ~40min

---

Week 2 • Sept 14 • Animation with Variables

Week 2 Slides

Week 2 Syllabus Resources

ICM s2 2022 - Homework Form (Responses)

In class:

• Share our homework
• Logging values to the Console
• Introduction to variables
• Animating shapes
• p5's system variables

Review Example:

• 1.2 draw_shapes_ui Coordinates and Color. Why Shapes sometimes green?

Video Examples:

• p5js Code! - 2.1 - mouseX,mouseY
• p5js Code! - 2.2 - make your own variable
• p5.js Code! - 2.4 random() - Random Square Design

Remix Examples:

• circleX modulo Expressions
• circleX follow Building an algorithm
• circleX buttons Variables for animation

Assignment due the night before our next class:

• PRACTICE • Week 2 Worksheet

• CREATE • Assignment #2 Create a sketch that includes (all of these):

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

  You can choose to build off of your week 1 design, but I might suggest starting over and working with one or two simple shapes in order to emphasize practicing with variables. See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.

  • Submit on our homework form.

• WATCH, READ, RUN CODE:

  • Coding Train Videos 3.1 - 3.4 ~1hr | Get Code
  • Getting Started with p5: Chapter 5 (Response). | Get Code