Tributary inlet

_.md

[ Launch: Tributary inlet ] 5520915 by gelicia

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}},"fullscreen":false,"play":true,"loop":true,"restart":true,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/6Mh1HLp.gif"}

inlet.js

//inspired by http://motionaday.tumblr.com/post/48697153197/heart-signal-tuesday-tohru-mitsuhashi

d3.select("body").style("background-color", "white"); 

var xScale = d3.scale.linear().domain([0,20]).range([0, tributary.sw]);
var yScale = d3.scale.linear().domain([0,5]).range([40, 120]);
var colors = ['#FF00FF', '#99CCFF', '#33FFCC', '#FFFF99', '#9966FF'];

tributary.init = function(g){
	
}
 
tributary.run = function(g, t){
 if (Math.round(t * 10) % 3 === 0){
    var xRand = Math.floor(Math.random() * 20)
    var yRand = Math.floor(Math.random() * 5)
    var sizeRand = Math.floor(Math.random() * 29) + 1
	var colorRand = colors[Math.floor(Math.random() * colors.length)];
    var delayRand = Math.floor(Math.random() * 1000) 
    var startPoint = {x: xScale(xRand), y: yScale(yRand)};
    rainDrop(g, startPoint, sizeRand, colorRand, delayRand);
  }
} 

function rainDrop(appendTo, startPoint, size, color, delay){
  var shape = appendTo.append('circle')
    .attr({
      cx: startPoint.x, 
      cy: startPoint.y,
      r: 0,
      "fill": "white"
    })
    .transition()
    .delay(delay)
    .duration(800)  
    .attr({ 
      cy: startPoint.y-(startPoint.y/3), 
      r: size,
      fill: color,
      "fill-opacity": 1
    })
    .transition()
    .duration(1000)
    .ease('exp') 
    .attr({
      cy: tributary.sh - 100,
      "fill-opacity":0 
    });       
  
  shape.remove();
}