Tutorial by Examples

// circle objects: { x:, y:, radius: } // return true if the 2 circles are colliding // c1 and c2 are circles as defined above function CirclesColliding(c1,c2){ var dx=c2.x-c1.x; var dy=c2.y-c1.y; var rSum=c1.radius+c2.radius; return(dx*dx+dy*dy<=rSum*rSum); }

// rectangle objects { x:, y:, width:, height: } // return true if the 2 rectangles are colliding // r1 and r2 are rectangles as defined above function RectsColliding(r1,r2){ return !( r1.x>r2.x+r2.width || r1.x+r1.width<r2.x || r1.y>r2.y+r2.height || ...

// rectangle object: { x:, y:, width:, height: } // circle object: { x:, y:, radius: } // return true if the rectangle and circle are colliding function RectCircleColliding(rect,circle){ var dx=Math.abs(circle.x-(rect.x+rect.width/2)); var dy=Math.abs(circle.y-(rect.y+rect.height/2));...

The function in this example returns true if two line segments are intersecting and false if not. The example is designed for performance and uses closure to hold working variables // point object: {x:, y:} // p0 & p1 form one segment, p2 & p3 form the second segment // Retur...

// [x0,y0] to [x1,y1] define a line segment // [cx,cy] is circle centerpoint, cr is circle radius function isCircleSegmentColliding(x0,y0,x1,y1,cx,cy,cr){ // calc delta distance: source point to line start var dx=cx-x0; var dy=cy-y0; // calc delta distance: line start to e...

// var rect={x:,y:,width:,height:}; // var line={x1:,y1:,x2:,y2:}; // Get interseting point of line segment & rectangle (if any) function lineRectCollide(line,rect){ // p=line startpoint, p2=line endpoint var p={x:line.x1,y:line.y1}; var p2={x:line.x2,y:line.y2}; // to...

Use the Separating Axis Theorem to determine if 2 convex polygons are intersecting THE POLYGONS MUST BE CONVEX Attribution: Markus Jarderot @ How to check intersection between 2 rotated rectangles? // polygon objects are an array of vertices forming the polygon // var polygon1=[{x:100,y:100}...

Tests all polygon sides for intersections to determine if 2 polygons are colliding. // polygon objects are an array of vertices forming the polygon // var polygon1=[{x:100,y:100},{x:150,y:150},{x:50,y:150},...]; // The polygons can be both concave and convex // return true if the 2 polygons ...

Tests if the [x,y] point is inside a closed arc. var arc={ cx:150, cy:150, innerRadius:75, outerRadius:100, startAngle:0, endAngle:Math.PI } function isPointInArc(x,y,arc){ var dx=x-arc.cx; var dy=y-arc.cy; var dxy=dx*dx+dy*dy; var rrOuter=arc.outerRadiu...

Tests if the [x,y] point is inside a wedge. // wedge objects: {cx:,cy:,radius:,startAngle:,endAngle:} // var wedge={ // cx:150, cy:150, // centerpoint // radius:100, // startAngle:0, endAngle:Math.PI // } // Return true if the x,y point is inside the closed wedge function is...

Tests if an [x,y] point is inside a circle. // circle objects: {cx:,cy:,radius:,startAngle:,endAngle:} // var circle={ // cx:150, cy:150, // centerpoint // radius:100, // } // Return true if the x,y point is inside the circle function isPointInCircle(x,y,circle){ var dx=x-circ...

Tests if an [x,y] point is inside a rectangle. // rectangle objects: {x:, y:, width:, height: } // var rect={x:10, y:15, width:25, height:20} // Return true if the x,y point is inside the rectangle function isPointInRectangle(x,y,rect){ return(x>rect.x && x<rect.x+rect.width...