d3 flowers2

_.md

[ Launch: d3 flowers2 ] 5371986 by hemulin

config.json

{"description":"d3 flowers2","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":true,"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:#1C3550 
}

inlet.js

var flower = function(maxBars, width, height, widthChange, heightChange, rotateSpeed, timeWait) {
  
  //##########################
  // vars and init
  //##########################
  var boundingBox = {'width':tributary.sw,'height':tributary.sh};
  var _x = Math.random()*boundingBox.width;
  var _y = Math.random()*boundingBox.height;
  var speed = initSpeed();
  var r = Math.random()*50;
  var rChange = heightChange/3;
  var rectColor = 'rgba(148, 213, 186, 0.8)';  
  var _width = width, _height = height, _maxBars = maxBars;
  var _heightChange = heightChange, _widthChange = widthChange;
  var rectArr = [];
  var gradient = newGradient();
  
 //##########################
 // flower play
 //##########################
  var animationState = 0;  
  var _tick = 0;
  
  var rotateStart = 1;
  var _this = this;
  var MIN_BARS = 20;
  if (maxBars < 2*MIN_BARS) {
   	_maxBars = 2*MIN_BARS;
  }
  //setMaxBars();
  
  this.play = function() {
   _this.timer = setInterval(flowerAnimate,50); 
  }
 
  
  
  function flowerAnimate() {
    _tick++; 
    if (_tick > 1000)
      clearInterval(_this.timer);
    
    if (_x > boundingBox.width || _x < 0) {
     speed.x *= -1;
    }
    if (_y > boundingBox.height || _y < 0) {
     speed.y *= -1;
    }
    _x += speed.x;
    _y += speed.y;
    switch (animationState) {
      case 0: increase();
              if (rectArr.length === _maxBars-1) {
               animationState = 1; 
              }
				break;
      case 1: changeStopColor();
				animationState = 2;
				rotateStart = _tick;
				break;
      case 2: rotate();
				if (_tick - rotateStart > 30)
                  animationState = 3;
				break;
      case 3: decrease();
				if (rectArr.length <= MIN_BARS)
					animationState = 4;
				break;
      case 4: changeStopColor();
				animationState = 5;
				rotateStart = _tick;
				break;
      case 5: rotate();
				if (_tick - rotateStart > 8)
                  animationState = 0;
				break;
      default:	console.log("error");        		
    }
   for(var i = 0; i < rectArr.length; i++) {
     rectArr[i].elem
    .attr("width", _width)
      .attr("height", _height)
      .attr("y", r)
      .attr("x", r)
      .attr("transform", "translate("+_x+","+_y+") rotate("+(rectArr[i].ang)+")");
    }
  }
  this.animate = flowerAnimate;
  
   

//##########################
// animation funcs
//##########################
  
  function increase() {
    _height += _heightChange;
    _width += _widthChange;
    r += rChange;
    addSingleRect();
  }
  
  function decrease() {
    _height -= _heightChange;
    _width -= _widthChange;
    r -= rChange;
    removeSingleRect();
  }
  
  function rotate() {
   for (var i = 0; i < rectArr.length; i++) {
     rectArr[i].ang += rotateSpeed;
   }
  }
  
//##########################
// Helpers
//##########################
  
function addSingleRect() {
 myRect = vis.append('rect')
      .style("fill", "url(#"+gradient.attr('id')+")");
    rectArr.push({"elem": myRect});
  for(var i = 0; i < rectArr.length; i++) {
	rectArr[i].ang = 360*i/rectArr.length;
  }
  }
  
  function removeSingleRect() {
  var e = rectArr.pop();
  e.elem.remove();
    for(var i = 0; i < rectArr.length; i++) {
	rectArr[i].ang = 360*i/rectArr.length;
  }
  }
 
  
  function setMaxBars() {
    _maxBars = Math.floor((Math.random()*_maxBars)+1); 
  } 
  
  function initSpeed() {
   var size =  7; //px per tick
   var ang = Math.random()*360;
   var speed = {"x": size*Math.cos(ang), "y": size*Math.sin(ang)};
    return speed;
  }
   
  function changeStopColor() {
    //console.log(gradient.select('stop:first-child'));
    gradient.select('stop:first-child').transition()
        .ease('elastic(20, 2)')
        .duration(400).attr('stop-color','#'+Math.floor(Math.random()*16777215).toString(16));
    
    gradient.select('stop:last-child').transition()
        .ease('elastic(20, 2)')
        .duration(400).attr('stop-color','#'+Math.floor(Math.random()*16777215).toString(16));
  }
}//FLOWER END

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

 var newGradient_id = 0;
  
  function newGradient() {
    
     var gradient = vis.append("svg:defs")
        .append("svg:linearGradient")
        .attr("id", "gradient_"+newGradient_id++)
        .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);
  
  var stop2 = gradient.append("svg:stop")
      .attr("offset", "100%")
      .attr("stop-color", "#c00")
      .attr("stop-opacity", 1);
    
    return gradient;
  }


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



var flowersArr = [];
var flowersAmount = 8;
var barGap = 40;
var heightGap = 50;
var widthGap = 25;
var heightChangeGap = 2;
for (var i = 0; i < flowersAmount; i++) {
	var maxBars = 40+Math.floor((Math.random()*barGap));
    var height = 25+Math.floor((Math.random()*heightGap));
  	var width = 0.01+Math.floor((Math.random()*widthGap));
  	var heightChange = 0+Math.floor((Math.random()*heightChangeGap));
    var f = new flower(maxBars, width, height, 0, heightChange, 1, 2);
    flowersArr.push(f);
    //f.play();
}
tributary.run = function(g, t) {
  	//console.log(t);
	for (var i = 0; i < flowersArr.length; i++) {
    	flowersArr[i].animate();
    }
}