📃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”
Every video from this channel is nothing else but a masterpiece. Thanks for sharing your knowledge!
Beautifull job!
Thank you, I can finally make my bird flap in flappy bird
Anybody get a mysterious unexpected token error while working on this?
Otherwise great video!
you just explained gravity to me even though I read a book about mechanical physics
you need to learn SCIENCE FOR THIS or not
…that's not really taking into account the weight of each object, a balloon will exhibit different gravity than say, a bowling ball.
Why we need to account y velocity to avoid the balls to stop instantly ? Can you please elaborate ?
https://www.youtube.com/watch?v=Crq8ME0TvUM – javascript canvas color switch from scratch less than 1000 lines of code
Which theme is that for Sublime Text?
this brings world peace…to me
People were doing this in Flash 20 years ago, so my question is: What's the point of doing it now? Are there any practical uses for it?
loop. 01, gravity = gravity + .1 02, vector = vector + gravity + force – mass
When he said "Yeet!" I automatically subscribed and liked
You are awesome
what if we want to add the gravity effect on an image? such as sprite sheet, on which we used drawImage
28:13 This guy is probably in elite stoners (420) group of peoples 😀
I liked the video, but i pressed dislike LIKE A BOSS!
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.
Good vid
Does anyone here has the final code rendered on java script?? It's not working on my end.
>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.
im getting some error in the console called a bootstrap error any idea on how to fix
I am using this with almighty angular framework
nice
Damn awesome.
I just didn't manage to get webpack running/watching for the changes. Thank you for the awesome tutorials!
Bro I didnt understand because of the template
love it
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?
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.
I think you might be my hero
Thank you so much Chris for these amazing tutorials