Skip to content
On this page

< Back

Week 2 Homework:

Animation

Assignment

Create one of the following and post a link to the sketch on your website:

  • Make a clock with p5js. Functions like second(), hour() and minute() are useful here! The clock can be analogous to a real-world clock or it could be an abstract way of telling time

  • Using your mouse and a simple shape (rect, ellipse, arc, triangle, line, polygon), create an interaction that causes the shape to demonstrate an emotion. It could be fear, attraction, desire, exhaustion. Your choice. Obviously mouseX and mouseY are helpful. Examples like this easing function might be inspirational, as would notes from the 12 principles of animation

  • Watch videos on loops [1] [2] and functions [1] [2].

  • (Optionally) Watch video on translation [1] [2] [3].

  • Create an Animation project.

  • Read p5.js Tutorial on interaction, in particular pay attention to the section on Events. The aspects in the article that describe mouseOver() and mouseOut() are our of scope for our discussion at the moment, so don’t worry if you don’t entirely get what it’s describing.

  • Read The Art of Interactive Design Chapter 1. Online access provided by NYU libraries. Write a response to this on your blog - Crawford defines interaction as something that can happen along a continuum, from a simple switch to a deep and engaging conversation. How do you define interaction? Would you consider a book to be interactive? What about a plant you need to care for? How about a puppy? What about your sketches?

  • (Optionally) Read Getting Started With p5.js Chapters 4-6. Online access provided by NYU libraries.