Functions And Animation

In this assignment you will write a program using P5 that makes shapes change over time to create an animation. You may find slides 146 - 181 in the slide presentation helpful.

P5's draw() function is repeatedly run 60 times a second. Try running the following simple animation program to see how it works:

var diam = 40;

function setup() {
  createCanvas(400, 400);
  noFill();
}

function draw() {
  circle(200, 200, diam);
  diam = diam + 5;
}

We can slow down draw() with frameRate(). A frame rate of 20 is only one third as fast as the default rate of 60. Now try running this version of the program to see how it works:

var diam = 40;
function setup() {
  createCanvas(400, 400);
  noFill();
  frameRate(20);
}

function draw() {
  circle(200, 200, diam);
  diam = diam + 5;
}

For this assignment you will write your own program that uses the repeating draw() function to create an animation. The animation is created by drawing the same shape or shapes over and over again, with a small pause between each change. Each time the shape is drawn, some aspect will change. You may use any drawing functions that you would like, your animation does not have to look any other. Scroll down and click on the links below to see samples of other students work. Have fund and be creative!

Program Requirements

• Your program will need variables for each aspect of the shape that changes
• It will need at least two functions definitions: function setup() and function draw()
• Submit the URL of your finished program by choosing File | Share and copying the URL in the Present box to Google classroom

Optional

• You might try putting a call to smooth() in function setup()
• A little opacity in combination with smooth() can achieve some surprising results
• You may want to include an if statement, so that if your shape gets too big or goes off the screen, you can erase the screen and set the variables back to their initial values.
• You may want to call the frameRate() function in function setup() to adjust how quickly the screen is drawn.

Samples of Student Work

Kaitlyn
Bella
Brendan
Marielle
Cathy
Artiom
Alejandro
Emerson
Katherine
Tiffany
Alyssa
Kathleen
Peter
Aegis
Alyssa
Kathy
Omara
Theo
Noah
Justin
Jiana
Eden
Jaden
Vivian
Douglas
Ngoc
Erick
Jimmy
Oliver
Amy
Grace
Sarah
Breanna
Alice
Kaitlyn
Alex
Lucas
Tania
Rio
Alyssa
Ashley
Miles
Cali
Irisa
Michael
Joanna
Brian
Jennie
Dat
Ailsa
Joanne
Sean
Joshua
Cyrus
Tommy
Marissa
Paolo
Sally
Damien
Michelle
Rachel
Michael
Naomi
Benjamin
Juan
Tobias
Audrey
Niko
Benjamin
Marco
Michaela
Katelyn
Curtis
Duan
Nikhita