Skip to content
JaceyLynn edited this page Oct 3, 2024 · 167 revisions

ICM Code 2024 Homework and Class Review - David Stein

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?

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


Thursday, October 3

Homework 5 - Due 11:59pm October 9


##Thursday, October 10

Homework 6 - Due 11:59pm October 16


Thursday, October 17

Clone this wiki locally