{"id":13513191,"url":"https://github.com/bmoren/p5.collide2D","last_synced_at":"2025-03-31T00:30:50.997Z","repository":{"id":39068944,"uuid":"48462961","full_name":"bmoren/p5.collide2D","owner":"bmoren","description":"A collision detection library for 2D geometry in p5.js","archived":false,"fork":false,"pushed_at":"2022-07-21T03:34:26.000Z","size":330,"stargazers_count":581,"open_issues_count":13,"forks_count":297,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-16T02:31:39.111Z","etag":null,"topics":["2d-collision-library","collision-detection","hitbox","p5","p5-js","p5-library","p5js","p5js-game","p5xjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bmoren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-23T01:48:22.000Z","updated_at":"2024-10-07T05:49:07.000Z","dependencies_parsed_at":"2022-07-13T10:50:28.393Z","dependency_job_id":null,"html_url":"https://github.com/bmoren/p5.collide2D","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fp5.collide2D","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fp5.collide2D/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fp5.collide2D/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fp5.collide2D/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmoren","download_url":"https://codeload.github.com/bmoren/p5.collide2D/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246399816,"owners_count":20770907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d-collision-library","collision-detection","hitbox","p5","p5-js","p5-library","p5js","p5js-game","p5xjs"],"created_at":"2024-08-01T04:00:43.461Z","updated_at":"2025-03-31T00:30:50.498Z","avatar_url":"https://github.com/bmoren.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# p5.collide2D\n![p5.collide](p5collide2d.png)\n\n#### A 2d collision detection library for p5.js\np5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js.\n\np5.collide2D contains some versions of, and references to, the functions in [Jeffrey Thompson's Collision Detection Book](http://www.jeffreythompson.org/collision-detection/). His code is [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/), so, this is too! I highly, highly, reccomend [reading his book](http://www.jeffreythompson.org/collision-detection/) to better understand all of the details involved in collision detection. Implementing this library into your code will be much easier and more efficent after reading it!\n\nIt's an incredible resource for this kind of work! – [http://www.jeffreythompson.org/collision-detection/](http://www.jeffreythompson.org/collision-detection/)\n\n\u003ca rel=\"license\" href=\"http://creativecommons.org/licenses/by-nc-sa/4.0/\"\u003e\u003cimg alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png\" /\u003e\u003c/a\u003e\n\n## Get Started!\np5.collide2D assumes the default p5.js rectMode(CORNER) and ellipseMode(CENTER).\nAll p5.collide2D functions return `true` if the specified geometry is colliding and `false` if they are not.\n\n### Adding p5.collide2D to your project\n[Download the latest release](https://github.com/bmoren/p5.collide2D/releases/)\n[How to add a library to your p5.js sketch](https://p5js.org/libraries/)\n\n#### CDN Links\n+ https://cdn.jsdelivr.net/npm/p5.collide2d  \n+ https://unpkg.com/p5.collide2d\n\n#### How to use a CDN hosted version of the p5.collide2D library\nTo include the library via a CDN, add the library's CDN link using a `\u003cscript\u003e` tag inside the `index.html` file within your project. \n```html\n\u003c!--\nThis enables the p5.js core library (automatically added within the p5.js web editor).\nYou'll need to include the core p5.js before using p5.collide2D.\n--\u003e\n\u003cscript defer src=\"https://unpkg.com/p5\"\u003e\u003c/script\u003e\n\n\u003c!-- Includes the p5.collide2D addon library --\u003e\n\u003cscript defer src=\"https://unpkg.com/p5.collide2d\"\u003e\u003c/script\u003e\n```\n## Live Examples in the p5.js editor\n  + [Collection of all examples of collision functions](https://editor.p5js.org/p52dcollide/collections/taUUdSGhj)\n  + [Basic Usage](https://editor.p5js.org/p52dcollide/sketches/EKGWIHFYR)\n  + [Button with a callback](https://editor.p5js.org/p52dcollide/sketches/BjDVckvWE)\n  + [Object oriented collision](https://editor.p5js.org/p52dcollide/sketches/HOf1GOY4S)\n  + [Randomly placing objects without touching](https://editor.p5js.org/p52dcollide/sketches/WYb8vT3Mh)\n  + [Swords Game](https://editor.p5js.org/p52dcollide/sketches/DamkQQ2So)\n\n## Using p5.collide2D with vector inputs\np5.collide2D supports vector version of all functions. Use the function names below with `Vector` added on to the name to utilize the vector version of the function. The function's arguments will then take in vectors instead of x/y values. Each of the examples below has a commented example to demonstrate vector usage. We will be updating the documentation and examples in the future to make this distinction more clear. This in no way affects the original functionality of the library.\n```javascript\n// Use vectors as input:\nconst p1 = createVector(100, 100);\nconst mouse = createVector(mouseX, mouseY);\nconst hit = collidePointPointVector(p1, mouse, 10);\n```\n## Documentation Table of Contents\n##### Utility\n  + [collideDebug()](#collidedebug)\n\n##### 2D Collision Detection\n  + [collidePointPoint()](#collidepointpoint)\n  + [collidePointCircle()](#collidepointcircle)\n  + [collidePointEllipse()](#collidepointellipse)\n  + [collidePointRect()](#collidepointrect)\n  + [collidePointLine()](#collidepointline)\n  + [collidePointArc()](#collidepointarc)\n  + [collideRectRect()](#colliderectrect)\n  + [collideCircleCircle()](#collidecirclecircle)\n  + [collideRectCircle()](#colliderectcircle)\n  + [collideLineLine()](#collidelineline)\n  + [collideLineCircle()](#collidelinecircle)\n  + [collideLineRect()](#collidelinerect)\n  + [collidePointPoly()](#collidepointpoly)\n  + [collideCirclePoly()](#collidecirclepoly)\n  + [collideRectPoly()](#colliderectpoly)\n  + [collideLinePoly()](#collidelinepoly)\n  + [collidePolyPoly()](#collidepolypoly)\n  + [collidePointTriangle()](#collidepointtriangle)\n  + [collide 2D primitive triangle](#collide-2d-primitive-triangle)\n\n## p5.collide2D Examples \u0026 Documentation\n#### collideDebug()\n###### collideDebug(debugMode, size, color)\nEnables collision debug mode. Draws an ellipse at the collision point between objects on screen where applicable and calculable.\n+ collideDebug() is applicable to the following:\n+ [collideLineCircle()](#collidelinecircle)\n+ [collideLineLine()](#collidelineline)\n+ [collideLineRect()](#collidelinerect)\n+ [collideCirclePoly()](#collidecirclepoly)\n+ [collideRectPoly()](#colliderectpoly)\n+ [collideLinePoly()](#collidelinepoly)\n+ [collidePolyPoly()](#collidepolypoly)\n```javascript\nfunction setup() {\n  collideDebug(true);\n}\n```\n#### collidePointPoint()\n###### collidePointPoint(x, y, x2, y2, [buffer])\nPoint to point collision with an optional buffer zone.  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/iW0xNDDVm)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    circle(100, 100, 1);       // change to 10,10px size for buffer example\n    circle(mouseX, mouseY, 1); // change to 10,10px size for buffer example\n\n    // No buffer zone, most standard example:\n    hit = collidePointPoint(100, 100, mouseX, mouseY);\n\n    // Buffer of 10 px:\n    // hit = collidePointPoint(100, 100, mouseX, mouseY, 10);\n\n    // Use vectors as input:\n    // const p1    = createVector(100, 100);\n    // const mouse = createVector(mouseX, mouseY);\n    // hit = collidePointPointVector(p1, mouse, 10);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collidePointCircle()\n###### collidePointCircle(pointX, pointY, circleX, circleY, diameter)\nPoint to circle collision in 2D. Assumes ellipseMode(CENTER);  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/PLy8ksEoR)\n```javascript\nvar hit = false;\n\nfunction setup() {\n    createCanvas(400, 400);\n}\n\nfunction draw() {\n    background(255);\n    circle(200, 200, 100);\n    point(mouseX, mouseY);\n\n    hit = collidePointCircle(mouseX, mouseY, 200, 200, 100);\n\n    // Use vectors as input:\n    // const mouse  = createVector(mouseX, mouseY);\n    // const circle = createVector(200, 200);\n    // const diam   = 100;\n    // hit = collidePointCircleVector(mouse, circle, diam);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collidePointEllipse()\n###### collidePointEllipse(pointX, pointY, ellipseX, ellipseY, ellipseWidth, ellipseHeight )\nPoint to ellipse collision.\nIt takes the point, the centre of the ellipse, the major and the minor axes (diameters).\n\n![point ellipse collision](https://user-images.githubusercontent.com/13430702/47784680-98543d80-dd06-11e8-8814-47a37186263a.png)  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/nmVQQ2jEC)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    ellipse(200, 200, 50, 150);\n    point(mouseX, mouseY);\n\n    hit = collidePointEllipse(mouseX, mouseY, 200, 200, 50, 150);\n\n    // Use vectors as input:\n    // const mouse         = createVector(mouseX, mouseY);\n    // const ellipse_start = createVector(200, 200);\n    // const ellipse_size  = createVector(50, 150);\n    // hit = collidePointEllipseVector(mouse, ellipse_start, ellipse_size);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collidePointRect()\n###### collidePointRect(pointX, pointY, x, y, width, height)\nPoint to rect collision in 2D. Assumes rectMode(CORNER);  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/HtWDH-bHv)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    rect(200, 200, 100, 150);\n\n    hit = collidePointRect(mouseX, mouseY, 200, 200, 100, 150);\n\n    // Use vectors as input:\n    // const mouse      = createVector(mouseX, mouseY);\n    // const rect_start = createVector(200, 200);\n    // const rect_size  = createVector(50, 150);\n    // hit = collidePointRectVector(mouse, rect_start, rect_size);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collidePointLine()\n###### collidePointLine(pointX, pointY, x, y, x2, y2, [buffer])\nPoint to line collision in 2D. Includes and optional buffer which expands the hit zone on the line (default buffer is 0.1).  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/IvJPamfGk)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    line(200, 300, 100, 150);\n    point(mouseX, mouseY);\n\n    // Collide point line using the optional buffer with a 0.5 value:\n    hit = collidePointLine(mouseX, mouseY, 200, 300, 100, 150, .5);\n\n    // Use vectors as input:\n    // const mouse  = createVector(mouseX, mouseY);\n    // const p1     = createVector(200, 300);\n    // const p2     = createVector(100, 150);\n    // const buffer = 0.5;\n    // hit = collidePointLineVector(mouse, p1, p2, buffer);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collidePointArc()\n###### collidePointArc(pointX, pointY, arcCenterX, arcCenterY, arcRadius, arcRotationAngle, arcAngle, [buffer])\nPoint to arc collision in 2D.\n\n![point arc example image](https://cloud.githubusercontent.com/assets/9556971/25771905/4a299456-325e-11e7-9455-03bd1396c92d.png)  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/cx7CEAJsJ)\n```javascript\nconst ARC_RADIUS = 100;\nconst ARC_ANGLE = Math.PI / 3;\nconst ROTATION_ANGLE = -Math.PI / 4;\n\nvar hit = false;\n\nfunction draw() {\n    background(220);\n    push();\n\n    // Translate to center of canvas:\n    translate(width / 2, height / 2);\n\n    // Rotate by some angle:\n    rotate(ROTATION_ANGLE);\n\n    fill(180, 220, 210);\n    stroke(10);\n\n    arc(0, 0, 2 * ARC_RADIUS, 2 * ARC_RADIUS, -ARC_ANGLE / 2, ARC_ANGLE / 2, PIE);\n    pop();\n\n    point(mouseX, mouseY);\n    hit = collidePointArc(mouseX, mouseY, width / 2, height / 2, ARC_RADIUS, ROTATION_ANGLE, ARC_ANGLE);\n\n    // Use vectors as input:\n    // const mouse     = createVector(mouseX, mouseY);\n    // const arcCenter = createVector(width / 2, height / 2);\n    // const buffer    = 0.5 //optional buffer\n    // hit = collidePointArcVector(mouse, arcCenter, ARC_RADIUS, ROTATION_ANGLE, ARC_ANGLE /*, buffer */);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideCircleCircle()\n###### collideCircleCircle(circleX, circleY, circleDiameter, circleX2, circleY2, circleDiameter2)\nCircle to circle collision in 2D. Assumes ellipseMode(CENTER);  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/UjArR74hB)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    circle(200, 200, 100);\n    circle(mouseX, mouseY, 150);\n\n    hit = collideCircleCircle(mouseX, mouseY, 150, 200, 200, 100);\n\n    // Use vectors as input:\n    // const mouse  = createVector(mouseX, mouseY);\n    // const circle = createVector(200, 200);\n    // hit = collideCircleCircleVector(mouse, 150, circle, 100);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideRectRect()\n###### collideRectRect(x, y, width, height, x2, y2, width2, height2 )\nRect to rect collision in 2D. Assumes rectMode(CORNER);  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/by-l5Y_cf)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    rect(200, 200, 100, 150);\n    rect(mouseX, mouseY, 50, 75);\n\n    hit = collideRectRect(200, 200, 100, 150, mouseX, mouseY, 50, 75);\n\n    // Use vectors as input:\n    // const rect_start = createVector(200, 200);\n    // const rect_size  = createVector(100, 150);\n    // const mouse      = createVector(mouseX, mouseY);\n    // const rect2_size = createVector(50, 75);\n    // hit = collideRectRectVector(rect_start, rect_size, mouse, rect2_size);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideRectCircle()\n###### collideRectCircle(x1, y1, width1, height1, cx, cy, diameter)\nRect to circle collision in 2D. Assumes rectMode(CORNER) \u0026\u0026 ellipseMode(CENTER);  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/QDTBZgqVd)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    rect(200, 200, 100, 150);\n    circle(mouseX, mouseY, 100);\n\n    hit = collideRectCircle(200, 200, 100, 150, mouseX, mouseY, 100);\n\n    // Use vectors as input:\n    // const mouse      = createVector(mouseX, mouseY);\n    // const rect_start = createVector(200, 200);\n    // const rect_size  = createVector(100, 150);\n    // const radius     = 100;\n    // hit = collideRectCircleVector(rect_start, rect_size, mouse, radius);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideLineLine()\n###### collideLineLine(x1, y1, x2, y2, x3, y3, x4, y4, [calcIntersection])\nLine to line collision in 2D. Takes an optional boolean parameter which calculates the intersection point.\nIf enabled it will return an object containing the x,y position of the collision intersection.\nIf no intersection occurs, it will return an object containing x,y values as false. Has a [debug mode](#collidedebug).  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/WGhIBE1Fe)\n```javascript\n// Basic example:\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    line(200, 300, 100, 150);\n    line(mouseX, mouseY, 350, 50);\n\n    hit = collideLineLine(200, 300, 100, 150, mouseX, mouseY, 350, 50);\n\n    // Use vectors as input:\n    // const p1    = createVector(200, 300);\n    // const p2    = createVector(100, 150);\n    // const mouse = createVector(mouseX, mouseY);\n    // const p4    = createVector(350, 50);\n    // hit = collideLineLineVector(p1, p2, mouse, p4);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/zW0D99RYh)\n\n```javascript\n// Return an object containing the x,y position of the intersection\n// using the optional calcIntersection boolean:\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    line(200, 300, 100, 150);\n    line(mouseX, mouseY, 350, 50);\n\n    hit = collideLineLine(200, 300, 100, 150, mouseX, mouseY, 350, 50, true);\n\n    // Use vectors as input:\n    // const p1    = createVector(200, 300);\n    // const p2    = createVector(100, 150);\n    // const mouse = createVector(mouseX, mouseY);\n    // const p4    = createVector(350, 50);\n    // hit = collideLineLineVector(p1, p2, mouse, p4, true);\n\n    stroke(hit ? color('red') : 0);\n    print('X-intersection:', hit.x);\n    print('Y-intersection:', hit.y);\n}\n```\n#### collideLineCircle()\n###### collideLineCircle(x1,  y1,  x2,  y2,  cx,  cy,  diameter)\nPoint to circle collision in 2D. Has a [debug mode](#collidedebug).  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/1SpUuQpvH)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    line(200, 300, 100, 150);\n    circle(mouseX, mouseY, 50);\n\n    hit = collideLineCircle(200, 300, 100, 150, mouseX, mouseY, 50);\n\n    // Use vectors as input:\n    // const p1       = createVector(200, 300);\n    // const p2       = createVector(100, 150);\n    // const mouse    = createVector(mouseX, mouseY);\n    // const diameter = 50;\n    // hit = collideLineCircleVector(p1, p2, mouse, diameter);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideLineRect()\n###### collideLineRect(x1, y1, x2, y2, rx, ry, rw, rh, [calcIntersection])\nLine to rectangle collision in 2d. Takes and optional boolean parameter which calculates the intersection points.\nIf enables it will return an object containing objects of the top,left,bottom,right X,Y intersection positions.\nIf no intersection occurs, it will return an object containing x,y values as false. Has a [debug mode](#collidedebug).  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/9SGFAmJWY)\n```javascript\n// Basic example:\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    rect(200, 300, 100, 150);\n    line(mouseX, mouseY, 350, 50);\n\n    hit = collideLineRect(mouseX, mouseY, 350, 50, 200, 300, 100, 150);\n\n    // Use vectors as input:\n    // const mouse      = createVector(mouseX, mouseY);\n    // const p2         = createVector(350, 50);\n    // const rect_start = createVector(200, 300);\n    // const rect_size  = createVector(100, 150);\n    // hit = collideLineRectVector(mouse, p2, rect_start, rect_size);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/Lh8SaVtYt)\n```javascript\n// Return an object containing the x,y position of the bottom intersection of the rect\n// using the optional calcIntersection boolean:\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    rect(200, 300, 100, 150);\n    line(mouseX, mouseY, 350, 50);\n\n    hit = collideLineRect(mouseX, mouseY, 350, 50, 200, 300, 100, 150, true);\n\n    // Use vectors as input:\n    // const mouse      = createVector(mouseX, mouseY);\n    // const p2         = createVector(350, 50);\n    // const rect_start = createVector(200, 300);\n    // const rect_size \t= createVector(100, 150);\n    // hit = collideLineRectVector(mouse, p2, rect_start, rect_size, true);\n\n    // Because hit returns an object with .bottom, .top, .left and .right\n    // we have to check if any has hit the rectangle:\n    stroke(\n      hit.bottom.x || hit.bottom.y ||\n      hit.top.x    || hit.top.y ||\n      hit.left.x   || hit.left.y ||\n      hit.right.x  || hit.right.y ? color('red') : 0\n    );\n\n    // Returned object contains top,right,bottom,left objects each containing x,y values:\n    print('bottomX:', hit.bottom.x);\n    print('bottomY:', hit.bottom.y);\n    print('topX:',    hit.top.x);\n    print('topY:',    hit.top.y);\n    print('leftX:',   hit.left.x);\n    print('leftY:',   hit.left.y);\n    print('rightX:',  hit.right.x);\n    print('rightY:',  hit.right.y);\n}\n```\n#### collidePointPoly()\n###### collidePointPoly(pointX,pointY,vectorArray)\nPoint to poly collision in 2D.\nTakes a point x,y and an array of [p5.Vector](http://p5js.org/reference/#/p5/createVector) points which contain the x,y positions of the polygon.\nThis function works with x-sided polygons, and \"collapsed\" polygons where a single polygon shape overlaps itself.  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/YOsnt24Jj)\n```javascript\nvar hit = false;\nconst poly = []; // stores the vertices for our polygon.\n\nfunction setup() {\n    createCanvas(500, 500);\n\n    // Set x,y positions as vecs:\n    poly[0] = createVector(123, 231);\n    poly[1] = createVector(10, 111);\n    poly[2] = createVector(20, 23);\n    poly[3] = createVector(390, 33);\n}\n\nfunction draw() {\n    background(255);\n\n    // Draw the polygon by iterating over the 4 created vectors{x, y} stored in poly[]:\n    beginShape();\n    for (const { x, y } of poly)  vertex(x, y);\n    endShape(CLOSE);\n\n    circle(mouseX, mouseY, 10); // put a small ellipse on our point.\n\n    hit = collidePointPoly(mouseX, mouseY, poly); // 3rd param is an array of vertices.\n\n    // Use vectors as input:\n    // const mouse = createVector(mouseX, mouseY);\n    // hit = collidePointPolyVector(mouse, poly);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideCirclePoly()\n###### collideCirclePoly(x,y,diameter,vectorArray, [interiorCollision])\nCircle to poly collision in 2D. Takes a circle x,y,diameter and an array of [p5.Vector](http://p5js.org/reference/#/p5/createVector) points\nwhich contain the x,y positions of the polygon. This function works with x-sided polygons, and \"collapsed\" polygons\nwhere a single polygon shape overlaps itself. Takes an optional 5th 'true' boolean parameter which enables the collision detection\nif the circle is wholly inside the polygon. The interior detection is off by default\nto save evaluating all of the edges of the polygon a second time. Has a [debug mode](#collidedebug).  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/3mohbMIqL)\n```javascript\nvar hit = false;\nconst poly = []; // stores the vertices for our polygon.\n\nfunction setup() {\n    createCanvas(500, 500);\n    collideDebug(true); // enable debug mode\n\n    // Set x,y positions as vecs:\n    poly[0] = createVector(123, 231);\n    poly[1] = createVector(10, 111);\n    poly[2] = createVector(20, 23);\n    poly[3] = createVector(390, 33);\n}\n\nfunction draw() {\n    background(255);\n\n    // Draw the polygon by iterating over the 4 created vectors{x, y} stored in poly[]:\n    beginShape();\n    for (const { x, y } of poly)  vertex(x, y);\n    endShape(CLOSE);\n\n    circle(mouseX, mouseY, 45);\n\n    hit = collideCirclePoly(mouseX, mouseY, 45, poly);\n\n    // Enable the hit detection if the circle is wholly inside the polygon:\n    // hit = collideCirclePoly(mouseX, mouseY, 45, poly, true);\n\n    // Use vectors as input:\n    // const mouse = createVector(mouseX, mouseY);\n\n    // hit = collideCirclePolyVector(mouse, 45, poly);\n    // Or:\n    // hit = collideCirclePolyVector(mouseX, mouseY, 45, poly, true);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideRectPoly()\n###### collideRectPoly(x,y,width,height,vectorArray, [interiorCollision])\nRect to poly collision in 2D. Takes a rect x,y,width,height and an array of [p5.Vector](http://p5js.org/reference/#/p5/createVector) points\nwhich contain the x,y positions of the polygon. This function works with x-sided polygons,\nand \"collapsed\" polygons where a single polygon shape overlaps itself. Takes an optional 6th 'true' boolean parameter\nwhich enables the collision detection if the rect is wholly inside the polygon.\nThe interior detection is off by default to save evaluating all of the edges of the polygon a second time. Has a [debug mode](#collidedebug).  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/U0gM__qD2)\n```javascript\nvar hit = false;\nconst poly = []; // stores the vertices for our polygon.\n\nfunction setup() {\n    createCanvas(800, 600);\n    collideDebug(true); // enable debug mode\n\n    // Set x,y positions as vecs:\n    poly[0] = createVector(323, 431);\n    poly[1] = createVector(210, 311);\n    poly[2] = createVector(220, 223);\n    poly[3] = createVector(590, 233);\n}\n\nfunction draw() {\n    background(255);\n\n    // Draw the polygon by iterating over the 4 created vectors{x, y} stored in poly[]:\n    beginShape();\n    for (const { x, y } of poly)  vertex(x, y);\n    endShape(CLOSE);\n\n    rect(mouseX, mouseY, 45, 100);\n\n    hit = collideRectPoly(mouseX, mouseY, 45, 100, poly);\n\n    // Enable the hit detection if the rectangle is wholly inside the polygon:\n    // hit = collideRectPoly(mouseX, mouseY, 45, 100, poly, true);\n\n    // Use vectors as input:\n    // const mouse     = createVector(mouseX, mouseY);\n    // const rect_size = createVector(45, 100);\n\n    // hit = collideRectPolyVector(mouse, rect_size, poly);\n    // Or:\n    // hit = collideRectPolyVector(mouse, rect_size, poly, true);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideLinePoly()\n###### collideLinePoly(x1, y1, x2, y2, vertices)\nLine to poly collision in 2D. Takes a line x,y,x2,y2 and an array of [p5.Vector](http://p5js.org/reference/#/p5/createVector) points\nwhich contain the x,y positions of the polygon. This function works with x-sided polygons and \"collapsed\" polygons\nwhere a single polygon shape overlaps itself. Has a [debug mode](#collidedebug).  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/PuSs-b-qh)\n```javascript\nvar hit = false;\nconst poly = Array(16).fill(); // stores the vertices for our polygon.\n\nfunction setup() {\n    createCanvas(500, 400);\n    collideDebug(true); // enable debug mode\n\n    // Generate a 16-sided polygon:\n    const angle = TAU / poly.length;\n    for (var i = 0; i \u003c poly.length; ++i) {\n        const a = angle * i;\n        const x = cos(a) * 100 + 300;\n        const y = sin(a) * 100 + 200;\n        poly[i] = createVector(x, y);\n    }\n}\n\nfunction draw() {\n    background(255);\n\n    // Draw the polygon from the 16 created vectors{x, y} stored in poly[]:\n    beginShape();\n    for (const { x, y } of poly)  vertex(x, y);\n    endShape(CLOSE);\n\n    line(10, 10, mouseX, mouseY);\n\n    hit = collideLinePoly(mouseX, mouseY, 45, 100, poly);\n\n    // Use vectors as input:\n    // const mouse = createVector(mouseX, mouseY);\n    // const p2    = createVector(45, 100);\n    // hit = collideLinePolyVector(mouse, p2, poly);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collidePolyPoly()\n###### collidePolyPoly(polygon1, polygon2, [interiorCollision])\nPolygon to polygon collision in 2D. Takes a 2 arrays of [p5.Vector](http://p5js.org/reference/#/p5/createVector) points\nwhich contain the x,y positions of the polygons. This function works with x-sided polygons,\nand \"collapsed\" polygons where a single polygon shape overlaps itself. Takes an optional 3rd 'true' boolean parameter\nwhich enables the collision detection if the polygon is wholly inside the other polygon.\nThe interior detection is off by default to save evaluating all of the edges of the polygon a second time. Has a [debug mode](#collidedebug).  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/_D8hrOFvC)\n```javascript\n// Example adapted from Jeffrey Thompson:\nvar mouseDiff, hit = false;\nconst poly = Array(8).fill(); // stores the vertices for our polygon.\nconst randomPoly = []; // stores the vertices for our random-sided polygon.\n\nfunction setup() {\n    createCanvas(500, 400);\n    collideDebug(true); // enable debug mode\n\n    mouseDiff = createVector(); // temp vec for randomPoly[]\n\n    // Generate an 8-sided uniform polygon:\n    const angle = TAU / poly.length;\n    for (var i = 0; i \u003c poly.length; ++i) {\n        const a = angle * i;\n        const x = cos(a) * 100 + 300;\n        const y = sin(a) * 100 + 200;\n        poly[i] = createVector(x, y);\n    }\n\n    // Generate a random polygon:\n    for (var a = 0; a \u003c 360; a += random(15, 40)) {\n        const t = radians(a);\n        const x = cos(t) * random(30, 50);\n        const y = sin(t) * random(30, 50);\n        randomPoly.push(createVector(x, y));\n    }\n}\n\nfunction draw() {\n    background(255);\n\n    // Draw the polygon by iterating over the 8 created vectors{x, y} stored in poly[]:\n    beginShape();\n    for (const { x, y } of poly)  vertex(x, y);\n    endShape(CLOSE);\n\n    // Update random polygon to mouse position:\n    mouseDiff.set(mouseX, mouseY).sub(randomPoly[0]);\n    for (const vec of randomPoly)  vec.add(mouseDiff);\n\n    // Draw the random polygon from the created vectors{x, y} stored in randomPoly[]:\n    beginShape();\n    for (const { x, y } of randomPoly)  vertex(x, y);\n    endShape(CLOSE);\n\n    hit = collidePolyPoly(poly, randomPoly, true);\n\n    // Vector version does the same thing, here for completeness:\n    // hit = collidePolyPolyVector(poly, randomPoly, true);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collidePointTriangle()\n###### collidePointTriangle(px, py, x1, y1, x2, y2, x3, y3)\nPoint to triangle collision in 2D. You could use [collidePointPoly()](#collidepointpoly) to do this as well, but this is more efficient.  \n\n[live example](https://editor.p5js.org/p52dcollide/sketches/dEz6jlWHd)\n```javascript\nvar hit = false;\n\nfunction draw() {\n    background(255);\n    triangle(300, 200, 350, 300, 250, 300);\n    circle(mouseX, mouseY, 10);\n\n    hit = collidePointTriangle(mouseX, mouseY, 300, 200, 350, 300, 250, 300);\n\n    // Use vectors as input:\n    // const mouse = createVector(mouseX, mouseY);\n    // const p1    = createVector(300, 200);\n    // const p2    = createVector(350, 300);\n    // const p3    = createVector(250, 300);\n    // hit = collidePointTriangleVector(mouse, p1, p2, p3);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n#### collideCirclePoly()\n###### collideCirclePoly(cx, cy, diameter, vertices, interior)\n###### collide-2d-primitive-triangle\nTo collide any primitive shape into a triangle, use the corresponding primitive shape with a 3 sided-polygon as your triangle.\nNote: you will have to define your triangle using [p5.Vector](http://p5js.org/reference/#/p5/createVector), see example below.\n+ [collideCirclePoly()](#collidecirclepoly) circle to triangle collisions\n+ [collideRectPoly()](#colliderectpoly) rect to triangle collisions\n+ [collideLinePoly()](#collidelinepoly) line to triangle collisions\n+ [collidePolyPoly()](#collidepolypoly) triangle to triangle collisions  \n\n[Live example](https://editor.p5js.org/p52dcollide/sketches/eEhoVQNvP)\n```javascript\nvar hit = false;\nconst triPoly = [];\n\nfunction setup() {\n    createCanvas(500, 400);\n    collideDebug(true); // enable debug mode\n\n    triPoly[0] = createVector(300, 200);\n    triPoly[1] = createVector(350, 300);\n    triPoly[2] = createVector(250, 300);\n}\n\nfunction draw() {\n    background(255);\n\n    // We could for loop over the triPoly[] to draw it with a begin/endShape, but this is simpler: :)\n    triangle(300, 200, 350, 300, 250, 300);\n    // Or:\n    // triangle(triPoly[0].x, triPoly[0].y, triPoly[1].x, triPoly[1].y, triPoly[2].x, triPoly[2].y);\n\n    circle(mouseX, mouseY, 45);\n\n    hit = collideCirclePoly(mouseX, mouseY, 45, triPoly);\n\n    // Use vectors as input:\n    // const mouse    = createVector(mouseX, mouseY);\n    // const diameter = 45;\n    // hit = collideCirclePolyVector(mouse, diameter, triPoly, true);\n\n    stroke(hit ? color('red') : 0);\n    print('colliding?', hit);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmoren%2Fp5.collide2D","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmoren%2Fp5.collide2D","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmoren%2Fp5.collide2D/lists"}