-
Notifications
You must be signed in to change notification settings - Fork 1
Homework Ellen 04
| Section 04 Info | |
|---|---|
| Meeting Time | Mon 12:20pm - 2:50pm |
| Location | Room 411 |
| Contact |
ellen.nickles@nyu.edu On weekdays I aim to respond within 24 hours |
| Student Hours | Fri 1:30pm – 3:30pm Sign up here |
| Support |
Resident office hours (schedule) The Coding Lab (schedule or drop-in help, starts 9/22) How to ask code-related questions (examples) |
| ICM Help Sessions | Tue 3:00pm - 4:00pm @ Room 426 |
| Additional Materials |
Submit creative assignments Assignment responses Our Miro board Course syllabus p5.js Reference / Web Editor The Coding Train's Intro to p5.js Allison Parrish’s Creative Coding Notes Patt Vira's Make Art with Code xin xin's Intro to p5.js Jack B. Du's My Coding Show Qtv's Creative Coding tutorials in Chinese (also on bilibili) HappyCoding.io |
- About Our Section
- Week 1 • Sept 8 • Introduction and Drawing in p5.js
- Week 2 • Sept 15 • Animation with Variables
- Week 3 • Sept 22 • Interaction with Conditionals
- Week 4 • Sept 29 • Repetition with Loops
- Week 5 • Oct 6 • Organization with Functions
- Week 6 • Oct 14 • More Repetition with Classes
- Week 7 • Oct 20 • Share Assignments / GenAI Tools
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 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.
- Show up on time;
- participate in class by sharing and discussing your work, asking Ellen questions, asking your peers questions, giving feedback, and helping others when you can;
- 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!
All assignments will be posted on this page, and all are required. Unless otherwise stated, assignments are due the night before class so that I have a chance to review your questions before we meet. All assignments are expected to be submitted by the stated deadline. If you anticipate any challenges meeting the deadline, please reach out to me so that we can consider your options together.
Submitted assignments will be marked as complete (full credit), partially complete (half credit), or incomplete (no credit) in accordance with the Assignment Policy.
Reading and Video Tutorials
Before class, read and/or watch the assigned tutorials about fundamental coding concepts and creative programming techniques to practice together when we meet in class.
Worksheets
There are worksheets* to practice the concepts introduced in this course. You are expected to add links to your p5 sketches directly in these documents.
Creative Assignments and Documentation**
Each week there is an open-ended exercise to apply the concepts that we practice. You are expected to document your process, include a link to your p5 sketch, and answer these questions to complete the assignment:
- What did you do?
- What worked?
- What didn’t work, and what steps did you take to try to solve the issue?
- Did any code-related questions come up for you?
- Be sure to cite your sources.
Submit the creative assignments using our homework 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.
**If you are struggling with the weekly assignments, put your energy into writing about what didn't work and how you tried to solve it. It is totally okay to vent your frustrations. Document your work to reference later and also to help you synthesize what you did and tried to do.
Adding on to the course AI Statement, our section will offer the use of emerging generative AI tools after introducing and practicing the basic programming control structures in Weeks 1-6. This approach, based on student feedback, is intended to empower you to use AI more effectively, should you choose to integrate it into your practice. Much in the same way that you might practice arithmetic before learning to operate a calculator, if you can describe the foundational coding concepts and assemble simple algorithms first (see our Course Objectives), then you will be better equipped to use generative AI more efficiently to develop your project ideas. In Week 7, we will discuss the benefits and limitations of these tools, along with various strategies and student examples of integration. Any use of AI tools is expected to be cited (see below) to share and learn best practices from one another.
In accordance with the Statement of Academic Integrity, you are expected to cite your sources and note how you used them. For code references, a link to the online source along with a brief description will suffice. If you use any generative AI tools, e.g. ChatGPT, Claude, Gemini, etc., please include the model name and version with a description of why and how you used the model.
- Welcome! and introductions
- Course overview
- What is p5.js (p5)?
- p5 web editor
- p5 functions
- On learning to code (and AI)
- Syllabus, schedule, assignment
- What can we do with creative coding?
- Week 1 Syllabus Resources
- Learning to Learn (to program) by Paul Curzon
- Getting started with color
- Digital Color Meter on Macs
- RGB mixer tool
- Drawing arcs and curves
- p5 Learn: Arcs and Curves
- How to Draw Arcs in p5.js
- Sam Heckle's Drawing curves in p5 visualization tool
- Allison Parrish's
quadraticVertex()andbezier()demos - Programming Design Systems curve animations (scroll down)
- HTML, CSS, JavaScript / p5.js Website Demos | Code
- p5 getting started sketch
- DO (if you haven't already)
- Complete a very quick pre-class survey (NYU login required) to tell me a little bit about yourself.
- 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
- 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 documentation on our homework form.
- Here is Ellen's example: self portrait drawing | self portrait p5 sketch
- WATCH (AFTER EXERCISES)
-
Coding Train Videos
2.1-2.5
about variables,
random(), andmap()~1hr - Optional: Variable by Patt Vira ~9min
-
Coding Train Videos
2.1-2.5
about variables,
- Share our homework
- Logging values to the Console
- Introduction to variables
-
setup()vsdraw() - Animating shapes
- Variable scope
- p5 system variables
- Week 2 Syllabus Resources
- console.log with variables
- animated shape
- variable scope
- style settings in
draw() - responsive rect
- Rotating and drawing custom shapes (and using the
translate()function)- Coding Train Videos 9.1-9.3 and 9.22
- Rotating shapes p5 example demo series
- Other portraits Garbage Selfie by Jenny Odell | Data Selfie by Hang Do Thi Duc and Regina Flores | Stranger Visions by Heather Dewey-Hagborg | Weird Faces by Matthias Dörfelt | parametric expression by Mike Pelletier | Emoji Script by Travess Smalley | Más Que la Cara by Zach Lieberman | Aspire Mirror by Joy Buolamwini
- WATCH (OPTIONAL) • Coding Train Videos 16.1-16.2 about keywords let, var, and const ~20 min
- PRACTICE • Week 2 Worksheet
- CREATE • OPPOSITES
- Choose a pair of words with opposite meanings, such as “order” and “chaos,” “ascend” and “descend,” “empty” and “full”, or your own! Create one sketch to represent the pair of your choice.
- Consider illustrating the opposite meanings through composition of elements, selection of colors, or any time-based change or movement.
- Think about what you can do to make your audience sense or think of the two words without having to spell them out.
- Submit on our homework form.
- WATCH
- Coding Train Videos 3.1-3.4 about conditional statements ~1hr
- Optional: Patt Vira’s tutorials on Conditionals (Boolean Expression) and Conditionals (If, Else If, Else) ~20min
- Share our homework
- Relational expressions and conditional statements
- Boolean variables
- Combining expressions
- Week 3 Syllabus Resources
- p5 Reference tutorial: Interactivity with the mouse and keyboard events (mousePressed vs mouseClicked, etc.)
- random number generator
- opposites: order vs chaos with reset
- checking multiple conditions, hover columns
- Boolean variables with if statements
- toggle switch
- PRACTICE • Week 3 Worksheet
- CREATE • CHOICES
- 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 choices that have 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||) - Submit on our homework form.
- WATCH
- Coding Train Videos 4.1-4.2 about loops ~25min
- Optional: Patt Vira’s tutorials on While Loop, For Loop, Nested Loop, 2D Grid with Nested Loop ~28min
- Share our homework
- More with conditional statements
- Introduction to loops
- Creative coding examples
- Week 4 Syllabus Resources
- Nested For Loop Visualization Designed and Coded by Roy Yang
- Organize your code into multiple files: JavaScript Files in the p5.js Web Editor (~6min video)
- Nature of Code Chapter 0: Randomness (we'll get to classes and objects in Week 6)
- bouncing ball
- anatomy of a for loop
- drawing columns with a for loop - counting by columns
- drawing columns with a for loop - counting by pixels
- Test Pattern by Ryoji Ikeda (video) | Generative Digital by Tyler Hobbs | Daily Art from Saskia Freeke | Shimmer by Dave Whyte | Quarantena generativa {2020} by Anna Carreras | 流れのパター ン / Patterns of Flow group exhibition on Feral File (2024) (look for the works made with p5!) | おかず / Okazz
- 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. Computation is all about patterns.
- Observe, both outside (your surroundings) and inside (your history of thoughts and feelings), make a sketch about a specific pattern you find.
- Get creative. Think about how you can tell the unique story of the pattern using code.
- Submit on our homework form.
- WATCH
- Coding Train Videos 5.1-5.3 about functions and Videos 7.1-7.2 about arrays ~55min
- Optional: Patt Vira’s tutorials on Function, Array, and Changing Size of Array ~28min
- A Brief Introduction to Debugging Parts 1-4 (p5 is not mentioned, but these tips are universal for all programming languages!) ~15min
- READ • p5 Tutorial: A Field Guide to Debugging
- Introduction to arrays
- Share our homework (1/2 class)
- Define functions to perform tasks
- Call functions with and without arguments
- Functions that calculate values for us
- Anonymous check-in survey
- random name generator (part 1)
- face without functions
- face with functions (part 1)
- face with functions (part 2)
- p5 functions that return values
- PRACTICE • Week 5 Worksheet
- CREATE • TIME
- This week’s computational theme is organization. In what ways do we conceive
of and organize time? Create a sketch to represent “time”. Think about what
quality of time you would like to portray. A few ideas to consider:
- The passing of time through change, motion, or accumulation of elements
- The relativity of time
- Time twisted
- Capturing time
- The stillness of time
- …what else?
- Inspiration from Jeff Feddersen's course, Time?
- Submit your documentation on our homework form.
- This week’s computational theme is organization. In what ways do we conceive
of and organize time? Create a sketch to represent “time”. Think about what
quality of time you would like to portray. A few ideas to consider:
- WATCH
- Coding Train Videos 6.2-6.3 and 7.3-7.7 about writing classes to create many objects, mouse interacting with those objects, and objects communicating with each other ~1hr 40min
- Patt Vira’s tutorials on Object-oriented Programming and Array of Objects ~20 min
- Share our homework (1/2 class)
- Introduction to classes to make objects
- Objects with arrays and loops
- Adding objects with mouse press
- random name generator (part 2)
- many balls - what's the same and what's different?
- make objects with a class
- make objects from a class with mouse press
- Arrels by Anna Carreras | uneasy dream by Manolo Gamboa Naon | Delicate Boundaries by Chris Sugrue
- Ellen's Limits of Perception (Ever-changing Columns)
- PRACTICE • Week 6 Worksheet
- CREATE • SIMULATION
- The idea this week is to explore the topic of simulation with computation.
Now that we can scale our programs with many more objects to behave
independently of one another, in what ways can we model the world around us?
To get started, consider how simulations might be used to:
- Practice a procedure
- Test a strategy
- Visualize a system (natural? biological? social?)
- Study a situation to predict or retell an event
- Submit your documentation on our homework form.
- The idea this week is to explore the topic of simulation with computation.
Now that we can scale our programs with many more objects to behave
independently of one another, in what ways can we model the world around us?
To get started, consider how simulations might be used to:
- PRESENT • Prepare a 3-minute presentation to share with the class next week.
- Add 2-3 slides to this shared deck.
- Introduce your sketch (name, brief description, and your goal / inspiration)
- Pick one feature or interaction to highlight in a short video:
- Which one is the most interesting to you?
- Explain the feature or deconstruct an interaction that produces the interesting effect or behavior.
- Record a short video of you demo-ing it.
- Make sure the video is shared for public viewing!
- Explain what you did in your code to produce what you demo-ed.
- There won’t be time to show ALL of the code.
- Pick the most interesting lines of code that are relevant to the feature or interaction.
- This is another opportunity to practice any new vocabulary you’ve acquired for talking about technical work.
- As much as possible, write out what you plan to say. HINT: write a script based on your documentation.
- Practice and time yourself to prepare.
- Share our homework
- GenAI tools for coding
- Week 7 Syllabus Resources
- Research
- How large language models work, a visual intro to transformers by 3Blue1Brown
- A Survey of Large Language Models (last revised 11 Mar 2025)
- Large Language Models: A Survey (last revised 23 Mar 2025)
- NYU Guides
- Generative AI and Large Language Models (LLM) Guide
- Machines and Society Guide (Large Language Models and Gen AI for Research and Creative Use)
- From the Office of Sustainability
- 3 Ways to Reduce Your Environmental Impact While Using AI
- AI LLM FAQ on the energy impact of AI
- Prompt engineering
- OpenAI’s Prompt Engineering Guide
- Google’s Prompt Engineering for Generative AI
- Anthropic’s Claude 4 prompt engineering best practices
- Hard Fork (NYTimes podcast): “a show about the future that’s already here. Each week, journalists Kevin Roose and Casey Newton explore and make sense of the latest in the rapidly changing world of tech.”
- PRACTICE • Review with the Week 7 Worksheet
- CREATE • ITERATION
- Think back to a previous open-ended, creative assignment. Is there something you left unfinished? A feature you wanted to include but ran out of time? Or maybe there's a glitch that’s been hard to solve? This week, revisit that assignment and continue to develop it with or without generative AI.
- OPTION 1: ITERATION WITH AI
- Consider how AI can support the creative process. You might:
- Generate new visual ideas or otherwise expand on the concept.
- Improve or refine the code, perhaps addressing unresolved issues.
- Find ways to enhance user interaction or explore alternative outcomes.
- Reflect on how AI helps you iterate (or not). Are the results what you expected, or do they surprise you? How does it shape your creative decisions?
- Use the tool(s) of your choice, and document the process. Share both the changes and the insights you gained from collaborating with AI.
- Consider how AI can support the creative process. You might:
- OPTION 2: ORGANIC ITERATION
- This option focuses on deepening your own creative process and technical
skills. You might:
- Develop your concept further through methods like sketching, storyboarding, or mind mapping.
- Manually debug, refactor, or optimize your code. Focus on understanding and solving a specific technical challenge you previously faced.
- Seek out and incorporate feedback from peers or conduct user testing to refine the user experience.
- Reflect on your iteration process. What challenges did you encounter and how did you overcome them? How did you push past creative or technical blocks? What specific skills did you have to develop or rely on?
- Document your process. Share the specific changes you made, the methods you used, and the insights you gained from this work.
- This option focuses on deepening your own creative process and technical
skills. You might:
- Submit on our homework form.
- READ / INTERACT
- Allison Parrish's Media: Images
- Rune Madsen's Computational Color (don't worry about the Rune.js code examples), accompanying code examples written in p5.js
- WATCH
- Coding Train Video on Uploading Media Files in the p5.js web editor ~7min
- Video 7.8 on adding images to objects ~17min
- Video 11.3 on the pixel array ~40min
Starting Week 8 (Oct 27) we'll use the ICM-2025-Media Homework Ellen Wiki