wanna bounce

_.md

[ Launch: wanna bounce ] 5615900 by gelicia

config.json

{"description":"wanna bounce","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":false,"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/rET4CdA.gif","ajax-caching":true}

inlet.js

var numOfStairs = 8;
var stairDim = {height: 50, width: 101};
var startPoint = {x: 279, y: 110};
var stairGrowth = 24;
var ballSize = {begin: 5, end: 19};

var colors = [{r: 255, g: 0, b: 0},//r
              {r: 255, g: 128, b: 0},//o
              {r: 255, g: 255, b: 0},//y
             {r: 0, g: 255, b: 0},//g              
             {r: 0, g: 0, b: 255},//b
             {r: 255, g: 0, b: 255}//v
            ];
  
var svg = d3.selectAll('svg');
var stairs = d3.range(numOfStairs);

//tributary.init(function(){
  //draw stairs
  svg.selectAll('rect')
  .data(stairs)
  .enter()
  .append('rect')
  .attr({
    x: function(d,i){return startPoint.x - (i*(stairGrowth/2));},
    y: function(d,i){return startPoint.y + (stairDim.height * i);},
    height: stairDim.height,
    width: function(d,i){return stairDim.width + (i*stairGrowth) },
    fill: function(d,i){var stairColor = i * Math.floor(255/(numOfStairs-1)); return 'rgb(' + stairColor + ',' + stairColor + ',' + stairColor + ')';}
  }); 
 
//}); 
 

//constant fall values
  var fallScaleSpeed = d3.scale.linear().domain([0, numOfStairs])
  .range([200, 500]);
  var fallScaleSize = d3.scale.linear().domain([0, numOfStairs])
  .range([ballSize.begin, ballSize.end]);

tributary.run = function(g, t){
 // console.log(t.toString())
  if (t ===0){
    var positionOff= Math.floor(Math.random() * 100) - 50;
    var color = colors[Math.floor(Math.random() * colors.length)];
    var fallScaleColor = d3.scale.linear().domain([0, numOfStairs])
  .range([colorStr(color, 150), colorStr(color, 0)]);
    
    addCircle(positionOff, fallScaleSpeed, fallScaleColor,fallScaleSize);  
   }
}


function colorStr (color, offset){
  return 'rgb(' + (color.r-offset < 0 ? 0 : color.r-offset) + ', ' + 
    (color.g-offset < 0 ? 0 : color.g-offset) + ',' + 
    (color.b-offset < 0 ? 0 : color.b-offset) + ')';
}

function addCircle(positionMod, fallScaleSpeed, fallScaleColor, fallScaleSize){
  var bounceCircle = svg.append('circle')
  .attr({
    cx: startPoint.x  + (stairDim.width/2) + positionMod,
    cy: startPoint.y - 20,  
    r: ballSize.begin,
    fill:fallScaleColor(0),
    'fill-opacity': 1
  });   
    
  var prev = bounceCircle.transition()
      .duration(fallScaleSpeed(0))
      .ease('exp') 
      .attr({
        cx: startPoint.x + (stairDim.width/2) + positionMod,
        cy: startPoint.y,
        fill: fallScaleColor(0),
        'fill-opacity': 1
      });            
  
  for (var i = 1; i <= numOfStairs-1; i++){
      prev = funcTrans(prev, i, fallScaleSpeed, fallScaleColor, positionMod);
  }
            
  prev.transition()
  .duration(1000)
  .ease('exp')
  .attr({
    cx: startPoint.x + (stairDim.width/2) + positionMod,
    cy : tributary.sh,
    'fill-opacity': 0
  }).remove();  
}
   
function funcTrans(prev, i, fallScaleSpeed, fallScaleColor, positionMod){
    prev = prev.transition()
    .duration(fallScaleSpeed(i)) 
    .ease('exp')
    .attr({
      cx: startPoint.x + (stairDim.width/2) + positionMod, 
      cy: startPoint.y + (i * stairDim.height) - fallScaleSize(i),
      r: fallScaleSize(i),
      fill: fallScaleColor(i)  
    })
    .transition()
    .duration(60) 
    .ease('linear')
    .attr({
     cy: startPoint.y + (i * stairDim.height) - (i * 5) - 5
    }); 
  
  return prev; 
}