Homework Mimi 07 - ITPNYU/ICM-2026-Code GitHub Wiki
Week 7
RESOURCES FROM CLASS
TEST YOURSELF
ASK
- Post at least 1 question here. Need help on asking a question?
Questions (example questions)
READ / WATCH
- Videos: Images/Video 11.1-11.8 - Focus on videos 11.1 and 11.3 (~25 minutes)
- Chapter 7 in Getting Started with P5.js through Ex 7-9 | Code
- More than you ever wanted to know about loading images | p5Ref: loadImage() + async await
- p5VideoKit for Video Mixing Effects
- Full Resources
Week 6
-
RESOURCES FROM CLASS
- addNumbers()
- Re-usable, portable, modular bounce()
- Recursive functions:
-
TEST YOURSELF
- Worksheet: Qs 1-3 required. But you can do as many as you want.
-
DO: BREAK YOUR CODE TO DISCOVER SOMETHING
- Prepare a 5-minute live code demo of your sketch.
- Handwritten notes are ok, but pls don't read from a script.
- Take something you've already done.
- Make changes to it until you feel like you've discovered something that also deepens your understanding of the code.
- Make at least 3 code changes to walk us through how you made your discovery.
- Explain what the code does before you change it.
- Think about why the change has the effect that it does.
- Focus on just a few lines of code. (It could be just 1!)
- Use your (vocabulary) words!!!
- OPTIONS FOR WHAT TO DO:
- Take this opportunity to clean-up your code. You don’t even need to add any functionality!
- Add descriptive comments.
- Name your variables and functions to reflect what they represent and do in your sketch.
- Replace in-line calculations with named variables: e.g. width/10 --> w
- Organize and modularize your code with functions.
- Remove unnecessary repetition with variables and reusable functions.
- Mash up a couple of your past assignments into a new sketch.
- Try incorporating arrays and classes with a sketch that has lots of something (balls, sheep, eyes).
- IF you are already working with classes/objects and arrays:
- Re-organize / break-down your classes into the "smallest functional units" possible.
- Try different ways to have your objects "communicate" with each other in some way.
- Take this opportunity to clean-up your code. You don’t even need to add any functionality!
- Prepare a 5-minute live code demo of your sketch.
-
READ / WATCH (Optional - If you would like to learn about how the web browser works.)
- Videos 8.1-8.10(~2 hours)
- Focus on the basics, videos 8.1, 8.2, 8.4 (~30 minute)
- More resources from syllabus
- p5.dom section of Chapter 13.4-13.6 in Getting Started with P5.js
- Videos 8.1-8.10(~2 hours)
-
Examples
-
ASK
- Post at least 1 question here. Need help on asking a question?
-
Homework Links
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other
- Isabelle homeworkblog
- Zoe Zhou -- Week6 Blog, Ripple
- Bruce -- Blog; Initial Code; After 3 changes
- You Wenjing -- Change
- Qinjie Chen -- New Version
- Jiani Wu -- week7
- Samuel Goldman --Sam Goldman
- Leyto -- midterm; midterm2
- Sumru sketch-itself pupil-porblem bounce-text problem
- kim - midterm
Week 5
-
RESOURCES FROM CLASS:
-
TEST YOURSELF
- Complete the Worksheet
-
DO: 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?
- Take time to name your functions well. In class we will comment out function calls one at a time and see if we can predict what will stop working.
- Aim to keep
setup()anddraw()as clean as possible, and do everything (calculations, drawing, etc.) in functions that you define. - Challenge goal: Write a re-usable function, a function you can call in multiple ways to do the same thing slightly differently each time.
-
READ / WATCH
- Video 2.3 on JavaScript Object Literals (~10m)
- Videos 6.1-6.3, 7.1-7.7(~2h)
- More resources and code examples
- Getting Started with p5.js chapters 10-11
-
Examples
-
ASK
- Post at least 1 question here. Need help on asking a question?
- Qinjie&Isabelle For Q4 in worksheet, it seems not reusable in my assignment.
Homework Links
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other
Jiani-- week5, self-Portrait-function
Isabelle--[week5]
You Wenjing -- Week5
Bruce -- Blog Minion Function
Qinjie -- W5 blog,strokes ep function
Sam -- p5.js Spongebob, Week 5: Blog Post
Week 4
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 4
-
DO: Our ability to see patterns is what makes us human. However we also see patterns where none exist because our brains are biased towards detecting certain kinds of patterns over others (e.g. faces). Create a pattern by making something with a lot of repetition. Is the resulting pattern easy to see or hard to see? What would it mean to create the illusion of pattern? Can you predict what the pattern will be when you run your code or does it surprise you? You could take something you've already done where there was a lot of repetition in the code (e.g. your self-portrait) and see if you can re-write it using a loop so that instead of 28 lines of code that call rect(), you have 1 line of code calls rect() inside of a loop that goes around 28 times. How do you need to rework the way you position that rect() in order to make it work in a loop? Try creating an algorithmic design with simple parameters. (One example is 10PRINT, example code).
-
READ / WATCH
- Videos 5.1-5.3(~40min) in the learning p5.js series.
- Getting Started with p5.js chapters 9-10
-
RUN CODE
-
ASK * Post at least 1 question here. Need help on asking a question? * Name (optional): Question - Qinjie:For the worksheet Q3(Create a grid of 100 cells that turn red when you hover over them),the first row of my grid never works, and I have no idea why.
Homework Links
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments
- Isabelle [p5], (url)]
- You Wenjing, portrait
- Samuel Goldman -- Week 4: Blog Post, Sketch A, Sketch B
- Bruce Blog Pattern
- Zoe Zhou -- Week4 BLOG, Portrait
- Jiani Wu -- Week4 BLOG, Portrait
- Leyto -- week4 blog,pattern
- Qinjie -- week4 blog,portrait
Week 3
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 3
-
DO: 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.
-
READ / WATCH
- Videos 4.1-4.2(~25min) in the learning p5.js series. | Code
- Chapter 4.5-4.13 of Getting Started with p5.js book | Ebook (free with NYU Library login) | Code
-
ASK
- Post at least 1 question below. Examples of good questions...
- Sam Goldman: In our sketch this week, we used a timing-based conditional to trigger wind every few seconds. How can we make an action like that happen at irregular times while still having control over frequency?
Homework Links: 1 Sketch Per Pair
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Code) -- any other comments
Jiani Wu & Sumru Deniz Adventure to ICM homework Jiani Week3 Blog Sumru's Blog
Isabelle and Qinjie Blog, NS-XYAB
Wenjing You & Yi ZhouBlog, The Biggest Ear of Wheat
- Sam and Leyto -- Week 3: Blog Post, week3Blog, p5.js Collaborative Assignment
- Kim and Bruce -- Blog, p5.js Collaborative Assignment Sorry this is late we bit off way more than we could chew!!! Bruce Blog Bruce Version
Week 2
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: (Only use what we've learned so far: calling p5 functions and variables.) Worksheet ONLY POST WORK YOU WANT ME TO LOOK AT
-
DO:
- Consider the following cliches / pearls of wisdom: No man is an island. There is no such thing as a new idea. Everything is related to everything else. It’s all relative. The world is defined through relationships and those relationships shape our perspectives. Use variables to build in some relationships between two or more elements in your sketch and think about how the perception of what’s happening is different depending on which element's perspective you take on. Think about:
- What’s related to what?
- How are they related?
- Is it a positive or negative relationship? Example sketch.
- Is it an amplifying or diminishing relationship? Example sketch.
- You should definitely take a mathematical approach to answering these questions but you can also take a figurative, metaphorical approach.
- The elements common to all of your sketches are: position, dimensions, stroke thickness, color values. Can you relate one or more of these elements to:
- itself over time (so it changes over time)
- a different element in your sketch
- frameCount (which frame of animation is now)
- mouseX or mouseY or the combined (mouseX, mouseY) mouse position
- or something else!
- You can revisit your self-portrait to build relationships between features OR create something new.
- Consider the following cliches / pearls of wisdom: No man is an island. There is no such thing as a new idea. Everything is related to everything else. It’s all relative. The world is defined through relationships and those relationships shape our perspectives. Use variables to build in some relationships between two or more elements in your sketch and think about how the perception of what’s happening is different depending on which element's perspective you take on. Think about:
-
WATCH, READ, RUN CODE:
- Watch Conditionals 3.1 - 3.4 ~1hr
- Getting Started with p5: Chapter 5 (Response). | Chapter 5 Code
- Go further with Transformations (Optional)
- Transformations Video Tutorials
- Getting Started with p5: Chapters 6 (Transformations) and 8.10-8.15 (More complex motion)
-
ASK
- Post at least 1 question below. Examples of good questions...
- Isabelle:When we use ‘fill,’ we always specify RGB values, which allows us to fill with a specific color. Is there a way to fill with a gradient in p5js?
- Samuel Goldman: I have been using sin as a function for a consistent pattern of motion. Is it possible to adjust it to make it more unpredictable?
- Qinjie Chen: For the video'3.2 the bouncing ball', why does 'speed= -3' still work even if x < width ?
- Kimberly Wee: Can I group a few primitives together to make complex shapes and move them together? (Such as in Challenge 6 when moving all lines as a rect held in place)
Homework Links
- Boaty McBoatface -- [blog post](url to blog), [zoog]
- Isabelle -- blog post, p5[zoog]
- Sumru Deniz blog, self-portrait trial1,self portrait trial2
- Leyto blog week2,self-portrait move version
- Zoe Zhou blog, portrait
- Bruce Week 2 Blog, Portrait
- Samuel Goldman -- p5.js Design, Week 2: Blog Post
- Jiani Wu -- moving self-portrait , Week 2: Blog Post
- Qinjie Chen -- blog week2,portrait move version
- Wenjing You -- Blog week2, Portrait
- Kimberly Wee -- Blog post!! Help!, Portrait
Week 1
-
RESOURCES FROM CLASS:
-
SET UP:
- Sign up for a Github Account. You need it to edit this wiki page.
- Log into a p5.js web editor account with your github account.
-
DO:
- Complete this worksheet. Our weekly worksheet become the basis for the next class. You must be logged in with your NYU account to access the worksheet. ONLY POST WORK YOU WANT ME TO LOOK AT
- Create a "self" portrait using 2D primitive shapes. Play with symmetry in your portrait. Shapes include –
arc(),curve(),ellipse(),line(),point(),quad(),rect(),triangle()– and basic color functions –background(),colorMode(),fill(),noFill(),noStroke(),stroke(). Remember to usecreateCanvas()to specify the dimensions of your window and wrap all of your code inside asetup()function. Here's an example: Zoog - Write no more than 5 sentences about how computation applies to your interests, due 24 hours before the next class. Pick one of the following to address (a,b, or c):
- Something you studied, a job, a hobby, or a cause you care about.
- Describe a project you want to make. Why do you want to make it?
- Describe a project your love. What do you appreciate about it that others don't always immediately get? (You can review and contribute to the ICM Inspiration Wiki page).
- In the same post (or a new one), point to one thing in your code that you'd like us to talk about in class. Cite the line number(s). Be prepared to talk about why it's interesting to you.
-
READ AND WATCH:
- Follow the TO THE LESSON Link:
- Watch before HW: Videos 1.1 - 1.6(~1h 15m)
- Watch after HW: Videos 2.1 - 2.3(~30m)
- If you prefer books, Chapters 1-3 of Getting Started with p5.js cover the same material. Log into the NYU network to read it for free.
- Follow the TO THE LESSON Link:
-
ASK
- Post at least 1 question below. Examples of good questions...
- Name (optional) -- Question: Why is it that this is like this and that is like that?
- Isabelle Wang--I can't understand how to use Bézier curves, even though I've read the reference.
- Qinjie Chen-- curve() always can't run. Showing'ReferenceError: curve is not defined'.
- Samuel Goldman - How can you create a large number copies with slight variation? For example, blades of grass, hair, or clouds.
- Kimberly Wee - Is there a more efficient way to assign attributes to primitives (fill, stroke width etc) in batches? feels like a lot of repetition
Please make sure your posts are publicly accessible by testing them in an Incognito (Chrome) or Private Browser (Safari).
- Homework Links
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other
- Qinjie Chen -- Blog Post Week 1, Portrait
- Isabelle Wang -- 0903 Week 01 Blog, Felyne cat portrait
- Samuel Goldman -- p5.js Portrait, Week 1: Blog Post
- Ziyang Zeng — Week1 Blog, Ghost
- Tianxu Li -- Week 1 Blog, Minion Bruce
- Yi Zhou -- Week 1 Blog, Portrait
- You WENJING -- Week 1 Blog,Portrait
- Sumru Deniz -- Week 1 Blog Self-Portrait
- Kimberly Wee -- Reverse Designing, computing data,Self Portrait
- Shuyu Lin -- Intro to Comp Media: Week 1 (https://app.notion.com/p/Intro-to-Comp-Media-Week-1-3d6c2fddfb2b804cbef0dd1327764622?source=copy_link), Week 1 Self Portrait (https://editor.p5js.org/LinSHU0901/full/o4hqfaHM_)
- Jiani Wu -- Week1 Blog, Week 1 Self Portrait