Homework Cassie

Guidelines

A big part of learning at ITP is learning from each other. So share your work and in exchange you'll get to see everyone else's!

1. Do the assignment.
2. Contribute a question.
3. Post documentation in the form of a blog post. Ideally something visual, some written thoughts, and code. If you are struggling with your sketch and can't get things to work, you should feel free to put your energy into writing about what didn't work (and vent any frustrations!).

How to turn in your homework assignments

Use this form to turn in your homework assignments.

Assignments are due before class at 2PM each week. This is so I have time to look over your assignments before class! Keeping in mind that I want you to succeed, and that the material can sometimes be challenging, I absolutely prefer tentative work to work that is turned in late.

Homework Responses

---

Week 7

RESOURCES FROM CLASS

• The DOM
• HTML Elements and CSS
• element.position()
• input() callback

READ / WATCH

• Videos: Images/Video 11.1-11.8 - Focus on videos 11.1 and 11.3
• Chapter 7 in Getting Started with P5.js through Ex 7-9 | Code
• Full Resources

DO

• Spend some time cleaning up and documenting your midterm project. This will probably include:
  • Title
  • Brief written description
  • Visual Documentation: sketch running online, images, video, etc.
  • References: links to related projects, code samples, etc.
  • Source code (please cite your sources in the code comments)
• Write a blog post exploring what you've learned about computation in the first half of ICM. Revisit your first blog post for ICM about how computation applies to your interests. Spend some time thinking about computation can be applied in other ways. Can computation be harmful to you? Can it help you be more creative?

---

Week 6

RESOURCES FROM CLASS

• Week 6 in the Syllabus
• Arrays in JavaScript | Documentation
• Worksheet 4, Q1
• Random Lines
• Storing Mouse Positions
• Bouncing balls, with arrays
• Bouncing balls, with classes

TEST YOURSELF

• Complete the Worksheet

DO:

• Next week you will be presenting your own assignments. Time limit is 5 minutes. Be prepared to point out 3 things in your sketch and how they're working. (e.g. Here's a loop, it's limit is being set by the mouse. This doohicky is an object and I have an array of 100 of them. They flicker and change color and when I click, I flip a boolean to make them start and stop flickering.)
• Design a sketch in an object-oriented fashion. Follow these steps and see how far you get (even just doing the first couple steps is ok!)
  1. Make one single object with just variables.
  2. Put one or more functions in the object.
  3. Try manually making two objects.
  4. Duplicate the object using an array and make as many as you like!
• 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();
  }
}

READ / WATCH

• Videos 8.1-8.10
• More resources from syllabus
• p5.dom section of Chapter 13.4-13.6 in Getting Started with P5.js

Examples

• Video Examples
• Getting Started with p5.js Chapters 13_05 + 13_06

---

Week 5

• RESOURCES FROM CLASS:

  • Bouncing Ball with functions
  • Transitioning Rectangles, in class
  • Transitioning Rectangles, with transformations

• TEST YOURSELF

  • Complete the Quiz

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

  • Videos 6.1-6.3, 7.1-7.7
  • More resources and code examples
  • Getting Started with p5.js chapters 10-11

• Examples

  • Week 4 Examples
  • New object syntax
  • Video Examples for Objects and Arrays
  • Getting Started with p5.js Chapters 10-11
  • Learning Processing examples Chapters 8-9

---

Week 4

• RESOURCES FROM CLASS:

  • Ellipse Button
  • Bouncing Ball
  • mousePressed() vs mouseIsPressed
  • Line of Circles
  • Lines to Cursor
  • Nested for loops - Numbered Grid

• EXTRA RESOURCES:

  • Transitioning Rectangles
  • Random Grid
  • 10PRINT
  • Transformations in for loop

• 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 in the learning p5.js series.
  • Getting Started with p5.js chapters 9-10

• RUN CODE

  • Examples for Videos 5.1-5.3
  • Getting Started with p5 Examples Chapters 9-10
  • Learning Processing examples ported to p5.js Chapters 7-8

---

Week 3

• RESOURCES FROM CLASS:

  • Using map() with color and rotation
  • One Press Button
  • mouseIsPressed Button
  • Left-Right Mouse Color
  • frameCount Timing
  • mouseIsPressed Button with Bounds

• 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 of of your partner's work? You can post together or break off and complete the assignment individually.

  • Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we'll look at how this compare to interface elements we'll get for free from the browser.
  • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch
  • GROUPS
    • Ashwita and Sam
    • Patrick and Jan
    • Will and Neta
    • Cy and Douglas
    • Erkin and Lanni
    • Ruixuan, Fernando, and Name (Atchareeya)

• READ / WATCH

  • Videos 4.1-4.2 in the learning p5.js series. | Code
  • Chapter 4.5-4.13 of Getting Started with p5.js book | Ebook (free with NYU Library login) | Code

---

Week 2

• LINKS FROM CLASS:

  • Week 2 Resources
  • Curve (Catmull-Rom) Applet
  • Bezier Curve Applet
  • p5 Playground
  • Trigonometry Primer
  • Trigonometry and Polar Coordinates Video
  • Bees and Bombs
  • From UCLA DMA Interactivity Class
    • Stefanie
    • Sara
    • Deborah
    • Rachel

• CRITIQUE ASSIGNMENTS:

  • Will, Erkin

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

• DO: Create a sketch that includes (all of these):

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One 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 do something completely different!

• WATCH, READ, RUN CODE:

  • Videos
    • Conditionals 3.1 - 3.4 | Get Code
  • Getting Started with p5:
    • Read Chapters 5 (Response). | Get Code

---

Week 1

• RESOURCES FROM CLASS:

  • Class 1 Notes
  • Does your language shape you?
  • History of Programming Languages
  • Influence Map of Programing Languages
  • Popular Languages Today
  • The Brilliance of Dwarf Fortress
  • Introduction to the p5 Editor

• SET UP:

  • Sign up for the ITP ICM Google Group
  • Sign up for a Github Account. You need it to edit this wiki page.
  • Log into a p5.js web editor account with your github account.

• 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 your own screen drawing: self-portrait, alien, monster, etc. Use 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 a sample 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? (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:

  • Watch before homework: Videos 1 - 7 | Watch after homework: Videos 2.1 - 2.3
    • If YouTube bothers you, ask Daniel Shiffman for a link to videos on Google Drive.
  • If you prefer books, Chapters 1-3 of Getting Started with p5.js cover the same material. Log into the NYU network to read it for free.