Let’s Build a Physics Simulation (PONG: Part 1)

Join me in building a physics simulation from scratch!
Part 2: • Let’s Build a Physics ...
Start here:
playcode.io
Vector Library URL:
labs.minutelabs.io/toolkit/js...
Finished Product:
playcode.io/642557/
----
Tutorial recommendation for programming beginners:
• JavaScript Tutorial fo...
----
If you get something out of the work I do, consider sponsoring me on either:
Github Sponsors: github.com/sponsors/wellcaffe...
Patreon: / minutelabsio
----
Contents
00:00 Introduction
01:35 Getting Started
03:31 Creating an HTML Canvas
06:48 Drawing a circle
11:47 Color Trick for CodePlay
12:51 Making things move (Animation Loop)
18:43 Getting things smooth (Framerate Adjustment)
21:40 Our first physics equation
24:19 Using Vectors
30:15 Bouncing off the walls (Edge Collisions)
36:51 Cleaning up a bit
39:52 What's to come in Part 2

[@hasifaiman]

Dude this is by far the most fun I've ever had doing programming. Kudos 😃 Long time subscriber here btw :-)

[@rowansupernova6274]

I enjoyed watching this and learning JavaScript and code in general, I'm also surprised how much physics is involved in moving an object. loved the video thanks for posting.

[@jeffnc]

Thanks for sharing both the video and the link to the finished product, really fun to follow along and play with the code!

[@janwijbrand]

Cool! Let's see if I can take my son along for this ride!

[@JaX0rton]

I've been a professional programmer for over a decade. I have never found it fun to watch someone else code. This video was oddly satisfying. Kudos mate!

[@AlthenaLuna]

This reminds me of the Computerphile videos doing a similar thing (building Pong with Python).

[@AlthenaLuna]

@the cat This is video 1 of 4, the next videos for each should be linked in the description but they're recent enough that they're near the top in their uploads: kzbin.info/www/bejne/gIOvlZWqbNt-Y6c

[@naturepositive7707]

Thank you.

[@TheBuMHeD]

Looking forward to part 2!

[@user-kr5in9wr1h]

This is a really helpful video, not just for physics and/or coding experts, but for anyone who is interested in understanding reality. You can get a glimpse of how things actually operate in life. I will quote elon musk on that one. 'Physics is a good framework for thinking. ... Boil things down to their fundamental truths and reason up from there.'

[@igoregalado5590]

I have always wanted to successfully make a program, so I started learning HTML for 3 months then stopped because I realized this was not the right language. Next, I learned JavaScript for 5 months then stopped again because I wanted to make a program, not something on a website. Finally, here I am, for 4 months and counting trying to learn Java. I'm on my way. I've been through the pain, I'll get there. Someday. This is a very nice video though, gotta say that.

[@Gaspa79]

You have nodejs for javascript which will let you code basically anything in javascript, in case you're interested

[@shashankchandra1068]

Plz simulate concepts in physics too

[@soufianedev1447]

Thank you

[@vikassrivastava2680]

This is fantastic. I have been wanting to do something like this for quite some time. Thanks a lot. Eagerly waiting for part 2. Also, would love to see F=ma and equations of motion being used sometime in code. Would love to see if those equations can be handled by Vector math using the library that you shared

[@Minutelabsio]

We will get to more physics equations in future projects. Stay tuned!

[@vikassrivastava2680]

@@Minutelabsio Right now I am trying to write a ball drop java script. I am starting with zero initial velocity and some acceleration (just like acceleration due to gravity) and using equations of motion, computing position and velocity at every delta time. Let me know if there is any was of sharing my code for collaboration and you can see if I am missing something. I want to learn alongside having fun.

[@Minutelabsio]

@@vikassrivastava2680 Great that you're playing around with this. I'm actually going to cover acceleration in another video. There is a bit more to say about it than I can write in a comment, but don't worry I'll cover that soon. For now, try just changing the velocity every timestep: velocity.add(acceleration.times(dt))

[@vikassrivastava2680]

@@Minutelabsio Great, I will wit for those videos. In the meantime here is what I am doing function moveCircle() { // compute the position based on equation of motion // s = ut + (1/2) * a * t^2 ball.position.add(ball.velocity.times(dt)); ball.position.add(ball.acceleration.times(0.5).times(dt).times(dt)); ball.velocity.add(ball.acceleration.times(dt)); }

[@ultrio325]

I'm trying to learn oop so I'm doing this and trying to implement an object system at the same time

[@Minutelabsio]

Do you have any questions or confusions about coding interactives? I'll try my best to answer what I can in the comments. If you have suggestions for future topics please let me know! And don't forget to post your versions of PONG! If you get something out of the work I do, consider sponsoring me on either: Github Sponsors: github.com/sponsors/wellcaffeinated Patreon: www.patreon.com/minutelabsio

[@discreet_boson]

This is epic

[@LKDesign]

The _Jeff Goldblum_ of, uh, coding.

[@usama57926]

14:40 Why don't you use *setInterval* instead of *setTimeout* ❓❓❓

[@Minutelabsio]

Great question. Currently, they would do the same thing, you're right. But it's possible to have `dt` change during the animation. The reason for this would be that sometimes doing smaller steps gives better accuracy, and sometimes that affects the physics. That would be difficult to do with `setInterval`.

[@user-dg6pl4pf3f]

저도 이런 것을 만들고 싶습니다! 그저 꿈이지만요

[@usama57926]

19:56 Are use using variable name *dt* as little change in time. Just like we do in *derivatives (dx, dy)* ....❓❓❓

[@Minutelabsio]

Yes!

[@caynebyron]

If you've got a problem with semi-colons then you've got a problem with me and I suggest you let that one marinate.

[@Minutelabsio]

I used to be like you