red and black

_.md

[ Launch: red and black ] 6684778 by gelicia

config.json

{"description":"red and black","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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/nHh5HuB.gif"}

inlet.js

//o gifs u sai http://beesandbombs.tumblr.com/post/60460142504/red-n-black

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

var numHeight = 18;
var numWidth = 19;
var maxRadius = 20;
var margin = {t: 0, l: 0}

tributary.loop_type = "pingpong";
tributary.duration = 1000;

var sizeScale = d3.scale.linear()
    .domain([0, 1])
    .range([0, maxRadius]);

var colorScaleOne = d3.scale.linear()
	.interpolate(d3.interpolateHsl)
    .domain([0, 1])
    .range(["#FD0E0E", "#E02AD2"]);

var colorScaleTwo = d3.scale.linear()
	.interpolate(d3.interpolateHsl)
    .domain([0, 1])
    .range(["#1AA3BD", "#2C44C2"]);

var svg = d3.selectAll('svg');

svg.selectAll('circle.one').data(d3.range(numHeight*numWidth)).enter().append('circle')
.attr({
  cx: function(d,i){return ((i % numWidth) * (maxRadius*2)) + margin.l},
  cy: function(d,i){return (Math.floor(i/numWidth) * (maxRadius*2)) + margin.t;},
  r: maxRadius,
  "fill": colorScaleOne(0)
}).classed('one', true);

svg.selectAll('circle.two').data(d3.range(numHeight*numWidth)).enter().append('circle')
.attr({
  cx: function(d,i){return ((i % numWidth) * (maxRadius*2)) + margin.l + maxRadius},
  cy: function(d,i){return (Math.floor(i/numWidth) * (maxRadius*2)) + margin.t + maxRadius;},
  r: 0,
  "fill": colorScaleTwo(0)
}).classed('two', true);

tributary.run = function(unused, t){
  var easedT = t*t*(3 - 2*t);
  
  svg.selectAll('circle.one')
  .attr({
    r: sizeScale(easedT),
    "fill": colorScaleOne(easedT)
  });
  
  svg.selectAll('circle.two')
  .attr({
    r: maxRadius-sizeScale(easedT),
    "fill": colorScaleTwo(easedT)
  });
}

style.css

.black {
	fill: black;
}

.red {
	fill: red;
}