Skip to content

Instantly share code, notes, and snippets.

@rveciana

rveciana/.block

Forked from mbostock/.block
Last active November 9, 2016 20:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rveciana/77655c3c0e3073c19da34af6dc84c4b9 to your computer and use it in GitHub Desktop.
Save rveciana/77655c3c0e3073c19da34af6dc84c4b9 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas & svg-path-properties Point-Along-Path Interpolation
Raw
.block
license: gpl-3.0
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
path {
fill: none;
stroke: #000;
stroke-width: 3px;
}
circle {
fill: steelblue;
stroke: #fff;
stroke-width: 3px;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="path-properties.min.js"></script>
<script>
var points = [
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var width = 960;
var height = 500;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var line = d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed");
var properties = spp.svgPathProperties(line(points));
var length = properties.getTotalLength();
var p = new Path2D(line(points));
console.info(line(points));
var transition = function(){
d3.transition()
.duration(10000)
.tween("zoom", function() {
return function(t) {
context.clearRect(0, 0, width, height);
context.strokeStyle = '#000';
context.lineWidth = 3;
context.beginPath();
context.stroke(p);
context.strokeStyle = '#fff';
context.lineWidth=3;
context.fillStyle = 'steelblue';
points.forEach(function(d){
context.beginPath();
context.arc(d[0], d[1], 4, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
});
var point = properties.getPointAtLength(t*length)
context.beginPath();
context.arc(point.x, point.y, 13, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
}
})
.each("end", transition);
};
transition();
</script>
Raw
path-properties.min.js
// http://geoexamples.com/path-properties/ Version 0.0.2. Copyright 2016 Roger Veciana i Rovira.
!function(t,h){"object"==typeof exports&&"undefined"!=typeof module?h(exports):"function"==typeof define&&define.amd?define(["exports"],h):h(t.spp=t.spp||{})}(this,function(t){"use strict";function h(t){var h=t.match(l);return h?h.map(Number):[]}function n(t,h,n,r,a,o,g,c){this.a={x:t,y:h},this.b={x:n,y:r},this.c={x:a,y:o},this.d={x:g,y:c},g&&c?(this.getArcLength=u,this.getPoint=s):(this.getArcLength=i,this.getPoint=e),this.init()}function e(t,h,n){var e=(1-n)*(1-n)*t[0]+2*(1-n)*n*t[1]+n*n*t[2],s=(1-n)*(1-n)*h[0]+2*(1-n)*n*h[1]+n*n*h[2];return{x:e,y:s}}function s(t,h,n){var e=(1-n)*(1-n)*(1-n)*t[0]+3*(1-n)*(1-n)*n*t[1]+3*(1-n)*n*n*t[2]+n*n*n*t[3],s=(1-n)*(1-n)*(1-n)*h[0]+3*(1-n)*(1-n)*n*h[1]+3*(1-n)*n*n*h[2]+n*n*n*h[3];return{x:e,y:s}}function i(t,h,n){void 0===n&&(n=1);var e=t[0]-2*t[1]+t[2],s=h[0]-2*h[1]+h[2],i=2*t[1]-2*t[0],r=2*h[1]-2*h[0],a=4*(e*e+s*s),o=4*(e*i+s*r),u=i*i+r*r,g=o/(2*a),c=u/a,p=n+g,f=c-g*g;return Math.sqrt(a)/2*(p*Math.sqrt(p*p+f)-g*Math.sqrt(g*g+f)+f*Math.log(Math.abs((p+Math.sqrt(p*p+f))/(g+Math.sqrt(g*g+f)))))}function r(t,h){return M[t][h]}function a(t,h,n){var e,s,i,o=n.length-1;if(0===o)return 0;if(0===t){for(s=0,i=0;i<=o;i++)s+=r(o,i)*Math.pow(1-h,o-i)*Math.pow(h,i)*n[i];return s}for(e=new Array(o),i=0;i<o;i++)e[i]=o*(n[i+1]-n[i]);return a(t-1,h,e)}function o(t,h,n){var e=a(1,n,t),s=a(1,n,h),i=e*e+s*s;return Math.sqrt(i)}function u(t,h,n){var e,s,i,r;void 0===n&&(n=1);var a=20;for(e=n/2,s=0,i=0;i<a;i++)r=e*x[a][i]+e,s+=w[a][i]*o(t,h,r);return e*s}function g(t,h,n,e){this.x0=t,this.x1=h,this.y0=n,this.y1=e}var c={a:7,c:6,h:1,l:2,m:2,q:4,s:4,t:2,v:1,z:0},p=/([astvzqmhlc])([^astvzqmhlc]*)/gi,f=function(t){var n=[];return t.replace(p,function(t,e,s){var i=e.toLowerCase();for(s=h(s),"m"===i&&s.length>2&&(n.push([e].concat(s.splice(0,2))),i="l",e="m"===e?"l":"L");s.length>=0;){if(s.length===c[i])return s.unshift(e),n.push(s);if(s.length<c[i])throw new Error("malformed path data");n.push([e].concat(s.splice(0,c[i])))}}),n},l=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi,y=function(t,h,e,s,i,r,a,o){return new n(t,h,e,s,i,r,a,o)};n.prototype={constructor:n,init:function(){this.length=this.getArcLength([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y])},getTotalLength:function(){return this.length},getPointAtLength:function(t){for(var h=1,n=t/this.length;h>.008;){var e=this.getArcLength([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y],n);h=Math.abs(t-e)/this.length,n+=(t-e)/this.length}return this.getPoint([this.a.x,this.b.x,this.c.x,this.d.x],[this.a.y,this.b.y,this.c.y,this.d.y],n)}};var x=[[],[],[-.5773502691896257,.5773502691896257],[0,-.7745966692414834,.7745966692414834],[-.33998104358485626,.33998104358485626,-.8611363115940526,.8611363115940526],[0,-.5384693101056831,.5384693101056831,-.906179845938664,.906179845938664],[.6612093864662645,-.6612093864662645,-.2386191860831969,.2386191860831969,-.932469514203152,.932469514203152],[0,.4058451513773972,-.4058451513773972,-.7415311855993945,.7415311855993945,-.9491079123427585,.9491079123427585],[-.1834346424956498,.1834346424956498,-.525532409916329,.525532409916329,-.7966664774136267,.7966664774136267,-.9602898564975363,.9602898564975363],[0,-.8360311073266358,.8360311073266358,-.9681602395076261,.9681602395076261,-.3242534234038089,.3242534234038089,-.6133714327005904,.6133714327005904],[-.14887433898163122,.14887433898163122,-.4333953941292472,.4333953941292472,-.6794095682990244,.6794095682990244,-.8650633666889845,.8650633666889845,-.9739065285171717,.9739065285171717],[0,-.26954315595234496,.26954315595234496,-.5190961292068118,.5190961292068118,-.7301520055740494,.7301520055740494,-.8870625997680953,.8870625997680953,-.978228658146057,.978228658146057],[-.1252334085114689,.1252334085114689,-.3678314989981802,.3678314989981802,-.5873179542866175,.5873179542866175,-.7699026741943047,.7699026741943047,-.9041172563704749,.9041172563704749,-.9815606342467192,.9815606342467192],[0,-.2304583159551348,.2304583159551348,-.44849275103644687,.44849275103644687,-.6423493394403402,.6423493394403402,-.8015780907333099,.8015780907333099,-.9175983992229779,.9175983992229779,-.9841830547185881,.9841830547185881],[-.10805494870734367,.10805494870734367,-.31911236892788974,.31911236892788974,-.5152486363581541,.5152486363581541,-.6872929048116855,.6872929048116855,-.827201315069765,.827201315069765,-.9284348836635735,.9284348836635735,-.9862838086968123,.9862838086968123],[0,-.20119409399743451,.20119409399743451,-.3941513470775634,.3941513470775634,-.5709721726085388,.5709721726085388,-.7244177313601701,.7244177313601701,-.8482065834104272,.8482065834104272,-.937273392400706,.937273392400706,-.9879925180204854,.9879925180204854],[-.09501250983763744,.09501250983763744,-.2816035507792589,.2816035507792589,-.45801677765722737,.45801677765722737,-.6178762444026438,.6178762444026438,-.755404408355003,.755404408355003,-.8656312023878318,.8656312023878318,-.9445750230732326,.9445750230732326,-.9894009349916499,.9894009349916499],[0,-.17848418149584785,.17848418149584785,-.3512317634538763,.3512317634538763,-.5126905370864769,.5126905370864769,-.6576711592166907,.6576711592166907,-.7815140038968014,.7815140038968014,-.8802391537269859,.8802391537269859,-.9506755217687678,.9506755217687678,-.9905754753144174,.9905754753144174],[-.0847750130417353,.0847750130417353,-.2518862256915055,.2518862256915055,-.41175116146284263,.41175116146284263,-.5597708310739475,.5597708310739475,-.6916870430603532,.6916870430603532,-.8037049589725231,.8037049589725231,-.8926024664975557,.8926024664975557,-.9558239495713977,.9558239495713977,-.9915651684209309,.9915651684209309],[0,-.16035864564022537,.16035864564022537,-.31656409996362983,.31656409996362983,-.46457074137596094,.46457074137596094,-.600545304661681,.600545304661681,-.7209661773352294,.7209661773352294,-.8227146565371428,.8227146565371428,-.9031559036148179,.9031559036148179,-.96020815213483,.96020815213483,-.9924068438435844,.9924068438435844],[-.07652652113349734,.07652652113349734,-.22778585114164507,.22778585114164507,-.37370608871541955,.37370608871541955,-.5108670019508271,.5108670019508271,-.636053680726515,.636053680726515,-.7463319064601508,.7463319064601508,-.8391169718222188,.8391169718222188,-.912234428251326,.912234428251326,-.9639719272779138,.9639719272779138,-.9931285991850949,.9931285991850949],[0,-.1455618541608951,.1455618541608951,-.2880213168024011,.2880213168024011,-.4243421202074388,.4243421202074388,-.5516188358872198,.5516188358872198,-.6671388041974123,.6671388041974123,-.7684399634756779,.7684399634756779,-.8533633645833173,.8533633645833173,-.9200993341504008,.9200993341504008,-.9672268385663063,.9672268385663063,-.9937521706203895,.9937521706203895],[-.06973927331972223,.06973927331972223,-.20786042668822127,.20786042668822127,-.34193582089208424,.34193582089208424,-.469355837986757,.469355837986757,-.5876404035069116,.5876404035069116,-.6944872631866827,.6944872631866827,-.7878168059792081,.7878168059792081,-.8658125777203002,.8658125777203002,-.926956772187174,.926956772187174,-.9700604978354287,.9700604978354287,-.9942945854823992,.9942945854823992],[0,-.1332568242984661,.1332568242984661,-.26413568097034495,.26413568097034495,-.3903010380302908,.3903010380302908,-.5095014778460075,.5095014778460075,-.6196098757636461,.6196098757636461,-.7186613631319502,.7186613631319502,-.8048884016188399,.8048884016188399,-.8767523582704416,.8767523582704416,-.9329710868260161,.9329710868260161,-.9725424712181152,.9725424712181152,-.9947693349975522,.9947693349975522],[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213]],w=[[],[],[1,1],[.8888888888888888,.5555555555555556,.5555555555555556],[.6521451548625461,.6521451548625461,.34785484513745385,.34785484513745385],[.5688888888888889,.47862867049936647,.47862867049936647,.23692688505618908,.23692688505618908],[.3607615730481386,.3607615730481386,.46791393457269104,.46791393457269104,.17132449237917036,.17132449237917036],[.4179591836734694,.3818300505051189,.3818300505051189,.27970539148927664,.27970539148927664,.1294849661688697,.1294849661688697],[.362683783378362,.362683783378362,.31370664587788727,.31370664587788727,.22238103445337448,.22238103445337448,.10122853629037626,.10122853629037626],[.3302393550012598,.1806481606948574,.1806481606948574,.08127438836157441,.08127438836157441,.31234707704000286,.31234707704000286,.26061069640293544,.26061069640293544],[.29552422471475287,.29552422471475287,.26926671930999635,.26926671930999635,.21908636251598204,.21908636251598204,.1494513491505806,.1494513491505806,.06667134430868814,.06667134430868814],[.2729250867779006,.26280454451024665,.26280454451024665,.23319376459199048,.23319376459199048,.18629021092773426,.18629021092773426,.1255803694649046,.1255803694649046,.05566856711617366,.05566856711617366],[.24914704581340277,.24914704581340277,.2334925365383548,.2334925365383548,.20316742672306592,.20316742672306592,.16007832854334622,.16007832854334622,.10693932599531843,.10693932599531843,.04717533638651183,.04717533638651183],[.2325515532308739,.22628318026289723,.22628318026289723,.2078160475368885,.2078160475368885,.17814598076194574,.17814598076194574,.13887351021978725,.13887351021978725,.09212149983772845,.09212149983772845,.04048400476531588,.04048400476531588],[.2152638534631578,.2152638534631578,.2051984637212956,.2051984637212956,.18553839747793782,.18553839747793782,.15720316715819355,.15720316715819355,.12151857068790319,.12151857068790319,.08015808715976021,.08015808715976021,.03511946033175186,.03511946033175186],[.2025782419255613,.19843148532711158,.19843148532711158,.1861610000155622,.1861610000155622,.16626920581699392,.16626920581699392,.13957067792615432,.13957067792615432,.10715922046717194,.10715922046717194,.07036604748810812,.07036604748810812,.03075324199611727,.03075324199611727],[.1894506104550685,.1894506104550685,.18260341504492358,.18260341504492358,.16915651939500254,.16915651939500254,.14959598881657674,.14959598881657674,.12462897125553388,.12462897125553388,.09515851168249279,.09515851168249279,.062253523938647894,.062253523938647894,.027152459411754096,.027152459411754096],[.17944647035620653,.17656270536699264,.17656270536699264,.16800410215645004,.16800410215645004,.15404576107681028,.15404576107681028,.13513636846852548,.13513636846852548,.11188384719340397,.11188384719340397,.08503614831717918,.08503614831717918,.0554595293739872,.0554595293739872,.02414830286854793,.02414830286854793],[.1691423829631436,.1691423829631436,.16427648374583273,.16427648374583273,.15468467512626524,.15468467512626524,.14064291467065065,.14064291467065065,.12255520671147846,.12255520671147846,.10094204410628717,.10094204410628717,.07642573025488905,.07642573025488905,.0497145488949698,.0497145488949698,.02161601352648331,.02161601352648331],[.1610544498487837,.15896884339395434,.15896884339395434,.15276604206585967,.15276604206585967,.1426067021736066,.1426067021736066,.12875396253933621,.12875396253933621,.11156664554733399,.11156664554733399,.09149002162245,.09149002162245,.06904454273764123,.06904454273764123,.0448142267656996,.0448142267656996,.019461788229726478,.019461788229726478],[.15275338713072584,.15275338713072584,.14917298647260374,.14917298647260374,.14209610931838204,.14209610931838204,.13168863844917664,.13168863844917664,.11819453196151841,.11819453196151841,.10193011981724044,.10193011981724044,.08327674157670475,.08327674157670475,.06267204833410907,.06267204833410907,.04060142980038694,.04060142980038694,.017614007139152118,.017614007139152118],[.14608113364969041,.14452440398997005,.14452440398997005,.13988739479107315,.13988739479107315,.13226893863333747,.13226893863333747,.12183141605372853,.12183141605372853,.10879729916714838,.10879729916714838,.09344442345603386,.09344442345603386,.0761001136283793,.0761001136283793,.057134425426857205,.057134425426857205,.036953789770852494,.036953789770852494,.016017228257774335,.016017228257774335],[.13925187285563198,.13925187285563198,.13654149834601517,.13654149834601517,.13117350478706238,.13117350478706238,.12325237681051242,.12325237681051242,.11293229608053922,.11293229608053922,.10041414444288096,.10041414444288096,.08594160621706773,.08594160621706773,.06979646842452049,.06979646842452049,.052293335152683286,.052293335152683286,.03377490158481415,.03377490158481415,.0146279952982722,.0146279952982722],[.13365457218610619,.1324620394046966,.1324620394046966,.12890572218808216,.12890572218808216,.12304908430672953,.12304908430672953,.11499664022241136,.11499664022241136,.10489209146454141,.10489209146454141,.09291576606003515,.09291576606003515,.07928141177671895,.07928141177671895,.06423242140852585,.06423242140852585,.04803767173108467,.04803767173108467,.030988005856979445,.030988005856979445,.013411859487141771,.013411859487141771],[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872]],M=[[1],[1,1],[1,2,1],[1,3,3,1]],v=function(t,h,n,e){return new g(t,h,n,e)};g.prototype.getTotalLength=function(){return Math.sqrt(Math.pow(this.x0-this.x1,2)+Math.pow(this.y0-this.y1,2))},g.prototype.getPointAtLength=function(t){var h=t/Math.sqrt(Math.pow(this.x0-this.x1,2)+Math.pow(this.y0-this.y1,2)),n=(this.x1-this.x0)*h,e=(this.y1-this.y0)*h;return{x:this.x0+n,y:this.y0+e}};var d=function(t){function h(t){for(var i,r=f(t),a=[0,0],o=[0,0],u=0;u<r.length;u++)"M"===r[u][0]?(a=[r[u][1],r[u][2]],s.push(null)):"m"===r[u][0]?(a=[r[u][1]+a[0],r[u][2]+a[1]],s.push(null)):"L"===r[u][0]?(n+=Math.sqrt(Math.pow(a[0]-r[u][1],2)+Math.pow(a[1]-r[u][2],2)),s.push(new v(a[0],r[u][1],a[1],r[u][2])),a=[r[u][1],r[u][2]]):"l"===r[u][0]?(n+=Math.sqrt(Math.pow(r[u][1],2)+Math.pow(r[u][2],2)),a=[r[u][1]+a[0],r[u][2]+a[1]],s.push()):"H"===r[u][0]?(n+=Math.abs(a[0]-r[u][1]),s.push(new v(a[0],r[u][1],a[1],a[1])),a[0]=r[u][1]):"h"===r[u][0]?(n+=Math.abs(r[u][1]),s.push(new v(a[0],a[0]+r[u][1],a[1],a[1])),a[0]=r[u][1]+a[0]):"V"===r[u][0]?(n+=Math.abs(a[1]-r[u][1]),s.push(new v(a[0],a[0],a[1],r[u][1])),a[1]=r[u][1]):"v"===r[u][0]?(n+=Math.abs(r[u][1]),s.push(new v(a[0],a[0],a[1],a[1]+r[u][1])),a[1]=r[u][1]+a[1],s.push()):"z"===r[u][0]||"Z"===r[u][0]?(n+=Math.sqrt(Math.pow(r[0][1]-a[0],2)+Math.pow(r[0][2]-a[1],2)),s.push(new v(a[0],r[0][1],a[1],r[0][2])),a=[r[0][1],r[0][2]]):"C"===r[u][0]?(i=new y(a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4],r[u][5],r[u][6]),n+=i.getTotalLength(),a=[r[u][5],r[u][6]],s.push(i)):"c"===r[u][0]?(i=new y(a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4],a[0]+r[u][5],a[1]+r[u][6]),n+=i.getTotalLength(),a=[r[u][5]+a[0],r[u][6]+a[1]],s.push(i)):"S"===r[u][0]?(i=u>0&&["C","c","S","s"].indexOf(r[u-1][0])>-1?new y(a[0],a[1],2*a[0]-r[u-1][r[u-1].length-4],2*a[1]-r[u-1][r[u-1].length-3],r[u][1],r[u][2],r[u][3],r[u][4]):new y(a[0],a[1],a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4]),n+=i.getTotalLength(),a=[r[u][3],r[u][4]],s.push(i)):"s"===r[u][0]?(i=u>0&&["C","c","S","s"].indexOf(r[u-1][0])>-1?new y(a[0],a[1],a[0]+i.d.x-i.c.x,a[1]+i.d.y-i.c.y,a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]):new y(a[0],a[1],a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]),n+=i.getTotalLength(),a=[r[u][3]+a[0],r[u][4]+a[1]],s.push(i)):"Q"===r[u][0]?(i=new y(a[0],a[1],r[u][1],r[u][2],r[u][3],r[u][4]),n+=i.getTotalLength(),s.push(i),a=[r[u][3],r[u][4]],o=[r[u][1],r[u][2]]):"q"===r[u][0]?(i=new y(a[0],a[1],a[0]+r[u][1],a[1]+r[u][2],a[0]+r[u][3],a[1]+r[u][4]),n+=i.getTotalLength(),o=[a[0]+r[u][1],a[1]+r[u][2]],a=[r[u][3]+a[0],r[u][4]+a[1]],s.push(i)):"T"===r[u][0]?(i=u>0&&["Q","q","T","t"].indexOf(r[u-1][0])>-1?new y(a[0],a[1],2*a[0]-o[0],2*a[1]-o[1],r[u][1],r[u][2]):new v(a[0],r[u][1],a[1],r[u][2]),s.push(i),n+=i.getTotalLength(),o=[2*a[0]-o[0],2*a[1]-o[1]],a=[r[u][1],r[u][2]]):"t"===r[u][0]&&(i=u>0&&["Q","q","T","t"].indexOf(r[u-1][0])>-1?new y(a[0],a[1],2*a[0]-o[0],2*a[1]-o[1],a[0]+r[u][1],a[1]+r[u][2]):new v(a[0],a[0]+r[u][1],a[1],a[1]+r[u][2]),n+=i.getTotalLength(),o=[2*a[0]-o[0],2*a[1]-o[1]],a=[r[u][1]+a[0],r[u][2]+a[0]],s.push(i)),e.push(n);return h}var n=0,e=[],s=[];return h.getTotalLength=function(){return n},h.getPointAtLength=function(t){t<0?t=0:t>n&&(t=n);for(var h=e.length-1;e[h]>=t&&e[h]>0;)h--;h++;var i=t-e[h-1];return s[h].getPointAtLength(i)},h(t)};t.svgPathProperties=d,t.parse=f,t.Bezier=y,Object.defineProperty(t,"__esModule",{value:!0})});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment