Skip to content

Homework Mimi 02

Jump to bottom Edit New page
bettyz-mushroom edited this page Oct 23, 2025 · 127 revisions

Week 7

RESOURCES FROM CLASS

TEST YOURSELF

ASK

Betty: After watching coding train 8.6 I tried to do the worksheet but after opening the devtools I can't even find which line is which element of the NYT homepage so I gave up

Questions (example questions)

READ / WATCH

Week 6

  • RESOURCES FROM CLASS

  • TEST YOURSELF

  • DO: EXPLAIN 1 THING.

    • Prepare a 5-minute technical presentation of one of your sketches.
    • Focus on what's happening in your sketch computationally. Clarify the vocabulary you will use. Write out what you're going to say and prepare any diagrams that will help you explain what's going on. See my demo video (It is much longer than the time you will have!)
      • Give yourself time to properly demo 1 aspect of your sketch.
      • Explain 1 thing you learned in making your sketch. Talk about what programming concept(s) you are using (e.g. objects and arrays, nested for loops, toggle logic, portable functions)
      • Write down what you're going to say ahead of time. Prepare diagrams to help get your point across!
    • OPTIONS FOR WHAT TO DO:
      • Take this opportunity to really clean-up your code. You don’t even need to add any functionality!
        • Add descriptive comments.
        • Carefully name your variables and functions.
        • Remove unnecessary repetition.
      • 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:
        1. Re-organize / break-down your classes into the "smallest functional units" possible.
        2. Try different ways to have your objects "communicate" with each other in some way.

  • READ / WATCH

  • Examples

  • ASK

    • Post at least 1 question here. Need help on asking a question?
    • Lingwu - The tricky part of Task 8 is that a ball’s color depends on its relationship with other balls, unlike Task 6 where each cell reacts only to the mouse. If I store overlap as a property of each ball, it causes flickering, because each ball continuously compares itself with others in a nested loop. The color should toggle only when two balls just start overlapping or just separate, but with ball-level states, overlapping states of other pairs can cause a false detection, making it seem like a pair has separated when it actually hasn’t. I realized that I needed to record the overlap state between pairs of balls, which is to capture the intersubjectivity of each pair. I used a Map where each key is a pair of balls’ indices in the array, and the value records the overlapping state of that pair. It’s like a 2D array. This successfully solves the flickering problem.

  • Homework Links

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 3 1-4PM
      • Monday Oct 6 3 - 6PM

  • 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?
    • Lingwu: In this week’s worksheet, I ran into a problem in the last question. My original bounce() function looked like this:
    function bounce(currentValue, speed, minValue, maxValue) {
   if (currentValue > maxValue || currentValue < minValue) speed *= -1;
}

    I thought passing in different speeds (like xSpeed, ySpeed, or colorSpeed) would update them inside the function, but I found out this doesn’t work. I realized that the variables inside the function are local, and the values passed in are just copies, not references. So modifying them doesn’t affect the outside variables. I fixed this by adding a return value and reassigning it outside the function. I'm not sure whether this is the best approach.

    • Brian: why does my ball only gradually increase color after the second bounce ? sketch
    • I wanted the wipe function on my sketch to wipe away the face and reveal the design with a for loop while the mouse is Pressed. I have it revealing the face, but not design...

Homework Links

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 * How do i make it so that each column i hover over has a different color? * Why is my computer getting so slow? * Did we go over objects already?

Betty: For the pattern I made, I want to make the pupils in the eyes bounce just like the bouncing ball && I want to make the rotate works correctly

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...
    • Lingwu: I have an idea to share—it’s not exactly a question—but I feel that working with p5.js is quite different from the other programming languages I’ve learned. In most other languages I use, I usually declare variables inside functions so they remain local and are recreated each time the function runs. I also write my own main loop—often inside a main() function—to control when the program updates. In p5.js, things work differently. The draw() function is built-in and loops automatically about 60 times per second. Because of this continuous loop, any variable declared inside draw() would reset on every frame. So when I need to preserve state across frames, I have to place those variables outside draw() as global variables.
    • Betty: "if (millis() - time >= 500){rect(200,100,50,70)" I don't quite understand why == won't work. (I used > because I was testing) Also, why can't we write Q4 by using a 'for' statement? && can't figure out the 2nd challenge, 3rd challenge, and 5th challenge without map(). (Answer from Aditya) - use frameCount() instead of millis()
    • Antonia: I couldn't make mouseOver and map work on Brian and I's sketch. Also, how can you adjust speed of ++ variables when applied to called statements such as let x= y?
    • Brian: could you explain why this change works for W4 Q5 fillColor = ballX; fillColor = map(fillColor, 0, 400, 0, 255); -> fillColor = map(ballX, 0, width, 0, 255);

Homework Links: 1 Sketch Per Pair

Week 2

  • TEST YOURSELF: (Only use what we've learned so far: calling p5 functions and variables.) 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...
    • I’m curious—besides drawing visuals, what other kinds of things can p5.js be used for? -Lingwu
    • How can we effectively relate rotations to other aspects of our sketch? The math confuses me - Antonia

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?
    • How can we know the coordinations of each point quickly?
    • Cathy -- How to know where to put the control points on a bezier curve. It was hard for me to visualize where to put the control points and how that would affect the curve.
    • What's the meaning of those empty () in coding?
    • How can we control a number of commands as a group?

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

Add a custom footer
Add a custom sidebar

Clone this wiki locally