enjalot/_.md

## _.md

      
    Raw
  

              _.md
            
          
    [ Launch: bart particles ] 6199445 by enjalot
[ Launch: bart particles ] 6199415 by enjalot
[ Launch: bart particles ] 6199408 by enjalot
[ Launch: bart particles ] 6199401 by enjalot
[ Launch: bart particles ] 6199398 by enjalot
[ Launch: bart particles ] 6199373 by enjalot
[ Launch: bart particles ] 6198816 by enjalot
[ Launch: bart paths ] 6149065 by enjalot


## bart.html
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="694.36px" height="552.46px" viewBox="0 0 694.36 552.46" enable-background="new 0 0 694.36 552.46" xml:space="preserve">
<g id="water">

		<path id="path4193" sodipodi:nodetypes="ccsczzsszzzzzzzzzzzzzzzzzzzzzzsszzzzsszzzzzzzzzzzzzsszzzzzzzzzzzcczzzzzzzzzzzzzzzzcccczzzzczzzzzzzzzsszzzczzss" inkscape:export-ydpi="90" inkscape:export-xdpi="90" fill="#EBF9F6" stroke="#AFE9DD" stroke-width="0.7247" d="
		M505.215,560.656h1.703c8.211-0.051,7.418,3.578,7.418,6.727s0.168,6.727-7.418,6.727H411.02c-4.379,0-8.936-2.363-12.031-5.725
		l-12.145-13.186c-3.068-3.332-4.902-8.383-4.902-13.096v-0.332c0-3.676-3.84-7.752-7.225-7.752h-13.846
		c-4.322,0-8.842-2.273-11.898-5.59l-60.931-66.156c-3.032-3.291-4.799-8.303-4.799-12.959v-26.43
		c-0.005-3.664-4.071-7.395-7.431-7.395h-2.162c-3.269,0-7.161-3.725-7.161-7.275v-1.906c0-3.615,3.965-7.41,7.296-7.41h13.646
		c3.512,0,7.404-4.326,7.404-8.139v-1.467c0-4.672-2.12-9.544-5.164-12.848l-13.24-14.376c-3.058-3.319-5.061-8.274-5.061-12.97
		v-74.176c0-4.627-1.958-9.517-4.972-12.789l-48.62-52.788c-3.228-3.504-8.075-5.722-12.639-5.722h-60.691
		c-4.247,0-8.888-1.704-11.891-4.964l-2.293-2.489c-3.08-3.343-7.733-5.383-12.088-5.383h-11.369c-3.038,0-6.54,3.592-6.54,6.89
		v4.564c0,5-2.475,10.111-5.731,13.646l-4.585,4.979c-3.145,3.415-7.93,5.412-12.377,5.412H54.531c-4.329,0-8.948,2.045-12.01,5.369
		l-7.337,7.966c-3.083,3.348-5.187,8.305-5.187,13.039v487.713v42.32H-91.217V-36.824L96.672,167.173
		c3.27,3.55,8.123,5.942,12.747,5.942h14.332c4.32,0,8.978-1.913,12.033-5.229l4.132-4.486c3.026-3.286,7.562-5.386,11.842-5.386
		h11.188c3.107,0,6.379-4.006,6.379-7.38v-0.617c0-4.395-1.803-9.064-4.665-12.171l-4.14-4.494
		c-2.361-2.563-2.629-8.283-0.291-10.871l0.524-0.58c2.146-2.375,7.025-2.279,9.191,0.073l14.126,15.337
		c3.227,3.504,8.118,5.601,12.682,5.601h13.2c2.264,0,4.663-1.111,6.263-2.849l23.673-23.988c1.642-1.664,3.894-2.979,6.134-2.979
		h22.493c3.69,0,7.838-4.48,7.838-8.487v-15.71c0-4.807-2.021-9.892-5.151-13.291l-3.814-4.142
		c-3.047-3.309-4.944-8.291-4.944-12.97V10.921c0-4.648,1.798-9.636,4.826-12.923l4.099-4.45c2.998-3.254,7.46-5.413,11.699-5.413
		h62.422c4.662,0,9.501,2.542,12.796,6.12l8.885,9.646c3.238,3.517,7.557,6.997,12.139,6.997h377.885v13.789h-378.42
		c-4.324,0-8.723,2.576-11.779,5.895L325.018,76.16c-3.193,3.468-4.885,8.819-4.885,13.724v52.147c0,3.395,3.476,7.236,6.603,7.236
		h0.649c3.174,0,6.658,3.946,6.658,7.393v102.216c0,4.906,2.333,9.97,5.528,13.439l52.886,57.42c1.41,1.531-0.414,5.95-2.408,5.95
		h-7.117c-3.371,0-6.98,4.282-6.98,7.942v1.994c0,4.613,1.912,9.508,4.918,12.771l3.902,4.237c3.096,3.36,7.729,5.525,12.105,5.525
		h14.855c4.342,0,8.969,2.062,12.039,5.396l0.76,0.825c3.232,3.509,5.518,8.669,5.518,13.632v90.807
		c0,4.764,1.988,9.811,5.092,13.18l58.086,63.066C496.303,558.4,500.866,560.656,505.215,560.656z"/>
</g>
<g id="lines">
	<g>
		<path id="richmond" fill="none" stroke="#D40000" stroke-width="6" d="M226.268,494.363
			l-68.682-68.682c-6.028-6.027-9.962-15.029-9.962-23.555v-10.774c0-11.491,5.132-23.696,13.258-31.821l10.865-10.865
			c4.809-4.808,8.002-11.965,8.002-18.764v-12.568c0-11.479,5.236-23.626,13.353-31.743l41.627-41.627
			c8.027-8.027,20.165-12.903,31.517-12.903h126.1c6.273,0,13.428-6.916,13.428-13.19V113.155c0-6.105-6.607-13.187-12.715-13.187
			h-54.208"/>
		<path id="richmondfremont" fill="none" stroke="#FF7F2A" stroke-width="6" d="M338.892,93.968
			h53.455c8.992,0,19.316,9.838,19.316,18.83v159.524c0,6.988,2.959,14.479,7.9,19.42l244.646,244.646"/>
		<path id="pbbaypoint" fill="none" stroke="#FFCC00" stroke-width="6" d="
			M264.31,468.792h-43.9c-6.922,0-14.285-3.068-19.179-7.963l-39.585-39.586c-4.831-4.83-8.011-12.033-8.011-18.863v-10.404
			c0-10.197,4.478-21.061,11.688-28.271l10.92-10.921c5.9-5.899,9.561-14.79,9.561-23.135v-12.493
			c0-9.861,4.399-20.339,11.372-27.312l41.717-41.716c6.987-6.986,17.598-11.116,27.479-11.116h138.652
			c5.988,0,12.689-6.725,12.689-12.712v-45.474c0-6.225,6.836-13.348,13.061-13.348h29.25c6.863,0,14.172-3.016,19.025-7.868
			L595.018,41.639"/>
		<path id="dublin" fill="none" stroke="#006680" stroke-width="6" d="M645.465,396.32
			h-92.941c-6.994,0-14.463-3.023-19.41-7.969L397.477,252.713c-6.023-6.024-15.131-9.685-23.65-9.685H266.372
			c-8.349,0-17.336,3.434-23.24,9.337l-41.627,41.628c-5.989,5.988-9.616,15.049-9.616,23.52v12.136
			c0,9.985-4.433,20.604-11.494,27.665l-10.642,10.642c-5.985,5.985-10.085,14.842-10.085,23.308v33.592
			c0,6.92,3.106,14.264,7.999,19.156l53.391,53.391"/>
		<path id="fremont" fill="none" stroke="#225500" stroke-width="6" d="M671.17,534.73
			L392.936,256.496c-4.807-4.808-12.057-7.781-18.855-7.781H266.499c-6.934,0-14.342,2.995-19.245,7.898l-41.564,41.564
			c-4.966,4.967-7.946,12.49-7.946,19.514v11.958c0,11.423-5.014,23.592-13.091,31.669l-10.768,10.768
			c-4.925,4.926-8.303,12.211-8.303,19.178v7.143"/>
	</g>

</g>
</svg>
  <canvas id=canvas></canvas>
</div>

## config.json
{"description":"bart particles","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bart.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"seglist.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bart.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/yV372Lx.png"}

## inlet.js

var r = 10; //max offset from subway line
var pAlpha = 0.42;
var speed = 5;

tributary.duration = 20000;

var svg = d3.select("svg");
var display = d3.select("#display");
tributary.canvas = d3.select("#canvas")
.classed("tributary_canvas",true)
.node();
tributary.ctx = tributary.canvas.getContext('2d');
var ctx = tributary.ctx;
var canvas = tributary.canvas;
tributary.canvas.width = tributary.sw;
tributary.canvas.height = tributary.sh;

ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.35;

function clear() {
  if(!tributary.canvas) return;
  tributary.ctx.fillStyle = 'rgba(255,255,255,0.01)'
  tributary.ctx.fillRect(0, 0, tributary.sw, tributary.sh);
}


tributary.ppl = [];
var circleData = d3.range(6).map(function() {
  return {
    n: 50,
    diff: 1.1
  }
});
var lines = svg.select("#lines")
.selectAll("path")
.data(circleData)
.each(function() {
})


//map ride time to t
var ridesday = 60 * 16 / 10;
console.log("rides per day", ridesday)

function generate(node, t, count) {
  //var n = Math.round(1 * Math.random() * 2);

  //if(t < 0.1) n = 10;
  var n = 1;
  d3.range(n).forEach(function(i) {
    var len = node.getTotalLength();
    var extent = [0.0, 1.0];
    var v = extent[1] - extent[0];
    var scale = d3.scale.linear()
      .domain([0, 1])
      .range(extent);

    var offset = function(tt) {
      tt = (tt - t) * speed
      if(tt > 1) tt = 1;
      return scale(tt);
    }

    var rand = Math.random()
    var freq = 5.2 * Math.random() * Math.PI
    tributary.ppl.push({
      len: len,
      node: node,
      color: d3.rgb(d3.select(node).attr("stroke")),
      pos: function(t) {
        return node.getPointAtLength(extent[0] * len + offset(t) * v * len);
        //return node.getPointAtLength(offset(t) * len)
      },
      perp: function(t) {
        //return the offset vector
        //TODO Make perpendicular
        var tt = offset(t);
        var dt = 1/1000;
        var nx = this.pos(t).y - this.pos(t - dt).y;
        var ny = this.pos(t).x - this.pos(t - dt).x;
        var l = Math.sqrt(nx*nx + ny*ny);
        nx = nx/l;
        ny = -ny/l;
        if(!l) nx = 0;
        if(!l) ny = 0;
        this.r = r + (6 + count/2) * Math.sin(tt * Math.PI * 12 * rand + freq);// + 6 * count
        return {x: nx, y: ny}
      },
      w: 2,
      h: 2,
      offset: offset
    })
  })
}


tributary.run = function(g,t) {
  var display = d3.select("#display");
  var ctx = tributary.ctx;
  clear();

  var lines = svg.select("#lines")
    .selectAll("path")

  if(t < 0.001) {
    //reset
    console.log("reset")
    tributary.ppl = [];
    tributary.ctx.clearRect(0, 0, tributary.sw, tributary.sh);
    lines.each(function(d) {
      d.count = 1;
      generate(this, t, d.count);
    });
  }

  lines.each(function(d) {
    d.diff += d.n/1000;
    if(Math.floor(d.diff)) {
      d.count++;
      generate(this, t, d.count);
      d.diff = 0;
    }
  });


  //console.log(tributary.ppl.length)
  tributary.ppl.forEach(function(d,i) {
    //var o = (Math.sin(2 *Math.PI * (d.start + t/10)) + 1)/2;
    //var p = d.node.getPointAtLength(t*d.len);
    var p = d.pos(t);
    var pp = d.perp(t);

    var rr = d.r + 4;
    var x = p.x + pp.x * rr;
    var y = p.y + pp.y * rr;
    var a = pAlpha;
    if(d.offset(t) >= 1) {
      a = 0.0001;
      tributary.ppl.splice(tributary.ppl.indexOf(d),1);
    }
    ctx.fillStyle = 'rgba(' + d.color.r + ',' + d.color.g + ',' + d.color.b + ',' +  a + ')';
    //ctx.fillRect(x - d.w/2, y-d.h, d.w, d.h);
    ctx.beginPath();
    ctx.arc(x,y,d.w,0,2*Math.PI);
    ctx.fill();

    //ctx.fillStyle = 'rgba(0,0,0,0.9)';
    //ctx.fillRect(p.x + pp.x * rr, p.y + pp.y * rr, 5, 5);

  })
}
tributary.run(null, 0);
tributary.loop_type = "period";

## style.css
#canvas {
  position: absolute;
  top: 70px;
  left: 0;
}

#lines {
  opacity: 0.02;
}
	<div>
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	width="694.36px" height="552.46px" viewBox="0 0 694.36 552.46" enable-background="new 0 0 694.36 552.46" xml:space="preserve">
	<g id="water">

	<path id="path4193" sodipodi:nodetypes="ccsczzsszzzzzzzzzzzzzzzzzzzzzzsszzzzsszzzzzzzzzzzzzsszzzzzzzzzzzcczzzzzzzzzzzzzzzzcccczzzzczzzzzzzzzsszzzczzss" inkscape:export-ydpi="90" inkscape:export-xdpi="90" fill="#EBF9F6" stroke="#AFE9DD" stroke-width="0.7247" d="
	M505.215,560.656h1.703c8.211-0.051,7.418,3.578,7.418,6.727s0.168,6.727-7.418,6.727H411.02c-4.379,0-8.936-2.363-12.031-5.725
	l-12.145-13.186c-3.068-3.332-4.902-8.383-4.902-13.096v-0.332c0-3.676-3.84-7.752-7.225-7.752h-13.846
	c-4.322,0-8.842-2.273-11.898-5.59l-60.931-66.156c-3.032-3.291-4.799-8.303-4.799-12.959v-26.43
	c-0.005-3.664-4.071-7.395-7.431-7.395h-2.162c-3.269,0-7.161-3.725-7.161-7.275v-1.906c0-3.615,3.965-7.41,7.296-7.41h13.646
	c3.512,0,7.404-4.326,7.404-8.139v-1.467c0-4.672-2.12-9.544-5.164-12.848l-13.24-14.376c-3.058-3.319-5.061-8.274-5.061-12.97
	v-74.176c0-4.627-1.958-9.517-4.972-12.789l-48.62-52.788c-3.228-3.504-8.075-5.722-12.639-5.722h-60.691
	c-4.247,0-8.888-1.704-11.891-4.964l-2.293-2.489c-3.08-3.343-7.733-5.383-12.088-5.383h-11.369c-3.038,0-6.54,3.592-6.54,6.89
	v4.564c0,5-2.475,10.111-5.731,13.646l-4.585,4.979c-3.145,3.415-7.93,5.412-12.377,5.412H54.531c-4.329,0-8.948,2.045-12.01,5.369
	l-7.337,7.966c-3.083,3.348-5.187,8.305-5.187,13.039v487.713v42.32H-91.217V-36.824L96.672,167.173
	c3.27,3.55,8.123,5.942,12.747,5.942h14.332c4.32,0,8.978-1.913,12.033-5.229l4.132-4.486c3.026-3.286,7.562-5.386,11.842-5.386
	h11.188c3.107,0,6.379-4.006,6.379-7.38v-0.617c0-4.395-1.803-9.064-4.665-12.171l-4.14-4.494
	c-2.361-2.563-2.629-8.283-0.291-10.871l0.524-0.58c2.146-2.375,7.025-2.279,9.191,0.073l14.126,15.337
	c3.227,3.504,8.118,5.601,12.682,5.601h13.2c2.264,0,4.663-1.111,6.263-2.849l23.673-23.988c1.642-1.664,3.894-2.979,6.134-2.979
	h22.493c3.69,0,7.838-4.48,7.838-8.487v-15.71c0-4.807-2.021-9.892-5.151-13.291l-3.814-4.142
	c-3.047-3.309-4.944-8.291-4.944-12.97V10.921c0-4.648,1.798-9.636,4.826-12.923l4.099-4.45c2.998-3.254,7.46-5.413,11.699-5.413
	h62.422c4.662,0,9.501,2.542,12.796,6.12l8.885,9.646c3.238,3.517,7.557,6.997,12.139,6.997h377.885v13.789h-378.42
	c-4.324,0-8.723,2.576-11.779,5.895L325.018,76.16c-3.193,3.468-4.885,8.819-4.885,13.724v52.147c0,3.395,3.476,7.236,6.603,7.236
	h0.649c3.174,0,6.658,3.946,6.658,7.393v102.216c0,4.906,2.333,9.97,5.528,13.439l52.886,57.42c1.41,1.531-0.414,5.95-2.408,5.95
	h-7.117c-3.371,0-6.98,4.282-6.98,7.942v1.994c0,4.613,1.912,9.508,4.918,12.771l3.902,4.237c3.096,3.36,7.729,5.525,12.105,5.525
	h14.855c4.342,0,8.969,2.062,12.039,5.396l0.76,0.825c3.232,3.509,5.518,8.669,5.518,13.632v90.807
	c0,4.764,1.988,9.811,5.092,13.18l58.086,63.066C496.303,558.4,500.866,560.656,505.215,560.656z"/>
	</g>
	<g id="lines">
	<g>
	<path id="richmond" fill="none" stroke="#D40000" stroke-width="6" d="M226.268,494.363
	l-68.682-68.682c-6.028-6.027-9.962-15.029-9.962-23.555v-10.774c0-11.491,5.132-23.696,13.258-31.821l10.865-10.865
	c4.809-4.808,8.002-11.965,8.002-18.764v-12.568c0-11.479,5.236-23.626,13.353-31.743l41.627-41.627
	c8.027-8.027,20.165-12.903,31.517-12.903h126.1c6.273,0,13.428-6.916,13.428-13.19V113.155c0-6.105-6.607-13.187-12.715-13.187
	h-54.208"/>
	<path id="richmondfremont" fill="none" stroke="#FF7F2A" stroke-width="6" d="M338.892,93.968
	h53.455c8.992,0,19.316,9.838,19.316,18.83v159.524c0,6.988,2.959,14.479,7.9,19.42l244.646,244.646"/>
	<path id="pbbaypoint" fill="none" stroke="#FFCC00" stroke-width="6" d="
	M264.31,468.792h-43.9c-6.922,0-14.285-3.068-19.179-7.963l-39.585-39.586c-4.831-4.83-8.011-12.033-8.011-18.863v-10.404
	c0-10.197,4.478-21.061,11.688-28.271l10.92-10.921c5.9-5.899,9.561-14.79,9.561-23.135v-12.493
	c0-9.861,4.399-20.339,11.372-27.312l41.717-41.716c6.987-6.986,17.598-11.116,27.479-11.116h138.652
	c5.988,0,12.689-6.725,12.689-12.712v-45.474c0-6.225,6.836-13.348,13.061-13.348h29.25c6.863,0,14.172-3.016,19.025-7.868
	L595.018,41.639"/>
	<path id="dublin" fill="none" stroke="#006680" stroke-width="6" d="M645.465,396.32
	h-92.941c-6.994,0-14.463-3.023-19.41-7.969L397.477,252.713c-6.023-6.024-15.131-9.685-23.65-9.685H266.372
	c-8.349,0-17.336,3.434-23.24,9.337l-41.627,41.628c-5.989,5.988-9.616,15.049-9.616,23.52v12.136
	c0,9.985-4.433,20.604-11.494,27.665l-10.642,10.642c-5.985,5.985-10.085,14.842-10.085,23.308v33.592
	c0,6.92,3.106,14.264,7.999,19.156l53.391,53.391"/>
	<path id="fremont" fill="none" stroke="#225500" stroke-width="6" d="M671.17,534.73
	L392.936,256.496c-4.807-4.808-12.057-7.781-18.855-7.781H266.499c-6.934,0-14.342,2.995-19.245,7.898l-41.564,41.564
	c-4.966,4.967-7.946,12.49-7.946,19.514v11.958c0,11.423-5.014,23.592-13.091,31.669l-10.768,10.768
	c-4.925,4.926-8.303,12.211-8.303,19.178v7.143"/>
	</g>

	</g>
	</svg>
	<canvas id=canvas></canvas>
	</div>

	var r = 10; //max offset from subway line
	var pAlpha = 0.42;
	var speed = 5;

	tributary.duration = 20000;

	var svg = d3.select("svg");
	var display = d3.select("#display");
	tributary.canvas = d3.select("#canvas")
	.classed("tributary_canvas",true)
	.node();
	tributary.ctx = tributary.canvas.getContext('2d');
	var ctx = tributary.ctx;
	var canvas = tributary.canvas;
	tributary.canvas.width = tributary.sw;
	tributary.canvas.height = tributary.sh;

	ctx.globalCompositeOperation = 'source-over';
	ctx.globalAlpha = 0.35;

	function clear() {
	if(!tributary.canvas) return;
	tributary.ctx.fillStyle = 'rgba(255,255,255,0.01)'
	tributary.ctx.fillRect(0, 0, tributary.sw, tributary.sh);
	}



	tributary.ppl = [];
	var circleData = d3.range(6).map(function() {
	return {
	n: 50,
	diff: 1.1
	}
	});
	var lines = svg.select("#lines")
	.selectAll("path")
	.data(circleData)
	.each(function() {
	})


	//map ride time to t
	var ridesday = 60 * 16 / 10;
	console.log("rides per day", ridesday)

	function generate(node, t, count) {
	//var n = Math.round(1 * Math.random() * 2);

	//if(t < 0.1) n = 10;
	var n = 1;
	d3.range(n).forEach(function(i) {
	var len = node.getTotalLength();
	var extent = [0.0, 1.0];
	var v = extent[1] - extent[0];
	var scale = d3.scale.linear()
	.domain([0, 1])
	.range(extent);

	var offset = function(tt) {
	tt = (tt - t) * speed
	if(tt > 1) tt = 1;
	return scale(tt);
	}

	var rand = Math.random()
	var freq = 5.2 * Math.random() * Math.PI
	tributary.ppl.push({
	len: len,
	node: node,
	color: d3.rgb(d3.select(node).attr("stroke")),
	pos: function(t) {
	return node.getPointAtLength(extent[0] * len + offset(t) * v * len);
	//return node.getPointAtLength(offset(t) * len)
	},
	perp: function(t) {
	//return the offset vector
	//TODO Make perpendicular
	var tt = offset(t);
	var dt = 1/1000;
	var nx = this.pos(t).y - this.pos(t - dt).y;
	var ny = this.pos(t).x - this.pos(t - dt).x;
	var l = Math.sqrt(nxnx + nyny);
	nx = nx/l;
	ny = -ny/l;
	if(!l) nx = 0;
	if(!l) ny = 0;
	this.r = r + (6 + count/2) * Math.sin(tt * Math.PI * 12 * rand + freq);// + 6 * count
	return {x: nx, y: ny}
	},
	w: 2,
	h: 2,
	offset: offset
	})
	})
	}


	tributary.run = function(g,t) {
	var display = d3.select("#display");
	var ctx = tributary.ctx;
	clear();

	var lines = svg.select("#lines")
	.selectAll("path")

	if(t < 0.001) {
	//reset
	console.log("reset")
	tributary.ppl = [];
	tributary.ctx.clearRect(0, 0, tributary.sw, tributary.sh);
	lines.each(function(d) {
	d.count = 1;
	generate(this, t, d.count);
	});
	}

	lines.each(function(d) {
	d.diff += d.n/1000;
	if(Math.floor(d.diff)) {
	d.count++;
	generate(this, t, d.count);
	d.diff = 0;
	}
	});


	//console.log(tributary.ppl.length)
	tributary.ppl.forEach(function(d,i) {
	//var o = (Math.sin(2 Math.PI (d.start + t/10)) + 1)/2;
	//var p = d.node.getPointAtLength(t*d.len);
	var p = d.pos(t);
	var pp = d.perp(t);

	var rr = d.r + 4;
	var x = p.x + pp.x * rr;
	var y = p.y + pp.y * rr;
	var a = pAlpha;
	if(d.offset(t) >= 1) {
	a = 0.0001;
	tributary.ppl.splice(tributary.ppl.indexOf(d),1);
	}
	ctx.fillStyle = 'rgba(' + d.color.r + ',' + d.color.g + ',' + d.color.b + ',' + a + ')';
	//ctx.fillRect(x - d.w/2, y-d.h, d.w, d.h);
	ctx.beginPath();
	ctx.arc(x,y,d.w,0,2*Math.PI);
	ctx.fill();

	//ctx.fillStyle = 'rgba(0,0,0,0.9)';
	//ctx.fillRect(p.x + pp.x * rr, p.y + pp.y * rr, 5, 5);

	})
	}
	tributary.run(null, 0);
	tributary.loop_type = "period";
	#canvas {
	position: absolute;
	top: 70px;
	left: 0;
	}

	#lines {
	opacity: 0.02;
	}