Tributary inlet

_.md

[ Launch: Tributary inlet ] 5325832 by hemulin

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var vis = d3.select("svg").append("svg");

//vis.style("fill", "rgb(238,240,250)");


var rectColor = 'rgba(41, 160, 200, 0.8)';

vis.attr('transform', 'translate(250, 250)');

var n =154, width = 14, height = 150, y = 20, x = 20;

var rectArr = [];

for (var i=0; i < n; i++) {
  var singleRect = createElem();
  rectArr.push(singleRect);
}

function createElem() {
    var myRect = vis.append('rect')
    .attr("width", width)
    .attr("height", height)
    .attr("y", y)
    .attr("x", x)
    .style('fill', rectColor);
  return myRect;
    //.attr("transform", "translate(300, 300) rotate("+i+1/(n*Math.PI*9)+")");
    //rectArr.push(this);
}

//console.log(rectArr[1]);

function play() {
  for (var i = 0; i < rectArr.length; i++) {
       //console.log("hello");
       var me = rectArr[i];
       //console.log(me,"hello");
       
       me.transition().duration(1000)
       //.attr("height", height*1.5)
       .attr("transform", "translate(300, 300) rotate("+i/2*Math.PI*n+")")
    	.attr('x', 10*i/6);
     }
}

tributary.run = function(g,t) {
  play();
}