Sg2.9
intersection of two paths
Recent RSS
intersection of two paths
Date:  2. June 2010, 18:42

So next step in the iteration process.

I tried the forum and found that.
And i have quite the same question.

My problem:

I'm trying to make a script that does that:


the dashed line shows the origin of the first circle.

and to achieve that, i need to cut each new iteration of my circles in relation to the already drawn ones


red: to be removed
green: to be kept

.
More precisely, i'd like to remove the shortest (in red in the second image) part of the new circle, whose whole length has been "cut" at the intersection with the former circle(s).
So i guess i'd love some function() that does just that.

path.intersects tells me *if* it intersects (boolean), but not where. The ideal function would give me an Array() of the intersection points by means of which i could then cut the latter circle.

I hope i'm not too confuse explaining.

thanks!

Re: intersection of two paths
Date:  3. June 2010, 15:12

We don't have a function like that - but its quite easy to intersect two circles:

(no need to understand the function itself, just look how its used at the end)

// this function requires 2 circle shaped paths
function intersectCircles(c1, c2) {
	var delta = c1.position - c2.position
	var dist = delta.length;
	var r1 = c1.bounds.width / 2;
	var r2 = c2.bounds.width / 2;
	if (!dist || dist > r1 + r2
	    || dist < Math.abs(r1 - r2)) {
		return; // no solution	
	}

	var ds = dist * dist;
	var rs1 = r1 * r1;
	var rs2 = r2 * r2;
	var a = (rs1 - rs2 + ds) / (2 * dist);
	var h = Math.sqrt(rs1 - a * a);

	var middle = c1.position - delta * a / dist;
	var vector = (c2.position - c1.position) * h / dist;
	vector.angle += (90).toRadians();
	var pointA = middle + vector;
	var pointB = middle - vector;
	return [pointA, pointB];
}

var firstCircle = new Path.Circle(new Point(50, 50), 25);
var secondCircle = new Path.Circle(new Point(100, 50), 35);
var points = intersectCircles(firstCircle, secondCircle);
var first = new Path.Circle(points[0], 5);
var second = new Path.Circle(points[1], 5);

I've also attached the script that I used to make the movie demonstration.

Re: intersection of two paths
From:  Jürg Lehni
Date:  3. June 2010, 16:28

Now that's what I call support, Jonathan. A great solution, and a very nice detail with the background color of the movie matching that of the forum too ;)

I shall look into how Sg can solve this more generally for all kinds of paths. It would be very useful to have a function that returns all intersection points of two paths in an array...

Re: intersection of two paths
Date:  6. June 2010, 22:18

Thank you Jonathan,
I'll look more precisely to your code in the fore coming days.
In the mean time, i found a part of the solution to my problem, but maybe it's a little inelegant.
The only function() i found that intersect the segements is Pathfinder.outline():

document.currentStyle = { fillColor: '#000000', }; //needed for Pathfinder.outline to work

//4 circles that intersect eachother.
// i need to find the longest intersected segment of the last one (c4)
var p1 = new Point(100, 100);
var p2 = new Point(150, 150);
var p3 = new Point(120, 170);
var p4 = new Point(180, 150);

var c1 = new Path.Circle(p1, 100);
var c2 = new Path.Circle(p2, 80);
var c3 = new Path.Circle(p3, 100);
var c4 = new Path.Circle(p4, 80);

var rec = c4.clone();

var paths = Pathfinder.outline([c1, c2, c3, c4]);
var pl = paths.children.length;
var rl = rec.length;
var grp = new Group(); //maybe there's a lighter way than make a group to select the segments i need.


//check against the clone of c4 if the last segments added 
//are shorter than the full c4 perimeter.

var sub = rl; //sub stands here for substraction
while (sub > 1 ) { //there is some delta between the addition of segments and c4.length
	if (paths.children[0].length < sub){
	sub = sub - paths.children[0].length;
	grp.appendTop(paths.children[0]);
	}
}

//keep the longest one of the segment contained in the grp group.
var countgrp = grp.children.length;
while (countgrp > 1 ) {
	if (grp.children[0].length > grp.children[1].length){
	grp.children[1].remove();
	}
	else {
	grp.children[0].remove();
	}
	countgrp--
}	

rec.remove(); //remove the now useless clone

I'm trying now to integrate that sort of tests in my main script which, Jonathan, use your method for drawing arcs.

thank you.

Re: intersection of two paths
Date:  7. June 2010, 16:14

Well, actually my methode is not very practical passed the first two iterations.
Pathfinder.outline() closes the previous open path. So i need to run some more geometric test to remove those closing path before testing the length of the segments of the last circle.

first two iterations
adding the third one
the result of Pathfinder.outline()
the closing paths added by the outline() function
even more closing paths with the fourth iteration

The way to go is maybe to try your methode of the 2 crossing circles. For exemple for the fourth sector s[3], use the constructing circle c[3] to check against the previous sectors (s[2], s[1], s[0]). But in order to do that i maybe need to keep c[2], c[1], c[0] at hand to have c[i].position and do your test.

But then each crossing test with one previous sector (e.g. s[2]) will only give me the intersections with that very sector. if another sector (e.g. s[1]) crosses through, the deduction of the length of my segment for the new sector i can make from the points given by s[2] will be false. I would need yet another test to see if the segment.length i'm testing is not on the path of any other sector!
That's a lot of tests to simply draw a curve :)

Do you think, in a purely logical way (no actual code), that i can achieve the kind of drawings as shown in the first image in the inital post?

Thank you.

Re: intersection of two paths
From:  Jürg Lehni
Date:  7. June 2010, 16:34

Impressive work, Raphael. I just realised you are the same Raphael I briefly went to art school with at ECAL in 2002. Glad you are having fun with our platform, welcome on board! Are you getting back to coding then? How are things otherwise? (I don't mean to hijack your thread, and maybe better to discuss that off-thread...)

Re: intersection of two paths
Date:  7. June 2010, 16:44

Hi Jürg!
Actually i never really began coding! And that's my limitation on this project: i'm learning the logic behind coding, through javascript and Sg. So there's a lot (like a LOT :) of trial and error, before figuring out if i code wrong or if the method i use is inadequate. Plus i lack some basic geometrical knowledge (or memories...), so my high school math book is on the table, and half a dozen webpages about circular geometry and javascript.
:)

Re: intersection of two paths
From:  Jürg Lehni
Date:  10. June 2010, 17:37

Raphael, before you loose your head over this, here an information that should be good news for you:

As I ended up a few times in a situation longing for exactly this feature, I finally went ahead and found a way to implement it. The task was not trivial, but I now have a solution that seems to work reliably and calculates all the intersection points of two paths. What's more, it can not only return the points themselves, but also the location descriptions, containing the curve parameter that can be used to then split the path in exactly this place.

More on this very soon. I just need to wrap up the code a bit before releasing a new version.

Re: intersection of two paths
Date:  12. June 2010, 14:37

Hey Jürg!
That seems good news. Especially now that i see that, in the scripting process, i'll need a way to have the description of the intersections for the [n] new circle for that kind of situation:

and this seem non trivial to say the least... :)

Re: intersection of two paths
From:  Jürg Lehni
Date:  20. July 2010, 16:15

Version 2.8.055 was just uploaded, with a new very convenient feature for you: pathItem.getIntersections(other). I hope the reference is clear enough about how to use it? I shall make some examples very soon.

Scripts
08.08.14, 15:24
15.05.14, 14:23
02.03.14, 19:16
18.11.13, 14:48
22.03.13, 03:05
22.02.13, 15:45
Posts
10.01.17, 16:37
19.02.16, 06:03
19.02.16, 06:00
17.01.16, 11:00
12.01.16, 13:10
25.11.15, 08:19
Script of the Moment
Gearwheels 18.08.08