blurrrrrrrrrrrr FILTER fade

_.md

[ Launch: blurrrrrrrrrrrr FILTER fade ] 5422471 by enjalot
[ Launch: blurrrrrrrrrrrr FILTER circle ] 5422321 by enoex
[ Launch: blurrrrrrrrrrrr FILTER ] 5418074 by enoex
[ Launch: blurrrrrrrrrrrr FILTER ] 5418024 by enoex
[ Launch: Tributary inlet ] 5417941 by enoex

config.json

{"description":"blurrrrrrrrrrrr FILTER fade","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ZnhDURE.png"}

inlet.js

var svg = d3.select("svg")

//CLIP
var circleRadius = 40;
var clips = svg.append('svg:defs')
.append('svg:mask')
	.attr({id: 'mask'})

var addMask = function(x,y){
  var clip = clips.append('svg:circle')
  .attr({ cx: x, cy: y, r: circleRadius, 
         fill: '#ffffff',
         'class': 'clipCircle'});
  return clip;
  
  /*
var clip = clips.append('svg:path')
	.attr({
  		d: 'M0 0 L150 200 L200 0',
      'stroke-width': '4px',
      'stroke': '#343434'
	});
*/
};
//BLUR
var defs = svg.append('svg:defs');
var filterBlur = defs.append('svg:filter')
	.attr({ id: 'blur' });

filterBlur.append('feGaussianBlur')
		.attr({
      		'in': "SourceGraphic",
      		'stdDeviation': 5
		});

//IMAGE
svg.append('svg:image')
.attr({
  x: 0,
  y: 0,
  filter: 'url(#blur)',
  'xlink:href': 'http://metteingvartsen.net/wp-content/uploads/Picture-Giant-City_credit-Jan-Egil-Kirkeb%C3%B8.jpg',
  width: 800,
  height: 500,
  fill: '#336699'
})

//MASK
var mask = svg.append('svg:image')
.attr({
  x: 0,
  y: 0,
  'xlink:href': 'http://metteingvartsen.net/wp-content/uploads/Picture-Giant-City_credit-Jan-Egil-Kirkeb%C3%B8.jpg',
  'mask': 'url(#mask)',
  width: 800,
  height: 500, filter: 'url(#blur2)',
  fill: '#336699'
});

var pointsAdded = {};

//erase on mouse over
var move = function(e){
  var x = parseInt(d3.event.pageX + circleRadius/2,10);
  var y = parseInt(d3.event.pageY - 60 - circleRadius,10);
  
  x = Math.round(x / (circleRadius/8)) * (circleRadius/8);
  y = Math.round(y / (circleRadius/8)) * (circleRadius/8);
  if(pointsAdded[x+'_'+y]){
    console.log('added already');
    //super ultra optimization to not add a shit load of nodes
    return false;
  }
  pointsAdded[x+'_'+y] = true;
  
  var clip = addMask(x,y);
  clip.transition().ease('quadratic').duration(3000).attr({ fill: '#000000', 'r':0 }).end().remove()
};

svg.on('touchmove', move);
svg.on('mousemove', move);