Assignment Set 2

Variables and Interactivity

2.0 Exercise — Interactive Drawing

Create a composition that includes the following:

• A color that is affected by the mouse's y position (it can be the color of a shape, line, etc..). It cannot be gray.
• A rectangle that moves from the top of the screen to the bottom (using frameCount) leaving a trail behind it.
• An ellipse that is drawn where the user clicks.

2.1 Exercise — Randomness and Animation

Create an sketch where you:

• Draw at least two shapes or lines (e.g. one ellipse, one rect) whose initial state (e.g. position, size, or color) includes some randomness. You will need to use the random() function. You will need to use variables.
• Make it so that one aspect of each shape changes SMOOTHLY over time as the program runs.
• Due to the use of the random() function, if you refresh your sketch, it should be different each time.

2.2 Project — Variations on a Drawing

Create an interactive sketch in p5.js that uses the random() function to alter a drawing each time the user clicks the canvas. Think about drawing something very familiar, where minor variations mean a lot (i.e. faces, bodies).

Here is a video of how I'd like your program to function. Each time the user clicks the mouse on the canvas, a different whale gets drawn. See the following artworks for inspiration.

More!

Student Work

To hand in your work get the URL from the editor and link to it from your index.html page. To receive credit, it must be uploaded by class on the date specified. Label it clearly. Here is help if you need it.

Projects will be graded on both creativity and implementation.