Skip to content

Homework MimiO

Jump to bottom Edit New page
Mimi Onuoha edited this page Sep 24, 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
Add a custom footer
Add a custom sidebar
Clone this wiki locally