How to Code: Gravity

NEW: Canvas Image Manipulation course only at https://chriscourses.com/courses/image-manipulation/introduction

🚀Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet

📸Gear I used to produce this video: https://kit.com/chriscourses/chris-courses-studio-setup

Learn the basics behind creating a gravity based physics simulation using HTML5 canvas and JavaScript.

Gravity is a force that pulls objects towards a large body of mass (typically planets). This is easy to understand from a high level standpoint, but when it comes to translating this effect to code, we have to pay attention to the details. Technically, gravity is the accelerative speed added onto an object's velocity. If we continue to add a constant value (gravity) onto an object's velocity over time, the object's velocity will increase, thus creating the effect of acceleration / gravity.

Delve into the video to learn more about the intricacies behind gravity and code.

Video Git Repo:

https://github.com/christopher4lis/canvas-boilerplate

Finished Project with Code:

https://codepen.io/christopher4lis/pen/jmQXvm

Video Timeline:

00:11 - Intro to Gravity: What is it? How do we translate it to code? 01:40 - Screencast portion begins (using git and setting up the project) 06:10 - Drawing the ball 09:13 - Adding velocity 11:19 - Adding gravity 13:42 - Adding friction 15:30 - Making a visually pleasing canvas piece using gravity (creating and animating multiple balls) 24:36 - Adding boundaries to the left and right hand sides of the screen 27:55 - Randomizing radii 28:38 - Randomizing colors

The Platform:

http://chriscourses.com is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning.

Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams.

For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.

Chris Courses Social:

Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses

Christopher Lis Social:

Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/chriscourses

Beatz:

Subconscious Sift - CHR1SM ... https://www.youtube.com/watch?v=3b7FyIxWW94