Tributary inlet

_.md

[ Launch: Tributary inlet ] 2d92eab2215ef8c33ac7 by poezn

config.json

{"description":"Tributary inlet","endpoint":"","display":"canvas","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v3.min.js"}],"fileconfigs":{"inlet.js":{"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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"inline-console":true,"thumbnail":"http://i.imgur.com/zUYaSfu.png"}

inlet.js

var width = 750,
    height = 300;

var x,
    y,
    x1,
    y1,
    i = 1,
    r = 200,
    tau = 2 * Math.PI;

var canvas = tb.canvas;

var context = canvas.getContext("2d");
//context.globalCompositeOperation = "lighter";
context.lineWidth = 2;

var nodes = [],
    foci = [{x: 150, y: 150}, {x: 350, y: 150}, {x: 550, y: 150}],
    start = [{x: 100, y: height}, {x: 500, y: height}, {x: 600, y: height}];

var scale = d3.scale.linear()
.domain([0, 14.01, 22.01, 100])
.range([0, 1, 2, 3]);

var radiusStart = 2,
    radiusEnd   = 8;

var scaleTargetX = [
    d3.scale.linear().domain([0, 1]).range([radiusEnd, 98-radiusEnd]),
    d3.scale.linear().domain([0, 1]).range([125+radiusEnd, 181-radiusEnd]),
    d3.scale.linear().domain([0, 1]).range([204+radiusEnd, 750-radiusEnd])
];

var scaleSourceX = [
    d3.scale.linear().domain([0, 1]).range([0, 546]),
    d3.scale.linear().domain([0, 1]).range([572, 632]),
    d3.scale.linear().domain([0, 1]).range([650, 750])
];

var scaleTargetY = d3.scale.linear()
.domain([0, 1])
.range([0, 40]);


setInterval(function() {
  context.clearRect(0, 0, width, height);

  var idx = Math.floor(scale(Math.random() * 100));
  x = scaleSourceX[idx](Math.random()),
  y = height;
  x1 = scaleTargetX[idx](Math.random()),
  y1 = scaleTargetY(Math.random());
  console.log(x1-x, y-y1);
  
  d3.select({}).transition()
      .duration(20000)
      .ease("cubic-out")
      .tween("circle", function() {
        return function(t) {
          context.strokeStyle = "#000000";
          context.beginPath();
          context.arc(x+(x1-x)*t, y-(y-y1)*t, radiusStart + (radiusEnd - radiusStart)*t, 0, tau, false);
          context.fill();
        };
      });
}, 1000);