Created p5.js code for intersections based on collisions

[Fillister]

I was working on code in p5.JS to identify intersections between objects. I came across your most excellent CollisionDetection examples. Subsequently using that as a template, I have written javascript code to return one or more points of intersection between objects and to draw regular polygons using only an x, y origin location, a radius and number of vertices.

It has been a quite awhile since you developed CollisionDetection, but if you would be interested in what I came up with I am happy to give it to you.

[jeffThompson]

Hi @Fillister, thanks for the offer! I believe there's already a full port of the project into p5.js, though I can't seem to find it here at the moment. I would love to take the time to update this project here but it's definitely on the back burner for now!

I'm going to close this with thanks for the kind offer. If you want to publish your own version using p5.js you're very welcome to, so long as it follows the license!

[GoToLoop]

I believe there's already a full port of the project into p5.js,

https://CrHallberg.com/CollisionDetection/Website/

[Fillister]

Agreed, my focus was not collisions, but rather all the specific points of intersection between the objects. The collisions project was the kernel conceptually. I merely wanted to acknowledge Mr. Thompson's fine efforts.

[jeffThompson]

Ahh sorry Bill, I don't think I understood before! Are you seeing any loss in performance by also getting the point of collision?

[Fillister]

There was no noticeable difference in performance. I used vectors as opposed to individual coordinates. Vector arguments in for points, line end points, rectangle, circle and polygon origins. A Vector array out with one or more intersection coordinates (or null for no intersections).

This is all just calculation, no physical objects. Reviewing your collisions, it occurred to me that polygons are simply collections of lines. I convert rectangles to an array of 4 line segments and the polygon generator I used returns the side line end points in an array (including triangles). That made the code mostly line line or line circle tests. I drew the objects and points of intersection as well, but primarily for testing after the fact.

My interest is in geometric constructions, which I have been drawing manually. During much of the construction I am primarily concerned with intersections and an array of the coordinates gives me a map. Which I plan to use for an attempt at automation. I attached an image of some intersections returned by the code.

[jeffThompson]

Super cool! The polygon examples use this idea of line segments, but the more primitive ones don't since the math is easier and the collision detection should be faster if you don't need the point of collision. Is your code posted somewhere? At some point it would be fantastic to add this as an advanced option for folks who want more info. (Nice diagrams too, BTW!)

[Fillister]

Thank you for the kind acknowledgment, your collisions code inspired me.

I wrote Javascript years ago and enjoyed it. Coming upon p5.js gave me the opportunity to jump back in. As ideas and bits of code have come together I did setup a GitHub account with a private repository. My team of one with no GitHub experience is pretty tentative so far. More just an organized file cabinet at this point. I suspect I will achieve an understanding of the GitHub framework enough to make code public, but my focus has been with Javascript. In gratitude for your efforts on collisions that prompted me to write it, I would be honored to simply give you the code.

There are three js files in intersections. The intersections.js, polygons.js and the p5.js sketch.js file to drive the example processing. Sketch is simply the variables and statements needed to check for and then draw each intersection type as called in intersections, just like collisions. Intersections is written as a stand alone class file, returning arrays of intersection points from called functions. Polygons is also stand alone and generates the map for a regular polygon. Either as an array of individual vertices to be used by beginShape/endShape and Vertex() to create a filled polygon or as vertex pairs from which just the sidelines are drawn (this method for intersections). The user provides the origin position, radius, number of vertices and which array type they want back. There are a few extra bits too. like returning a radius length from a given side length, which can then be used to generate the polygon.