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

We finish building our version of PONG!
Find Part 1 here: • Let’s Build a Physics ...
Finished Product:
playcode.io/642557/
----
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
00:56 Using vectors for collisions
23:13 Making paddles
32:48 Moving the paddles with the keyboard
44:31 Paddle collisions
53:20 Scoreboard
1:05:51 Conclusion

[@Minutelabsio]

Don't forget to share your playcode links! I'd love to see what you build! As with last time, I'll try my best to answer questions in the comments.

[@ultrio325]

will do Update: All well and good until the part about vectors Update 2: Lost all my code

[@usama57926]

Love your explanation & love method you use to build this game.

[@PowerhouseCell]

This is so fun to even just watch! :D

[@yklcs]

Nice! I'd do the specifics of the animation a bit differently if I were to implement it. 1. Use `requestAnimationFrame` instead of `setTimeout`, and adjust `dt` accordingly 2.1. Use separate `canvas` for the paddles and balls 2.2. Setting `fillStyle` is expensive to call each frame, so just set it globally. Also, constraining the initial randomized velocity vector so that it doesn't take forever to reach the paddles would be nice too.

[@Minutelabsio]

What do you mean "if"? Show us the code, friend!

[@rubensimons3553]

I would love to see some other tutorials.

[@Minutelabsio]

I'm planning on doing more!

[@UnPuntoCircular]

HAHAHAHAHAAHAH aqua is fine, but I prefer royal blue 10:39

[@discreet_boson]

This is awesome

[@usama57926]

Yes I love to see your tutorial on asteroids game.

[@saulcorralsanchez4460]

So nice to start learning both JS and how to code phyisics simulations! After a few hours, and lots of topographical errors, I've made your pong version work. Now it's time to play with it! (with the code I mean) By the way, how do you put double slashes in multiple lines at the same time? Just as you do in min. 19:54 Thanks for the series of videos, trully usefull and enjoyable!

[@Minutelabsio]

Thanks for the kind words! In order to bulk comment you can use ctrl-/ or command-/ on mac. Post your code when you're done!

[@JaX0rton]

Who's doing the text commentary on the video? You're hilarious!

[@JaX0rton]

Thanks for sharing your version. It helped me add my mods quicker. I'm a full-time programmer but I have almost no JS experience so having a template really helped me focus on my ideas and bring them to life and not be super bogged down by language syntax. Here is my modded version: playcode.io/657056 List of features: 1. Spin: Implement newbie spin implementation that changes the direction of the ball based on the relative movement of the paddle and ball. If the paddle is still, simple reflection occurs 2. Exciting starting angles only: Start ball angles are always between 10-70 degrees. Too vertical and too horizontal and the game gets boring. Adding spin onto the ball helps make it exciting again 2. Resets: When a round finishes, the players always start from the center Stylistic code changes: 1. Use JS string interpolation when fetching the document "playerXscore" 2. Other minor readability changes Future features to implement: 1. Implement paddles as a box (4 bounded lines) instead of a single line to avoid weird animation where the ball overlaps the back of the paddle when coming in from an acute angle 2. Progressive increase in paddle and ball speed as a rally (number of successive shots) goes up 3. Implement acceleration for paddle movements (velocity won't go from 0 to max directly but it will go up linearly until an upper bound) Future feature #2 could also be implemented as an acceleration function. Does anyone else have any other ideas for features to implement? +MinuteLabs.io: I have 2 questions for you. 1. Does the game ever stutter for you? This might be because I'm running my laptop off battery and power saver is reducing my CPU clock. I'll test this on AC power next time and see if it's any better. I don't think the GPU needs to kick in for this one (I'm on a newer MBP which has a switchable graphics card) 2. I couldn't find a standard spin implementation so I devised a simplistic one based on my intuition from my days of playing ping pong IRL. Quick searches didn't give me good reference material on how to model the physics behind it (most talked about complex airflow dynamics which I sort of understand from playing the game but don't want to model). Got any tips for me?

[@Minutelabsio]

Looks nice! The stuttering might be because we're doing a naive animation loop (I'll augment this in the next video to optimize it by using requestAnimationFrame) The spin would probably involve adding an angular velocity to the ball which could be stored as a property on the ball. Then when contacting a surface, you'd need a more involved bounce algorithm to handle this. The algorithm gets a bit involved. Look for "moment of inertia" "angular velocity".

[@PolineChan]

i followed the first part, but got a little lost for the second part. i tried to modify to much and when things goes wrong, i don't know what to do lol.

[@PolineChan]

@MinuteLabs.io could you do tutorial on adding gravity to the object. i think it should be recursive call and change the vy. i want your insight on how having it on an object and make it global.

[@Minutelabsio]

That's the next video :)

[@usama57926]

10:53 Are you using *dot product* to find projection .....❓❓❓❓

[@Minutelabsio]

Yes, inside the vector library, the projection function uses a dot product

[@ultrio325]

I'm going to add more to this game of pong I might make

[@Minutelabsio]

cool. share your playcode link!

[@ultrio325]

@@Minutelabsio nope, not yet

[@hasifaiman]

This video is useful for me to get to sleep... Thanks!