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.

[@creativename.]

oh man i just noticed it 😂

[@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.

[@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

[@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!

[@revenevan11]

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

[@MahBor]

I hope you start doing Coding Challenges regularly again

[@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!

[@V.Z.69]

Something tells me you didn't go to college university to learn programming. They force you to take a hundred math classes and physics courses. I'd recommend taking math up to prerequisites to physic and then at least 2 physics courses. Then you will be g2g.

[@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!! ❤

[@realcygnus]

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

[@davehock7239]

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

[@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.

[@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!

[@5dots297]

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

[@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!

[@aurichand2548]

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

[@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!

[@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!

[@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.

[@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

[@minijimi]

Awesome job Dan as usual.

[@nyashachiroro2531]

As always I love your enthusiasm when teaching ❤

[@DipamSen]

Amazing video! Congrats on the new book!

[@TheCodingTrain]

Thanks for all of your help and support!

[@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!!

[@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).

[@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.

[@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!

[@kingnathi9451]

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

[@thehappycoder3760]

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

[@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.

[@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!

[@luizieu]

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

[@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.

[@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.

[@RyanTheEditor_]

I was strongly considering getting the nature of code even tho at this point my skills are pretty good but this video made me really want to get the book. Great vid

[@kevinchopra9111]

Definitely a book worth reading...

[@tsarprince]

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

[@munzeralseed]

Congrats on your new book Dan!

[@CosmicRadishes]

Thanks!

[@TheCodingTrain]

Thank you for the support!

[@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!

[@luisdss]

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

[@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"

[@onetruetroy]

Thank you for showing us how to program and think, not just fit blocks of code together.

[@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

[@Danielle-ew1el]

your depth of knowledge is impressive, well done!

[@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!

[@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. 🤙🏻

[@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!

[@valn1xd873]

the moment he turns it up to 3000, youtube compression just loses completely at 720p lol

[@SYNAPSEdwl]

You have created a beautiful book. Thanks. Take care

[@francoisgantier4207]

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

[@pointer333]

You are a gifted teacher and I love your videos!

[@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

[@kevinbatdorf]

preordered the book after watching this. Cant wait!

[@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.

[@stephan19912710]

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

[@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!

[@frumbert]

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

[@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

[@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.

[@egonde5895]

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

[@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)||

[@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.

[@robotbobby9]

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

[@bones-dev]

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

[@plastikbeau3695]

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

[@tugamer89]

Now I NEED the inelastic collision simulation!

[@beleggo4532]

Which one?

[@tugamer89]

@@beleggo4532 everyone

[@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!

[@dimBulb5]

Fun and brilliant as always! Thanks!

[@chrisjames278]

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

[@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.

[@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.

[@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

[@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?

[@Eysh2009]

I would totally love to see the inelastic collision as well 😅

[@zrodger2296]

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

[@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.

[@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?

[@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!!

[@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)

[@funkyb6598]

Great video! Looking forward to the book.

[@likwidmocean]

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

[@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

[@riccardoluise8630]

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

[@bluetheredpanda]

Hey Dan, thanks for all the amazing videos over the years! I just pre-ordered a copy of the new book, but I wanted to ask a question: will there be a PDF version included so that I can always have it with me? I love physical books and believe they're the best medium for focused reading, but they're not always super handy to move around with and reference quickly. Thanks!

[@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!

[@RoboLegoMindstormsPL]

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

[@misterhiker]

Momentum NOT conserved?? Dan, I love your enthusiasm and dedication. I spent many hours studying your code. I took your elastic collisions code, and added console log the magnitude of the total momentum before and after a collision, it is noticeable different (I adjusted your code, I set mass = 1 for both objects and r = 40 for simplicity). Should the code show this is equal? let momA = particleA.mass * speedA let momB = particleB.mass * speedB console.log(momA + momB) I'm wondering 2 things that I hoped could be commented on: 1. After the collision is detected, is it correct to re adjust the location of the objects based on the impact vector? My thought is that the objects should be adjusted to a position in the reverse direction to their pre impact velocity. 2. Since the objects normally have 2 different velocities, is it correct the adjust their distances equally? I see you have used the same overlap/2 distance as the amount to adjust them. Might it be correct when determining the amount to move each object.to factor in the ratio of their velocities? I tried to make the above 2 changes, but no luck making the code run as I expected. Dan can you let me know if I'm just reading too much into all this? Should I just give up on this? Stan

[@logigen]

I translated it to python and wow! this is so cool!

[@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.

[@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

[@nopetuber]

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

[@Yazan_Majdalawi]

Something about this comment makes me uncomfortable

[@codejoy-w1e]

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

[@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.

[@williamfraser]

Fantastic, thank you for your effort. This is exactly what I need to create a molecular-level aerodynamic simulation. I have just completed your 5hr tutorial on Processing and started exploring your other processing videos. Can this elastic collision engine be created in Processing as well? Which program will cope better with a very high number of particles? P.S. I have found that a relative velocity check during collisions helps to prevent particles from "binding" or flying off-screen. I have only tested it on simple velocity-reversing collisions such as a ball bouncing from a wall or in simple 1D ball-to-ball collisions. At the same time as checking edge overlap I also check the relative velocity. Only if the velocity is closing do I apply v = -v. This gives the particles the chance to separate properly if a single time-step is not sufficient to remove the overlap.

[@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.

[@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 ?

[@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!

[@TheRealZitroX]

29:54 even my KZbin brakes at this point

[@TrollingAround]

I'd love to see the quad tree optimisation.