How to Code: Gravity

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:
-----------------------------

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:
-------------------------

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.

Chris Courses Social:
-----------------------------------

Christopher Lis Social:
-------------------------------------

Beatz:
--------------------
Subconscious Sift - CHR1SM

[GriffinWiebel]

Every video from this channel is nothing else but a masterpiece. Thanks for sharing your knowledge!

[fernwood]

Love your videos. Thank you for presenting them at a perfect pace, and without theatrics like it's a children's TV show.

[jimmyciaston]

Once again, you fail to disapoint. Hands down you have the best tutorials on youtube. Would love to see more javascript videos maybe explaining advanced functions or just basic javascript. Would love to learn the basics from your tutorials :D

[JoshuaMusau]

I AM TOTALLY HOOKED. I haven't done anything else all day. As soon as I'm done with my animation, I'll push to my github repo and share a link with you. Thank you for this!

[mayaahmed]

Thanks. Your classes are really fun, easy, and informative.

[jacobs]

Chris, your canvas tutorials are so damn good, learning super quickly with them. Thank you so much for what you are doing ;)

[jsonify]

Wow. What a treat it is to have such a clear, concise and informative material presented by you, Chris. Your channel and The Coding Train are by far, my favorite places to learn here on YouTube. Thank you for all that you do. Cheers!

[jonrhaider]

Thank you Chris for these awesome tutorials. One method I've found that can be used to prevent the balls from getting stuck on the sides (even if they were spawn there or somehow ended up there because of a delayed frame or forgetting to account for the velocity - which gets trickier with non-linear accelerations) is using *absolute values*, with the logic being: if the ball is located too far to the left make dx absolutely positive, and if too far to the right, make dx absolutely negative (instead of alternating signs):

if(this.x - this.radius < 0){
dx = Math.abs(dx);
} else if( this.x + this.radius > canvas.innerWidth){
dx = -Math.abs(dx);
}

[brunomeida]

yo dude.
I am from brasil, learning with you in 2020
amazing your videos. no equal thing in my language.
Tks bro. God Bless you

[riturajphukan]

One of the problems with the code that occurs when the ball approaches its end of bouncing motion, or generally when the maximum velocity of the ball is smaller can be fixed by putting ->

if (this.y + this.radius >= canvas.height && this.dy >= 0) {
...
}

in the ball.update(); This happens because when the velocity of the ball is reversed, the velocity in the last stages is too low to clear the constraint that we applied, i.e. the y value of the ball on the back way up is still greater than height, causing the balls velocity to be reversed again and the ball sticks to the floor as its velocity direction is changed over and over again. By adding "&& this.dy >= 0", we prevent the velocity from being reversed when the ball is on its way up and hence fixing our problem.

[trithucnguyen]

This is such the best tutorial about canvas that I've ever watched.

[mrdeurknopp]

Hey Chris, I'm really glad to have stumbled upon your videos because they suit my skill level quite well. There are a whole host of absolute beginner tutorials out there but not too many good intermediate ones. I'll make sure to plug your channel whenever I come across someone at the same level as me.

[bennis]

These are the best html canvas tuturials i ever watched. Thank you for your hard work to create these videos. :D

[vaideshshankar]

Combining code with physics seems to be the best combination to create small frontend projects ❤❤. They have much more to learn compared to just creation of website frontend.

[suyci]

And suddenly I can see how pinball was programmed, awesome stuff. Also want to let you know that these videos really help to see what code can do. Just learning one language can put you in such a rut that it becomes boring. This visualization on possibilities is a great help in getting fired up again. Thx mate :)

[youngdochoi]

The quality of this is top notch, man! worth the wait! I wonder though, what's the next episode about? Didn't mention at the end. :(

A little input though, setting up in terminal is not noob friendly. LOL. Nonetheless, I still liked it! Cheers for more tutorials like this!

You're awesome for doing this, don't ever forget that. :)

[Aziz]

Oh yeah! you're back again with canvas stuff! enjoying it truly. Want more regular contents. Greetings from Bangladesh. cheers!

[atulpandey]

chris course, in my opinion one of the best course present in youtube .. I like this course .. I enjoy while creating awesome animation in canvas ... thanks chris for this amazing course

[goldfishbrainjohn]

Chris is the best teacher of teaching canvas. You explained it very well.
Don't know why the views hasn't reached 1M.
I'll finish all of your courses and start to re-learn math in khan Academy.
Any suggestions?

[Polymath]

Thanks again sir, first I watched the lecture after that I made it by my own my confidence is growing day by day thanks alot sir....Love you