Skip to content

Homework Emily

Jump to bottom Edit New page
efika3 edited this page Nov 25, 2022 · 103 revisions

Week 6

  • RESOURCES FROM CLASS

  • TEST YOURSELF

  • DO: Prepare a technical presentation of one of your sketches.

    • 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 Mimi's demo video. (It is twice as long as 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!
      • NOTE: It is more important to know how three lines of code work than having many lines of code and not know what they do.
    • 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

  • Homework Links

Week 5

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, more than you want to hand-code. 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

Homework Links

Week 3

  • RESOURCES FROM CLASS:

  • TEST YOURSELF: Complete Worksheet 3

  • DO: Use conditional statements to control the flow of your programs. Create a sketch that asks you to make difficult choices that have either small, medium or large 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 ||)

  • READ / WATCH

  • ASK

    • Post at least 1 question below. Examples of good questions...
    • Austen Li: in my weather toggle sketch, I have two arrays storing the x and y coordinates of each rain drops and the two arrays just keep expanding when more rain drops are generated. I haven't tried running the program for a very long time but if I did, will it crash because of the overwhelming size of the arrays? What would be a good way to manage and delete the rain drops that have already move out of the canvas? (I tried something by myself but my method obviously slowed the calculation and it started to lag even at the first few seconds)

Homework Links

Week 2

  • RESOURCES FROM CLASS:

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

  • DO:

    • 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:

    • 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...
    • César Loayza. I like to use conditionals, it allows me to put bounderies/limits to element’s movement but I don’t know if there is a more efficient way of doing it without conditionals but keeping it flexible/variable (not static with fixed numbers). The variable "yiris" will store mouseY value but only between 175 and 189 (limits).
  if(mouseY<175){
     yiris = 175
     } else if(mouseY>189) {
     yiris = 189;
  } else {
    yiris = mouseY;
  }
  • Austen Li. How should I delete element in arrays based on certain conditions? For example, if I have the array [1, 2, 3, 4, 5, 6], and I want to delete all the odd numbers. What I thought I could do is using the for loop to loop through the entire array and delete every odd number. However, when I delete an element during the loop, it will mess up the sequence. Is there another way to do it?
  • Lang Qin. Is it possible to have part of the animation as background while ensuring that another part of the animation is displayed on top? Just like Layers in Photoshop.
  • Dre. In the coding train video on the random function, the host focuses on color and mentions using alpha which has a more pleasant effect of color. What’s alpha? Could the syntax there be explained more and when it can be used?
  • Zichen Yuan. When I try adding random color change to the background in Q5 on worksheet, I had trouble changing the frame rate for different layers of elements. Is it possible to have the background refresh at a different frame rate than the circle? Also, how do I have a variable run from, say 0 to 360 and repeat over and over again?

Homework Links

Week 1

  • RESOURCES FROM CLASS:

  • SET UP:

  • DO:

    • Complete this worksheet. Our weekly worksheet becomes 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...
    • Name (optional) -- Question: Why is it that this is like this and that is like that?
    • In what situations do you initialize a variable as you are declaring it, i.e., let circleX = 0; function setup() {?
    • How to see my curser's real-time coordinates on my canvas?
    • Cesar -- Why the function fill() needs to go before a shape function (quad, circle, ellipse, rect) instead of going after (draw a shape, then paint it)?
    • Cesar -- Why square and circle functions don't have the mode function like rect and ellipse? Is there any technical restriction?
  // Cesar questions:
  // I had to put all my code together otherwise the bullet points lose their sequence.
  // 1st question about painting and drawing sequence
  fill(24,24,24);
  quad(120, 230, 380, 230, 450, 440, 60, 400);
  // 2nd question about Mode function and shapes
  ellipseMode(CENTER);
  ellipse(250,200,170,270);
  • Austen -- Is there a better way to manage color variables? I find it inconvenient to define colors with their rgb coding every time I fill a shape. Is it possible to define all the colors in the first place and call the color variable when I fill the shapes?

--Dre - In my code, I had issues with the point function (located on lines 39-42). Curious why it’s not appearing?

For functions like line or point where the command is stroke and not fill, do you always have to close that stroke before the next command? I found that without closing it with the noStroke it impacted the rest of my code.

  • Lang -- Is it possible to rotate the ellipse’s angle in P5.js? There are some places where ellipses are better looking and easier to use than Beizer. Is it possible to fill gradient color? Is there any functions that can be used to simplify the code for graphs with a finite number of repetitions, just changing position and color?
  • Ranna -- Is there a more efficient way to build a triangle? Getting all the co-ordinates correct and bringing them to your location of choice is seemingly tedious and time consuming.

Add Your Homework

Dipika Titus--Blog

Add a custom sidebar
Clone this wiki locally