Homework Mimi 01 - ITPNYU/ICM-2024-Code GitHub Wiki
Week 5
-
RESOURCES FROM CLASS:
-
REQUIRED ASSESSMENT ON LOOPS (1 of 2):
- Location: Common Area outside of Room 426
- There is no time-limit, however give yourself at least 30 minutes.
- Topic: Loops. However it assumes basic knowledge of p5 drawing functions, variables and conditionals.
- Available windows of time:
- Friday Oct 4 12-4PM
- Monday Oct 7 12PM - 2:30PM
-
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?
- 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 goal: Write a re-usable function, a function you can call in multiple ways to do the same thing slightly differently each time.
- Aim to keep
-
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?
- Audrey Oh - it was rather long so posted here (https://www.notion.so/Week-5-Assignment-11450145f38480f08f27ca3c1afaa165?pvs=4)
Homework Links
- Marven Ma -- Revised portrait
- Jinnie Shim -- Functionize Everything
- Luna Park -- Portable Portrait
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?
- Jinnie Shim: My browser died time to time doing this week's assignments. Are there best practices to keep this from happening?
Homework Links
- Marven Ma -- Wave
- Amelia Yang -- Pattern
- LUNA PARK -- WEEK4, Pinwheel
- Jinnie Shim -- ICM Assignment 04, Infinite Staircase
- Yafira Martinez -- Sketch, Blog Post
- Will Xuan -- Pattern, Blog
- Ranjani -- Pattern
- Audrey -- The Sun Gets Caught, Blog
- Ping Lin -- Moving Ball, Blog
- Chris Toh -- Piet Mondrian?
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...
- What is the difference between using 'var' and 'let'?
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
- LUNA PARK -- Pair project blog, BULB
- Amelia Yang -- Week03, Tree or Apple?
- Ping Lin -- Week 3, Light Switch
- Yafira Martinez & Marven Ma -- bouncing ball mini game, blog post
- Jinnie Shim -- Collaborative Sketch Blog Post, Click Here If You Dare
- Will Xuan --Collaborative Sketch, blog
- Audrey Oh - BULB
- Chris Toh - Click Here If You Dare Blog Post
- Ranjani - pick your drink, Blog Post
Week 2
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Worksheet Post a url to your answers on the Google Doc.
-
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 (link the eyeballs together!) 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...
- Audrey Dahyung Oh - When you draw a rectangle with four lines like no.2 of the worksheet, is there a way to "fill in" the rectangle without drawing an additional one that fits exactly with the line? In other words, can Javascript read four right angle lines that close into a shape a rectangle?
- When x value increases by 1 (x++;), what is the way to make the increase stop when x hits a certain point? How do you define floor and ceiling ranges for conditional increments?
- Will Xuan - In worksheet No.6, the square suppose to follow the mouse like the circle did before, but square never stops moving even passing the mouse. The only variable is that I define the if section with the center of each line rather than center of the square, but the lines are already in relationship with the center in code. What is the reason for square not following the movement of mouse?
- Luna Park - When mouse is off to canvas I want the “mouseX” stop following but I am not sure how to do it.
- Jinnie Shim - Can I define a series of numbers (e.g. (x, y)) that could go as part of the arguments of a certain function (e.g. rect((x, y), w, h))? How is defining a variable with let/initializing in setup different from declaring variable and initializing from the beginning?
Homework Links
-
Amelia Yang -- Week02, portrait develop
-
Marven Ma -- I'm watching you
-
Jinnie Shim -- My Hair Only Varies in Length, Yes It Does, Blog
-
Luna Park -- Changing Usual Expression, Updated Usual Expression
-
Audrey Dahyung Oh -- Click on Me, Blog Post
-
Will Xuan -- CHANGE NOW!, Blog
-
Ping Lin -- Blog , Self Portrait
-
Yafira Martinez -- Self Portrait v2, Blog Post, Self Portrait v2, Code
-
Chris Toh -- Week 2 Blog, reach for the skies
-
Ranjani Ramakrishnan -- Self Portrait Ver2
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.
- 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 computation applies to your interests, due 24 hours before the next class. 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? Did you post any issues to github?
-
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?
- Amelia Yang -- When recreating an image and inputting the RGB values for 'fill()', I have been entering random values first and then adjusting them one by one to get as close as possible to the desired color. I find this method quite inefficient. Is there a more efficient way to quickly extract the RGB values of a specific color? Would using Photoshop or other tools be the best approach?
- Luna Park -- During the using of arc(), (using PI, HALF_PI and Quarter_PI,) at the reference, some examples are put + sign with two PI, and some are not. I am not sure when I have to put + sign during use of arc()
- Marven Ma -- Is there a way to notate the coordinates on the graph or have some kind of referencing points so it could be easier to figure out the what I should put in the parameter for x and y, especially when the graph gets larger and I want to get into the very details in my graph?
- Audrey Oh: If you wanted to draw a square frame, I can think of many ways of doing this: You could 1) create an unfilled rectangle with a thick stroke, 2) create a rectangle and erase a smaller one from the inside, 3) create a rectangle and overlay on top another rectangle that has the same color as the background. 4) Four rectangles as each sides of the frame. What would be the most efficient way to complete this action? Is it how many lines of code? How do you calculate efficieny in coding?
- Yafira Martinez: When it comes to color, RGB values are widely used. Is it more efficient than using Hex color codes? If so, why? (following up with Amelia's question, I also wish to know if there's an easier way to be more comfortable with using RGB values instead of adjusting them one by one)
- Ranjani Ramakrishnan: Similar to the RGB values, I had a question regarding (X,Y) coordinates. I have been eyeballing the values so far which takes quite a lot of time. I also found a line of code which displays the coordinates wherever you point your mouse which was pretty helpful. Wouldn't it be more efficient if p5 had some sort of a ruler to figure out the exact coordinates?
- Jinnie Shim -- Question: If x and y starts at a certain point why doesn’t it belong in the setup() but before that? Also, I did my version control on the web editor. How might I do that on gitHub? Is there a way to check what the default values or the current values are for arguments in certain functions? (e.g. strokeWeight)
- Chris Toh: How do we draw irregular shapes? For example, I had this idea to draw hair for my character, but I realized I get stuck thinking about how to do it. Also similar to previous questions asked - I find myself guessing the coordinates to place different elements, is there an easier method to do this?
- Will Xuan: Is there a way to see the grid point of the canvas with x and y coordinates on the right side of the screen when we are editing, so that we can map out the exact point of different shapes. At the same time, how do we know the exact curvature of the curve while we coding the coordinate?
- Ping Lin: Is there a built-in feature or tool in p5* that allows you to track or display the coordinates of shapes or the mouse pointer in real-time while coding, to better visualize their position on the canvas? I often struggle to accurately place shapes and locate their points
Incognito (Chrome) or Private Browser (Safari).
Please make sure your posts are publicly accessible by testing them in an- Homework Links
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other
- Amelia Yang -- Week01, My 2D ID photo
- Luna Park -- WEEK1,Usual Expression
- Marven Ma -- BP1, :)
- Ranjani R -- Week1, Paint Party
- Jinnie Shim -- ICM Essay 01, Sketch Work Log, Jinnie Shim Self Portrait
- Yafira Martinez -- Computation and the Artful Web, W1: self portrait, Self Portrait in p5.js
- Audrey Oh -- Cross Stitch Portrait: Explained, Cross Stitch Portrait, Why Computing Matters
- Chris Toh -- ICM Week 1, Say Cheese
- Will Xuan -- WEEK1 ESSAY, ME,WILL, WEEK1 WORKSHEET
- Ping Lin -- Blog , Self Portrait