Collisions Without a Physics Library! (Coding Challenge 184)

[@sagresnaw]

A solid reason for doing your own physics and reinventing the wheel is to build a nice understanding before you throw it all away and use a more functional physics library where we take for granted some of the things that are possible with it.

[@Kid420]

Very well said

[@Lakitu1446]

Fax

[@mariovelez578]

Furthermore, in order to understand how to make a physics engine, I recommend looking at and using pre-existing engines (like Box2D for example) to see how they solve certain problems.

[@qashto]

Agreed! It requires a lot of math to even do something simple like a ball rolling down a slope. In most cases it's better to use a physics library and the most popular 2D physics sim, used in games like Limbo and Angry Birds, is called Box2D. p5play uses a JS implementation of it which is superior to matter.js and also easier to use.

[@pavloburyanov5842]

1000%

[@jabak1450]

This guy is more animated than any of the characters I’ve ever made. It makes a video extremely entertaining.

[@MahBor]

I hope you start doing Coding Challenges regularly again

[@killermonkey1392]

Nice one! For your "overlap correction", I think the proper way to go is to get the particles' relative velocities along the impact vector. Based on this relative velocity and the magnitude of the overlap, you can then compute the time dt by which your simulation overshot the actual collision due to finite framerates, backpropagate the particles by this time step, then update the velocities, and move them forward in time by dt again.

[@deadrat2003]

yeah this would be more accurate

[@abhishekKUMAR-ij7nw]

but isnt the correction method you are suggesting will result in simulation where it feels like no collisionis happening and just velocities are changing, i mean we are correcting this way because when the objects are colliding they will shrink and then return back to their original shape

[@revenevan11]

Very cool and encouraging to see your trial and error steps along the way!

[@Golinth]

This brought back good memories. A friend and I worked on a collision simulator very similar to this for our AP Comp Sci class. Taking physics at the same time, and being able to ask both teachers and begin to figure out and understand the math was a genuinely rewarding process.

[@kevinchopra9111]

Definitely a book worth reading...

[@iminvisibl2u]

As I tried to make a breakout game, I could never figure out how the ball should bounce after it hits something. You have solved my several decade old question. Thank you. Love the show!

[@nyashachiroro2531]

As always I love your enthusiasm when teaching ❤

[@davehock7239]

This was fantastic. Really enjoyed you going through the code and correcting issues as you went along.

[@5dots297]

Loved this, for cs undergrad that have studied physics thoroughly in his/her high school is quite nice to do

[@minijimi]

Awesome job Dan as usual.

[@oldadajbych8123]

The next step: Adding the elastic bodies! Let's add some deformation upon bouncing! ;-))) As a mechanical engineer and amateur programmer, I have really enjoyed this video.

[@AmeeliaK]

Actually, I thought that's what elastic collision meant before watching the video.

[@oldadajbych8123]

@@AmeeliaK Yeah, that's the silliness of the terminology. Rigid bodies make elastic collisions, while elastic bodies make inelastic collisions. Not to mention the plasticity.

[@chitlitlah]

That's what I thought he was going to do at first. You could get a pretty good approximation by simply having them accelerate away from each other when they overlap, and the amount of acceleration would be a function of the distance between them relative to the sum of their radii. Drawing it would be a bit harder, but you could just remove the curves where they overlap and draw a straight chord to show that they're mashed together.

[@mariovelez578]

@@oldadajbych8123 not quite. Rigid bodies can do elastic and inelastic collisions (and everything in between), and soft bodies can do the same. The elasticity of a collision is the ability for the objects to return to their original shape. For rigid bodies, this happens on the microscopic level and at a very small time interval.

[@oldadajbych8123]

@@chitlitlah But it woild be nice if also modulus of elasticity (aside from a mass) was involved in the accleration and overlapping process.

[@kingnathi9451]

Awesome video, reason we love coding and programming. Can't wait to get the book.

[@DipamSen]

Amazing video! Congrats on the new book!

[@TheCodingTrain]

Thanks for all of your help and support!

[@Almethese84]

Just more, please! Whatever you've got the time and energy for. I love your videos; particularly the live stream VODs, because I enjoy watching the entire process (no pun intended) warts and all. Finally, thank you so much for all your hard work and energy fostering such a wonderfully inclusive instructive community!! ❤

[@michaelbare911]

Thanks for this ! The optimized version is fully functionnal and will help me in my class.

[@qashto]

It requires a lot of math to even do something simple like a ball rolling down a slope. In most cases it's better to use a physics library and the most popular 2D physics sim, used in games like Limbo and Angry Birds, is called Box2D. p5play uses a JS implementation of it which is superior to matter.js and also easier to use.

[@kevnar]

Now shut off the wall bouncing, make the particles wrap around, and add a spaceship that lets you shoot the particles. Pew Pew Pew! Asteroids, with collision physics!

[@realcygnus]

Nifty ! These plain old school challenges are hard to beat IMO. & Of course we're interested, you're a legend to MANY bud.

[@GuildOfCalamity]

I wish Daniel would have been around when I started to learn coding. Would love to see you do a follow up with inelastic collisions (including some coefficient of friction/heat).

[@SYNAPSEdwl]

You have created a beautiful book. Thanks. Take care

[@aurichand2548]

Very glad to revise these difficult concepts with you. It will be very good to see inelastic collision simulation.

[@thehypotheticalhuman6166]

I went along with the falling sand problem and been hooked to your channel since. I am loving these coding challenges. To make it even challenging and for learning purposes, I'm implementing them in Vanilla TypeScript without p5.js or any other library, which I can say has been real fun. Please keep doing these challenges!!! And Thanks.

[@ramlongcat]

bought the book immediately -- you manage to explain complex problems with fun and humility like nobody else, truly refreshing! you make it look easy/approachable and this requires a deep understanding of the problem and a lot of talent & work. TL;DR = thank you!

[@abdulkareemalhamdani3060]

one of the best videos actually, I tried to do the math like 8 years ago without using linear algebra (I did not know why linear algebra exists back then). I did the simulation using C# GDX library I believe, and that definitely impacted my choice to be an engineer.

[@Learn_German_Quiz]

This is simply amazing. I'm definitely impressed by how you developed the entire collision detection from scratch. The explanations were clear, and the walk around the code was pretty detailed. Good job!

[@lukasaudir8]

One of the things I love the most about the code train is exactly solving problems with pure vanilla js, It's most important to learn the strategies, calculations and ideas behind the simulations so to make good and confident usage of ready solutions, you'll have a much deeper and better understanding allowing you to use the libraries more effectively, and when you face a problem that the library doesn't solve, you're equipped with the base knowledge to explore the solution yourself... Video with no special library are the best ones

[@pesterenan]

Hey Daniel! I finally watched all the coding challenges! Feels so good to finally catch up! Hahaha Keep up the AWESOME work that you do!

[@TheCodingTrain]

Wow…. all of them?!?!?!

[@pesterenan]

@TheCodingTrain Yes it took a long time, and it was so fun to see how JavaScript was before ES6, you struggling with if/else statements and arrow functions hahaha I didn't know that it was you that made the first Nature of Code book! I read that while I was learning about JS a few years ago, and today I'm a web developer!

[@tsarprince]

28:42 Demn the animator really took an extra mile to cutely draw that out! So impresive!!!!!

[@plastikbeau3695]

Can't wait for part 2 with quadtree for collision check optimization 😁

[@JohnnyBGoods88]

I was working on EXACTLY this, and I got stuck about 1 week ago. Decided to take a break, cause I didn't really want to go over elastic and plastic (non-elastic) high school theory. LOL. now this is here, so I guess it's time go get back to the project... Thank you, Daniel!

[@Danielle-ew1el]

your depth of knowledge is impressive, well done!

[@JoaoVictorCavalcanteMiranda]

Dude, I've never seen you my entire life. How? I'was quite worried about start working and go numb, but you showed me a better way. Thank you!!

[@thehappycoder3760]

Brilliant as per usual. More coding challenges. Unpacking the optimisation would be really interesting.

[@tugamer89]

Now I NEED the inelastic collision simulation!

[@beleggo4532]

Which one?

[@tugamer89]

@@beleggo4532 everyone

[@tzisorey]

I remember doing this for 'fun' in the late 90's, with *_NO_* idea of the math beforehand. I did rather well, in my own opinion, but could only really handle velocities where objects couldnt pass 'through' each other between frames.

[@nagualdesign]

Objects passing through each other sounds like a fascinating problem to solve. Assuming that there was a good solution, it makes me wonder how far you could raise ∆t before it breaks. I mean, you might have had more than one collision between frames. It's a real head scratcher.

[@tzisorey]

@@nagualdesign Never ended up solving it, but I considered checking whether they were moving towards each other both before and after adding their velocity vectors - if they were getting closer before, and further away after, then the closest point wouldve been somewhere 'during' the frame, but trying to figure out exactly where and when..... and then I got a new job, and significantly less free time.

[@beleggo4532]

One thing you can do is to store the shape your object would trace out between frames and then compute collisions with that. A simpler idea is to just store an Line which connects your previous with your current position and check collisions with that

[@tzisorey]

@@beleggo4532 I think I tried that, but the edge case was when two objects collided and bounced mid-frame, and a third object passed between them, avoiding intersecting with the path of either object (based on the centroid of the objects.) Would only happen if one of the objects got accelerated to the point where it was moving multiple object-lengths in a single frame, but since I was simulating objects of multiple sizes and weights, some collisions would do that. But 2t years ago is pushing my recollection a bit.

[@ToyKeeper]

I tried to solve this problem in 9th or 10th grade so I could use it in the graphics / gaming library I was building. I failed. My physics and math teachers couldn't figure it out either. Decades later, it's really satisfying to finally see the solution!

[@roccov3614]

I am now interested in the Nature of Code book. Especially since you love to tackle so diverse challenges, the book must be very interesting.

[@munzeralseed]

Congrats on your new book Dan!

[@luisdss]

Awesome! Do cover more of this (whether its the optimization or the other sort of collision)

[@marcasrealaccount]

The better solution to collision detection of moving circles is to extend the circle into a 3D sheared cylinder and then you solve for the time when the two cylinders touch. A hint is find the distance function between the two circles in motion, then find a solution for when the distance equals the two radii added together, another hint is you can use the squared distance and the sum of the radii squared (r1+r2)², an equation for the diatance could be d(t) = ||(p1 + v1t) - (p2 + v2t)||

[@mariovelez578]

Watching this after I made a 3D rigid body physics engine. I remember the days when I first made this, glad to see you're making it easy and fun for beginners!

[@beleggo4532]

Did you assume elastic collision for angular momenta? This is at least how I did it

[@mariovelez578]

@@beleggo4532 I used a coefficient of restitution to determine the separating velocity at the point of intersection. Calculate how much velocity change a unit impulse in the direction normal to the point of contact would have, (velocity per unit impulse), then invert it to find impulse per unit velocity, then multiply that by the desired velocity change. Finally apply the impulse to each body at the point of collision in equal and opposite directions. I got that formula from the book "Game Physics Engine Development"

[@egonde5895]

Mr. Shiffman we want to see you more. You are an amazing person!!!

[@luizieu]

Great video as always, i love to see the way you are always optimizing your code.

[@erichlof]

Awesome video! As you mentioned, I would like to see how you got the simulation of many particles to run at 60 FPS using a quadtree. A supplemental video like that would allow us to take this to the next level. Thank you!

[@TheCodingTrain]

You can find the source code on the webpage linked in the description!

[@PaulAllsopp-rh5gb]

That was awesome. I've been exploring life particle systems and "like" group interactions, just for fun, so this was really interesting. Thank you, sir! I tip my hat.

[@DenisovichDev]

Haven't been keeping up with the community for a bit because of studies. It's good to see a coding challenge after a bit! I'm excited about the Nature of Code launch. Hopefully it becomes available in India soon. Cheers Dan!

[@TheCodingTrain]

Nice to hear from you!! The book should be available in India if not please message me on Discord!

[@MrBadSmash]

Very cool that you did this video! A few months ago, inspired by some of your other videos, I tried to solve exactly this problem. Without the math education, I never quite got it right. I ended up with some very odd results. I'm five minutes into the video, I've got my old attempt that I wrote in Lua opened up, and I'm excited to see where I went wrong! Also I pre-ordered your book months ago! I'm a big fan!

[@frumbert]

Game of life with particle collision ;) Thanks for the great explainer book!

[@Haagimus]

Your end result immediately made me think of Brownian Motion. I know it's not the same thing but, adding a little random walking to the particles might be cool. 🤙🏻

[@RoboLegoMindstormsPL]

It’s beautiful when KZbin video quality drop when Daniel try 3000 particles

[@francoisgantier4207]

your videos are always amazing ! I remember doing an event driven 2D collision in perl back in college. that was... something XD

[@codejoy-w1e]

اخيرا ، تحدي البرمجة هو قلب هذه القناة 😍

[@kevinbatdorf]

preordered the book after watching this. Cant wait!

[@boemioofworld]

Hey Dan, nice vídeo as always. I am glad you are back, I love your videos and they make me happy! I am looking forward for the new The Nature of Code. I did all chapters of the old one, it was a great experience! I also have the "Learning Processing" book, another great book!

[@hexcrown2416]

Might be cool to go over fixes for tunneling (when one object is moving fast enough towards a ting/small object, it can move completely through that object instead of detecting the collision and resolving it correctly)

[@beleggo4532]

You can create an hull, which is the shape your object would trace out if it could move between two frames with infinite precision. Or you are using a Line.

[@RichardCyburt]

There is a different way to work out the equations of the collision that you might find helpful. Transform v1 and v2 into center of mass and relative velocities. COM is same before/after. Vrel(after)=-a×Vrel(before). a=1 for elastic, a=0 for perfect inelastic. 0

[@Endelin]

Erin Catto, the guy behind the Box2d physics library, posted a cool video "Solver2d Results" where he puts 8 different solvers through a variety of physics simulation tests.

[@quinton-ashley]

Trying using p5play, it makes it easy to use Box2D physics simulation with p5.js!

[@bersi3306]

Super interesting video! Please do the quadtree version. For gamedev/software design the optimization part is the most important/fun! Thank you very much for the free culture you are providing.

[@christerpherhunter930]

Your videos are fascinating to me. Your on-video energy is spectacular! Personally, all my personal and work projects are in Rust as opposed to the JS you use. No matter, your videos are ultra interesting. Thank you!

[@TheCodingTrain]

If you make Rust versions please share them in the passenger showcase!

[@bones-dev]

Can't wait for the new book to come out :)

[@zrodger2296]

I can *always* use a refresher on vector math. Thank you!😊

[@neoncyber2001]

Oh if only I I had this video a few years ago when I was trying to figure out elastic collisions for my own physics library!

[@andradegilmar]

Very cool! I like implement things from the ground to understand better how it works. Even if later I decide to use a library

[@reik2006]

27:00 I agree the correction has to be done. The system can enter physically invalid states because of finite time steps and the overlap correction resets the system to the last valid state which was traversed during the last state transition

[@LithiumDeuteride-6]

Mathematics and physics are important for a programmer. I had to come up with an algorithm for a grenade with a shock fuse, I came up with it. But usually programmers just use a collision callback and detonate a grenade in this callback. Although this is the wrong decision, it is necessary to track the impact, the grenade can be hit not only by a collision with solid geometry, but also by some external force. In general, I use changes in the velocity vector, subtract the current velocity vector from the past and look at its length, this is the impact velocity, if above the threshold, then the ball inside the UDZ presses on the spring-loaded plate on which the striker is fixed with sufficient force so that this striker initiates a capsule, which causes a grenade explosion. The code turned out to be very simple and reliable, the main thing is that it simulates the real UDZ of the RGO and RGN grenades quite well.

[@TheIndolence]

I'd love to see the histogram of speeds and do some thermodynamics! Add other interactions (with radial potentials) and even spin for magnetism models... Physics are your oyster!

[@beleggo4532]

Magnetism is a bit slippery to make sense of in two dimensions though, when you think about it, but would still be interesting to see something there. I personally would just use the normal Lorentz Force, but of course you also need to model acceleration of charges if you wanna be exact, which can lead to early formulas. Then there is also the problem that for magnetism you need speeds close to c. So you need to change some values in your formulae, but then the trajectories could look different, and you know, just a lot of scaling problems to make the animation exact

[@stephan19912710]

Love the video and really curious about the book, congrats :)!!

[@nopetuber]

4:30 Daniel?? We will *always* stick with you

[@Yazan_Majdalawi]

Something about this comment makes me uncomfortable

[@ncot_tech]

At 29:55 my Roku streaming box lost its mind trying to decode the video with all the moving stuff in the corner. Everything turned into MPEG artifacts. It was quite fascinating. Also while I don't enjoy Javascript, the book is interesting to me because I know all the cryptic maths will be explained in code that I can read and make sense of.

[@redpug5042]

now try continuous collision detection. for a start, you can find the time t at which two particles will collide using the quadratic formula with the terms: a = ||v1-v2|| b = 2*dot(v1-v2, p1-p2) c = ||p1-p2|| - (r1+r2)^2

[@chrisjames278]

awesome video, thanks! Just pre-ordered the nature of code book!

[@henrik3657]

I would allways, check for screen bounderies , top, bottom, left , right , if sphere is coliding with these bounderies, then increment or decrement x, y acordingly. Like , if x> 800 { x=x-1 } This is the simple way of doing it.

[@funkyb6598]

Great video! Looking forward to the book.

[@pietrocestola7856]

(v2 - v1)•(x2 - x1) and (v1 - v2)•(x1 - x2) are the same, they therefore trivially have the same sign. The difference in sign is only due to the last term, after the fraction.

[@likwidmocean]

I really enjoy your videos. Do you think tunneling might be worth mentioning? Projectiles going through obstacles rather than bouncing.

[@Sqwince23]

Let's see that inelastic collision example. I wanna hear a nice crisp *Crack* of a billiard ball, or maybe somehow deform the shape in the axis of collision slightly for animation?

[@dimBulb5]

Fun and brilliant as always! Thanks!

[@NowInAus]

Very nice. Can you colour and simulate diffusion by mass of the particles? And yes please do inelastic and make an annoying sound for each collision! Great work

[@sulaimanadewale320]

might be my first book purchase

[@jinitom]

I enjoy experimenting with problems like this, and watching your process. I especially like the idea of using a quad tree to reduce calculations. How do you handle the case where two objects have passed thru each other during the time between each step of the draw loop, and the collision is not detected?

[@pierrebaillargeon9531]

When redistributing the overlap, the distribution should be proportional to their velocity, not just divided equally between the two. Also, it might be possible that pushing them back would move them off-limit, behind a wall.

[@TheCodingTrain]

Ohhhh such a good point!!

[@riccardoluise8630]

Your videos are so motivating man. Thank you immensely 🥰🥰

[@fredesch3158]

Okay, I really wanna buy the book, but shipping to Brazil is $20, and I'm don't have the means to spend $60 in a book right now, but I'll definitely try to get it as soon as I can, your work is amazing Dan!

[@TheCodingTrain]

Search for it on your local online book retailer it should be available! Make sure it’s this newest edition and not the 2012 book. If you can’t find it email [e-mail].

[@TheCodingTrain]

Also don’t feel obligated to buy it of course. You can read it online!!

[@fredesch3158]

@@TheCodingTrain I think it won't be available in local retailers because they usually only sell books in portuguese, but I'll check them all out just to be sure. I wanted to give the support, buying the book anyway because of how amazing your work has been throughout the years, and I'm pretty sure I only work in software dev right now because of your, and a couple other creators', influence, so I own you guys at least the gratitude.

[@cret859]

As alway, a truly nice video. A good recollection of all the 'nature of code' spirit and how to code it ! So nice... What next to do ? Optimize your algorithm and implementation in BASIC to make it run on your vintage Apple ][. May it be able to handle just a dozen of particules ?

[@beautifulsmall]

ok, 40s in im buying that book, building your own physics engine. is multiplying by -1 quicker than v=-v . first principles is actuall alot less scary than most people think, even thermodynamics.

[@jayjasespud]

Always here for a ride on the Coding Train.

[@albertjjimenezp]

Cordial saludo, me encantan tus videos, sigue mejorando y compartiendo día a día, ¿Podrias subir tu libro tambien el google play libros para comprarlo? En muchos paises se nos facilita más comprar la copia digital por este medio. y de nuevo muchisimas gracias por existir :)

[@albertjjimenezp]

I love your videos; keep improving and sharing every day. Could you also upload your book on Google Play Books for purchase? In many countries, it's easier for us to buy the digital copy this way. Once again, thank you so much for existing :)

[@TheCodingTrain]

The book is published by No Starch press you could contact their support to ask if they are distributing it this way!

[@TrollingAround]

I'd love to see the quad tree optimisation.

[@dgo4490]

The circles should also squish when they collide based on the collision vectors. Then have small rigid metal balls vs big and squishy balls.

[@Marksman560]

Did you know, you don't need a timestep really, you can calculate a variable timestep to the moment of impact. Never used in any "modern" game-engine tho.

[@robotbobby9]

(4:27) "This is a very important moment in your life" 😂😂😂 So good!

[@martinmckee5333]

Looking into the math is never a bad thing.

[@TheRealZitroX]

29:54 even my KZbin brakes at this point

[@TheKhalamar]

Funny how the video encoder struggled once you switched to 3k balls

[@julianjackson8756]

Pre-ordered. Can’t wait!

[@QW3RTYUU]

dude! you gave me the nudge necessary to also preorder. I remember the first edition and reading it online was fun. now it'll be in my library forever, aside my unopen vinyls (I have vinyls but no turntables, what a weird thing to do)

[@bookappointmenio]

Hey! it is interesting Great work it is indeed challenging i will get there soon , i like when two circles stuck together! i want more it is motivating

[@2wheels2]

2:25 hey, if you do make your own game with something like C or C++ from scratch, u cant just make this simplification. every frame has a different dT relative the the previous frame. always check the dt of the current frame and use that for your physics.

[@JPlokford]

I find this a lot easier with verlets. Just move the particles apart and that's it.

[@aidennymes6335]

I have a challenge for you: code a QR & barcode scanner from scratch