-
Notifications
You must be signed in to change notification settings - Fork 1
Homework Dan ‐ Wednesday
Matthew Lau edited this page Dec 22, 2023
·
99 revisions
Shiffman Section Info | |
---|---|
Meeting Time | Wed 12:30pm - 3:00pm EST |
Location | 410 |
Contact | daniel.shiffman@nyu.edu |
Office Hours | (check email for calendar link) |
Additional Help |
Resident office hours (schedule) The Coding Lab (schedule or drop-in help) How to ask code-related questions: examples |
- Review your understanding of objects and arrays with Worksheet 6. Take a look at Worksheet 7 as well which we will discuss in class.
- Videos: Images/Video 11.1-11.8 Focus on videos 11.1 and 11.3
- Chapter 7 in Getting Started with P5.js through Ex 7-9 | Code
- p5VideoKit for Video Mixing Effects
- All materials for next week's ICM "media"
- Function returning a random color
- Demonstrating floating point errors
- translate and rotate
- confetti example
- Gibber: Live Coding
- Drawing Object Trails video, Object Trails Code
- JS "Big" Numbers Library
- Particle Systems from Nature of Code
- Worksheet 6 - Take your time with this one, maybe save it for after next week (no assignment between weeks 7-8)
- Prepare a short presentation of one of your sketches.
- You can focus on what's happening in your sketch computationally. Clarify the vocabulary. Plan in advance what you're going to say and prepare any diagrams that will help you explain what's going on. See Mimi's demo video (It is much longer than the time you will have!)
- Take your time to demo the sketch.
- Discuss something you learned in making your sketch. Feel free to talk about what programming concept(s) you are using (e.g. objects and arrays, nested for loops, toggle logic, portable functions)
- What sketch should you prepare?
- Take this opportunity to clean-up your code. You are welcome to pick a previous assignment. You don’t even need to add any functionality!
- Add descriptive comments.
- Carefully name your variables and functions.
- Remove unnecessary repetition.
- Another idea is to mash up a couple of your past assignments into a new sketch.
- You are not required to work with objects and arrays, but you could consider re-organizing a previous sketch into objects or creating a new one based on the "particle system" concepts explored in class. One idea is to augment this Confetti Party!
- How might you re-organize your sketch and break down the elements into classes. Can they be the "smallest functional units" possible?
- Are the objects interactive? Do they "communicate" with each other?
- Take this opportunity to clean-up your code. You are welcome to pick a previous assignment. You don’t even need to add any functionality!
- Object-Oriented Programming Videos (~30min)
- Arrays Videos (~2 hours)—this is too much for now! Don't feel you have to go through all of these now, save some of this for after next week.
- Chapters 10-11 of Getting Started with p5.js book | Code
- Add questions here!
- name -- [blog title](url to blog), [sketch title](url to sketch) -- any other comments
- LovelyA72 -- Class and Object
- baiyuan -- Sketch
- Long -- Sketch
- AstroBoi -- Sketch, Blog
- Fatima -- Sketch
- Henrique -- Sketch
- Matthew -- Blog
- Damon -- Sketch
- Bouncing "row" of circles
- Color data
- rows and columns, nested loop
- checkerboard
- randomSeed, random walk, save()
- recursion
- Buffon's Needle Wikipedia, video and code
- Conway's Game of Life
- Math.random()
- Date.now()
- Random Walk, video and code example
- Fractals chapter from Nature of Code, Cellular Automata Chapter from Nature of Code
- 3D rendering without 3D renderer, Matrix Multiplication video
- Week 5 Worksheet
- 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?
- Aim to keep
setup()
anddraw()
as clean as possible, and do everything (calculations, drawing, etc.) in functions that you define. - Take care to name your functions precisely and accurately. Whenever possible, use verbs to name your functions. A good test of whether your functions are well-named is: Can someone else comment in/out individual function calls and predict what behaviors will start / stop working in your sketch?
- Challenge: Write a re-usable function, a function you can call in multiple ways to do the same thing slightly differently each time. Here is an example with three functions, two re-usable.
- Challenge: Incorporate recursion into your function. You can read more about recursion in the Nature of Code, though note this chapter also uses concepts we haven't covered yet. And here is a recursion code example, and recursion video tutorial.
- Aim to keep
- (before assignment)Functions Videos(~40min)
- (after assignment)Object-Oriented Programming Videos(~30min)
- Chapters 9-10 of Getting Started with p5.js book | Code
- Add questions here!
- name -- [blog title](url to blog), [sketch title](url to sketch) -- any other comments
- LovelyA72 -- Function and Vector3
- Matthew -- Blog
- Damon -- Blog
- baiyuan -- Blog
- AstroBoi -- Sketch, Blog
- p5.js DOM slider
- Worksheet 1: Rollover Columns
- Worksheet 2: Toggle Column
- Worksheet 2: Column Center
- "State" machine (incomplete code)
- frameCount and modulo (%)
- for loop row of squares
- for loop rows
- checkerboard
- 10PRINT variation
- Light Forest by Maria Paula Saba
- dat GUI
- Complex Systems (Flocking) from Nature of Code
- Beyond the Canvas, p5.js
- Worksheet 4
- 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. (Feel free to continue exploring 10PRINT, but now using a
for
orwhile
loop!
- (before assignment) Loops videos(~25min)
- (after assignment)Functions Videos(~40min)
- Chapters 9-10 of Getting Started with p5.js book | Code
- Add questions here!
- name -- [blog title](url to blog), [sketch title](url to sketch) -- any other comments
- LovelyA72 -- For Loop
- baiyuan -- sketch, blog
- AstroBoi --sketch0 , sketch1, sketch2, sketch3
- Damon -- Blog
- Matthew -- Blog
- Fatima -- Sketch
- distance and circular checking
- circular rollover
- Every 30 frames
- Bouncing ball starter, with constrain
- Toggle open and close, boolean variable
- That Creative Code Page
- Random Walker
- Calculating Pi with Darts from Physics Girl, Pi Approximation Coding Challenge
- The Modulo Operator
- Shunsuke Takawo, Saskia Freeke, Fidenze
- Pythagorean Theorem and dist()
- Sandspiel and Cellular Automata
- cursor()
- Worksheet 3 for self-study.
-
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. In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own scenario.
- Try making a rollover, button, or slider from scratch. Compare your code to these interface element examples. Later we'll look at how this compare to built-in "DOM" elements in the browser.
- Create an algorithmic design with simple parameters. (One example is 10PRINT, see: 10PRINT code example and this accompanying video.
- Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
- (before assignment) Conditionals videos ~1hr
- (after assignment) Loops videos(~25min)
- Chapter 4.5-4.13 of Getting Started with p5.js book | Code
- Add questions here!
- Long - I am wondering how these 3D infinite loops are made. Example 1 , Example 2, Example 3
- name -- [blog title](url to blog), [sketch title](url to sketch) -- any other comments
- LovelyA72 -- Conditions
- baiyuanbyx -- Sketch
- AstroBoi -- Sketch, Blog
- Long Sketch(with error)
- Matthew -- Sketch, Blog
- Fatima -- Sketch
- The Beauty of Bezier Curves by Freya Holmer
- The Continuity of Splines by Freya Holmer
- Coding Train p5.js Bezier curves video
- 12 o'clocks by John Maeda, p5.js ports of 12 o'clocks
- Clock Coding Challenge Video
- Processing Foundation Medium
- Nature of Code Chapter 3 (about radians and angles)
- Week 2 worksheet: will go over solutions next week in class
- 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 (link the eyeballs together!) or create something new.
- Another prompt this week is your own clock design. Here's a video building a clock in p5.js.
- (before assignment) Variables videos (~30m)
- (after assignment) Conditionals videos ~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)
- Add questions here! Examples of good questions...
- I really like this series project called Meridian created by Matt DesLauriers, I am wondering how these kinds of images are generated. What is the basic logic behind it?
- Long -- Blog, Self Portrait, Bounce Ball 2, Chase Ball, Clock!
- Astro Boi -- sketch
- LovelyA72 -- blog and sketch
- Matthew -- blog and sketches
- baiyuanbyx -- sketch, blog
- Damon -- Blog, Field Condition
- Arya -- sketch - https://editor.p5js.org/aryabansal/full/8Iuy_T_b1
- Fatima -- Blog, Sketch
- Henrique -- Blog, Sketch
-
In class links and resources:
- p5 demonstrating console.log and setup
- Macromedia Director and John Henry Thompson
- ml5.js
- Logo, Design by Numbers, 10PRINT
- Processing, 2004 Syllabus
- Processing Foundation
- Lauren McCarthy, Creative Producer at UCLA Social Software
- p5.js showcase, Coding Train Showcase
- Storm King, MASS Moca, Sol Lewitt Wall Drawings
-
Remember!
- Sign up for a Github Account. You need it to edit this wiki page.
- Create a a p5.js web editor account.
- Email me if you prefer a different address than your nyu email for class announcements
-
Code!
- Complete this worksheet. This will be the basis for next class's discussion. You must be logged in with your NYU account to access the worksheet.
- 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 a blog post about how you anticipate computation applying to your interests. This could be a subject you've studied, a job you've worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? (You can review and contribute to the ICM Inspiration Wiki page). In the same post (or a new one), document the process of creating your sketch. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? If possible, please post your link by 9am next Wednesday morning!
-
Watch and/or Read:
- (before assignment) Videos 1.1 - 1.6 (~1h 15m)
- (after assignment) Videos 2.1 - 2.3 (~30m)
- Chapters 1-3 of Getting Started with p5.js cover the same material. Log into the NYU network to read it online.
-
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?
- LovelyA72 -- Can we use p5.js in a normal webpage alongside with normal Javascript codes? Or even use normal Javascript code inside p5.js?
- I was browsing many p5-based images, and I noticed many images have these dot-dash backgrounds(or filter), How has this bg been generated in p5? Example: https://twitter.com/tinbane/status/1636758127633891330?s=46
- AstroBoi - Hii :)) So is p5.js a library that is specifically restricted to visual work? Let's say, is it possible to automate things with p5?
- Henrique - Is there a best practice/recommended browser for p5.js?
- Boaty McBoatface -- [blog post](url to blog), zoog -- any other comments
- baiyuanbyx -- Intro to Comp Media: Week 01, myportrait
- AstroBoi - My Blog & My Doodle
- LovelyA72 - Anticipations of This Term
- https://www.longworks.art/icm1
- Damon -- Blog, Portrait
- Matthew -- Blog, Portrait
- Henrique -- Blog, Portrait
- Fatima -- Blog, Portrait