Homework Dave 02 - ITPNYU/ICM-2024-Code GitHub Wiki

ICM Code 2024 Homework and Class Review - David Stein

Week 8 - 15

Visit ICM-2024-Media Homework Wiki

Week 7 - Oct 17

RESOURCES FROM CLASS

TEST YOURSELF

ASK

  • Post at least 1 question here. Need help on asking a question?
  • Luna Chen - can we use the same thing we learned before this class into html? like class/object/arreys/function, can they be also called the same way in html?

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.
    • NEW: In class I mentioned you should use both objects and arrays in your sketch. On second thought, it is OK to just do one of these (use objects or use arrays)
    • MOST IMPORTANT: Please only use code techniques that we have covered in class. It is MOST important to me that you show what you have learned and only use code that you understand. Make something creative within the palette of your understanding. Be prepared to explain the most complex parts of your code.
    • 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

  • Homework Links - Due Oct 16 12:59pm

Week 5

  • Today

    • Homework Review
      • Quick loop review & P5 variable discussion
    • Assessment Discussion

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

Homework Links

Week 4 - Sep 26, 2024

  • 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

    • Rajeshwari - What does offset function do, and where is it used and how to use it?
    • Luna Chen - Can we use function the same way as for/while loop do? What the difference between for and while loop? I feel like while loop can be used when there is less limitation, for loop used in conditions where there needs fully limitation. And while loop can also nest with if or other loops, is that correct?

Homework Links Due Oct 2 11:59pm

Thursday, September 19

Homework 3 - Due 11:59pm September 25

  • TEST YOURSELF: Complete Worksheet 3

  • DO: For this week’s assignment, you have 4 options to choose from. Pick one or many!

    • Option 1: Create your own version of a “bouncing ball” sketch. What kinds of events can you trigger when the “ball” hits the edge of the window (changing size, changing color, changing speed). What other types of physics can you simulate? Can you add gravity to the bouncing ball?

    • Option 2: Try making a rollover, button, or slider from scratch. You are welcome to use the examples below as guides and inspiration:

    • Option 3: Create an algorithmic design with simple parameters. You may use any inspiration, but here is one of the earliest pieces of computer art as a starting point:

    • Option 4 Tie any of the above together! Can you create an interface element that controls the visual design or behavior of other elements in your sketch? For example, could a button start and stop the 10PRINT generation? Or could a slider alter the speed of a bouncing ball?

  • READ / WATCH

  • ASK

    • Post at least 1 question below. Examples of good questions...
    • Junqi Zhang : How to make the ball move in a circle?
    • Vivian Jia : For documentation purposes, is there a way to programmatically capture a GIF or image created in p5.js and download it directly from the sketch?
    • Luna Chen : How can I make a object rotate round another moving object?

Homework Links: 1 Sketch Per Pair Note be sure to do a Blog post about your experience with your homework

Week 2 - Thursday, September 12 (HW Due Sept 18, 11:59pm)

  • Dave's Week 2 Class Notes

  • ICM Code Syllabus Week 2 - Animation & Variables

  • Sketches from Class

  • RESOURCES FROM CLASS:

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

  • DO:

    • Create an animated sketch!

      • As an exercise include all of the following.

        1. One element controlled by the mouse.
        2. One element that changes over time, independently of the mouse.
        3. One element that is different every time you run the sketch.

      • See if you can eliminate all (or as much as you can) hard-coded* numbers from the sketch. A hard coded number is something like fill(150). Better practice is to save 150 in a variable, for example myGreyColour, then use fill(myGreyColour)

  • WATCH, READ, RUN CODE:

  • ASK

    • Post at least 1 question below. Examples of good questions...
    • Tina Yu - Is there a way to control frame rates for individual components within one project?
    • Olivia Lee - Can we specifically take some time with the last challenge question from the worksheet?
    • Rajeshwari Kotwal - How can I add background to the line moving at the top of my sketch, which has a gradient?
    • Rajeshwari Kotwal - Can you please explain the function - Noise?
    • Laurel Fang - Can we incorporate some pre-existing 2D/3D artworks/virtual fashion into P5?
    • Vivian Jia - How can we control moving elements to ensure they stay within the frame without using the if() statement? or can we elaborate more on the if() statement in class?
    • Luna Chen - Can we get a summarize of certain function? Like moving objects(without mouse interaction): speed, frameCount, target, easing.... Summary like these.... I'm confused everytime when I need to move a object, and also can't figuring out how to make the object back to original point automatically when the interaction is done.

Homework 2 - Due 11:59pm September 18

Week 1 - Thursday, September 5 (HW Due Sept 11, 11:59pm)

  • Dave's Class Notes

  • 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?
    • Sky Seo : How can I group the individual shapes to change the position of them together without changing all the shapes' position separately?
    • Sky Seo : Can I use Hex Code in p5.JS? I don't see the option for hex code in 'colorMode()'.
    • Sky Seo : IS the color RGB based or RGB'A' based? --- solved. RGBA based, but all the scales are 0 - 255 including 'Alpha' value.
    • Tina Yu -- Question: Is there a more efficient way to determine your desired color and position for a shape requiring less guesswork?
    • Junqi : What is an efficient way to understand the xy coordinate, especially when creating arc and curves. It was very hard to make the curve I want.
    • Junqi : When I have a lot of variation in stroke/fill/color, what is the best approach to achieve a clean code?
    • Laurel Fang: If I want to change the position of the hair clip altogether, is there a way to group all elements together and tilt the whole thing in one go?
    • Laurel Fang: Can I change the brush properties, such as make it like a spray paint or has neon effect or a calligraphy pen?
    • Yushin Li: How can I apply transformations like scaling or rotating to a group of shapes together more efficiently instead of doing each shape manually?
    • Olivia Lee: I find that centering objects can be pretty difficult, is there some sort of function that can help with that?
    • Jenn Choi: I was struggling making my top hair with oval shape + rotating. Is there any easier way to rotate them?
    • Rajeshwari Kotwal : How do I make waves in p5? I tried doing that to my portrait for hair but could not achieve it
    • Rajeshwari Kotwal : How do I select multiple objects and rotate them together?
    • Vivian Jia: How does mirroring work with the arc() function?

Homework 1 - Due 11:59pm September 11