Appearance
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
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()
andmouseOut()
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.