Coding Math: Episode 14 - Collision Detection

[@nazerbs]

If you could show, circles and rectangles colliding that would be awesome!

[@kevnar]

Run a for loop for every point along every side of the rectangle, and do rectangle-point collision on each of those points.

[@erwindaguinotas4653]

Get the distance of every corner of the rectangle to the center and if atleast one if those points have a distance less that the radius, the the rectangle collided with the circle

[@heckmarkus]

@@erwindaguinotas4653 if you only check the 4 corners you will miss collissions of the circle on the lines between the corners.

[@Brahvim]

@@kevnar Expensive (o_0)

[@biglexica7339]

@@kevnar this isn't possible

[@giorgosd3624]

Btw the inRange() function can be done without using min() or max() and still be robust as follows: function inRange(x, a, b) { return x*x - (a+b)*x + a*b

[@ohaRega]

Your channel is genius. I needed it so much. Subscribed. You are amazing. From the bottom of my heart, as an engineering student: thank you VERY much!

[@kevinbee4617]

There is a possible optimization for circle-on-circle collisions. You are doing this: utils.distance(c0, c1)

[@kevinbee4617]

No criticism! Just a remark for the interested viewer.

[@codingmath]

Yes, this is a common optimization for this kind of thing. I didn't mention it here, but it's good to be aware of it, for sure.

[@codingmath]

kevin Bee No problem with criticism. As long as you're not trying to tear me down, I can take it. ;)

[@benjaminhoving]

Simply using the length squared instead of lengths will also work. Just use a distance function that returns: x^2 + y^2 instead of sqrt(x^2 + y^2).

[@Raycast74]

Even though I'm working from processing, your videos are very helpful and the circle circle collision is very easy to implement. Thanks for this very useful content.

[@peeterutsi4028]

How about randomly rotated rectangle vs circle?

[@liam6550]

dunno how the guy in the vid would do it, but I would get the corner points of the rectangle, draw lines between them, and check for any intercept of the lines

[@Hasnain1F]

That becomes complex. What you CAN do is to take each corner of both rects and compare it to the X and Y of your world. If values overlap each other, they are colliding. That's the only thing that comes to my beginner mind.

[@kundanborakb]

In tutorial all examples are based on AABB collision if you want randomly rotated rectangle you should read about SAT(separate axis theorem) .

[@gws5314]

employ an army of employee in an office like tech support to check individually

[@kevnar]

So, you discussed how to detect a collision between circles, which I added to the particles class. Can you give some pointers on how to adjust the motion of two objects that have collided? The simplistic way is to just swap the velocity vectors of the two particles. I added that into the simulation, and checked all the collisions against each other in a nested for loop, and now the balls are bouncing off each other like some sort of insane billiard table. But it's a flawed reaction system. It assumes the collision was dead on, from the center of mass to the other center of mass. It doesn't factor in glancing strikes. A glancing strike would change the angles slightly. It also doesn't factor in the ratios of the masses of the two objects. A tiny ball striking a larger ball wouldn't send the larger ball flying in the other direction. If you can help me out with these factors, that would be awesome.

[@gumbilicious1]

kevnar the physics equations would be elastic and inelastic collision equations. Wikipedia is a good starting place. The basics are that you need to make new resultant vectors once the collision is detected.

[@mothtolias]

hey, I just want to say that I really love this series💙 it's really good and informative, and I feel like I'm learning a lot with them.

[@charliemalmqvist1152]

How would I check for collision if the rectangle is rotated?

[@YOP888]

Awesome! Your channel will be my school now.

[@eduugr]

Hi all! I was following this videos and in this episode I found the "utils" class that *I think* it was not used before and not explained in this video. Is it possible or am I missing something? Thanks for all your work Keith, I'll be very happy to support with donation!!

[@sho1175]

5:23 sqrt is expensive, woudn't it be better to check for: dx * dx + dy * dy

[@KeithPeters]

Asked and answered, probably multiple times.

[@sho1175]

@@KeithPeters you're right, in 110 comments, another asks this ^^ I just didn't read them all before posting, and it didn't appear to the top, but I understand your frustration

[@KeithPeters]

@@sho1175 Not just in this video, but in multiple other videos as well. It's a valid comment. I get it. Writing highly optimized code is not the same as teaching concepts. First you have to understand what you are doing and why. Then you can learn how to make it faster, leaner, etc. I just get tired of explaining that.

[@emmanuels.r9957]

You can make a video of how to resolve collisions, I tried but I find it difficult to locate an a good algorithm

[@TheNo1WarLord]

Sorry if this comment isn't relevant, but what IDE are you writing your code in?

[@MuresanVladMihail]

Sublime Text Editor

[@codingmath]

Yup, Sublime.

[@FernandoBasso]

And sublime is not an IDE, by the way.

[@KeithPeters]

"IDE" is a fuzzy term. I'd say it is. With all the various packages you can install for it, there's very little it can't do.

[@oliveredholm4284]

Sublime Text

[@Jadakra]

What if you intersect a rectangle by another side? Do you have to check for intersections on each corner?

[@jimk907]

Very nice series thank-you. Shouldn't the pointCircle function comparison be '

[@gangstasteve5753]

damn im glad i found this channel

[@zealous_carrot8744]

hey,have ya made any video on rect-rect- collision resolution?

[@frankbruder3097]

Two rectangles _rect1, rect2_ overlap iff the top left corner of rect1 (rect1.x, rect1.y) is within the rectangle formed by extending rect2 to the left and up by the width and height of rect1, that is (rect2.x - rect1.width, rect2.y - rect1.height, rect1.width + rect2.width, rect1.height + rect2.height) Similarly, a circle rectangle collision detection can be transformed to a collision detection between a point and a rounded rectangle, and a rounded rectangle is a union of rectangles and circles. The circle _circle_ collides with the rectangle _rect_ iff the centre point of circle collides with any one of - Rectangle(rect.x - circle.r, rect.y, rect.width + 2*circle.r, rect.height) - Rectangle(rect.x, rect.y - circle.r, rect.width, rect.height + 2*circle.r) - Circle(rect.x, rect.y, circle.r) - Circle(rect.x + rect.width, rect.y, circle.r) - Circle(rect.x, rect.y + rect.height, circle.r) - Circle(rect.x + rect.width, rect.y + rect.height, circle.r)

[@MrSpektorDude]

Thank you so much, you have opened the eyes for me on a subject that I was strugling with somuch, especialy on those rectangle and rectangle collision. I am now my own formula to try and make cube on cobe collision for my three js project. Thank you so much

[@MrSpektorDude]

I am sorry for the horible englisch i am in a hurry to get this working :D

[@1DJLNR]

collision detection is never accurate but more how you want it to be, i always thought the idea was simple, make transparent borders on each object around all object that should never collide..

[@astatat8972]

What if I have lots of shapes? Do I need to make a nested loop to check if they intersect with each other? If so, it will be very inefficient.

[@zachdyer1208]

How would i do collision detection in a roguelike. I have several rooms.

[@jim0_o]

What about objects like the SpaceShip you wrote that with Line and MoveTo wouldn't calculating overlap of stroke on that be pheasablly simple? If I'm not mistaken SVG files (vector graphics for browsers) read like lines or fill between vectors on a canvas (in xml format) so they could be used the same way? (unless JS or HTML5 deals with rendering SVG files on a much lower level) I know I'm commenting a lot and I might be all wrong, I just needed to get the idea down on "paper" so I could move on to your next video.

[@KeithPeters]

Yup the line intersection series that's in progress deals with just that kind of scenario. Should be another episode coming out soon.

[@Technomancr]

For the circle example, you don't need to use Math.sqrt(); You can compare the distance^2 and the relationships stay the same, saving you processor cycles.

[@KeithPeters]

Check the previous comments. Everyone always likes to point this out like it's not something I've known for 15 years. ;)

[@drrobotnik5376]

love the AABB intersection - you do it backwards and the code is simpler! =)

[@TheDorkol5]

im just trying to get one rectangle to hit another and not go through it, i have already did the screen boundries but i can figure out how to get it to not pass through. can anyone point me int the right direction

[@monicaramirez243]

Excellent video!

[@anuraghazra4772]

Hi Folks.. if you can make a episode for SAT(Separating Axis Theorem) then it would be very nice..Thanks in advance

[@ClearNinjaFox]

hey Keith im new to your channel i come from processing sent by Daniel Shiffman, im looking to learn about Trig for coding math, now im a little lost with the syntax as im new to java and now here im being introduce to Js damm...... well im looking to code my humanoid and im guessing i have to learn the coding math such as trig linear algebra for inverse kinematics and even jacobian matrix matrices and all that cray math that just come down to working out math using variables , now is there a reason why i never see algorithm for preventing obj from going thru each other ? i see your approach is to have the obj change colors if the collide but in the real world this is not going to be the case if you collide the only thing you might end up seeing is stars not colors lol SO how can one go about this type of implementation ? if im working out IK and my arm collides with its torso colors lol is not something i want to see in fact i want the arm to stop b4 the collision

[@inferious777]

my question is *how* would one implement this? In a multi entity environment N, e.g 10, 20, 50, or even much more, if we were to check for every possible collision it would take O(N^2), as the amount of possible combinations of two entity collisions is N • N - 1 ~= N^2. This would take an absurdly long amount of time just for collision detection.

[@KeithPeters]

One way I've seen is to divide the scene into a grid and assign each object to each grid cell that it overlaps. Then for each object, you only have to check the objects in the surrounding 8 cells. It's complex to set up, but can wind up saving a lot of checks. The overhead is only worth it if you have a certain number of objects to check.

[@KeithPeters]

aka quad tree kzbin.info/www/bejne/hXvbdpapZdySoac

[@inferious777]

@@KeithPeters Thanks alot! I'll have to look into this.

[@tekaaable]

Love your videos. Im going to take a class i Objectoriented programming i january and using your videos and python/pygame to prepare myself.

[@Zilarrezko]

hmm... in the Love2D community we use function boxCollision(x1, y1, w1, h1, x2, y2, w2, h2) return y1 < y2 + h2 and y2 < y1 + h1 and x1 < x2 + w2 and x2 < x1 + w1 end In lua at least, might save a couple of processes not sure. I was wondering how we could make objects that don't allow collision, aka no overlapping, trying to wrap my head around that.

[@KeithPeters]

Yeah, essentially, that breaks down to the same thing I'm doing, except that I'm allowing for negative widths and heights. Try to make your function allow for that and will get a lot more complex.

[@eminemoriginal1655]

He is pointing to deez nuts in 1:17

[@gingy2828]

:D

[@soyitiel]

dude...

[@Packerman37]

Just found this channel yesterday and I can't get enough! Unfortunately, this video keeps stopping due to an error in the playback! I've tried on my laptop and now here on mobile. Is the problem on my end?

[@KeithPeters]

+Packerman37 It's either your network or a KZbin glitch. The video is fine. :)

[@1DJLNR]

clear your app cache or watch from within a browser on device

[@flashjaysan1]

When I had to think about two rectangles colliding, I'd gone with the point and rectangle collision solution but extended for each corner of a rectangle. If any corner is inside the other rectangle, then it's colliding. I suppose it is less effective than your solution but it was the one I found.

[@KeithPeters]

jérôme Barbier picture a tall rectangle overlapping a wide one, so as to firm a + symbol. None of the corners are within the opposite rectangle.

[@flashjaysan1]

Fantastic! Never thought about this possibility. Thanks for pointing that caveat to me!

[@LuRybz]

What about collision resolution?

[@INNoMATHsforyou]

Sir you are doing a great job.. thank you.

[@elionddh]

how is the name of this programming language that he is using ???

[@NeuonAu]

Amazing quality!

[@YG-ub4dk]

It's incomplete, what if one of the objects is moving at a speed great enough to pass from one side of the other object to its other side in just 1 frame? They never overlap so their collision will not be detected.

[@VinnieSajan]

my brain is growing

[@TheLoLeKGaming]

Great channel!

[@Fire_Rice]

what if one of the rectangles were rotated though?

[@BlueProgamer212]

SAT (Seperating axis theorem) i can't explain this one.

[@Fire_Rice]

thanks.

[@vladislavgusak2309]

It's so cool . It's very simply , but i did't thing of this , thanks .

[@janakmedicos9735]

Detection and prevention.

[@Artur.Baranov]

what if box was rotated? the X range and Y range wouldn't be so useful

[@Jacob_Mango]

ArchiZT you rotate the coordinates around aswell and reorder them in such a way that the calculations will work. Which I don't think you need to reorder them. Just rotate the coords.

[@xkhokokox]

what ide is that?

[@ClearNinjaFox]

+domien van steendam refer to the very first video ever and you will get your answer

[@OkenTheReal]

Sublime Text, check it out! It's awesome!

[@worldofstrings]

your teachings is Fantastic!!! Is your codes copy righted? Can I use your code for a specific project? I maybe want earn revenue with?

[@KeithPeters]

+randy franklin Please use it. That's what it's for! If you want to mention where you learned it that would be great.

[@NDTECH]

👍👍👍👍 nice tutorial

[@fwdflashwebdesign]

Great videos...

[@Nathsnirlgrdgg]

Two rectangles are intersecting iff one corner is in another rectangle. This means you can use the same code for points intersecting rectangles, using the four corners of one rectangle as the points.

[@lorencehernandez9250]

checking point if inside rectangle 4 times is inefficient

[@Arganoid]

That won't detect all collisions. What if you have a tall, thin rectangle and a wide rectangle with a small height, and they overlap like a plus sign?

[@danban2281]

Works perfect!!!

[@spothogarfuneslora5908]

god bless you man

[@programmerpt970]

Man thanks that helps me create a button

[@billybbob18]

Darn. I was hoping this was an example of preemptive detection. I'm trying to know if I'm going to hit something, not when I already did. Lol

[@Ramblingroundys]

You generally define the hit box, for you either create a second hit box representing the proximity test. The test is the same, as is the math. If you treat proximity as collision then what you have is still collision test but using larger hit box..

[@androcoder1389]

what language he use ?? it's not a JavaScript 😕😕

[@KeithPeters]

100% plain old vanilla javascript

[@androcoder1389]

@@KeithPeters thx bro... 😁

[@xamogxusx]

golden

[@JamalNasirTV]

Can someone tell me how you use this in C language?

[@RazorM97]

it's like translating from two different languages, you need to understand how they work

[@FFA704]

This is basic 3rd grade maths, you shouldnt even need an example to implement this

[@gingy2828]

I study C++ and a fuck ton of math at university and I still needed example code.

[@samb443]

i dont study c++ but i was still able to write sample code in it, and im a fucking idiot

[@kylestankovich2199]

Hello. I'm a Sophomore taking Geometry, which means I am by no means "advanced" in Math. I learn like everyone else else, your average Joe lol. So, can anyone recommend a book that would help my math skills for video games without being overly complex?

[@KeithPeters]

I agree. Trigonometry is at the core of almost any kind of graphical programming you'd want to do. There are a bunch of trig related videos here, and yeah, Khan Academy is a great resource as well.

[@szaman6204]

kanał marzenie

[@osere6432]

Math.max fury road

[@debbahisaad109]

Coding trivial collision detection like you do at the pixel level is very very limited in practical use,cpu intensive... what would you do when having to manage hundreds or thousands of objects? Plus you should've provide a broad overview on collision detection first.... use quadtrees or Octrees in 3d, that's how it is done in real world, rarely pixelwise.

[@pumpkinot9900]

What is the point of this video? Rectangles colliding with rectangles is the only hard thing.

[@raven1552]

Zajebiste.

[@katrix422]

too fast

[@katrix422]

Hey kevin... m sorry.. i saw video again nd again . finally got it... sorry once again

[@kelvinsmith4894]

Stop being ANNOYING ... simply slow it down from the player settings or PAUSE it and think,,,

[@nianyiwang6659]

That Math.min() is killing me. Just use recursion!

[@mothtolias]

hey, I just want to say that I really love this series💙 it's really good and informative, and I feel like I'm learning a lot with them.