Section 01 Info	ICM Section 01 with JHT
Meeting Time	Monday 9:30am - 12:00pm
Location	Room 412
Contact	[email protected]
My Office Hours	Tuesday & Wednesday Sign up here
Extra Support	ICM Help Sessions Friday 1:00pm - 3:00pm @ Rm 450 Resident office hours (schedule) The Coding Lab (schedule or drop-in help)How to ask code-related questions (examples)
Our Section	Submit assignments hereSee everyone's responses Course syllabus
General Resources	p5.js Reference / Web EditorThe Coding Train's Intro to p5.jsAllison Parrish’s Creative Coding NotesPatt Vira's Make Art with Codexin xin's Intro to p5.jsJack B. Du's My Coding ShowQtv's Creative Coding tutorials in Chinese (also on bilibili)HappyCoding.io

Contents

• About Our Section
• Week 1 • Sept 14 • Introduction and Drawing in p5.js
• Week 2 • Sept 21 • Animation with Variables
• Week 3 • Sept 28 • Interaction with Conditionals
• Week 4 • Oct 5 • Repetition with Loops
• Week 5 • Oct 14 • Organization with Functions
• Week 6 • Oct 19 • More Repetition with Classes
• Week 7 • Oct 26 • The DOM: HTML and CSS
• Week 8 - 14 • Media

About Our Section

• My Sketches from class

• from Ellen

Please read the ICM Code Syllabus for the course description, learning objectives, and all policies.

In addition, our course section embraces an active-learning approach with the belief that programming is best understood by doing. In keeping with this approach, class time will be structured as a workshop and seminar instead of a lecture, relying heavily on group discussion and participation. Weekly video tutorials before our class sessions will introduce fundamental coding concepts. During class, supplemental code examples will be presented and discussed before hands-on work together. Time will also be allotted to share our weekly assignments. Examples and assignments will iteratively build upon lessons learned in preceding classes. I encourage you to reach out to me outside of class to ask questions, share your ideas and feedback, and discuss topics in detail.

How to Succeed in Our Course

• Show up on time
• participate in class by sharing and discussing your work, and asking questions.
• and submit homework on time and document your process (see below)

Here’s the evaluation breakdown on our syllabus, but if you are engaged in ways described here, you’ll be on your way!

Weekly Assignment Guidelines

All assignments will be posted on this page, and all are required. Unless otherwise stated, assignments are due the night before class.

• Submit the creative exercises using our assignment form*.
• A big part of learning at ITP is learning from each other. Here is the spreadsheet with everyone's responses*.

*Log in to your NYU account to access the document.

AI Use

• Dont' AI use for your work in this class for first 7 weeks, we are following AI Use as recommended by Ellen

Citing Sources

• from Ellen

The field of creative technology thrives on community and the open sharing of code. You are encouraged to learn from the work of others and leverage existing tutorials, examples, libraries, and documentation like the p5.js language reference as you build. The purpose of our exercises, however, is to demonstrate your own problem-solving, creative thinking, and technical understanding. Whenever something outside your own work helps you, cite it: provide a link along with a quick note on how it helped, so we can learn from each other’s sources. The same goes for AI tools.

--

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

• Welcome! and introductions
• Course overview + AI policy
• What is p5.js (p5)?
• p5 web editor
• p5 functions
• Syllabus + schedule
• Assignment

Resources

• Week 1 Syllabus Resources
• p5 Reference
• Learning to Learn (to program) by Paul Curzon
• Getting started with color
  • Digital Color Meter on Macs
• Drawing arcs and curves
  • How to Draw Arcs in p5.js
  • Allison Parrish's quadraticVertex() and bezier() demos
  • Programming Design Systems curve animations (scroll down)
• Nun's CLASS NOTES

Examples

• HTML, CSS, JavaScript / p5.js Website Demos | Code
• p5 getting started sketch

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 intro
  • Coding Train videos 1.2 web-editor
  • Coding Train videos 1.3 shapes-drawing
  • Coding Train videos 1.4 color
  • Coding Train videos 1.5 errors
  • Coding Train videos 1.6 comments
    • time: ~1hr 20min
• (OPTIONAL) if you prefer to READ:
  • Learning to Learn (to program) by Paul Curzon
  • 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
  • Draw a simple “self-portrait” with a pen/pencil on paper.
  • Then, try your best to recreate it in code using p5.
  • 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.
  • Reflect a little on the process: How did it feel to translate an idea into code? What’s the difference between sketching something with pen and paper, and drawing with code?
  • Submit your assignment on our homework form.
• WATCH (and code along!) (AFTER EXERCISES):
  • Coding Train Videos 2.1 mouseX-mouseY
  • Coding Train Videos 2.2 define-variables
  • Coding Train Videos 2.3 incrementation
  • Coding Train Videos 2.4 random
  • Coding Train Videos 2.5 map
    • time: ~1hr | Watch with active attention. Take notes. Exclusive focus - no multitasking.
  • (Optional) Coding Train Videos 2.6 createGraphics
• (Optional) WATCH • Eyeo 2019 - Amon Millner
  • UNRULY APPROACHES TO EMPOWERMENT, PLAY, AND PROGRAMMING
  • genesis of Scratch programming environment and mention of my Lingo programming language.
  • time: ~40min

--

Week 2 • Sept 21 • Animation with Variables

Week 2 Syllabus Resources

In class:

• Homework review and Questions
• Logging values to the Console
• Introduction to variables
• Animating shapes
• p5's system variables

Sketches From Coding Train Videos:

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

Review

• Execution Flow
• Order of Operations
• What is an Algorithm

Variables and Expressions

• circleX remainder Expressions
• circleX buttons Buttons to change variables
• circleX follow An algorithm to follow the mouse
• 2.2.3 circleX width ui
• reporting variable values, cooridinates and colors
• TRY: adding specific colors using Color Meter.app
• remix to demonstrate
  • global variables
  • local variables
  • expressions
  • defining your own function
  • object literals
  • parameter variables

Functions + object literals

Grouping variables into object literals and passing to functions as parameter variables.

• two circles object literal
• many circles object literal

Animation using computation

• Allison sin animation examples

Assignment due the 24-hours 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 your assignment on our homework form.

• WATCH, READ, RUN CODE:

  • Coding Train Videos 3.1 conditionals
  • Coding Train Videos 3.2 bouncing
  • Coding Train Videos 3.3 else-if-and-or
  • Coding Train Videos 3.4 boolean
  • total time: ~1hour | Watch with active attention. Take notes. Exclusive focus - no multitasking.

  Get Code

  • Get Code
  • 3.4_1_p5.js_Boolean_variables
  • Getting Started with p5: Chapter 5 (Response). | Get Code
  • Interaction: Conditionals Remix

--

Week 3 • Sept 28 • Interaction with Conditionals

Resources

• Week 3 Syllabus Resources
• Expressions, variables and loops
• p5js summary
  • Make your own!
• Modulo Operator
  • example: a % b
  • Guest Tutorial #6: The Modulo Operator with Golan Levin
• Object Literals
  • example: let a = { b: 1, c: "two" }
  • Video Tutorial Objects Literals | ~9mins
  • sketch
  • Object Literal documentation
• Remix Examples:
  • Interaction: Conditionals Remix
  • DOM Slider UI - 3.5 circleX slider
• Boolean logic truth tables
  • AND &&
  • OR ||
  • NOT !
  • Boolean Algebra Truth Tables

Remix class activity

• Coding Train Videos 3.2 bouncing
  • the bouncing ball
• Coding Train Videos 3.4 boolean
  • 3.4_1_p5.js_Boolean_variables

Assignment due the 24-hours before our next class:

• PRACTICE • Week 3 Worksheet
• CREATE • Assignment #3
  • Two roads diverged in a yellow wood, And sorry I could not travel both... Life is full of difficult choices, use conditional statements to control the flow of your programs. Create a sketch that asks people to make difficult choices that have surprising consequences.
  • Which choices are easier, harder? Which choices are false choices?
  • What internal or external factors influence the choice? How do others’ choices affect your choices?
  • What choices surprise you with unexpected outcomes?
  • Can you combine choices to create hard-to-predict results? (Hint: Use && and ||)
  • Work in Pairs Can you divide an idea into two parts and combine those parts? (e.g. One of you codes the input behaviors (if statement) and the other one codes the output behaviors (what to do if it’s true.) Can you swap sketches and riff off of your partner's work? Provide 1 sketch link per pair, however clearly describe who did what in the code.
  • Be sure to cite the source of any material / code you use.
  • Submit your assignment on our homework form.
• WATCH, READ, RUN CODE:
  • Coding Train Videos 4.1 - while for
  • Coding Train Videos 4.1 - loop nested
    • ~23min | Get Code
  • Getting Started with p5: Chapter 4.5-4.13 (Variables). | Get Code
  • Repetition: Loops Remix

--

Week 4 • Oct 5 • Repetition with Loops

In class:

• Review worksheet
• Share our homework
• Review conditional statements
• Introduction to loops
• Preview of functions

Examples :

• Future Sketches - Exploring the essence of code as a creative medium
• aperiodic monotile hatviz h7h8 - sketch
  • aperiodic-monotile-animation video
  • An aperiodic monotile - article
  • 03-jht-hatviz - sketch
• truchet tiles pause
• maze spin in p5VideoKit
• Recommended by Ellen
  • Test Pattern by Ryoji Ikeda (video)
  • Generative Digital by Tyler Hobbs
  • Daily Art from Saskia Freeke

What could the code look like?

Patterns with Loops

• Resources :
  • Week 4 Syllabus Resources
  • Nested For Loop Visualization Designed and Coded by Roy Yang
  • p5 Tutorial: A Field Guide to Debugging
  • Repetition: Loops Remix

Assignment due the night before our next class:

• PRACTICE • Week 4 Worksheet
• CREATE • PATTERNS
  • We humans have a tendency to look for patterns everywhere. We see patterns in nature and on the urban streets of New York. We rely on patterns we’ve detected in life to make predictions and acquire knowledge.
  • Observe, both outside (your surroundings) and inside (your history of thoughts and feelings), make a sketch about a specific pattern you find.
  • Think about how you can tell the unique story of the pattern using code.
  • Be sure to cite the source of any material / code you use.
  • Submit your assignment on our homework form.
• WATCH
  • Coding Train Videos 5.1 - Function Basics
  • Coding Train Videos 5.2 - Function Parameters and Arguments
  • Coding Train Videos 5.3 - Functions & Return
  • Coding Train Videos 7.1 - Arrays
  • Coding Train Videos 7.2 - Arrays and Loops
    • ~55 min | Watch with active attention. Take notes. Exclusive focus - no multitasking.

--

Week 5 • Oct 14 • Organization with Functions

Examples:

• Week 5 Syllabus Resources
• Generative Design, Creative Coding on the Web
• Physarum Letters -- jht remix
  • from Physarum Letters by jasontothenextone on openprocessing.org

In class:

• For-loop review
• Introduction to arrays
• Defining and Using Functions
• functions remix

Assignment due the night before our next class:

• PRACTICE • Week 5 Worksheet - include any questions in your sketch and a note in the document
• CREATE • Functions
  • Part 1: Functions are the basic unit of labor in your code. Take a sketch you’ve already done and re-organize the code into functional units of labor that you define. You can also conceive of an entirely new world of labor. What kinds of labor does it take to make your sketch run? Add comments and use well named functions and variables to help explain your code.
  • Part 2: Make your sketch canvas size independent. We should be able to adjust the canvas size with reasonable values.
  • Part 3: Pair up with someone to review your code. The reviewer should try to describe how your code works in dialog with you. Comment your code with reviewers questions and descriptions.
  • Be sure to cite the source of any material / code you use.
  • Submit your assignment on our homework form.
• WATCH •
  • Coding Train Videos 6.2 classes
  • Coding Train Videos 6.3 constructor
  • Coding Train Videos 7.3 arrays-objects
  • Coding Train Videos 7.4 mouse-interaction
  • Coding Train Videos 7.5 removing-elements
  • Coding Train Videos 7.6 object-communication-1
  • Coding Train Videos 7.7 object-communication-2
    • about writing classes to create many objects, mouse interacting with those objects, and objects communicating with each other ~1hr 40min
• Objects and Arrays - Remix