Learn how to create a gravity-based physics simulation using HTML5 canvas and JavaScript in this 32-minute tutorial. Explore the concept of gravity as an accelerative force and how to implement it in code. Set up a project using git, draw a ball on canvas, add velocity and gravity, incorporate friction, and create multiple animated balls for a visually appealing effect. Discover techniques for adding screen boundaries, randomizing ball sizes, and generating diverse colors. Gain practical skills to bring realistic physics to your web animations and games.
Overview
Syllabus
- Intro to Gravity: What is it? How do we translate it to code?
- Screencast portion begins using git and setting up the project
- Drawing the ball
- Adding velocity
- Adding gravity
- Adding friction
- Making a visually pleasing canvas piece using gravity creating and animating multiple balls
- Adding boundaries to the left and right hand sides of the screen
- Randomizing radii
- Randomizing colors
Taught by
Chris Courses
