fireworks

_.md

[ Launch: fireworks ] 26e97a21b360f5d08131 by omniwired

config.json

{"description":"fireworks","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":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/UjNoSfF.png"}

inlet.js

var svg = d3.select("svg")

var color = d3.scale.linear()
  .range(['#ff715b', 'hsl(61,100%,50%)'])

var afterColor = d3.scale.linear()
  .range(['#5bb5ff', 'hsl(356,100%,67%)'])

var offset = [[-1,-1],
              [0,-1],
              [1,-1],
              [-1,0],
              [0,0],
              [1,0],
              [0,1],
              [-1,1],
              [1,1]
               ];

var radius = 15;

svg.on('mousemove', function() {
  var coords = d3.mouse(this);

  var delta = radius * 4;

  for(var i=0; i < 9; i++) {
  svg.append('circle')
      .attr({
      r: radius,
      cx: coords[0],
      cy: coords[1],
      fill: function() {
     return color(Math.random()*1);
   }
	}).transition()
  	.duration(2000 + Math.random() * 1000)
  .attr({
    cx: coords[0]+delta*offset[i][0],
    cy: coords[1]+delta*offset[i][1],
    fill: function() {
     return afterColor(Math.random()*1);
   },
    r: Math.floor(Math.random() * 7)
  })
  .delay(923)
  .remove()
  }
})

svg.on('mousewheel', function(e) {
  radius = radius + d3.event.wheelDelta / 120; 
  if (radius < 1) {
    radius = 1;
  }

});

svg.on('mouseup', function() {
   var coords = d3.mouse(this);
   svg.selectAll('circle')
   .transition()
   .duration(2066)
    .attr({
      fill: 'none',
      stroke: 'black',
      r: 57,
      cx: coords[0],
      cy: coords[1]
    }).each(function() {
      d3.select(this).attr('stroke', function() {
        return afterColor(Math.random());
      });
    }).remove();
});