diff --git a/fatline/COPYING b/fatline/COPYING new file mode 100644 index 00000000..dccb91dc --- /dev/null +++ b/fatline/COPYING @@ -0,0 +1,9 @@ +The MIT License (MIT) + +Copyright (c) 2013 Harikrishnan Gopalakrishnan + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/fatline/Intersect.js b/fatline/Intersect.js new file mode 100644 index 00000000..494551e6 --- /dev/null +++ b/fatline/Intersect.js @@ -0,0 +1,416 @@ + +var EPSILON = 10e-12; +var TOLERANCE = 10e-6; +var MAX_RECURSE = 20; +var MAX_ITERATE = 20; + +/** + * This method is analogous to paperjs#PathItem.getIntersections + */ +function getIntersections2( path1, path2 ){ + // First check the bounds of the two paths. If they don't intersect, + // we don't need to iterate through their curves. + if (!path1.getBounds().touches(path2.getBounds())) + return []; + var locations = [], + curves1 = path1.getCurves(), + curves2 = path2.getCurves(), + length2 = curves2.length, + values2 = [], i; + for (i = 0; i < length2; i++) + values2[i] = curves2[i].getValues(); + for (i = 0, l = curves1.length; i < l; i++) { + var curve1 = curves1[i], + values1 = curve1.getValues(); + var v1Linear = Curve.isLinear(values1); + for (var j = 0; j < length2; j++){ + value2 = values2[j]; + var v2Linear = Curve.isLinear(value2); + if( v1Linear && v2Linear ){ + _getLineLineIntersection(values1, value2, curve1, curves2[j], locations); + } else if ( v1Linear || v2Linear ){ + _getCurveLineIntersection(values1, value2, curve1, curves2[j], locations); + } else { + Curve.getIntersections2(values1, value2, curve1, curves2[j], locations); + } + } + } + return locations; +} + +/** + * This method is analogous to paperjs#Curve.getIntersections + * @param {[type]} v1 + * @param {[type]} v2 + * @param {[type]} curve1 + * @param {[type]} curve2 + * @param {[type]} locations + * @param {[type]} _v1t - Only used for recusion + * @param {[type]} _v2t - Only used for recusion + */ +paper.Curve.getIntersections2 = function( v1, v2, curve1, curve2, locations, _v1t, _v2t, _recurseDepth ) { + _recurseDepth = _recurseDepth ? _recurseDepth + 1 : 1; + // Avoid endless recursion. + // Perhaps we should fall back to a more expensive method after this, but + // so far endless recursion happens only when there is no real intersection and + // the infinite fatline continue to intersect with the other curve outside its bounds! + if( _recurseDepth > MAX_RECURSE ) return; + // cache the original parameter range. + _v1t = _v1t || { t1: 0, t2: 1 }; + _v2t = _v2t || { t1: 0, t2: 1 }; + var v1t = { t1: _v1t.t1, t2: _v1t.t2 }; + var v2t = { t1: _v2t.t1, t2: _v2t.t2 }; + // Get the clipped parts from the original curve, to avoid cumulative errors + var _v1 = Curve.getPart( v1, v1t.t1, v1t.t2 ); + var _v2 = Curve.getPart( v2, v2t.t1, v2t.t2 ); +// markCurve( _v1, '#f0f', true ); +// markCurve( _v2, '#0ff', false ); + var nuT, parts, tmpt = { t1:null, t2:null }, iterate = 0; + // Loop until both parameter range converge. We have to handle the degenerate case + // seperately, where fat-line clipping can become numerically unstable when one of the + // curves has converged to a point and the other hasn't. + while( iterate < MAX_ITERATE && + ( Math.abs(v1t.t2 - v1t.t1) > TOLERANCE || Math.abs(v2t.t2 - v2t.t1) > TOLERANCE ) ){ + ++iterate; + // First we clip v2 with v1's fat-line + tmpt.t1 = v2t.t1; tmpt.t2 = v2t.t2; + var intersects1 = _clipBezierFatLine( _v1, _v2, tmpt ); + // Stop if there are no possible intersections + if( intersects1 === 0 ){ + return; + } else if( intersects1 > 0 ){ + // Get the clipped parts from the original v2, to avoid cumulative errors + // ...and reuse some objects. + v2t.t1 = tmpt.t1; v2t.t2 = tmpt.t2; + _v2 = Curve.getPart( v2, v2t.t1, v2t.t2 ); +// markCurve( _v2, '#0ff', false ); + // Next we clip v1 with nuv2's fat-line + tmpt.t1 = v1t.t1; tmpt.t2 = v1t.t2; + var intersects2 = _clipBezierFatLine( _v2, _v1, tmpt ); + // Stop if there are no possible intersections + if( intersects2 === 0 ){ + return; + }else if( intersects1 > 0 ){ + // Get the clipped parts from the original v2, to avoid cumulative errors + v1t.t1 = tmpt.t1; v1t.t2 = tmpt.t2; + _v1 = Curve.getPart( v1, v1t.t1, v1t.t2 ); + } +// markCurve( _v1, '#f0f', true ); + } + // Get the clipped parts from the original v1 + // Check if there could be multiple intersections + if( intersects1 < 0 || intersects2 < 0 ){ + // Subdivide the curve which has converged the least from the original range [0,1], + // which would be the curve with the largest parameter range after clipping + if( v1t.t2 - v1t.t1 > v2t.t2 - v2t.t1 ){ + // subdivide _v1 and recurse + nuT = ( _v1t.t1 + _v1t.t2 ) / 2.0; + Curve.getIntersections2( v1, v2, curve1, curve2, locations, { t1: _v1t.t1, t2: nuT }, _v2t, _recurseDepth ); + Curve.getIntersections2( v1, v2, curve1, curve2, locations, { t1: nuT, t2: _v1t.t2 }, _v2t, _recurseDepth ); + return; + } else { + // subdivide _v2 and recurse + nuT = ( _v2t.t1 + _v2t.t2 ) / 2.0; + Curve.getIntersections2( v1, v2, curve1, curve2, locations, _v1t, { t1: _v2t.t1, t2: nuT }, _recurseDepth ); + Curve.getIntersections2( v1, v2, curve1, curve2, locations, _v1t, { t1: nuT, t2: _v2t.t2 }, _recurseDepth ); + return; + } + } + // We need to bailout of clipping and try a numerically stable method if + // any of the following are true. + // 1. One of the parameter ranges is converged to a point. + // 2. Both of the parameter ranges have converged reasonably well ( according to TOLERENCE ). + // 3. One of the parameter range is converged enough so that it is *flat enough* to + // calculate line curve intersection implicitly. + // + // Check if one of the parameter range has converged completely to a point. + // Now things could get only worse if we iterate more for the other + // curve to converge if it hasn't yet happened so. + var v1Converged = (Math.abs(v1t.t2 - v1t.t1) < EPSILON), + v2Converged = (Math.abs(v2t.t2 - v2t.t1) < EPSILON); + if( v1Converged || v2Converged ){ + var first = locations[0], + last = locations[locations.length - 1]; + if ((!first || !point.equals(first._point)) + && (!last || !point.equals(last._point))){ + var point = (v1Converged)? curve1.getPointAt(v1t.t1, true) : curve2.getPointAt(v2t.t1, true); + locations.push(new CurveLocation(curve1, null, point, curve2)); + } + return; + } + // Check to see if both parameter ranges have converged or else, + // see if either or both of the curves are flat enough to be treated as lines + if( Math.abs(v1t.t2 - v1t.t1) <= TOLERANCE && Math.abs(v2t.t2 - v2t.t1) <= TOLERANCE ){ + locations.push(new CurveLocation(curve1, v1t.t1, curve1.getPointAt(v1t.t1, true), curve2)); + return; + } else { + var curve1Flat = Curve.isFlatEnough( _v1, /*#=*/ TOLERANCE ); + var curve2Flat = Curve.isFlatEnough( _v2, /*#=*/ TOLERANCE ); + if ( curve1Flat && curve2Flat ) { + _getLineLineIntersection( _v1, _v2, curve1, curve2, locations ); + return; + } else if( curve1Flat || curve2Flat ){ + // Use curve line intersection method while specifying which curve to be treated as line + _getCurveLineIntersection( _v1, _v2, curve1, curve2, locations, curve1Flat ); + return; + } + } + } +}; + +/** + * Clip curve V2 with fat-line of v1 + * @param {Array} v1 - Section of the first curve, for which we will make a fat-line + * @param {Array} v2 - Section of the second curve; we will clip this curve with the fat-line of v1 + * @param {Object} v2t - The parameter range of v2 + * @return {number} -> 0 -no Intersection, 1 -one intersection, -1 -more than one intersection + */ +function _clipBezierFatLine( v1, v2, v2t ){ + // first curve, P + var p0x = v1[0], p0y = v1[1], p3x = v1[6], p3y = v1[7]; + var p1x = v1[2], p1y = v1[3], p2x = v1[4], p2y = v1[5]; + // second curve, Q + var q0x = v2[0], q0y = v2[1], q3x = v2[6], q3y = v2[7]; + var q1x = v2[2], q1y = v2[3], q2x = v2[4], q2y = v2[5]; + // Calculate the fat-line L for P is the baseline l and two + // offsets which completely encloses the curve P. + var d1 = _getSignedDist( p0x, p0y, p3x, p3y, p1x, p1y ) || 0; + var d2 = _getSignedDist( p0x, p0y, p3x, p3y, p2x, p2y ) || 0; + var dmin, dmax; + if( d1 * d2 > 0){ + // 3/4 * min{0, d1, d2} + dmin = 0.75 * Math.min( 0, d1, d2 ); + dmax = 0.75 * Math.max( 0, d1, d2 ); + } else { + // 4/9 * min{0, d1, d2} + dmin = 0.4444444444444444 * Math.min( 0, d1, d2 ); + dmax = 0.4444444444444444 * Math.max( 0, d1, d2 ); + } + // Calculate non-parametric bezier curve D(ti, di(t)) - + // di(t) is the distance of Q from the baseline l of the fat-line, + // ti is equally spaced in [0,1] + var dq0 = _getSignedDist( p0x, p0y, p3x, p3y, q0x, q0y ); + var dq1 = _getSignedDist( p0x, p0y, p3x, p3y, q1x, q1y ); + var dq2 = _getSignedDist( p0x, p0y, p3x, p3y, q2x, q2y ); + var dq3 = _getSignedDist( p0x, p0y, p3x, p3y, q3x, q3y ); + // Find the minimum and maximum distances from l, + // this is useful for checking whether the curves intersect with each other or not. + var mindist = Math.min( dq0, dq1, dq2, dq3 ); + var maxdist = Math.max( dq0, dq1, dq2, dq3 ); + // If the fatlines don't overlap, we have no intersections! + if( dmin > maxdist || dmax < mindist ){ + return 0; + } + var tmp; + if( dq3 < dq0 ){ + tmp = dmin; dmin = dmax; dmax = tmp; + } + var Dt = _convexhull( dq0, dq1, dq2, dq3 ); + // Calculate the convex hull for non-parametric bezier curve D(ti, di(t)) + // Now we clip the convex hulls for D(ti, di(t)) with dmin and dmax + // for the coorresponding t values (tmin, tmax): + // Portions of curve v2 before tmin and after tmax can safely be clipped away + var tmaxdmin = -Infinity, ixd, ixdx, i, len, inv_m; + var tmin = Infinity, tmax = -Infinity, Dtl, dtlx1, dtly1, dtlx2, dtly2; + for (i = 0, len = Dt.length; i < len; i++) { + Dtl = Dt[i]; + dtlx1 = Dtl[0]; dtly1 = Dtl[1]; dtlx2 = Dtl[2]; dtly2 = Dtl[3]; + if( dtly2 < dtly1 ){ + tmp = dtly2; dtly2 = dtly1; dtly1 = tmp; + tmp = dtlx2; dtlx2 = dtlx1; dtlx1 = tmp; + } + // we know that (dtlx2 - dtlx1) is never 0 + inv_m = (dtly2 - dtly1) / (dtlx2 - dtlx1); + if( dmin >= dtly1 && dmin <= dtly2 ){ + ixdx = dtlx1 + (dmin - dtly1) / inv_m; + if ( ixdx < tmin ) tmin = ixdx; + if ( ixdx > tmaxdmin ) tmaxdmin = ixdx; + } + if( dmax >= dtly1 && dmax <= dtly2 ){ + ixdx = dtlx1 + (dmax - dtly1) / inv_m; + if( ixdx > tmax ) tmax = ixdx; + if( ixdx < tmin ) tmin = 0; + } + } + // Return the parameter values for v2 for which we can be sure that the + // intersection with v1 lies within. + if(tmin !== Infinity && tmax !== -Infinity){ + var mindmin = Math.min(dmin, dmax); + var mindmax = Math.max(dmin, dmax); + if( dq3 > mindmin && dq3 < mindmax ){ + tmax = 1; + } + if( dq0 > mindmin && dq0 < mindmax ){ + tmin = 0; + } + if( tmaxdmin > tmax ){ tmax = 1; } +// Debug: Plot the non-parametric graph and hull +// plotD_vs_t( 500, 110, Dt, [dq0, dq1, dq2, dq3], v1, dmin, dmax, tmin, tmax, 1.0 / ( tmax - tmin + 0.3 ) ) + // tmin and tmax are within the range (0, 1). We need to project it to the original + // parameter range for v2. + var v2tmin = v2t.t1; + var tdiff = ( v2t.t2 - v2tmin ); + v2t.t1 = v2tmin + tmin * tdiff; + v2t.t2 = v2tmin + tmax * tdiff; + // If the new parameter range fails to converge by atleast 20% of the original range, + // possibly we have multiple intersections. We need to subdivide one of the curves. + if( (tdiff - ( v2t.t2 - v2t.t1 ))/tdiff >= 0.2 ){ + return 1; + } + } + // TODO: Try checking with a perpendicular fatline to see if the curves overlap + // if it is any faster than this + if( Curve.getBounds( v1 ).touches( Curve.getBounds( v2 ) ) ){ + return -1; + } + return 0; +} + +/** + * Calculate the convex hull for the non-paramertic bezier curve D(ti, di(t)). + * The ti is equally spaced across [0..1] — [0, 1/3, 2/3, 1] for + * di(t), [dq0, dq1, dq2, dq3] respectively. In other words our CVs for the curve are + * already sorted in the X axis in the increasing order. Calculating convex-hull is + * much easier than a set of arbitrary points. + */ +function _convexhull( dq0, dq1, dq2, dq3 ){ + var distq1 = _getSignedDist( 0.0, dq0, 1.0, dq3, 0.3333333333333333, dq1 ); + var distq2 = _getSignedDist( 0.0, dq0, 1.0, dq3, 0.6666666666666666, dq2 ); + // Check if [1/3, dq1] and [2/3, dq2] are on the same side of line [0,dq0, 1,dq3] + if( distq1 * distq2 < 0 ) { + // dq1 and dq2 lie on different sides on [0, q0, 1, q3] + // Convexhull is a quadrilateral and line [0, q0, 1, q3] is NOT part of the convexhull + // so we are pretty much done here. + Dt = [ + [ 0.0, dq0, 0.3333333333333333, dq1 ], + [ 0.3333333333333333, dq1, 1.0, dq3 ], + [ 0.6666666666666666, dq2, 0.0, dq0 ], + [ 1.0, dq3, 0.6666666666666666, dq2 ] + ]; + } else { + // dq1 and dq2 lie on the same sides on [0, q0, 1, q3] + // Convexhull can be a triangle or a quadrilateral and + // line [0, q0, 1, q3] is part of the convexhull. + // Check if the hull is a triangle or a quadrilateral + var dqmin, dqmax, dqapex1, dqapex2; + distq1 = Math.abs(distq1); + distq2 = Math.abs(distq2); + var vqa1a2x, vqa1a2y, vqa1Maxx, vqa1Maxy, vqa1Minx, vqa1Miny; + if( distq1 > distq2 ){ + dqmin = [ 0.6666666666666666, dq2 ]; + dqmax = [ 0.3333333333333333, dq1 ]; + // apex is dq3 and the other apex point is dq0 + // vector dqapex->dqapex2 or the base vector which is already part of c-hull + vqa1a2x = 1.0, vqa1a2y = dq3 - dq0; + // vector dqapex->dqmax + vqa1Maxx = 0.6666666666666666, vqa1Maxy = dq3 - dq1; + // vector dqapex->dqmin + vqa1Minx = 0.3333333333333333, vqa1Miny = dq3 - dq2; + } else { + dqmin = [ 0.3333333333333333, dq1 ]; + dqmax = [ 0.6666666666666666, dq2 ]; + // apex is dq0 in this case, and the other apex point is dq3 + // vector dqapex->dqapex2 or the base vector which is already part of c-hull + vqa1a2x = -1.0, vqa1a2y = dq0 - dq3; + // vector dqapex->dqmax + vqa1Maxx = -0.6666666666666666, vqa1Maxy = dq0 - dq2; + // vector dqapex->dqmin + vqa1Minx = -0.3333333333333333, vqa1Miny = dq0 - dq1; + } + // compare cross products of these vectors to determine, if + // point is in triangles [ dq3, dqMax, dq0 ] or [ dq0, dqMax, dq3 ] + var vcrossa1a2_a1Min = vqa1a2x * vqa1Miny - vqa1a2y * vqa1Minx; + var vcrossa1Max_a1Min = vqa1Maxx * vqa1Miny - vqa1Maxy * vqa1Minx; + if( vcrossa1Max_a1Min * vcrossa1a2_a1Min < 0 ){ + // Point [2/3, dq2] is inside the triangle and the convex hull is a triangle + Dt = [ + [ 0.0, dq0, dqmax[0], dqmax[1] ], + [ dqmax[0], dqmax[1], 1.0, dq3 ], + [ 1.0, dq3, 0.0, dq0 ] + ]; + } else { + // Convexhull is a quadrilateral and we need all lines in the correct order where + // line [0, q0, 1, q3] is part of the convex hull + Dt = [ + [ 0.0, dq0, 0.3333333333333333, dq1 ], + [ 0.3333333333333333, dq1, 0.6666666666666666, dq2 ], + [ 0.6666666666666666, dq2, 1.0, dq3 ], + [ 1.0, dq3, 0.0, dq0 ] + ]; + } + } + return Dt; +} + +// This is basically an "unrolled" version of #Line.getDistance() with sign +// May be a static method could be better! +var _getSignedDist = function( a1x, a1y, a2x, a2y, bx, by ){ + var vx = a2x - a1x, vy = a2y - a1y; + var m = vy / vx, b = a1y - ( m * a1x ); + return ( by - ( m * bx ) - b ) / Math.sqrt( m*m + 1 ); +}; + +/** + * Intersections between curve and line becomes rather simple here mostly + * because of paperjs Numerical class. We can rotate the curve and line so that + * the line is on X axis, and solve the implicit equations for X axis and the curve + */ +var _getCurveLineIntersection = function( v1, v2, curve1, curve2, locations, _other ){ + var i, root, point, vc = v1, vl = v2; + var other = ( _other === undefined )? Curve.isLinear( v1 ) : _other; + if( other ){ + vl = v1; + vc = v2; + } + var l1x = vl[0], l1y = vl[1], l2x = vl[6], l2y = vl[7]; + // rotate both the curve and line around l1 so that line is on x axis + var lvx = l2x - l1x, lvy = l2y - l1y; + // Angle with x axis (1, 0) + var angle = Math.atan2( -lvy, lvx ), sina = Math.sin( angle ), cosa = Math.cos( angle ); + // rotated line and curve values + // (rl1x, rl1y) = (0, 0) + var rl2x = lvx * cosa - lvy * sina, rl2y = lvy * cosa + lvx * sina; + var rvc = []; + for( i=0; i<8; i+=2 ){ + var vcx = vc[i] - l1x, vcy = vc[i+1] - l1y; + rvc.push( vcx * cosa - vcy * sina ); + rvc.push( vcy * cosa + vcx * sina ); + } + var roots = []; + Curve.solveCubic(rvc, 1, 0, roots); + i = roots.length; + while( i-- ){ + root = roots[i]; + if( root >= 0 && root <= 1 ){ + point = Curve.evaluate(rvc, root, true, 0); + // We do have a point on the infinite line. Check if it falls on the line *segment*. + if( point.x >= 0 && point.x <= rl2x ){ + // The actual intersection point + point = Curve.evaluate(vc, root, true, 0); + if( other ) root = null; + var first = locations[0], + last = locations[locations.length - 1]; + if ((!first || !point.equals(first._point)) + && (!last || !point.equals(last._point))) + locations.push( new CurveLocation( curve1, root, point, curve2 ) ); + } + } + } +}; + +var _getLineLineIntersection = function( v1, v2, curve1, curve2, locations ){ + var point = Line.intersect( + v1[0], v1[1], v1[6], v1[7], + v2[0], v2[1], v2[6], v2[7], false); + if (point) { + // Avoid duplicates when hitting segments (closed paths too) + var first = locations[0], + last = locations[locations.length - 1]; + if ((!first || !point.equals(first._point)) + && (!last || !point.equals(last._point))) + // Passing null for parameter leads to lazy determination + // of parameter values in CurveLocation#getParameter() + // only once they are requested. + locations.push(new CurveLocation(curve1, null, point, curve2)); + } +}; diff --git a/fatline/README.md b/fatline/README.md new file mode 100644 index 00000000..9526df04 --- /dev/null +++ b/fatline/README.md @@ -0,0 +1,4 @@ + + +------ +Harikrishnan Gopalakrishnan diff --git a/fatline/intersectStudy.html b/fatline/intersectStudy.html new file mode 100644 index 00000000..9047b1be --- /dev/null +++ b/fatline/intersectStudy.html @@ -0,0 +1,471 @@ + + + + + Poly-bézier path Intersection Study + + + + + + + +
+

Cubic bézier fat-line clipping study (using paperjs)

+ +
+ + + + + + ​ + ​ + + + + + + + + + + + + + + + + + + + + + diff --git a/fatline/intersectTests.js b/fatline/intersectTests.js new file mode 100644 index 00000000..7a3501b8 --- /dev/null +++ b/fatline/intersectTests.js @@ -0,0 +1,826 @@ + +paper.install(window); + +/** + * http://stackoverflow.com/questions/6875625/does-javascript-provide-a-high-resolution-timer + */ +if (window.performance && window.performance.now) { + console.log("Using high performance timer"); + getTimestamp = function() { return window.performance.now(); }; +} else { + if (window.performance && window.performance.webkitNow) { + console.log("Using webkit high performance timer"); + getTimestamp = function() { return window.performance.webkitNow(); }; + } else { + console.log("Using low performance timer"); + getTimestamp = function() { return new Date().getTime(); }; + } +} + +function runTests() { + var caption, pathA, pathB, group, testdata = [], randomtestdata = [], testQueued = 0, testExecuted = 0; + + var container = document.getElementById( 'container' ); + + function runTest(testName, handler) { + var caption = document.createElement('h3'); + var canvas = document.createElement('canvas'); + caption.appendChild(document.createTextNode(testName)); + container.appendChild(caption); + container.appendChild(canvas); + ++testQueued; + setTimeout(function() { + console.log('\n' + testName); + paper.setup(canvas); + var paths = handler(); + var success = testIntersections(paths[0], paths[1], caption, testName, testdata); + if( !success ){ + window.p1 = paths[0].exportSVG(); + window.p2 = paths[1].exportSVG(); + } + testExecuted++; + if( testExecuted === testQueued ){ + plotData(); + } + }, 0); + return caption; + } + + var caption = document.createElement('h3'); + caption.appendChild(document.createTextNode("Randomised tests (may take a while...)")); + container.appendChild(caption); + var canvas = document.createElement('CANVAS'); + container.appendChild( canvas ); + paper.setup( canvas ); + doRandomTests( randomtestdata ); + window.d = randomtestdata; + container.removeChild( canvas ); + + runTest('random', function(){ + pathA = getRandomPath(20); + pathB = getRandomPath(20); + return [pathA, pathB]; + }); + + runTest('failcase 1', function(){ + group = paper.project.importSVG( document.getElementById( 'svgrandom1' ) ); + pathA = group.children[0]; + pathB = group.children[1]; + pathA.style = pathB.style = null; + return [pathA, pathB]; + }); + + runTest('Overlapping circles', function(){ + pathA = new Path.Circle(new Point(80, 110), 50); + pathB = new Path.Circle(new Point(150, 110), 70); + return [pathA, pathB]; + }); + + runTest('Polygon and square', function(){ + pathA = new Path.RegularPolygon(new Point(80, 110), 12, 80); + pathB = new Path.Rectangle(new Point(100, 80), [80, 80] ); + return [pathA, pathB]; + }); + + runTest('Circle and square (overlaps exactly on existing segments)', function(){ + pathA = new Path.Circle(new Point(110, 110), 80); + pathB = new Path.Rectangle(new Point(110, 110), [80, 80] ); + return [pathA, pathB]; + }); + + runTest('Circle and square (existing segments overlaps on curves)', function(){ + pathA = new Path.Circle(new Point(110, 110), 80); + pathB = new Path.Rectangle(new Point(110, 110), [100, 100] ); + return [pathA, pathB]; + }); + + runTest('Square and square (one segment overlaps on a line)', function(){ + pathA = new Path.Rectangle(new Point(80, 125), [50, 50] ); + pathA.rotate( 45 ); + pathB = new Path.Rectangle(new Point(pathA.segments[2].point.x, 110), [80, 80] ); + return [pathA, pathB]; + }); + + runTest('Rectangle and rectangle (overlaps exactly on existing curves)', function(){ + pathA = new Path.Rectangle(new Point(30.5, 50.5), [100, 150]); + pathB = new Path.Rectangle(new Point(130.5, 60.5), [100, 150]); + return [pathA, pathB]; + }); + + runTest('Overlapping stars 1', function(){ + pathA = new Path.Star(new Point(80, 110), 10, 20, 80); + pathB = new Path.Star(new Point(120, 110), 10, 30, 100); + return [pathA, pathB]; + }); + + runTest('Overlapping stars 2', function(){ + pathA = new Path.Star(new Point(110, 110), 20, 20, 80); + pathB = new Path.Star(new Point(110, 110), 6, 30, 100); + return [pathA, pathB]; + }); + + runTest('Circle and banana (multiple intersections within same curve segment)', function(){ + pathA = new Path.Circle(new Point(80, 110), 80); + pathB = new Path.Circle(new Point(130, 110), 80 ); + pathB.segments[3].point = pathB.segments[3].point.add( [ 0, -120 ] ); + return [pathA, pathB]; + }); + + runTest('Maximum possible intersections between 2 cubic bezier curve segments - 9', function(){ + pathA = new Path(); + pathA.add( new Segment( [173, 44], [-281, 268], [-86, 152] ) ); + pathA.add( new Segment( [47, 93], [-89, 100], [240, -239] ) ); + pathA.closed = true; + pathB = pathA.clone(); + pathB.rotate( -90 ); + pathA.translate( [-10,0] ); + pathB.translate( [10,0] ); + return [pathA, pathB]; + }); + + runTest('SVG gears', function(){ + group = paper.project.importSVG( document.getElementById( 'svggears' ) ); + pathA = group.children[0]; + pathB = group.children[1]; + return [pathA, pathB]; + }); + + runTest('Glyphs imported from SVG', function(){ + group = paper.project.importSVG( document.getElementById( 'glyphsys' ) ); + pathA = group.children[0]; + pathB = group.children[1]; + return [pathA, pathB]; + }); + + runTest('CompoundPaths 1', function(){ + group = paper.project.importSVG( document.getElementById( 'glyphsacirc' ) ); + pathA = group.children[0]; + pathB = group.children[1]; + return [pathA, pathB]; + }); + + runTest('CompoundPaths 2 - holes', function(){ + group = paper.project.importSVG( document.getElementById( 'glyphsacirc' ) ); + pathA = group.children[0]; + pathB = new CompoundPath(); + group.children[1].clockwise = true; + pathB.addChild(group.children[1]); + var npath = new Path.Circle([110, 110], 30); + pathB.addChild( npath ); + return [pathA, pathB]; + }); + + runTest('CompoundPaths 3 !', function(){ + group = paper.project.importSVG( document.getElementById( 'svggreenland' ) ); + pathA = group.children[0]; + pathB = group.children[1]; + pathB.scale( 0.5, 1 ).translate( [25.5, 0] ); + // pathA.scale( 2 ); + // pathB.scale( 2 ); + return [pathA, pathB]; + }); + + runTest('CompoundPaths 4 - holes and islands 1', function(){ + group = paper.project.importSVG( document.getElementById( 'glyphsacirc' ) ); + pathA = group.children[0]; + pathB = new CompoundPath(); + group.children[1].clockwise = true; + pathB.addChild(group.children[1]); + var npath = new Path.Circle([40, 80], 20); + pathB.addChild( npath ); + return [pathA, pathB]; + }); + + runTest('CompoundPaths 5 - holes and islands 2', function(){ + group = paper.project.importSVG( document.getElementById( 'glyphsacirc' ) ); + pathA = group.children[0]; + pathB = new CompoundPath(); + group.children[1].clockwise = true; + pathB.addChild(group.children[1]); + var npath = new Path.Circle([40, 80], 20); + pathB.addChild( npath ); + npath = new Path.Circle([120, 110], 30); + pathB.addChild( npath ); + return [pathA, pathB]; + }); + + runTest('CompoundPaths 6 - holes and islands 3', function(){ + group = paper.project.importSVG( document.getElementById( 'glyphsacirc' ) ); + pathA = group.children[0]; + pathB = new CompoundPath(); + var npath = new Path.Circle([110, 110], 100); + pathB.addChild( npath ); + npath = new Path.Circle([110, 110], 60); + pathB.addChild( npath ); + npath = new Path.Circle([110, 110], 30); + pathB.addChild( npath ); + return [pathA, pathB]; + }); + + runTest('CompoundPaths 6 - holes and islands 4 (curves overlap exactly on existing curves)', function(){ + pathA = new Path.Rectangle(new Point(50.5, 50.5), [100, 120]); + pathB = new CompoundPath(); + pathB.addChild( new Path.Rectangle(new Point(140.5, 30.5), [100, 150]) ); + pathB.addChild( new Path.Rectangle(new Point(150.5, 65.5), [50, 100]) ); + // pathB = new Path.Rectangle(new Point(150.5, 80.5), [80, 80] ); + return [pathA, pathB]; + }); + + + // Plot the run times + function plotData(){ + prepareTest( 'Results - Random tests ( Intersections/Curve vs Time)', container, 'big2' ); + plotDataRandom( randomtestdata ); + + prepareTest( 'Results - Boolean tests ( Time taken per test )', container, 'big' ); + var x = 80.5, y = 15.5, width = 500, height = 190, i, txt, ny, + yy = y + height, xx = x + width; + var ppaperfill = new Path(), pfatfill = new Path(); + var ppaper = new Path(), pfat = new Path(); + var max = testdata.reduce(function( a, b ){ return Math.max( a, b.paperTime + b.fatTime ); }, 0) + 20; + var vscale = height / max, hscale = width / testdata.length; + var caxes = '#999', ctxt = '#222', ctxt2 = '#555', cpaper = '#268BD2', cpaperfill ='#B5E1FF', + cfat = '#D33682', cfatfill = '#FFADD4'; + new Path.Line( x, yy, xx, yy ).style.strokeColor = caxes; + new Path.Line( x, yy, x, y ).style.strokeColor = caxes; + for( i = 0; i < 10 ; i++ ){ + ny = yy - vscale * max * i / 10; + new Path.Line( x, ny, x-5, ny ).style.strokeColor = caxes; + txt = new PointText( [x-10, ny] ); + txt.justification = 'right'; + txt.fillColor = (i%2)? ctxt: ctxt2; + txt.content = (max * i / 10).toFixed(1) + ((!i)? ' ms' : ''); + } + ppaperfill.add( new Segment( x, yy ) ); + pfatfill.add( new Segment( x, yy ) ); + var vx = x, clr = ctxt; + var coords = [], avgPaper = 0, avgFat = 0, + maxSpeedup = -Infinity, minSpeedup = Infinity, avgSpeedup = 0; + testdata.map(function(data){ + avgPaper += data.paperTime; + ny = yy - (data.paperTime + data.fatTime) * vscale; + ppaper.add( new Segment([vx, ny]) ); + ppaperfill.add( new Segment([vx, ny]) ); + var np = new Point( vx, ny ); + np._data = data; + np._datatype = 'paper'; + coords.push( np ); + avgFat += data.fatTime; + ny = yy - (data.fatTime) * vscale; + pfat.add( new Segment([vx, ny]) ); + pfatfill.add( new Segment([vx, ny]) ); + np = new Point( vx, ny ); + np._data = data; + np._datatype = 'fat'; + coords.push( np ); + + var speedup = data.paperTime / data.fatTime; + if( speedup > maxSpeedup ) maxSpeedup = speedup; + if( speedup < minSpeedup ) minSpeedup = speedup; + avgSpeedup += speedup; + + new Path.Line( vx, yy, vx, yy + 5 ).style.strokeColor = caxes; + txt = new PointText( [vx, yy+18] ); + txt.justification = 'left'; + txt.fillColor = clr; + txt.content = data.name; + txt.rotate( 30, new Point(vx, yy+10) ); + + if( !data.success ){ + var p = new Path.Line( vx, y, vx, yy ); + p.style.strokeWidth = 5; + p.style.strokeColor = '#f00'; + } + + clr = ( clr === ctxt )? ctxt2 : ctxt; + vx += hscale; + }); + ppaper.style.strokeWidth = 2; + ppaper.style.strokeColor = cpaper; + ppaperfill.add( new Segment( vx-hscale, yy ) ); + ppaperfill.closed = true; + ppaperfill.style.fillColor = cpaperfill; + pfat.style.strokeWidth = 2; + pfat.style.strokeColor = cfat; + pfatfill.add( new Segment( vx-hscale, yy ) ); + pfatfill.closed = true; + pfatfill.style.fillColor = cfatfill; + + avgPaper/= testdata.length; + avgFat/= testdata.length; + avgSpeedup = Math.round(avgSpeedup / testdata.length); + maxSpeedup = Math.round( maxSpeedup ); + minSpeedup = Math.round( minSpeedup ); + ny = Math.round(yy - avgPaper * vscale) + 0.5; + new Path.Line(x, ny, xx, ny).style.strokeColor = cpaper; + txt = new PointText( [xx, ny] ); + txt.justification = 'right'; + txt.fillColor = cpaper; + txt.content = avgPaper.toFixed(1); + ny = Math.round(yy - avgFat * vscale) + 0.5; + new Path.Line(x, ny, xx, ny).style.strokeColor = cfat; + txt = new PointText( [xx, ny] ); + txt.justification = 'right'; + txt.fillColor = cfat; + txt.content = avgFat.toFixed(1); + + txt = new PointText([610, 75]); + txt.justification = 'center'; + txt.fillColor = '#000'; + txt.content = 'fatline vs subdiv'; + new Path.Rectangle( [600, 90], [20, 100] ).style = { fillColor: '#ccc', strokeColor: '#000' }; + ny = 190 - (avgSpeedup - minSpeedup) * 100.0 / (maxSpeedup - minSpeedup); + new Path.Line( [600, ny], [620, ny] ).style = { strokeWidth: 2, strokeColor: '#000' }; + txt = new PointText([630, 95]); + txt.fillColor = '#000'; + txt.content = maxSpeedup; + txt = new PointText([630, 195]); + txt.fillColor = '#000'; + txt.content = minSpeedup; + txt = new PointText([630, ny+5]); + txt.fillColor = '#000'; + txt.content = avgSpeedup + ' times'; + view.draw(); + + var tool = new Tool(); + tool.onMouseMove = function( e ){ + var len = coords.length; + var data = null, dist = Infinity, dst, pnt = null, type = 'paper'; + while( len-- ){ + dst = e.point.getDistance( coords[len], true ); + if( dst < dist ){ + pnt = coords[len]; + data = coords[len]._data; + type = coords[len]._datatype; + dist = dst; + } + } + if( dist > 500 ){ return; } + if( pnt && data ){ + var p = new Path.Line( pnt.x+0.5, y, pnt.x+0.5, yy ); + p.style.strokeColor = '#000'; + p.removeOnMove(); + p = new Path.Circle( pnt, 3 ); + p.style.fillColor = (type === 'fat')? '#D33682' :'#268BD2'; + p.removeOnMove(); + var txt = new PointText( [ 500, 20 ] ); + txt.content = 'subdiv : ' + data.paperTime.toFixed(1) + ' ms'; + txt.fillColor = '#222'; + txt.removeOnMove(); + txt = new PointText( [ 500, 36 ] ); + txt.content = 'fatline : ' + data.fatTime.toFixed(1) + ' ms'; + txt.fillColor = '#222'; + txt.removeOnMove(); + } + }; + } + + + function prepareTest( testName, parentNode, _big ){ + console.log( '\n' + testName ); + var caption = document.createElement('h3'); + caption.appendChild( document.createTextNode( testName ) ); + var canvas = document.createElement('CANVAS'); + canvas.className += ' ' + _big; + parentNode.appendChild( caption ); + parentNode.appendChild( canvas ); + paper.setup( canvas ); + return caption; + } +} + +var pathStyleIx = { + fillColor: new Color( 0.8, 0, 0 ), + strokeColor: new Color( 0, 0, 0 ) +}; + +var pathStyleNormal = { + strokeColor: new Color( 0, 0, 0 ), + // fillColor: new Color( 0, 0, 0, 0.1 ), + strokeWidth: 1 +}; + +var pathStyleBoolean = { + strokeColor: new Color( 0,0,0,0.4 ), + fillColor: new Color( 0, 0, 0, 0.0 ), + strokeWidth: 1 +}; + + +// Better if path1 and path2 fit nicely inside a 200x200 pixels rect +function testIntersections( path1, path2, caption, testname, testdata, nomark) { + var i, l, maxCount = 10, count = maxCount, st, t1, t2, + ixsPaper, ixsFatline, success = false, maxdiff = -Infinity; + try{ + path1.style = path2.style = pathStyleNormal; + + if( !nomark ) console.time('paperjs x ' + maxCount); + st = getTimestamp(); + while(count--){ + ixsPaper = path1.getIntersections( path2 ); + } + t1 = (getTimestamp() - st) / maxCount; + if( !nomark ) console.timeEnd('paperjs x ' + maxCount); + + count = maxCount; + if( !nomark ) console.time('fatline x ' + maxCount); + st = getTimestamp(); + while(count--){ + ixsFatline = getIntersections2( path1, path2 ); + } + t2 = (getTimestamp() - st) / maxCount; + if( !nomark ) console.timeEnd('fatline x ' + maxCount); + + var found = 0, tol = 0.1; + if( ixsFatline.length === ixsPaper.length ){ + for(i=0, l=ixsFatline.length; i= 0; i--) { + annotateCurve( crvs[i], t, c, tc, remove ); + } + var segs = path.segments; + for (i = segs.length - 1; i >= 0; i--) { + annotateSegment( segs[i], t, c, tc, remove, true ); + } +} + +function annotateSegment( s, t, c, tc, remove, skipCurves ) { + if( !s ) return; + c = c || '#000'; + tc = tc || '#ccc'; + t = t || s.index; + if( remove === undefined ){ remove = true; } + var crv = s.curve; + var t1 = crv.getNormal( 0 ).normalize( 10 ); + var p = s.point.clone().add( t1 ); + var cir = new Path.Circle( s.point, 2 ); + cir.style.fillColor = c; + cir.style.strokeColor = tc; + var text = new PointText( p ); + text.justification = 'center'; + text.fillColor = c; + text.content = t; + if( remove ) { + cir.removeOnMove(); + text.removeOnMove(); + } + if( !skipCurves ) { + annotateCurve( s.curveIn, null, c, tc, remove ); + annotateCurve( s.curveOut, null, c, tc, remove ); + } +} + +function annotateCurve( crv, t, c, tc, remove ) { + if( !crv ) return; + c = c || '#000'; + tc = tc || '#ccc'; + t = t || crv.index; + if( remove === undefined ){ remove = true; } + var p = crv.getPoint( 0.57 ); + var t1 = crv.getTangent( 0.57 ).normalize( -10 ); + var p2 = p.clone().add( t1 ); + var l = new Path.Line( p, p2 ).rotate( 30, p ); + var l2 = new Path.Line( p, p2 ).rotate( -30, p ); + p = crv.getPoint( 0.43 ); + var cir = new Path.Circle( p, 8 ); + var text = new PointText( p.subtract( [0, -4] ) ); + text.justification = 'center'; + text.fillColor = tc; + text.content = t; + l.style.strokeColor = l2.style.strokeColor = c; + cir.style.fillColor = c; + if( remove ) { + l.removeOnMove(); + l2.removeOnMove(); + cir.removeOnMove(); + text.removeOnMove(); + } +} + + +// Plot the run times +function plotDataRandom( testdata ){ + var x = 80.5, y = 15.5, width = 500, height = 190, i, txt, ny, + yy = y + height, xx = x + width; + var ppaper = new Path(), pfat = new Path(); + var max = testdata.reduce(function( a, b ){ return Math.max( a, b.paperTime, b.fatTime ); }, 0) + 20; + testdata.sort( function(a,b){ return a.ratio - b.ratio; } ); + var vscale = height / max, hscale = width / testdata.length; + var caxes = '#999', ctxt = '#222', cpaper = '#268BD2', cfat = '#D33682'; + new Path.Line( x, yy, xx, yy ).style.strokeColor = caxes; + new Path.Line( x, yy, x, y ).style.strokeColor = caxes; + for( i = 0; i < 10 ; i++ ){ + ny = yy - vscale * max * i / 10; + new Path.Line( x, ny, x-5, ny ).style.strokeColor = caxes; + txt = new PointText( [x-10, ny] ); + txt.justification = 'right'; + txt.fillColor = ctxt; + txt.content = (max * i / 10).toFixed(1) + ((!i)? ' ms' : ''); + } + txt = new PointText([xx + 20, yy + 18 ]); + txt.justification = 'left'; + txt.fillColor = ctxt; + txt.content = 'ixs / curve'; + txt = new PointText([xx + 20, yy + 40]); + txt.justification = 'left'; + txt.fillColor = '#999'; + txt.content = '( Total Curves )'; + var vx = x, step = 15, count = 0; + var avgPaper = 0, avgFat = 0; + testdata.map(function(data){ + avgPaper += data.paperTime; + ny = yy - (data.paperTime + data.fatTime) * vscale; + ppaper.add( new Segment([vx, ny]) ); + avgFat += data.fatTime; + ny = yy - (data.fatTime) * vscale; + pfat.add( new Segment([vx, ny]) ); + + new Path.Line( vx, yy, vx, yy + 5 + ((count%2)? step:0) ).style.strokeColor = caxes; + txt = new PointText( [vx, yy+18 + ((count%2)? step:0) ] ); + txt.justification = 'center'; + txt.fillColor = ctxt; + txt.content = data.ratio.toFixed(1); + txt = new PointText( [vx -5, yy+40 ] ); + txt.justification = 'left'; + txt.fillColor = '#999'; + txt.content = data.curves; + txt.rotate( 90, [vx-5, yy+40 ] ); + + if( !data.success ){ + var p = new Path.Line( vx, y, vx, yy ); + p.style.strokeWidth = 5; + p.style.strokeColor = '#f00'; + } + ++count; + vx += hscale; + }); + ppaper.smooth(); + ppaper.style.strokeWidth = 2; + ppaper.style.strokeColor = cpaper; + pfat.smooth(); + pfat.style.strokeWidth = 2; + pfat.style.strokeColor = cfat; + + avgPaper/= testdata.length; + avgFat/= testdata.length; + ny = Math.round(yy - avgPaper * vscale) + 0.5; + new Path.Line(x, ny, xx, ny).style.strokeColor = cpaper; + txt = new PointText( [xx, ny] ); + txt.justification = 'right'; + txt.fillColor = cpaper; + txt.content = avgPaper.toFixed(1); + ny = Math.round(yy - avgFat * vscale) + 0.5; + new Path.Line(x, ny, xx, ny).style.strokeColor = cfat; + txt = new PointText( [xx, ny] ); + txt.justification = 'right'; + txt.fillColor = cfat; + txt.content = avgFat.toFixed(1); + + view.draw(); +} + + + +function drawFatline( v1 ) { + function signum(num) { + return ( num > 0 )? 1 : ( num < 0 )? -1 : 0; + } + var l = new Line( [v1[0], v1[1]], [v1[6], v1[7]], false ); + var p1 = new Point( v1[2], v1[3] ), p2 = new Point( v1[4], v1[5] ); + var d1 = l.getSide( p1 ) * l.getDistance( p1 ) || 0; + var d2 = l.getSide( p2 ) * l.getDistance( p2 ) || 0; + var dmin, dmax; + if( d1 * d2 > 0){ + // 3/4 * min{0, d1, d2} + dmin = 0.75 * Math.min( 0, d1, d2 ); + dmax = 0.75 * Math.max( 0, d1, d2 ); + } else { + // 4/9 * min{0, d1, d2} + dmin = 4 * Math.min( 0, d1, d2 ) / 9.0; + dmax = 4 * Math.max( 0, d1, d2 ) / 9.0; + } + var ll = new Path.Line( v1[0], v1[1], v1[6], v1[7] ); + window.__p3.push( ll ); + window.__p3[window.__p3.length-1].style.strokeColor = new Color( 0,0,0.9, 0.8); + var lp1 = ll.segments[0].point; + var lp2 = ll.segments[1].point; + var pm = l.vector, pm1 = pm.rotate( signum( dmin ) * -90 ), pm2 = pm.rotate( signum( dmax ) * -90 ); + var p11 = lp1.add( pm1.normalize( Math.abs(dmin) ) ); + var p12 = lp2.add( pm1.normalize( Math.abs(dmin) ) ); + var p21 = lp1.add( pm2.normalize( Math.abs(dmax) ) ); + var p22 = lp2.add( pm2.normalize( Math.abs(dmax) ) ); + window.__p3.push( new Path.Line( p11, p12 ) ); + window.__p3[window.__p3.length-1].style.strokeColor = new Color( 0,0,0.9); + window.__p3.push( new Path.Line( p21, p22 ) ); + window.__p3[window.__p3.length-1].style.strokeColor = new Color( 0,0,0.9); +} + +function plotD_vs_t( x, y, arr, arr2, v, dmin, dmax, tmin, tmax, yscale, tvalue ){ + yscale = yscale || 1; + new Path.Line( x, y-100, x, y+100 ).style.strokeColor = '#aaa'; + new Path.Line( x, y, x + 200, y ).style.strokeColor = '#aaa'; + + var clr = (tvalue)? '#a00' : '#00a'; + if( window.__p3 ) window.__p3.map(function(a){a.remove();}); + + window.__p3 = []; + + drawFatline( v ); + + window.__p3.push( new Path.Line( x, y + dmin * yscale, x + 200, y + dmin * yscale ) ); + window.__p3[window.__p3.length-1].style.strokeColor = '#000' + window.__p3.push( new Path.Line( x, y + dmax * yscale, x + 200, y + dmax * yscale ) ); + window.__p3[window.__p3.length-1].style.strokeColor = '#000' + window.__p3.push( new Path.Line( x + tmin * 190, y-100, x + tmin * 190, y+100 ) ); + window.__p3[window.__p3.length-1].style.strokeColor = clr + window.__p3.push( new Path.Line( x + tmax * 190, y-100, x + tmax * 190, y+100 ) ); + window.__p3[window.__p3.length-1].style.strokeColor = clr + + for (var i = 0; i < arr.length; i++) { + window.__p3.push( new Path.Line( new Point( x + arr[i][0] * 190, y + arr[i][1] * yscale ), + new Point( x + arr[i][2] * 190, y + arr[i][3] * yscale ) ) ); + window.__p3[window.__p3.length-1].style.strokeColor = '#999'; + } + var pnt = []; + var arr2x = [ 0.0, 0.333333333, 0.6666666666, 1.0 ]; + for (var i = 0; i < arr2.length; i++) { + pnt.push( new Point( x + arr2x[i] * 190, y + arr2[i] * yscale ) ); + window.__p3.push( new Path.Circle( pnt[pnt.length-1], 2 ) ); + window.__p3[window.__p3.length-1].style.fillColor = '#000' + } + // var pth = new Path( pnt[0], pnt[1], pnt[2], pnt[3] ); + // pth.closed = true; + window.__p3.push( new Path( new Segment(pnt[0], null, pnt[1].subtract(pnt[0])), new Segment( pnt[3], pnt[2].subtract(pnt[3]), null ) ) ); + window.__p3[window.__p3.length-1].style.strokeColor = clr + view.draw(); +}