An Animated Ball
An Animated Ball
We'll use simple animation concepts with the circle function.
Let's use conditional if statements to keep it on the screen.
Completed
Basics of HTML & CSS
Block-based Programming
Code Comments
Basics of Animation
Today
More P5.js
Animating a 'bouncing' ball
Upcoming
More P5.js
More JavaScript
Create new slides for this week.
Make a copy of these slides for this week:
https://docs.google.com/presentation/d/1ciwYLVux_5xvoeGVrl976oaKgFbCFlDdPDjFDk3CvH8/edit?usp=sharing
Part 1: Creating the Ball
First, we're going to create a ball that moves down the screen.
It's going to move with a constant speed, no acceleration caused by gravity, so it's not a very good simulation- but that's ok.
Part 2: Bounce of the Walls
Second, let's see how to make it bounce off the bottom of the screen.
Using these same concepts, make it move on the X axis and bounce off the sides of the canvas as well.
Part 3: Make it Interesting
Lastly, what else can you add to make it more interesting?
More balls? color? something else?
Have the size of the ball based on one of the variables?
Use an ellipse with variables for both width and height as variables?
Experiment and see what weird and interesting things you can add.
On your slide for today, add a video showing your ball moving on both the X & Y axis, as well as bouncing off the sides of the canvas. For a higher score, it should do something more interesting than just that... like having multiple balls, color, or some thing else you've experimented with.
In case you forgot how to add video to your slides:
Take a video of this, add the video to your slide for today. You can start screen record by pressing Command + Shift + 5 .
To add video to your slide, you'll need to first upload it Google Drive, then you can use the Insert drop down menu to add it to your slide. Make sure the sharing settings on your video are set to public.