paper.install(window); /** * http://stackoverflow.com/questions/6875625/does-javascript-provide-a-high-resolution-timer */ if (window.performance.now) { console.log("Using high performance timer"); getTimestamp = function() { return window.performance.now(); }; } else { if (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, testname, testdata = []; 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); setTimeout(function() { console.log('\n' + testName); paper.setup(canvas); var paths = handler(); testBooleanStatic(paths[0], paths[1]); }, 0); return caption; } testname = 'Overlapping circles'; caption = prepareTest( testname, container ); pathA = new Path.Circle(new Point(80, 110), 50); pathB = new Path.Circle(new Point(150, 110), 70); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Polygon and square'; caption = prepareTest( testname, container ); pathA = new Path.RegularPolygon(new Point(80, 110), 12, 80); pathB = new Path.Rectangle(new Point(100, 80), [80, 80] ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Circle and square (overlaps exactly on existing segments)'; caption = prepareTest( testname, container ); pathA = new Path.Circle(new Point(110, 110), 80); pathB = new Path.Rectangle(new Point(110, 110), [80, 80] ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Circle and square (existing segments overlaps on curves)'; caption = prepareTest( testname, container ); pathA = new Path.Circle(new Point(110, 110), 80); pathB = new Path.Rectangle(new Point(110, 110), [100, 100] ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Square and square (one segment overlaps on a line)'; caption = prepareTest( testname, container ); 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] ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Rectangle and rectangle (overlaps exactly on existing curves)'; caption = prepareTest( testname, container ); pathA = new Path.Rectangle(new Point(30.5, 50.5), [100, 150]); pathB = new Path.Rectangle(new Point(130.5, 60.5), [100, 150]); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Circle and banana (multiple intersections within same curve segment)'; caption = prepareTest( testname, container ); 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 ] ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Overlapping stars 1'; caption = prepareTest( testname, container ); pathA = new Path.Star(new Point(80, 110), 10, 20, 80); pathB = new Path.Star(new Point(120, 110), 10, 30, 100); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Overlapping stars 2'; caption = prepareTest( testname, container ); pathA = new Path.Star(new Point(110, 110), 20, 20, 80); pathB = new Path.Star(new Point(110, 110), 6, 30, 100); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Circles overlap exactly over each other'; // caption = prepareTest( testname, container ); // pathA = new Path.Circle(new Point(110, 110), 100); // pathB = new Path.Circle(new Point(110, 110), 100 ); // // pathB.translate([0.5,0]) // testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Maximum possible intersections between 2 cubic bezier curve segments - 9'; caption = prepareTest( testname, container ); 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] ); testIntersections( pathA, pathB, caption, testname, testdata ); // annotatePath( pathA, null, '#008' ); // annotatePath( pathB, null, '#800' ); view.draw(); testname = 'SVG gears'; caption = prepareTest( testname, container ); group = paper.project.importSVG( document.getElementById( 'svggears' ) ); pathA = group.children[0]; pathB = group.children[1]; testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'Glyphs imported from SVG'; caption = prepareTest( testname, container ); group = paper.project.importSVG( document.getElementById( 'glyphsys' ) ); pathA = group.children[0]; pathB = group.children[1]; testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'CompoundPaths 1'; caption = prepareTest( testname, container ); group = paper.project.importSVG( document.getElementById( 'glyphsacirc' ) ); pathA = group.children[0]; pathB = group.children[1]; testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'CompoundPaths 2 - holes'; caption = prepareTest( testname, container ); 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 ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'CompoundPaths 3 !'; caption = prepareTest( testname, container ); 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 ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'CompoundPaths 4 - holes and islands 1'; caption = prepareTest( testname, container ); 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 ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'CompoundPaths 5 - holes and islands 2'; caption = prepareTest( testname, container ); 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 ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'CompoundPaths 6 - holes and islands 3'; caption = prepareTest( testname, container ); 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 ); testIntersections( pathA, pathB, caption, testname, testdata ); testname = 'CompoundPaths 6 - holes and islands 4 (curves overlap exactly on existing curves)'; caption = prepareTest( testname, container ); 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] ); testIntersections( pathA, pathB, caption, testname, testdata ); // Plot the run times prepareTest( 'Results', container, true ); 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; 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 ); 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) ); clr = ( clr === ctxt )? ctxt2 : ctxt; vx += hscale; }); ppaper.style.strokeWidth = 2; ppaper.style.strokeColor = cpaper; ppaperfill.add( new Segment( xx, yy ) ); ppaperfill.closed = true; ppaperfill.style.fillColor = cpaperfill; pfat.style.strokeWidth = 2; pfat.style.strokeColor = cfat; pfatfill.add( new Segment( xx, yy ) ); pfatfill.closed = true; pfatfill.style.fillColor = cfatfill; 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); 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 = 'paper.js : ' + 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'); if(_big){ 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) { var maxCount = 10, count = maxCount, st, t1, t2, ixsPaper, ixsFatline; try{ path1.style = path2.style = pathStyleNormal; console.time('paperjs x ' + maxCount); st = getTimestamp(); while(count--){ ixsPaper = path1.getIntersections( path2 ); } t1 = (getTimestamp() - st) / maxCount; console.timeEnd('paperjs x ' + maxCount); count = maxCount; console.time('fatline x ' + maxCount); st = getTimestamp(); while(count--){ ixsFatline = getIntersections2( path1, path2 ); } t2 = (getTimestamp() - st) / maxCount; console.timeEnd('fatline x ' + maxCount); markIntersections( ixsPaper, '#00f', 'paperjs' ); markIntersections( ixsFatline, '#f00', 'fatline' ); } catch(e){ t1 = t2 = 0; console.error( e.name + ": " + e.message ); if( caption ) { caption.className += ' error'; } }finally{ console.timeEnd(caption + ' paperjs'); console.timeEnd(caption + ' fatline'); view.draw(); testdata.push({ name: testname, paperTime: t1, fatTime: t2, success: ixsPaper.length === ixsFatline.length }); } } function markIntersections( ixs, c, txt ){ for (i = 0, len = ixs.length; i < len; i++) { // markPoint( ixs[i].point, ixs[i].parameter ); markPoint( ixs[i].point, ' ', c, null, false ); // console.log( txt , ixs[i].parameter ) } } // ============================================================== // On screen debug helpers function markPoint( pnt, t, c, tc, remove ) { if( !pnt ) return; c = c || '#000'; if( remove === undefined ){ remove = true; } var cir = new Path.Circle( pnt, 2 ); cir.style.fillColor = c; cir.style.strokeColor = tc; if( t !== undefined || t !== null ){ var text = new PointText( pnt.add([0, -3]) ); text.justification = 'center'; text.fillColor = c; text.content = t; if( remove ){ text.removeOnMove(); } } if( remove ) { cir.removeOnMove(); } } function markCurve( crv, c, flag) { if( !crv ) return; c = c || '#000'; if( flag ){ if( window.__p1 ) window.__p1.remove(); window.__p1 = new Path( new Segment( [crv[0], crv[1]], null, [crv[2] - crv[0], crv[3] - crv[1]] ), new Segment( [crv[6], crv[7]], [crv[4] - crv[6], crv[5] - crv[7]], null ) ); window.__p1.style.strokeColor = c; // window.__p1.fullySelected = true; } else { if( window.__p2 ) window.__p2.remove(); window.__p2 = new Path( new Segment( [crv[0], crv[1]], null, [crv[2] - crv[0], crv[3] - crv[1]] ), new Segment( [crv[6], crv[7]], [crv[4] - crv[6], crv[5] - crv[7]], null ) ); window.__p2.style.strokeColor = c; // window.__p2.fullySelected = true; } view.draw(); } function annotatePath( path, t, c, tc, remove ) { if( !path ) return; var crvs = path.curves; for (i = crvs.length - 1; 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(); } }