d3 flowers

_.md

[ Launch: Tributary inlet ] 5354110 by hemulin

config.json

{"description":"d3 flowers","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},"singleFlower":{"default":true,"vim":false,"emacs":false,"fontSize":12},"singleFlower.js":{"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 = d3.select("svg").append("svg");


//var flower = new tributary.flower(100, 10, 10, 0, 0,  0.02, 1, 1, 0, 1, 2);

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

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

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

var rotateSpeed = 1;

var maxBars;

var rectArr = [];


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

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 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
//##########################

var animFlag = 0;
var startTime = 0;

tributary.run = function(g,t) {
  if (n < maxBars-1 && animFlag === 0)
    increase();
  else if (n === maxBars-1) {
    animFlag = 1;
    n--;
    startTime = t;
    changeStopColor();
  }
  else if (animFlag === 1 && (t-startTime < 1))
    rotate();
  else if (animFlag === 1 && (t-startTime >= 1) && n >= 0) {
   //changeStopColor();
    decrease();
  }
  else {
   animFlag = 0;
   resetValues();
    setMaxBars();
   changeStopColor();
  }
}

//=========================================
//HELPERS
//=========================================
var heightChange = 4, widthChange = 0.1, xChange = 0.5, yChange = 0;

function setMaxBars() {
 maxBars = Math.floor((Math.random()*150)+1); 
}

function resetValues() {
  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 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))
}

singleFlower.js

tributary.flower = function(maxBars, width, height, x, y,  widthChange, heightChange, xChange , yChange, rotateSpeed, timeWait) {
  
  //##########################
  // vars and init
  //##########################
  var initRects = 0;
  var rectColor = 'rgba(148, 213, 186, 0.8)';  
  var _width = width, _height = height, _x = x, _y = y, _maxBars = maxBars;
  var C_WIDTH = width, C_HEIGHT = height, C_X = x, C_Y = y;
  var _heightChange = heightChange, _widthChange = widthChange, _xChange = xChange, _yChange = yChange;
  var rectArr = [];
  
 

//##########################
// animation funcs
//##########################
  
  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 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+")");
   }
  }
  
//##########################
// Helpers
//##########################
  
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+")");
   } 
  }
  
    function resetValues() {
    _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();
    }
  }  
  
  
//##########################
// 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))
  }
  
  
}