Homework Mimi 03 - ITPNYU/ICM-2024-Code GitHub Wiki

Week 7

RESOURCES FROM CLASS

TEST YOURSELF

ASK

  • Post at least 1 question here. Need help on asking a question?
  • Devan: In this sketch, the column drawn at (0,0) only has red fill if mouseX > 360. But within the class Column, moving lines 31-44 from the toggleColor() function to between lines 47-48 of the display() function changes the behavior: when mouseX > 0 && mouseX < 40, the column at (0,0) now has red fill. Why is the relationship between fill color and mouseX position different in these two situations?

Questions (example questions)

READ / WATCH

Week 6

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

  • 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() and draw() 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.

  • READ / WATCH

  • Examples

  • ASK

    • Post at least 1 question here. Need help on asking a question?
    • Devan: Why can a p5.js function translate the value of a global variable for any of its arguments (e.g. "rect(x, y, 50, 60);") but a user-defined function can't (e.g. "bounce(x)" when it's called in draw() but "function bounce (varToBounce)" where it's defined)?
    • Devan: In my creative sketch this week, adding push() + pop() to my torso() function changed its output, but adding it to all of my other user-defined functions preserved their existing behavior. Why are push() + pop() interacting differently with torso()?
    • B: How can I limit the parameter for color fill to stay within the 0-255 limits? I tried using constrain() and if an if statement in my sketch, but nothing seemed to work as the color value continued to increase after 255 and decrease into a negative value.
    • Amanda: When I'm drawing portrait and using 'top' as the function name, an error message "Identifier 'top' has already been declared" kept appeared. I changed the function. name to 'shirt' and now works, but why the error happens even though I haven't declared the same name function?

Homework Links

*Noah -- Laser Lines but function it Blog post(https://noahdorazio.notion.site/Week-5-very-functional-11b1cea3fe1280a39bc0f02fa669b50e?pvs=4)

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

  • Sana: For Question 1.3, why does where you initialize matter? When I initialize x globally, my while loop crashes. When I initialize x in draw, my while loop runs. I also don't understand why my code works for all columns except the first one (rect(0, 0, 10, height)).

  • Sana: I want to make sure I understand this correctly. The parameters in a custom function do NOT need to have argument presets / defaults in the code. Instead, you can name parameters that are defined by custom arguments and custom arguments only each time. Is this true?

  • Queenie: Why does the line line(x, y, x + gridSpacing, y + gridSpacing) create diagonal lines, and how would you modify the code to make the lines go in the opposite diagonal direction (from top-right to bottom-left) instead?

  • Devan: My computer can handle the exact scale of my sketch for this week, but if I make the hexagons smaller and more numerous, or make the canvas any larger, it really struggles to run the same logic. Is this a my computer problem, a coding efficiency problem, and/or some combo of the two? Curious about how to approach creating easily scalable sketches that include loops like this, but without over-stressing people's devices on the receiving end.

  • Amanda: In this week's creative project of mine, I wanted to make the river color filled at the back of the pixel line but when I move the river color representing code(line 336-339 [here]( //River background noStroke(); fill(131, 149, 193); //muted blue rect(0, (2 * height) / 3, width, (1 * height) / 3);)) - from the current location to the lines of code about grid pixel lines (line 38) it makes everything broken.

  • Noah - Is there any easier way to test loops without having to constantly restart my browser if I mess it up?

Homework Links

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

  • ASK

    • Post at least 1 question below. Examples of good questions...
    • Sana - Let's say your cursor becomes an object (i.e. circle) based on a conditional statement. The goal is that every time you mouse press, the same circle object as the cursor is left on the canvas. WITHOUT leaving a trail of the cursor. How and where would you code the background for this effect?
    • Queenie - When trying to combine my partner's code with mine, I realized that a section of my partner's code, even though written exactly wasn't showing up when I combined the two codes together... Why isn't the worm appearing after clicking six apples in my code? I’m tracking the apple clicks using appletotal, and when it reaches 6, I set worm = true, which is supposed to trigger the worm to appear. However, the worm doesn't show up, and it seems like the click count isn't updating as expected beyond a certain point.
    • B: When and why should we consolidate conditions? I was able to consolidate the following conditions
    if (mouseY >= 185 && mouseY <= 215) {
  if (mouseIsPressed) {
    controlX = mouseX;
  }
}

if (controlX < 50) {
  controlX = 50;
}
if (controlX > 350) {
  controlX = 350;
}

    into a single if condition statement (I guess its actually two since one is nested into the other), which I found looked more elegant, but didn't interact as nicely.

    if (mouseY >= 185 && mouseY <= 215 && mouseX > 50 && mouseX < 350) {
  if (mouseIsPressed) {
    controlX = mouseX;
  }
}
    • Amanda: [Worksheet 03] Challenge 2 - Q. Starting as mouseOver = false, but it turned out that a rect is already drawn. Is it related to the order across background, mouseOver = false, if conditions, OR other matters? Following is my code.
    • Queenie: Why does the conditional if (x > width && x < 0) never trigger, and how does this affect the behavior of the bouncing ellipse? What would be the correct condition to ensure the ellipse properly reverses direction at the canvas boundaries, and how would this impact the associated fillSpeed adjustment?
    • Devan: Still really stumped on worksheet question #2 -- using != to update a variable that stores whether the rectangle is visible or not makes sense to me, but I'm not clear on how to implement it without breaking the nested if() statements that the rest of the sketch is relying on.
  • Mark: Are creating separate functions a type of encapsulation? In the context of object-oriented programming.

Homework Links: 1 Sketch Per Pair

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?
    • 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.

  • WATCH, READ, RUN CODE:

  • ASK

    • Post at least 1 question below. Examples of good questions...
    • Sana: Can you assign a variable to a shape? i.e. x = ellipse(30,30,50,50)? ANSWER: No, you can't.
    • Sana: I'd like to go over the mousePressed function in class. For some reason, I cannot trigger that action (as evidenced through a print function that is supposed to print when the function is run) though I believe I'm mechanically clicking. ANSWER: It was because mousePressed / mouseClicked ONLY works with booleans.
    • B -- Why do variables work even when they are not "declared"?
    • B -- The nose in my self portrait is made up of a line and an arc. I was able to relate the two elements so that they would move in a unit and chase mouseX/mouseY, however, I don't believe I have done it correctly. The lower the mouseY value, the further "noseY2" and "noseY3" get from mouseY rather than maintaining the fixed distance, and vice versa (the higher the mouseY value, the closer "noseY2" and "noseY3" are from mouseY)
    • Taigen--In the sun works, I try to determine the position of the mouse X. Asked classmates and ICM help session. learnt to set constrain. constrain is for interval range.But still confused about the range of values (0,1). code:let percentage = constrain(mouseX / width, 0, 1);
    • Taigen--Done with help but still confused about sin(angle)height0.5. code:sunY = height - sin(angle) * height * 0.5; // Maximum sun height is half of the canvas.
    • Amanda -- Workhseet 02 challenge 6: What I wanted to do is actually putting the rectangle exist at the beginning at the bottom low (to set it at Q3) and get it follow the mouse movement -> Then actually the x, y of rect should not be fixed. But how to set the starting point not (0, 0) but (0, height)?
    • Amanda -- Is there no way to draw triangle based on the center position like we can do with recMode(CENTER)? Wanted to use triangle shape as well as type of planets in assingment 1 but it was hard to set the right initial position by defining x1, y1, x2, y2, x3, y3
    • Amanda -- Is there any way to get canvas size flexible (e.g. width and height getting +1 as each frame counted). As createCanvas() always should be called at setup(), I'm curious how we could do it if possible as part of an animation idea.
    • Amanda -- While setting up a flexible color palatte for a shape's fill, how we could constrain it to certain range of color? For example what if I want to let the hair highlight color has relationship with mouse position yet always changing within light~dark pink color.
    • Devan -- How can I preserve transparency of a shape's fill without having to keep it in setup()?
    • Mark -- Why does function mousePressed need to be a function? Why can't it just be like mouseIsPressed? And so when a click occurs, does p5 skip everything in draw immediately to run the code in function mousePressed?
      • Noah -- How would I go about containing a shape following the mouse in a specific area of the canvas?
    • Noah -- super super simple question but I am confused by what is being asked for in the first question of this week's worksheet. Also I would love to see how some people solved the last one.
    • Xueyu -- How can I avoid writing such a long statement:if ((mouseX < 340 && mouseX > 270 && mouseY > 350 && mouseY < 410) || (mouseX > 460 && mouseX < 520 && mouseY > 350 && mouseY < 410) ),Is there a quicker way to define this range?
    • Xueyu -- How to make a ball automatically move left by a specified number of units and then stop?
    • Queenie -- In my self portrait, I want the black pupil and white pupil to be linked together and maintain a synchronized movement, right now only the white is moved but I wasn't able to link both the black and white together but also make sure they stay in the white eyeballs, how do I do that
    • Queenie -- In my code, I'm using if statements to manually limit the movement of the pupils inside the eyes. How can I make these if statements more efficient or streamlined? Are there alternative methods to handle multiple conditions like this, especially if I want to handle more constraints, such as the two layers of pupils?

Homework Links

Week 1

  • RESOURCES FROM CLASS:

  • SET UP:

  • 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 use createCanvas() to specify the dimensions of your window and wrap all of your code inside a setup() 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:

  • 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?
    • Sana -- For Worksheet 001, Question 2, how does "&& mouseX < x + 50" effect the if statement?
    • Amanda -- For Worksheet 001, Question 2, How I could have only keep white square shape while it's moving right direction without having the black rectangle produced?
    • Noah -- When working with the 'arc' function, in what way are the angles oriented for the last two mandatory attributes?
    • Xueyu -- Is there a way to quickly see the coordinates of each point? For example, when the mouse points to a specific spot, the corresponding coordinates would appear.
    • Queenie -- When trying to rotate a rectangle, why does the rect() function not rotate as expected when combined with rotate()?
    • Devan -- When changing the location of an image drawn by multiple functions, is there a way to group the functions as a unit so that you can adjust the location of the unit instead of having to adjust the coordinate of each function individually (i.e. something like the "group" option in image editing software)?
    • Devan again -- In the code below, the circle completely disappears from view if I move my mouse off the canvas to Y>300, but stays stuck at Y=0 if I move my mouse off the canvas to Y<0. I think I understand why, but is there a way to move the circle into what would currently be "negative Y"?
    let circleX = 100;

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(0);
  noStroke();
  fill(255);
  circle(circleX, mouseY, 64);
}
    • B -- in Worksheet 001, Question 2, I changed "x++" to "x = x - 1". Why is it that the square stops at x=0 when I do not interact with the square? Why does the square stop at varying x values when the mouse interacts with the square? Why does the square continue moving off the canvas only when I approach the square from the right?
      // Code that describes the starting position of a shape that will move
  let x = 50;
  let y = 50;

function setup() {
  // Code to create a 400x400 canvas
 createCanvas(400, 400);
}

function draw() {
  // Code to draw a gray background
  background(220);

  // Code that changes the position of the shape over time
  x = x - 1;  // <-- OMG LOOK HERE

  // Code that describes mouse interaction
  if(mouseX > x && mouseX < x + 50){
  x = mouseX;
  }

  // Code to draw the shape
  rect(x, y, 50, 50);
}
    • Taigen -- how do I draw irregular arcs? For example, I've thought about drawing hair , but I don't know how to do it. I can only put circles and ellipses together. When using arc() (with PI, HALF_PI and Quarter_PI) is the + sign mandatory? Because I realized that some of the examples in the reference don't have the + sign.
    • Mark -- Is it possible to use hex codes for color? When I add the hex code, p5 recognizes it by adding the corresponding colored box next to it but it still shows a syntax error.
    • Fatma -- I can't remember how to //comment out a bunch of lines at once. I also don't know why in W1, Q2 why whatever value I put in for y, the box does not move as suggested in the rest of the code.

Please make sure your posts are publicly accessible by testing them in an Incognito (Chrome) or Private Browser (Safari).