Html5-canvas Tutorial => Are Line Segment And Rectangle Colliding?

Download html5-canvas (PDF)

html5-canvas

• Getting started with html5-canvas
• Awesome Book
• Awesome Community
• Awesome Course
• Awesome Tutorial
• Awesome YouTube
• Animation
• Charts & Diagrams
• Clearing the screen
• Collisions and Intersections
• Are 2 circles colliding?
• Are 2 convex polygons colliding?
• Are 2 line segments intercepting?
• Are 2 polygons colliding? (both concave and convex polys are allowed)
• Are 2 rectangles colliding?
• Are a circle and rectangle colliding?
• Are a line segment and circle colliding?
• Are line segment and rectangle colliding?
• Is an X,Y point inside a circle?
• Is an X,Y point inside a rectangle?
• Is an X,Y point inside a wedge?
• Is an X,Y point inside an arc?
• Compositing
• Dragging Path Shapes & Images on Canvas
• Images
• Media types and the canvas
• Navigating along a Path
• Path (Syntax only)
• Paths
• Pixel Manipulation with "getImageData" and "putImageData"
• Polygons
• Responsive Design
• Shadows
• Text
• Transformations

html5-canvas

• Getting started with html5-canvas
• Awesome Book
• Awesome Community
• Awesome Course
• Awesome Tutorial
• Awesome YouTube
• Animation
• Charts & Diagrams
• Clearing the screen
• Collisions and Intersections
• Are 2 circles colliding?
• Are 2 convex polygons colliding?
• Are 2 line segments intercepting?
• Are 2 polygons colliding? (both concave and convex polys are allowed)
• Are 2 rectangles colliding?
• Are a circle and rectangle colliding?
• Are a line segment and circle colliding?
• Are line segment and rectangle colliding?
• Is an X,Y point inside a circle?
• Is an X,Y point inside a rectangle?
• Is an X,Y point inside a wedge?
• Is an X,Y point inside an arc?
• Compositing
• Dragging Path Shapes & Images on Canvas
• Images
• Media types and the canvas
• Navigating along a Path
• Path (Syntax only)
• Paths
• Pixel Manipulation with "getImageData" and "putImageData"
• Polygons
• Responsive Design
• Shadows
• Text
• Transformations

html5-canvas Collisions and Intersections Are line segment and rectangle colliding?

Fastest Entity Framework Extensions

Bulk Insert Bulk Delete Bulk Update Bulk Merge

Example

// 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}; // top rect line var q={x:rect.x,y:rect.y}; var q2={x:rect.x+rect.width,y:rect.y}; if(lineSegmentsCollide(p,p2,q,q2)){ return true; } // right rect line var q=q2; var q2={x:rect.x+rect.width,y:rect.y+rect.height}; if(lineSegmentsCollide(p,p2,q,q2)){ return true; } // bottom rect line var q=q2; var q2={x:rect.x,y:rect.y+rect.height}; if(lineSegmentsCollide(p,p2,q,q2)){ return true; } // left rect line var q=q2; var q2={x:rect.x,y:rect.y}; if(lineSegmentsCollide(p,p2,q,q2)){ return true; } // not intersecting with any of the 4 rect sides return(false); } // point object: {x:, y:} // p0 & p1 form one segment, p2 & p3 form the second segment // Get interseting point of 2 line segments (if any) // Attribution: http://paulbourke.net/geometry/pointlineplane/ function lineSegmentsCollide(p0,p1,p2,p3) { var unknownA = (p3.x-p2.x) * (p0.y-p2.y) - (p3.y-p2.y) * (p0.x-p2.x); var unknownB = (p1.x-p0.x) * (p0.y-p2.y) - (p1.y-p0.y) * (p0.x-p2.x); var denominator = (p3.y-p2.y) * (p1.x-p0.x) - (p3.x-p2.x) * (p1.y-p0.y); // Test if Coincident // If the denominator and numerator for the ua and ub are 0 // then the two lines are coincident. if(unknownA==0 && unknownB==0 && denominator==0){return(null);} // Test if Parallel // If the denominator for the equations for ua and ub is 0 // then the two lines are parallel. if (denominator == 0) return null; // test if line segments are colliding unknownA /= denominator; unknownB /= denominator; var isIntersecting=(unknownA>=0 && unknownA<=1 && unknownB>=0 && unknownB<=1) return(isIntersecting); }

Got any html5-canvas Question?

Ask any html5-canvas Questions and Get Instant Answers from ChatGPT AI: ChatGPT answer me! PDF - Download html5-canvas for free Previous Next This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0 This website is not affiliated with Stack Overflow SUPPORT & PARTNERS

• Advertise with us
• Contact us
• Cookie Policy
• Privacy Policy

STAY CONNECTED

Get monthly updates about new articles, cheatsheets, and tricks.

Subscribe Cookie This website stores cookies on your computer. We use cookies to enhance your experience on our website and deliver personalized content. For more details on our cookie usage, please review our Cookie Policy and Privacy Policy Accept all Cookies Leave this website