How to Code: Gravity




📃Join Chris Courses and get a free HTML5 Cheat Sheet. https://chriscourses.com/

📸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:
—————————————–

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

Original source


33 responses to “How to Code: Gravity”

  1. If I had a pound for every time you say "let's go ahead" I'd be a happy man.

    Unfortunately I don't. Please stop saying it, or at the very least notice yourself saying it, so it drives you to distraction as much as it does with me. Cheers.

  2. >Mac fag decides to share it's 'knowledge' on the internet.
    >Teaches it's way of doing things as the right way to do them.
    >Teaches the hardest possible way to set up a javascript program.
    >Is retarded, as all mac fags are.

    You literally just need to create an html document with notepad, type in "<script></script>" and start writing, your shitty home server is NOT required, and is pretty pointless and unnecessarily complicated.

  3. Your tutorials have been great until now. But this one: what? Is it 1993 again? A terminal? Really?! DOS is extinct by decades. Git clone isn't even a command. None of this makes any sense and it doesn't work for Windows users in 2018. What are we s'posed to do? How to we bring you forward in time to this millennium?

  4. when i try to use yarn i get this message:
    info fsevents@1.2.4: The platform "win32" is incompatible with this module.
    info "fsevents@1.2.4" is an optional dependency and failed compatibility check.
    Excluding it from installation.
    should it still work fine even if that part fails?
    when i type webpack in the console it does nothing and i'm trying to figure out what i need to do.

Leave a Reply