Today we are going to learn how to create animations in p5.js! Up to this point, besides when we using random()
, we haven't been able to create motion on our screen. Today we are going to fix that!
- CHALLENGE 1: Create 3 shapes and have them move from left to right across the screen. The shapes should have different speeds.
- Create 3 shapes and have them move from RIGHT to LEFT across the screen. The shapes should have different speeds.
- Create a shape that continuously moves across the screen. When the object reaches the other side of the screen, have it reappear on the left side of the screen.
- Have a shape move from the top of the screen to the bottom of the screen. REMEMBER: The down direction is POSITIVE
- Create a bouncing bubble. The circle should bounce back and forth between the two edges of the canvas BONUS: Have it change speed every time it hits the edge of the canvas.
- Create code that has your circle move back and forth from the upper left corner to the lower right corner.