Homework Nun 07 - ITPNYU/ICM-2024-Code GitHub Wiki

Useful links
- Syllabus first half- Syllabus second half- Video lecture on Coding Train- Class resources and assignments- p5.js Web Editor- p5.js References- Office hours (Nun)
Class notes
- Week 1 Notes: Drawing- Week 2 Notes: Animation- Week 3 Notes: Conditional Logic- Week 4 Notes: Loops- Week 5 Notes: Functions- Week 6 Notes: Arrays and Objects- Week 7 Notes: HTML / CSS / DOM

Week 7: HTML / CSS / DOM

Resources from class:

Assignments:

Week 6: Arrays and Objects

Resources from class:

Assignments:

  • DO: Worksheet

  • DO: EXPLAIN 1 THING (YOU HAVE 2 WEEKS).

    • 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 Mimi Yin's 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

    • Name: question

  • Homework Links

Week 5: Functions

REQUIRED ASSESSMENT ON LOOPS (1 of 2):

  • Friday, October 4th, 12-4pm, Room 426
  • Monday, October 7th, 12-2:30pm, Room 408
  • Take your computer
  • 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.

Resources from class:

Assignments:

Week 4: Loops

Resources from class:

Assignments:

Week 3: Conditional Logic

Resources from class:

Assignments:

  • DO:
  1. Complete this worksheet. Our weekly worksheet become the basis for the next class.
  2. 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 ||)

  • READ / WATCH

  • ASK

    • Ray: Q1: Is there a way for mobile phone users to touch the screen and initiate an event? "touchStarted()" seems to be the code I'm looking for, but when I tried it, it didn't work. Q2: When encountering objects with complex shapes, it's hard to tell p5 "do something when the mouse pressed this shape", is there a code designed for this purpose? I've found p5.element.mousePressed, but it seems to only work on p5 elements, instead of all objects on the sketch.
    • Yilin: how to set that when click/ pressed at certain mouseY value (0-60; 120-180; 240-300, etc) draw image 1; if click on other mouseY value, draw image 2? (for my sketch wip)

  • ASSIGNMENT LINKS

Week 2: Animation

Resources from class:

Assignments:

  • DO:
  1. 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.
  2. 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:

    • Watch random() and map() 2.4 - 2.5 ~20 minutes
    • Watch Conditionals 3.1 - 3.4 ~1hr
      • Getting Started with p5: Chapter 5 (Response).
    • 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

    • Name (optional) -- Question
    • Ian - Is there a way to group lines of code so they only affect a section of the code?
    • Billy - why -- and -- or ++ and ++ and so on gives different direction? I kinda find figure it just by trying but don't find good reason behind it
    • Jin -- I defined my own variable and used "if" statements for my sketch, but there are a lot of repetitions in my codes. Is there a way to simplify it? I am also still a bit confused about the "on = !on". I think I could've implemented in my sketch, but was confused on how to approach it.

  • ASSIGNMENT LINKS:

Week 1: Drawing

Resources from class:

Assignments:

  • 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 1 question below. Examples of good questions...
    • Name (optional) - Question: Why is it that this is like this and that is like that?
    • Alyssa - Is there a better way to center shapes that are not the ellipse and the rectangle? I'm wondering why those are the only ones with CENTER modes.
    • Julia Xu - Is there a better way to rotate a shape? It would be easier for me to rotate the rectangle shape 4 times to create the p5.js logo.
    • Julia Xu - Are there any other ways to create a curved line by using the arc( ) function?
    • Ray - Is there a way of drawing a set of shapes by a single code? (for example: ten triangles connect with each other side by side)
    • Rachel - When I wrote colorMode as RGB, its color is so vivid that it didn’t match with the original one. So I altered into HSB mode to conduct the color saturation precisely… AM I DOING RIGHT HERE ?!?! HUGE QUESTION MARK.
    • Sammy - How do I make an arc from two endpoints and not the center?

  • ASSIGNMENT LINKS