Difference and union crossing paper.js

Question

I am working on a project in paper.js where I need to create new paths based on the intersection, difference and union of the other two. I did some digging and found a math function that interpolates the cubic spline spline, but I was wondering if there are any javascript libraries that did svg-like vector arithmetic. Anyway, I will copy inkscape and convert it to javascript, but you never know. In any case, the mathematical function for interpolating cubic beziers is as follows:

Pointx = (Ax * percent^3) + (Bx * 3 * (percent^2 * (1-percent))) + (Cx * 3 * (percent * (1-percent)^2)) + (Dx * (1-percent)^3) Pointy = (Ay * percent^3) + (By * 3 * (percent^2 * (1-percent))) + (Cy * 3 * (percent * (1-percent)^2)) + (Dy * (1-percent)^3) 

Where A, B, C and D are points for the curve. A is the beginning, D is the end, and B and C are the "control points" that manipulate the curvature between A and D. percent is how far along the curve to calculate on a scale from 0 to 1.

Thus, it would be pretty trivial to arrive using the interpolation function, which returns the point for the provided bezier and the percentage along the bezier. Finding the opposite - the percentage for a given point (or x value or y value) will be difficult. Or even harder when the two beziers intersect (I'm not very good at math). I hope inkscape features provide.

Are there javascript libraries that can quickly do this vector interpolation? If not, I will post the algorithm that I came up with here. Thanks!

Answer 1

What you are looking for is called Boolean operations on polygons.

Paper.js seems to be using pretty good BoolOps now, and they deal directly with Bezier curves. This should be the first choice if you ask me. Here is a good example .

In another scenario, you can polygonize shapes using the De Castellau algorithm and pass them to the Javascript Clipper . If you use high sampling, the visual result is identical to the true curves, but you lose the seductive nature of the paths.

Answer 2

Until I went so far as to say that this is a duplicate question, I believe that you will find excellent information from the answers to this question , since it is very similar.

I found another resource that is not mentioned among the answers to this question here: http://13thparallel.com/archive/bezier-curves/

In addition, the best resource mentioned in this question is given below: http://blog.mackerron.com/2011/01/01/javascript-cubic-splines/

Both of these resources detail specific functions that will do what you are looking for. Although they are not exactly “libraries,” the code will be easily ported to your project for your purposes.