[ Launch: blurrrrrrrrrrrr FILTER ] 5418074 by enoex
[ Launch: blurrrrrrrrrrrr FILTER ] 5418024 by enoex
[ Launch: Tributary inlet ] 5417941 by enoex
-
-
Save erikhazzard/5418074 to your computer and use it in GitHub Desktop.
blurrrrrrrrrrrr FILTER circle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"blurrrrrrrrrrrr FILTER circle","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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var svg = d3.select("svg") | |
.attr({ | |
}); | |
//CLIP | |
var circleRadius = 30; | |
var clips = svg.append('svg:defs') | |
.append('svg:clipPath') | |
.attr({id: 'clip'}) | |
var addMask = function(x,y){ | |
var clip = clips.append('svg:circle') | |
.attr({ cx: x, cy: y, r: circleRadius }); | |
/* | |
var clip = clips.append('svg:path') | |
.attr({ | |
d: 'M0 0 L150 200 L200 0', | |
'stroke-width': '4px', | |
'stroke': '#343434' | |
}); | |
*/ | |
}; | |
addMask(0,0); | |
//RECT | |
//BLURRED RECT | |
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', | |
//'clip-path': 'url(#clip)', | |
width: 800, | |
height: 500, | |
fill: '#336699' | |
}) | |
//BLUR | |
var defs = svg.append('svg:defs'); | |
var filterBlur = defs.append('svg:filter') | |
.attr({ id: 'blur' }); | |
filterBlur.append('feGaussianBlur') | |
.attr({ | |
'in': "SourceGraphic", | |
'stdDeviation': 5 | |
}); | |
//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', | |
'clip-path': 'url(#clip)', | |
width: 800, | |
height: 500, filter: 'url(#blur2)', | |
fill: '#336699' | |
}); | |
var pointsAdded = {}; | |
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; | |
addMask(x,y); | |
}; | |
svg.on('touchmove', move); | |
svg.on('mousemove', move); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment