Collision Detection Between Circles in JavaScript

collision detection is important if you want to build particle systems where elements interact with each other or when you are building javascript games and you want to detect when two objects collide or maybe when you want your canvas animations to interact with regular website elements three of the most common techniques we use for games and creative coding are collision detection between circles rectangles and polygons there are also other potential scenarios and some clever people came up with interesting ways how to detect them with code some are easier than others one of the most useful ones is collision detection between two circles you can detect if two circles collide with javascript very easily the algorithm just takes two center points of our circles and checks if the distance between them is less than the radii of these two circles added together what does that look like in code let me quickly show you let's say we have two javascript objects circle one and circle two they have some coordinates so position on horizontal x-axis and position on vertical y-axis and some radius i connect their center points with a line this line represents distance between center points of these two circles i connect position of circle two to my current mouse position so we can move it around if the distance between these two center points is more than radius of circle one plus radius of circle two we know they can't collide if the distance is the same we know they touch and if the distance is smaller then some of these two radii added together we know the circles overlap they collide to be able to measure distance between two points of a javascript in this case center point of circle 1 and center point of circle 2 we will use simple and very powerful algorithm once you learn this and get comfortable with it you will unlock next level in your coding and animation projects to measure the distance between these two points and check if the circles collide we need to know length of this line we calculated by imagining there is a right angle triangle in between like this in this triangle our distance is actually hypotenuse the longest side of a right triangle opposite to the right angle this is the right angle 90 degrees we know x and y position of center point of circle 1 and we also know x and y position of center point of circle 2. with that we can calculate length of both arms of the right triangle this side is simply just the difference between horizontal x position of center point of circle 2 minus horizontal x position of center point of circle 1. we can do the same thing to calculate this side vertical position of this center point minus vertical position of this center point now we have this imaginary right triangle between our two points we know this side we know this side and we know this is the right angle 90 degrees now we want to know how long is this side hypotenuse of our triangle opposite to the right angle we can achieve that easily with pythagorean theorem it allows us to calculate relations among the three sides of a right triangle imagine we draw squares on top of each line like this pythagorean theorem tells us that the sum of the areas of the two squares around the right angle equals to the area of the square on the hypotenuse c squared is equal to a squared plus b squared that means c is square root of a squared plus b squared if you want to know why this is true check out radu's video i will link it in the video description so distance between center point of circle 1 and center point of circle 2 is a dx times dx which is side a squared plus d y times d y side b squared this would give us a squared value and i want square root so i wrap it in math dot square root like this now we calculated the hypotenuse of the right angle triangle which is the distance between center point of circle one and circle two if the distance is less than radius of circle one plus radius of circle 2 we have collision if the distance is exactly the same number as the sum of radius of circle 1 plus radius of circle 2 we know they touch if the distance is more we know there is some space between the circles and they don't collide if you want to see this technique implemented in an actual project i used it in some of my most popular tutorials for example to create this effect or this game both of these videos are beginner friendly i will link them in the video description another simple collision detection algorithm is between two rectangles if you want to know how that works check out this video

Channel: Franks laboratory

Views: 4,118

Keywords: Collision detection, collision detection javascript, 2d collision detection, collision detection between circles, collision detection between circles in javascript, circle collision detection, javascript game, javascript tutorial, how to detect collision, how to detect collision in javascript, game development, game development for beginners, javascript game tutorial, web development, webdev, front end web developer, franks laboratory, frankslaboratory

Id: rtBCVe3j_24

Length: 5min 6sec (306 seconds)

Published: Fri Jun 11 2021