Tributary inlet

_.md

[ Launch: Tributary inlet ] 5335861 by hemulin

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"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},"css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"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}

css

body{
	background-color: #6B4A30;
}

inlet.js

var vis;

createVis();

//##########################
//vars
//##########################

var rectColor = 'rgba(148, 213, 186, 0.8)';

var n = 10, width = 2, height = 10, y = 0, x = 0;

var C_N = n, C_WIDTH = width, C_HEIGHT = height, C_X = x; C_Y = y;

var rotateFactor = 90*Math.PI/180, rotateSpeed = 1;

var flag = false, maxBars = 70;

var radToDeg = 180/Math.PI;

var rectArr = [], rotateConst = 2;

//Painting the rects
function createElem(n) {
  rectArr = [];
  for (var i = 0; i < n; i++) {
    myRect = vis.append('rect')
      .attr("width", width)
      .attr("height", height)
      .attr("y", y)
      .attr("x", x)
      .attr("transform", "translate(300,300) rotate("+360*i/n+")")
      .style("fill", "url(#gradient)");
    rectArr.push({"elem": myRect, 'ang': 360*i/n});
  }
}


//##########################
// animation funcs
//##########################

function addRects() {
  if (n > 0 && n < maxBars && !flag) {
    increase();
  }
  if (n === maxBars) {
    flag = true;
    changeStopColor();
    //rotate();
  }
  if(flag && n !== 0)
    decrease();
  if (n === 0) {
    flag = false;
    increase();
    changeStopColor();
  }
}

function zoom() {
 for (var i = 0; i < rectArr.length; i++) {
   rectArr[i].elem.attr("transform", "translate("+height/2+","+width/2+") rotate(45)");
  } 
}

function rotate() {
  for (var i = 0; i < rectArr.length; i++) {
   rectArr[i].ang -= rotateSpeed;
   rectArr[i].elem.attr("transform", "translate(300,300) rotate("+rectArr[i].ang+")");
  }
}


//##########################
// Main play
//##########################

createElem(n);
var animFlag = 0;
var startTime = 0;

tributary.run = function(g,t) {
  if (n < maxBars-1 && animFlag === 0) {
    addRects(false);
  }
  else if (n === maxBars-1) {
    animFlag = 1;
    n--;
    startTime = t;
    changeStopColor();
  }
  else if (animFlag === 1 && (t-startTime < 1)) {
    rotate();
   // console.log(t);
  }
  else {
   animFlag = 0;
   resetValues();
   changeStopColor();
  }
}

//=========================================
//HELPERS
//=========================================

var dimFlag = true, heightChange = 4, widthChange = 0.2, xChange = 0.5, yChange = 0;


function resetValues() {
  n = C_N;
  width = C_WIDTH;
  height = C_HEIGHT;
  x = C_X;
  y = C_Y;
  emptyRects();
  //rectArr = [];
}

function emptyRects() {
  for (var i = 0; i < rectArr.length; i++) {
    rectArr[rectArr.length-1].elem.remove();
    rectArr.pop();
  }
}

function increase() {
    n++;
    height += heightChange;
    width += widthChange;
    x+=xChange;
    y+=yChange;
  addSingleRect();
 }

function decrease() {
    n--;
    height -= heightChange;
    width -= widthChange;
    x -= xChange;
    y -= yChange;
  removeSingleRect();
}

function createVis() {
  vis = d3.select("svg").append("svg");
}

function addSingleRect() {
 myRect = vis.append('rect')
      .attr("width", width)
      .attr("height", height)
      .attr("y", y)
      .attr("x", x)
      .attr("transform", "translate(300,300) rotate("+(360*(rectArr.length+1))/n+")")
      .style("fill", "url(#gradient)");
    rectArr.push({"elem": myRect, 'ang': 360*i/n});
   for(var i = 0; i < rectArr.length; i++) {
	rectArr[i].elem
    .attr("width", width)
      .attr("height", height)
      .attr("y", y)
      .attr("x", x)
      .attr("transform", "translate(300,300) rotate("+360*i/n+")");
     rectArr[i].ang = 360*i/n;
  }
}

function removeSingleRect() {
  console.log("remove");
  rectArr[rectArr.length-1].elem.remove();
  rectArr.pop();
  for(var i = 0; i < rectArr.length; i++) {
	rectArr[i].elem
    .attr("width", width)
    .attr("height", height)
    .attr("y", y)
    .attr("x", x)
    .attr("transform", "translate(300,300) rotate("+360*i/n+")");
  } 
}

//############################
//	Gradient
//############################

var gradient = vis.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "100%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");


var stop1 = gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#0c0")
    .attr("stop-opacity", 1)
	.attr('id', 'stop1');

var stop2 = gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#c00")
    .attr("stop-opacity", 1)
	.attr('id', 'stop2');

function changeStopColor() {
  stop1.transition()
      .ease('elastic(20, 2)')
      .duration(400).attr('stop-color','#'+Math.floor(Math.random()*16777215).toString(16));
  stop2.transition()
      .ease('elastic(20, 2)')
      .duration(400).attr('stop-color','#'+Math.floor(Math.random()*16777215).toString(16))
}