In this assignment, you will make an animation of rain. Since rain is composed of many, many individual rain drops it's best to use arrays to keep track of the drops and their different properties. You may find slides 395 - 440 of the slide presentation helpful in completing this assignment.
- Start a new P5 program
- At the very top of your program, create two arrays that will hold the x and y coordinates of each of the rain drops. For now, each array will only have one value, we'll add more later. Here's an example. (Note that I've used
let
to declare each variable. I could also have usedvar
)
let xPositions = [200];
let yPositions = [0];
- Add code in the
draw()
function to move and show your raindrop. - Add more drops to the arrays. You could do that by using
append
with for aloop
andrandom()
function at the beginning of the program, or using an array modification method during animation. You could even add more drops in response to user interaction. - Make the rain continuous by moving the position of each drop back to the top when it reaches the bottom of the canvas using an
if
statement.
- Make an array of colors, so that every drop is a different color, or an array of speeds.
- Add a little bit of randomness so the drops "wiggle" a bit as they fall
- Make other things "rain", like snowflakes, characters (like the Matrix movies), balloons, bubbles or any other shape. If you use multiple commands to draw whatever is raining down, consider creating a custom function with x and y arguments.
- You could make your simulation into a raindrop catching game, and remove the raindrops with the splice function when they are caught.
- Your rain simulation doesn't have to look or work like any other. Look at the samples of student work below for ideas. Have fun and be creative!
Justin
Sandy
Jordan
Charlene
Artiom
Rima
Ronaldo
Arwyn
Jonathan
Alyssa
Marielle
Nathan
Samantha
Calvin
Susanna
Noah
Alex
Noah
Andrei
Peter
Justin
Kathleen
Kaitlyn
Ally
Katherine
Brendan
Pansy
Jasmine
McKayla
Jocelyn
Yeshi
Linen
Isaac
Hao
Jeffrey
Patrick
Kahlo
Theo
Alyssa
Tennyson
CAthy
John
Alyssa
Kathy
Alejandro
Celine
Emerson
Cali
Joanne
Margaux
Naomi
Jennie
Supath
Emely
Tiffany
Alice
Erick
Oliver
Eden
Jaden
Justin
Vivian
Douglas
Kimi
Christina
Juan
Sean
Sally
Jason
Tiffany
Michelle
Robin
Lillian
Cameron
Keneth
Eliot
Adam
Emely
Tushig
Paolo
Frank
Ken
Leah
Abigail
Ailsa
Tobias
Tommy
Damian
Kami
Josh
Diego
Juan
Elvin
Irisa
Tommy
Eva
Afraz
Ashton
Niko
Michael
Melissa
Pyry
Audrey
Ben
Benjamin
Olivia
Liam
Tyler
Marissa
Brian
Tommy
Rachel
Karla
Tuan
Azalea
This assignment is based on a Khan Academy computer science project