Skip to content

Homework MimiO

Jump to bottom Edit New page
Mimi Onuoha edited this page Oct 15, 2019 · 20 revisions

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. Use the homework to 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!).

Mimi O's in-class examples

I save all of my in-class p5js examples in the web editor. You can see a full list here. It also contains other examples that relate to each week's assignment and that you can consult for additional support if you like.

How to turn in your homework assignments

Assignments are due the night before class each week. I will not give credit for assignments that are turned in late. 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.

Use this form to turn in your homework assignments.

The spreadsheet with everyone's responses is here.

Support

If you find yourself struggling, remember that you have many forms of support that you can take advantage of at ITP. Sign up for the ITP ICM Google Group, look out for the office hours and help sessions that the residents offer. You can find my office hours here and my email is cgo221@nyu.edu.

Week 1

Set-up

Resources

Assignment

  • 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 are some sample examples: Zoog, Mondrian
  • 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, 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 for next week

Week 2

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.

For example:

  • You could 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.
  • Or you could do the above but change color, alpha, and/or strokeWeight instead of position.
  • Or do something completely different!

Read and watch for next week

Video:

Example code:

Getting Started with p5.js:

  • Read Chapters 5 (Response).
  • If you're interested in rotation and translation, read Chapter 6 on Translate, Rotate and Scale. This is optional!

Week 3

Resources

Week 3 curriculum outline with links to tutorials, videos and examples. Mimi's examples in week 3 on p5

Assignment

In general this week, you should work with rule-based animation (with conditionals), 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.
  • OR
  • Make an algorithmic drawing. (One example is 10 PRINT, see also: my version of 10PRINT example). Make your interface element control the appearance or behavior of the algorithmic design.
  • When working in teams, both partners must contribute. I recommend pair programming, just like we have done in class. Sit next to each other at one keyboard and take turns coding while looking over each other's shoulder.

Read and watch for next week

Loops 4.1 - 4.2

Note 1: If you want to learn how to use p5.js out of the browser (aka what I was doing at the end of class), watch this video. This is not mandatory, do not worry about it if it seems confusing.

Note 2: This is the week where things begin to get complicated, and concepts start to build up on each other. Try to use things you've learned from the previous weeks: use variables wherever you can, when you want interaction and animation think in terms of incrementation (x++, x+=, x*=), and remember that conditionals are powerful because they allow us to perform different computations or actions depending on whether a condition evaluates to true or false.

Week 4

Resources

Week 4 curriculum outline with links to tutorials, videos and examples. Mimi's examples for week 4 in p5 editor

Assignment

This week, your assignment is straightforward: make something with lots of repetition (more than you would want to hand-code), and use one or more for loops to make it simpler. For instance: you could take something you've already written where there was a lot of repetition in the code and re-write it using a loop so that instead of 28 lines of code that call rect(), you have 1 line of code calling rect() inside of a loop that goes around 28 times. Or you could make something new that involves lots and lots of lines but draw them in different places with a for loop. The truth is that writing code is just logic-basd creativity, and this week is about feeding that. So focus more on rethinking HOW you write code than on writing lots of code or creating the coolest sketch.

Read and watch for next week

  • Videos 5.1-5.3 in the learning p5.js series.
  • Getting Started with p5.js chapters 9-10

Week 5

Resources

Week 5 curriculum outline

Assignment

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 choose to reorganize someone else's code——though you might want to make sure they're okay with it first ;) 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 and watch for next week

Examples

Week 6

Assignment

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:
  5. Re-organize / break-down your classes into the "smallest functional units" possible.
  6. 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 and Watch for Next Week

Videos 8.1-8.10

More resources from syllabus

p5.dom section of Chapter 13.4-13.6 in Getting Started with P5.js Video Examples Getting Started with p5.js Chapters 13_05 + 13_06

A Final Note

Next week will be your final week of class with me! We'll have a brief lesson, you'll get a chance to present your work, and then we will wrap up your half semester of ICM Code and prepare you to move on to ICM: Media!

Week 7

Assignment

Prepare yourselves for ICM Media by watching the first 2 video tutorials listed on this page under the heading Basics. You may also receive more instructions from Lisa.

Add a custom footer
Add a custom sidebar
Clone this wiki locally