pathgl/dist/pathgl.min.js

A webgl renderer for data visualization, motion graphics and explorable explanations.

!function(){function e(){}function t(e){return e}function n(e){return this.push(e)}function i(e,t){for(var n in e)t(e[n],n,e)}function r(){return[-1,-1,1,-1,-1,1,1,1]}function o(e){return e.split(".").pop().join().match(/mp4|ogg|webm/)}function a(e){return[2*(e[0]/960)-1,1-2*(e[1]/500)]}function s(e,t){if(arguments.length>2)[].forEach.call(arguments,function(t){s(e,t)});else for(var n in t)e[n]=t[n];return e}function u(e){var t=h(e);return+(255*t[0])<<16^255*t[1]<<8^255*t[2]<<0}function c(e){return e=Math.floor(e),[(255&e>>16)/255,(255&e>>8)/255,(255&e)/255]}function f(e,t,n){if(0===t)return[n,n,n];var i=.5>=n?n*(1+t):n+t-n*t,r=2*n-i;return[l(r,i,e+1/3),l(r,i,e),l(r,i,e-1/3)]}function l(e,t,n){return 0>n&&(n+=1),n>1&&(n-=1),1/6>n?e+6*(t-e)*n:.5>n?t:2/3>n?e+6*(t-e)*(2/3-n):e}function h(e){if(lt[e])return c(lt[e]);if(/^hsl/i.test(e)){var t=e.split(/,|\(/).map(parseFloat);return f(t[1]/360,t[2]/100,t[3]/100)}if(/^rgb\((\d+), ?(\d+), ?(\d+)\)$/i.test(e)){var n=/^rgb\((\d+), ?(\d+), ?(\d+)\)$/i.exec(e);return[Math.min(255,parseInt(n[1],10))/255,Math.min(255,parseInt(n[2],10))/255,Math.min(255,parseInt(n[3],10))/255]}if(/^rgb\((\d+)\%, ?(\d+)\%, ?(\d+)\%\)$/i.test(e)){var n=/^rgb\((\d+)\%, ?(\d+)\%, ?(\d+)\%\)$/i.exec(e);return[Math.min(100,parseInt(n[1],10))/100,Math.min(100,parseInt(n[2],10))/100,Math.min(100,parseInt(n[3],10))/100]}if(/^\#([0-9a-f]{6})$/i.test(e)){var n=/^\#([0-9a-f]{6})$/i.exec(e);return c(parseInt(n[1],16))}if(/^\#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(e)){var n=/^\#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(e);return c(parseInt(n[1]+n[1]+n[2]+n[2]+n[3]+n[3],16))}return!1}function d(e,t,n,i){function r(t,n){var i,r=e.getUniformLocation(st,t),o="uniform"+m(n)+"fv";st[t]=function(t){i!=t&&arguments.length&&(e[o](r,Array.isArray(t)?t:[t]),i=t)}}var o=t+"\n"+n;if(st=e.createProgram(),t=g(e,e.VERTEX_SHADER,t),n=g(e,e.FRAGMENT_SHADER,n),e.attachShader(st,t),e.attachShader(st,n),e.deleteShader(t),e.deleteShader(n),(i||["pos","color","fugue"]).forEach(function(t,n){e.bindAttribLocation(st,n,t)}),e.linkProgram(st),e.useProgram(st),!e.getProgramParameter(st,e.LINK_STATUS))throw name+": "+e.getProgramInfoLog(st);for(var a=/uniform\s+(\S+)\s+(\S+)\s*;/g,s=null;null!=(s=a.exec(o));)r(s[2],s[1]);return st}function p(e){var t=rt.vertexShader;i(e||{},function(e,t,n){"cx"==t&&(n.x=e),"cy"==t&&(n.y=e)});var n=s({stroke:"(color.r < 0.) ? vec4(stroke) : unpack_color(stroke)",r:"(pos.z < 0.) ? 4. - texture2D(texture, abs(pos.xy)).z : (2. * pos.z)",x:"(pos.x < 0.) ? texture2D(texture, abs(pos.xy)).x * resolution.x : pos.x",y:"(pos.y < 0.) ? texture2D(texture, abs(pos.xy)).y * resolution.y : pos.y"},e);for(var r in n)t=t.replace("replace_"+r,n[r]);return t}function g(e,t,n){var i=e.createShader(t);if(e.shaderSource(i,n),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)){var r=e.getShaderInfoLog(i)||"",o=+r.split(":")[2];return console.error((n||"").split("\n").slice(o-5,o+5).join("\n"),r)}return i}function m(e){return e.match("vec")?e[e.length-1]:1}function v(e){if(!(at=w(canvas=e)))return!!console.log("webGL context could not be initialized");at.getExtension("OES_texture_float")||console.warn("does not support floating point textures"),st=d(at,p(),rt.fragmentShader),canvas.program=st,b(canvas),_(canvas);var t=F(canvas);return ut.push(t.update),at.clearColor(0,0,0,0),k(),canvas}function _(e){function t(){rt.uniform("resolution",[e.width||960,e.height||500])}setInterval(t,100),e.addEventListener("click",y),e.addEventListener("mousemove",x),e.addEventListener("touchmove",E),e.addEventListener("touchstart",E)}function y(){}function x(e){var t=canvas.getBoundingClientRect();rt.uniform("mouse",[e.clientX-t.left-canvas.clientLeft,e.clientY-t.top-canvas.clientTop])}function E(e){var t=canvas.getBoundingClientRect();e=e.touches[0],rt.uniform("mouse",[e.clientX-t.left-canvas.clientLeft,e.clientY-t.top-canvas.clientTop])}function b(e){window.d3&&s(window.d3.selection.prototype,{vAttr:A,shader:T}),window.d3&&s(window.d3.transition.prototype,{vAttr:A,shader:T}),s(e,ht).gl=at}function w(e){var t=e.getContext("webgl")||e.getContext("experimental-webgl");return t&&s(t,{viewportWidth:e.width,viewportHeight:e.height})}function A(e,t){return this.each(function(e,n){this.colorBuffer[this.indices[0]]=u(t(e,n))}),this}function T(e){return this.node().mesh.mergeProgram(e),this}function k(){ut.forEach(function(e){e()}),dt(k)}function R(e){var t=[],n=this.buffer,i=this.posBuffer,r=this.indices,o=[0,0],a=r.length,s=0,u=[0,0];for(e.match(/[a-z][^a-z]*/gi).forEach(function(e){for(var n=e.slice(1).trim().split(/,| /g),i=e[0].toLowerCase(),r=0;r<n.length;){var a=n[r++],s=n[r++];"m"==i?u=o=[a,s]:"l"==i?t.push(o[0],o[1],a,s)&&(o=[a,s]):"z"==i?t.push(o[0],o[1],u[0],u[1])&&(o=u):console.log("%d method is not supported malformed path:",i)}});r.length<t.length;)r.push(n.count+s++);r.length>t.length&&(r.length=t.length),r.forEach(function(e,r){i[3*n[e]+e%3]=r<t.length&&t[r]}),n.count+=t.length-a}function S(){if(!d3)return console.warn("this method depends on d3");d3.selectAll("link[rel=styleSheet]").each(function(){d3.text});var e=d3.selectAll("style")[0].map(function(){return this.sheet}).reduce(function(e,t){var n={};return i(t.cssRules,function(e){for(var t=e.length,i={};t--;){var r=e[e[t]];i[r]=e[r]}n[e.selectorText]=i}),s(e,n)},{});i(e,function(e,t){d3.select(t).attr(e)})}function B(e,t){function n(){return h+="points"==t.primitive?1:"lines"==t.primitive?2:3}function i(){d.forEach(function(n,i){var r=e.createBuffer(),o=t[n]||{};e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,4e7,e.STREAM_DRAW),l[n]={array:new Float32Array(t[n]&&t[n].array||4e5),buffer:r,size:o.size||4,changed:!0,loc:i}})}function r(e){var t,n;for(n in l)for(n=l,t=n.size;t--;)l[e*n.size+t]=0}function o(e){e.posBuffer=l.pos.array,e.fBuffer=l.fugue.array,e.colorBuffer=l.color.array,e.mesh=this}function a(t){if(h){for(var n in l)n=l[n],e.bindBuffer(e.ARRAY_BUFFER,n.buffer),e.vertexAttribPointer(n.loc,n.size,e.FLOAT,!1,0,0),e.enableVertexAttribArray(n.loc),n.changed&&e.bufferSubData(e.ARRAY_BUFFER,0,n.array);e.drawArrays(p,t||0,h)}}function s(){}function u(){}function c(){}function f(){}var l={},h=t.count||0,d=t.attrList||["pos","color","fugue"],p=e[t.primitive.toUpperCase()];return i(),{init:i,free:r,alloc:n,draw:a,bind:o,attributes:l,set:s,addAttr:u,removeAttr:c,boundingBox:f}}function F(e){function t(e){return(l[e.toLowerCase()]||console.log.bind(console,"oops"))(e)}function n(e){f=d(s,p(e),rt.fragmentShader)}function i(){for(st!=f&&s.useProgram(st=f),s.bindFramebuffer(s.FRAMEBUFFER,c),o(),r(),a(s),rt.uniform("clock",new Date-ft),u=-1;++u<h.length;)h[u].draw()}function r(){for(var e in ct)st[e]&&st[e](ct[e])}function o(){e.texture&&s.bindTexture(s.TEXTURE_2D,e.texture)}function a(t){c||t.clear(t.COLOR_BUFFER_BIT),t.viewport(0,0,e.width,e.height)}var s=e.gl,u=0,c=e.fbo||null,f=e.program,l=e.types=G(),h=z(s,e.types);return e.mesh&&h.push(e.mesh),h.forEach(function(e){e.mergeProgram=n}),D.call(e),e.__renderTarget__={update:i,append:t}}function z(e,t){var n=new B(e,{primitive:"points"});n.bind(t.circle),n.bind(t.rect);var i=new B(e,{primitive:"lines",pos:{size:2}});return i.bind(t.line),[n,i]}function D(){this.fbo&&(at.bindFramebuffer(at.FRAMEBUFFER,this.fbo),this.fbo.width=screen.width,this.fbo.height=screen.height,at.framebufferTexture2D(at.FRAMEBUFFER,at.COLOR_ATTACHMENT0,at.TEXTURE_2D,this.texture,null),at.bindFramebuffer(at.FRAMEBUFFER,null))}function L(e,t){return e.replace(/^\s+|\s*([,\s\+\~>]|$)\s*/g,"$1").split(",").forEach(function(e){C(e,this).forEach(n.bind(t=[]))},this)||t}function C(e,t){var n,i=e.split(/[\s\>\+\~](?![\s\w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^'"]*\]|[\s\w\+\-]*\))/),r=e.match(/([\s\>\+\~])(?![\s\w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^'"]*\]|[\s\w\+\-]*\))/),o=q(i.pop()),a=[],s=[];return $.call(t,o[1]||"*").forEach(function(e){(n=U.apply(e,o))&&a.push(n)}),i.length?a.forEach(function(e){M(e,i,r)&&s.push(e)})||s:a}function M(e,t,n,i){return i=function r(e,o,a){for(;a=gt[n[o]](a,e);)if(U.apply(a,q(t[o]))&&o)return(i=r(a,o-1,a))?i:a}(e,t.length-1,e)}function U(e,t,n,i,r,o,a,e,s,e,u,c){return s&&pt[s]&&!pt[s](this,u)||t&&"*"!==t&&this.tag&&this.tag.toLowerCase()!==t||i&&!P(o,this.attr[r]||"",a)||n&&(c=n.match(/#([\w\-]+)/))&&c[1]!==this.attr.id||n&&(n.match(/\.[\w\-]+/g)||[]).some(O.bind(this))?0:this}function P(e,t,n){return t.match(RegExp({"=":n,"^=":"^"+N(n),"$=":N(n)+"$","*=":N(n),"~=":"(?:^|\\s+)"+N(n)+"(?:\\s+|$)","|=":"^"+N(n)+"(-|$)"}[e]||"adnan^"))}function q(e){return e.match(mt)}function I(e){for(;e=e.previousSibling();)if(e.top)return e}function N(e){return e.replace(/([.*+?\^=!:${}()|\[\]\/\\])/,"\\$1")}function O(e){return!RegExp("(^|\\s+)"+e.slice(1)+"(\\s+|$)").test(this.attr.class)}function $(e){return X(this,function(t){return"*"==e||t.tagName==e},[])}function X(e,t,n){return(e.__scene__||e.children).forEach(function(e){X(e,t,n),t(e)&&n.push(e)})||n}function G(){return yt.reduce(function(e,t){return e[t.name]=function n(){var e=Object.create(t.prototype);return s(e,n),e.init(n.mesh.alloc()-1),e.attr={},e},s(t.prototype,_t,vt[t.name]),e},{})}function j(e){R.call(this,e,this.stroke(this.attr.stroke)),this.stroke(this.attr.stroke)}function Y(e,t){var n=canvas.__scene__,i=n.indexOf(t);reverseEach(n.slice(i,n.push(0)),function(e,t){n[t]=n[t-1]}),n[i]=e}function H(e){return this.__scene__[this.__scene__.length]=this.__renderTarget__.append(e.tagName)}function V(e){var t=this.__scene__.indexOf(e);e=this.__scene__.splice(t,1)[0],e&&e.mesh.free(t)}function W(e,t){s(this,{fbo:at.createFramebuffer(),program:e||st,gl:at,texture:at.createTexture(),width:512,height:512,mesh:B(at,{pos:{array:r(),size:2},attrList:["pos"],count:4,primitive:"triangle_strip"})},t),this.texture.unit=0,this.init(),this.__renderTarget__=F(this),this.start(),this.update=function(){this.step&&this.step(),this.__renderTarget__.update()}}function K(e,t){var n=d(at,Et,e,["pos"]);return s(t,{}),new W(n,t)}function J(e,t){"string"==typeof e&&(e=Z(e)),s(this,{gl:at,data:e,texture:at.createTexture(),width:e.width||512,height:e.height||512},t).load()}function Q(){at.bindTexture(at.TEXTURE_2D,this.texture),at.pixelStorei(at.UNPACK_FLIP_Y_WEBGL,!0),at.texParameteri(at.TEXTURE_2D,at.TEXTURE_MAG_FILTER,at.NEAREST),at.texParameteri(at.TEXTURE_2D,at.TEXTURE_MIN_FILTER,at.NEAREST),at.texParameteri(at.TEXTURE_2D,at.TEXTURE_WRAP_S,at.CLAMP_TO_EDGE),at.texParameteri(at.TEXTURE_2D,at.TEXTURE_WRAP_T,at.CLAMP_TO_EDGE),this.update()}function Z(e){var t=document.querySelector(e);return t?t:s(o?new Image:document.createElement("video"),{src:e})}function et(e){return e.length>50}function tt(){}function nt(){for(var e=new Array(this.size),t=this.size||0;t--;)e[t]={x:this.x()(t,t),y:this.y(t,t)(t,t)};return e}function it(e,t){return Math.random()*(t-e)}function a(e){return[2*(e[0]/960)-1,1-2*(e[1]/500)]}var rt=this.pathgl={};rt.sim={},rt.stop=function(){},rt.context=function(){return at};var ot=0;rt.texture=function(e,t,n){return ot||rt.init("canvas"),new(null==e?W:et(e)?K:J)(e,s(t||{},{src:e}),n)},rt.uniform=function(e,t){return 1==arguments.length?ct[e]:ct[e]=t},rt.applyCSS=S,HTMLCanvasElement.prototype.appendChild=function(e){return rt.init(this)?this.appendChild(e):void 0};var at,st,ut=[],ct={},ft=Date.now();rt.init=function(e){return ot=1,e="string"==typeof e?document.querySelector(e):e instanceof d3.selection?e.node():e,e.getContext?!!v(e):console.log(e,"is not a valid canvas")};var lt={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};rt.vertexShader=["precision mediump float;","uniform float clock;","uniform vec2 mouse;","uniform vec2 resolution;","uniform vec2 dates;","attribute vec4 pos;","attribute vec4 color;","attribute vec4 fugue;","varying float type;","varying vec4 v_stroke;","varying vec4 v_fill;","uniform sampler2D texture;","const mat4 modelViewMatrix = mat4(1.);","const mat4 projectionMatrix = mat4(1.);","vec4 unpack_color(float col) {","    return vec4(mod(col / 256. / 256., 256.),","                mod(col / 256. , 256.),","                mod(col, 256.),","                200.)","                / 256.;","}","void main() {","    float time = clock / 1000.;","    float x = replace_x;","    float y = replace_y;","    float fill = color.x;","    float stroke = color.x;","    gl_Position = vec4(2. * (x / resolution.x) - 1., 1. - ((y / resolution.y) * 2.),  1., 1.);","    type = fugue.x;","    gl_PointSize =  replace_r;","    v_fill = unpack_color(fill);","    v_stroke = replace_stroke;","}"].join("\n\n"),rt.fragmentShader=["precision mediump float;","uniform sampler2D texture;","uniform vec2 resolution;","uniform vec2 dates;","varying float type;","varying vec4 v_stroke;","varying vec4 v_fill;","void main() {","    float dist = distance(gl_PointCoord, vec2(0.5));","    if (type == 1. && dist > 0.5) discard;","    gl_FragColor = (v_stroke.x < 0.) ? texture2D(texture, gl_PointCoord) : v_stroke;","}"].join("\n");var ht={appendChild:H,querySelectorAll:L,querySelector:function(e){return this.querySelectorAll(e)[0]},removeChild:V,insertBefore:Y,__scene__:[],__pos__:[],__program__:void 0},dt=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)},pt={},gt={" ":function(e){return e&&e!==__scene__&&e.parent()},">":function(e,t){return e&&e.parent()==t.parent()&&e.parent()},"~":function(e){return e&&e.previousSibling()},"+":function(e,t,n,i){return!e||(n=I(e))&&(i=I(t))&&n==i&&n}},mt=/^(\*|\w+)?(?:([\.\#]+[\w\-\.#]+)?)(\[([\w\-]+)(?:([\|\^\$\*\~]?\=)['"]?([ \w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^]+)["']?)?\])?(:([\w\-]+)(\(['"]?([^()]+)['"]?\))?)?/,vt={circle:{init:function(e){this.fBuffer[4*e]=1,this.indices=[4*e]},cx:function(e){this.posBuffer[this.indices[0]+0]=e},cy:function(e){this.posBuffer[this.indices[0]+1]=e},r:function(e){this.posBuffer[this.indices[0]+2]=e},cz:function(e){this.posBuffer[this.indices[0]+3]=e},fill:function(e){this.colorBuffer[this.indices[0]]=0>e?e:u(e)},stroke:function(e){this.colorBuffer[this.indices[0]]=u(e)},opacity:function(){},tagName:"circle",schema:"cx cy r cz".split(" ")},ellipse:{init:function(){},tagName:"ellipse",cx:e,cy:e,rx:e,ry:e},rect:{init:function(e){this.fBuffer[4*e]=0,this.indices=[4*e]},tagName:"rect",fill:function(e){this.colorBuffer[this.indices[0]]=0>e?e:u(e)},x:function(e){this.posBuffer[this.indices[0]+0]=e},y:function(e){this.posBuffer[this.indices[0]+1]=e},width:function(e){this.posBuffer[this.indices[0]+2]=e},height:function(e){this.posBuffer[this.indices[0]+3]=e},rx:e,ry:e},image:{init:function(){},tagName:"image","xlink:href":e,height:e,width:e,x:e,y:e},line:{init:function(e){this.indices=[2*e,2*e+1]},tagName:"line",x1:function(e){this.posBuffer[2*this.indices[0]]=e},y1:function(e){this.posBuffer[2*this.indices[0]+1]=e},x2:function(e){this.posBuffer[2*this.indices[1]]=e},y2:function(e){this.posBuffer[2*this.indices[1]+1]=e},stroke:function(e){var t=u(e);this.indices.forEach(function(e){this.colorBuffer[4*e]=parseInt(t.toString().slice(1),16)},this)}},path:{init:function(){},tagName:"path",d:j,pathLength:e,stroke:function(e){var t=u(e);this.indices.forEach(function(e){this.colorBuffer[e]=+parseInt(t.toString().slice(1),16)},this)}},polygon:{init:function(){},tagName:"polygon",points:e},polyline:{init:function(e){this.indices=[2*e,2*e+1]},tagName:"polyline",points:e},g:{init:function(){},tagName:"g",appendChild:function(e){this.children.push(H(e))},ctr:function(){this.children=[]}},text:{init:function(){},tagName:"text",x:e,y:e,dx:e,dy:e}},_t={querySelectorAll:L,children:Object.freeze([]),querySelector:function(e){return this.querySelectorAll(e)[0]},createElementNS:t,insertBefore:e,ownerDocument:{createElementNS:function(e,t){return t}},previousSibling:function(){canvas.scene[canvas.__scene__.indexOf(this)-1]},nextSibling:function(){canvas.scene[canvas.__scene__.indexOf()+1]},parent:function(){return __scene__},gl:at,transform:function(){},getAttribute:function(e){return this.attr[e]},setAttribute:function(e,t){t.ctr==xt&&(t=+t),this.attr[e]=t,this[e]&&this[e](t)},style:{setProperty:e},removeAttribute:function(e){delete this.attr[e]},textContent:e,removeEventListener:e,addEventListener:addEventListener,ownerSVGElement:{createSVGPoint:function(){}}},yt=[function(){},function(){},function(){},function(){},function(){},function(){},function(){},function(){},function(){},function(){}],xt={init:Q,update:function(){at.texImage2D(at.TEXTURE_2D,0,at.RGBA,at.RGBA,at.UNSIGNED_BYTE,this.data)},z:function(){var e=Math.sqrt(this.size);return function(t,n){return-1/e*~~(n%e)}},x:function(){var e=Math.sqrt(this.size);return function(t,n){return-1/e*~~(n%e)}},y:function(){var e=Math.sqrt(this.size);return function(t,n){return-1/e*~~(n/e)}},forEach:function(){},load:function(){var e=this.data;return e.complete||4==e.readyState?this.init():e.addEventListener&&e.addEventListener("load",this.init),this},repeat:function(){return this.task=this.update.bind(this),ut.push(this.task),this},stop:function(){this.task&&ut.splice(ut.indexOf(this.task)),delete this.task},appendChild:function(e){return this.__scene__[this.__scene__.length]=this.__renderTarget__.append(e.tagName||e)},valueOf:function(){return-1},copy:function(){return rt.texture(this.src)},pipe:tt,querySelectorAll:L,__scene__:[],ownerDocument:{createElementNS:function(e,t){return t}},unwrap:nt};s(W.prototype,ht,xt,{update:function(){at.texImage2D(at.TEXTURE_2D,0,at.RGBA,this.width,this.height,0,at.RGBA,at.FLOAT,this.data||null)}}),s(J.prototype,xt,{});var Et=["precision mediump float;","attribute vec2 pos;","  void main() {","  gl_Position = vec4( pos.xy, 1.0 , 1.0);","  }"].join("\n"),bt=[,"precision mediump float;","uniform sampler2D texture;","uniform vec2 resolution;","uniform vec2 mouse;","uniform vec2 dimensions;","vec4 texelAtOffet( vec2 offset ) { return texture2D(texture, (gl_FragCoord.xy + offset) / dimensions); }","void main() {","vec3 TARGET = vec3(mouse / resolution, 0.01 );","int slot = int( mod( gl_FragCoord.x, 2.0 ) );","if ( slot == 0 ) { ","vec4 dataA = texelAtOffet( vec2( 0, 0 ) );","vec4 dataB = texelAtOffet( vec2( 1, 0 ) );","vec3 pos = dataA.xyz;","vec3 vel = dataB.xyz;","float phase = dataA.w;","if ( phase > 0.0 ) {","pos += vel * 0.005;","if ( length( TARGET - pos ) < 0.035 ) phase = 0.0;","    else phase += 0.1;","} else {","    pos = vec3(-1);","}","    gl_FragColor = vec4( pos, phase );","} else if ( slot == 1 ) { ","vec4 dataA = texelAtOffet( vec2( -1, 0 ) );","vec4 dataB = texelAtOffet( vec2( 0, 0 ) );","vec3 pos = dataA.xyz;","vec3 vel = dataB.xyz;","float phase = dataA.w;","if ( phase > 0.0 ) {","vec3 delta = normalize( TARGET - pos );","vel += delta * 0.1;","    vel *= 0.991;","} else {","    vel = vec3(0);","}","    gl_FragColor = vec4( vel, 1.0 );","    }","}"].join("\n"),wt=Date.now();rt.sim.force=function(e){function t(){}function n(){var e=Date.now()-wt,t=[-1+2*Math.sin(.001*e),-.2+.5*Math.cos(.004*e),Math.sin(.015*e)*-.05];rt.uniform("dimensions",[c,f]),r(o=this.gl,s=this.texture,4e4,t)}function i(){var e=l*Math.random(),t=a(d3.mouse(d3.select("canvas").node())).concat(0);r(o,s,e,t)}function r(t,n,i,r,o){function a(e){var t=e.x+e.size;if(t>c){var n=t-c;e.size-=n,e={x:0,y:(e.y+1)%f,size:n},l.push(e),a(e)}}o=o||{x:0,y:0,z:0},t.activeTexture(t.TEXTURE0+n.unit),t.bindTexture(t.TEXTURE_2D,n);var s=~~(2*h%c),u=~~(h/f),l=[{x:s,y:u,size:2*i}];a(l[0]);var d,p,g,m,v,_,y=1;for(d=0,g=l.length;g>d;d++){for(v=l[d],_=[],p=0,m=v.size;m>p;p++)_.push(r[0],r[1],0,10*Math.random(),o.x+y*it(-1,1),o.y+y*it(-1,1),o.z+y*it(-1,1),0);t.texSubImage2D(t.TEXTURE_2D,0,v.x,v.y,v.size,1,t.RGBA,t.FLOAT,new Float32Array(_))}h+=i,h%=e}var o,s,u=new Float32Array(8*e),c=2*Math.sqrt(e),f=Math.sqrt(e),l=500,h=0,i=i.bind(this);return rt.texture(bt,{step:t,data:u,width:c,height:f,size:e,start:n,emit:i})}}();