Skip to content

Homework MimiY 04

Jump to bottom Edit New page
AddisonWorthington edited this page Oct 21, 2021 · 208 revisions

Week 7

RESOURCES FROM CLASS

TEST YOURSELF

ASK

Questions (example questions)

  • Your questions here
  • Addison: Can you clarify the difference of "for (X of Y)" Vs the standard "for (let x = 0; x<= etc; x++)". I have been struggling with loops and getting weird results.

READ / WATCH

Week 6

  • RESOURCES FROM CLASS

  • TEST YOURSELF

    • Optional Worksheet - You can complete it for Week 8 if you'd like.

  • DO:

    • Next week you will be presenting your own assignments. Duration: 5 minutes. Focus on what's happening in your sketch computationally. 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:
      • Mash up a couple of your past assignments.
      • Re-factor a past sketch and make it better.
      • Design a sketch that has lots of something (balls, sheep, eyes) using either arrays or arrays and objects.
      • 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.
      • In the end the goal is to have code in draw() that only makes calls to objects. Something like:
function draw() {
  background(0);
  
  // A single object
  apple.chop();
  // Another object
  orange.peel();
  
  // Calling a function on all of the objects in an array
  for (var i = 0; i < grapes.length; i++) {
    grapes[i].pluck();
  }
}

Week 5

  • RESOURCES FROM CLASS:

  • TEST YOURSELF

  • DO: The idea this week is to explore re-organizing your code. It is 100% legitimate to turn in a version of a previous assignment where nothing changes for the end user, but the code has been restructured. You may, however, choose to try a new experiment from scratch. Aim to keep setup() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):

    • Reorganize "groups of variables" into objects. | How to do this.
    • Break code out of setup() and draw() into functions.
    • Use a function to draw a complex design multiple times with different arguments.
    • If you are feeling ambitious, try embedding a function into an object.

  • READ / WATCH

  • Examples

  • ASK * Post at least 1 question here. Need help on asking a question?

    • Lifei: In the last question of the worksheet, I try to use the function I created (assigned with variable coordination multiple times) in draw(), but they always overlapped no matter how I change the location or the size of the ball. I wonder why that is keep happening.
    • Sarah: The syntax for defining a constructor a different in the videos and the books. I assume this is just a preference, but can you share if there are any pros and cons for using class Bubble () {} vs function Bubble () {} ?
    • Addison: Not a question, more a request to explain scope, specifically within objects. Ran into multiple issues with it. I understand it conceptually, but in practice I struggle with it.

Homework Links

Week 4

  • RESOURCES FROM CLASS:

  • TEST YOURSELF: Complete Worksheet 4

  • DO: Make something with a lot of repetition, more than you want to hand-code. You could take something you've already done where there was a lot of repetition in the code 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 * Persia: 1. what is the maximum workload of p5 editor? It seems that when the for() loop becomes larger the process can be real slow or crash. down. If I download the p5 package to create a html myself will it be faster and process more? * Sophia: how to use scale() in Push()/Pop() situation? * Addison: What exactly causes a loop crash, and is there a failsafe way to prevent them (outside of not creating loops without escapes?).

Homework Links

Week 3

  • RESOURCES FROM CLASS:

  • TEST YOURSELF: Complete Worksheet 3

  • DO: In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own assignment. Start by working in pairs as below. Can you divide an idea into two parts and combine those parts? (e.g. One of you codes the input behaviors and the other one codes the output behaviors.) Can you swap sketches and riff off of your partner's work? You can post together or break off and complete the assignment individually.

    • Can you tie your two ideas together with an interface control element?
    • Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we'll look at how this compares to interface elements we'll get for free from the browser.

  • READ / WATCH

  • ASK

    • Post at least 1 question below. Examples of good questions...
    • Sammy: Is there a way to print something to the viewer window rather than the console? Say a varying number value next to a slider.
    • Sarah: Can we see some more examples of push() and pop() functions? Why doesn't a for loop work in the draw function (or why didn't mine?)?
    • Addison: Is there a way to work simultaneously when working with partners on P5, or will we have to depend on simply copy pasting work?
    • Tuan - I feel like what while() can do are all included in the for()/if() function. Is there an example when it would be more appropriate to use while() than for()/if()? (or why do we need while()?)
    • Siyang: When I use the function"mouseIsPressed",the system always read several clicks. How can I make the input click only once?

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:

    • Create a sketch that includes (all of these):
      • 1 element controlled by the mouse.
      • 1 element that changes over time, independent of the mouse.
      • 1 element that is different every time you run the sketch.
    • e.g. Try refactoring your Week 1 HW by removing all the hard-coded numbers except for createCanvas(). Have some of the elements follow the mouse. Have some move independently. Have some move at random.
    • e.g. Do the above but change color, alpha, and/or strokeWeight instead of position.
    • Or make something new!

  • WATCH, READ, RUN CODE:

    • Watch Conditionals 3.1 - 3.4 ~1hr | Get Code
    • Getting Started with p5: Chapter 5 (Response). | Get Code
    • Go further with Transformations (Optional)
      • Video Tutorials 9.1-9.3
      • 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...
    • Sammy - How would I add a delay to a shapes movement in following the mouse? An attractive drag where it's catching up to the coordinates. Could almost be like drawing?
    • Sammy again - Is it possible to slow down randomization? Maybe skip frames between each random call?
    • Tuan - Is it possible to group several objects and control the group as a whole? (like controlling a layer in Photoshop, without needing to deal with the objects individually in the layer.)
    • Doris - How to frame the moving elements in a small area? In my self-portrait, the line of the nose always refreshes with the background. I don’t know why?
    • Gabe - I second Tuan's question - being able to group objects would be extremely useful. Also, is there a way to batch an operation? i.e. the same shape being generated repeatedly with one parameter incrementing at x times/frame?
    • Sophia - How can I calculate the center point and assign it to ( x, y ) for each one of the differently placed circles, and use it to have them move in different directions at the same time.
    • Yiting - When I use random(r,g,b), how do I avoid to have flashing color? Give a speed to the random speed?
    • Chengbo - How to make an arc rotate an angle randomly with a certain vertex as the center?
    • Jiaxuan - How to make the arc move along the edge of the other arc (related to my self portrait)？
    • Erin - How to control the layering position of the elements? (sometimes it does not follow the syntax order, for example, I created the face elements first, and then I create eyes, but the eyes elements are actually in the back of the last elements I just created.)
    • Sharan - I have the same question as Sophia but to add to her question, how do we move the circle within a particular boundary? In the sense, in my portrait, I was trying to bounce the pupil within the eyes boundaries and I was trying to do both the eyes together but just couldn't find a way.
    • Addison - How can we group multiple values into a variable?
    • Sarah - Why can't I move a rectangle towards a mouse based on the x2,y2 coordinates?

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 – 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. 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...
    • Persia -- Question: How do I efficiently figure out the positions of control points needed for a certain curve? Doesn't it take the direction of control point into consideration?
    • Sammy -- Similar to Persia's question, is coding a "grid" prefab or some kind of axis out of lines to help place commands a convention? Or does it start to click where the axis is for most coders?
    • Sarah -- Can you show an example of using colorMode(HSB) and HSL?
    • Tuan -- Also following up the curve questions, is bezier() the only way to draw a curve with a fixed start and end point? Because I tried curve() and curveVertex(), which both would be affected by the movement of the other vertexes in the middle.
    • Tuan -- How to draw an ellipse filled with gradient color?
    • Doris --How to flip the pattern according to the axis of symmetry? Similar to flipping a pattern horizontally.
    • Yiting -- * Still for the arc(), if the perimeter of the circle is relevant to the start and stop point for the arc(), then why do we need to use HALF_PI, PI or QUARTER_PI? * stroke() is only for lines? And strokeWeight() is for everything else? *if you do fill(mouseX) or fill(mouseY), can you fill other colors other than black and white?
    • Lifei -- If you wrote rect(X, A, B, C), is there any rule for the value you put into X? I've tried using a specific number and a variable like "mouseX" or "mouseX + a number", but it comes into a problem when I type in something like "mouseX > 10".
    • Gabe.1: In video 2.1, Dan added an alpha of 50 to the fill() function in order to create a time-dependent variable that decreased the opacity of the drawing the longer the mouse was held in a certain position. Why does the alpha value in the fill() function change opacity over time?
    • Gabe.2: In the self-portrait HW assignment, I tried to create a semi-circle to use as a hat. I had trouble getting it to rotate in the right orientation and locate properly. The reference documentation mentioned that rotation needed to be specified in radians, but I was unable to get it to locate properly. Can we review this?
    • Xuan: How to make the sketch as accurate as expected?
    • Siyang: How to create gradient color?
    • Sharan: Since the X and Y coordinates are based off a graph scale to accurately place an object say a rectangle, how do we accurately place these objects as intended instead of guessing the position of the objects? Is there a reference marker that can use to do this?
    • Addison: How can we create or import assets like text or 3D objects (severely jumping the gun, but interested).
    • Erin: Will the codes perform specific functions when the some numbers in the coordinates are negative?
    • Chengbo: How to set different lines and borders around one shape to different colors?
    • Sophia: How to duplicate shapes in size and location without writing them all out individually?
    • Name (optional) -- Question: Why is it that this is like this and that is like that?

Add Your Homework

Week 2

  • RESOURCES FROM CLASS:

  • TEST YOURSELF: Worksheet Post a url to your answers on the Google Doc.

  • DO:

    • Create a sketch that includes (all of these):
      • 1 element controlled by the mouse.
      • 1 element that changes over time, independent of the mouse.
      • 1 element that is different every time you run the sketch.
    • e.g. Try refactoring your Week 1 HW by removing all the hard-coded numbers except for createCanvas(). Have some of the elements follow the mouse. Have some move independently. Have some move at random.
    • e.g. Do the above but change color, alpha, and/or strokeWeight instead of position.
    • Or make something new!

  • WATCH, READ, RUN CODE:

    • Watch Conditionals 3.1 - 3.4 ~1hr | Get Code
    • Getting Started with p5: Chapter 5 (Response). | Get Code
    • Go further with Transformations (Optional)
      • Video Tutorials 9.1-9.3
      • 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...
    • Sarah - Why can't I move a rectangle towards a mouse based on the x2,y2 coordinates?

Homework Links

Add a custom sidebar
Clone this wiki locally