|
'use strict'; |
|
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////////// |
|
/////////////////////////// @eesur's code ///////////////////////////////// |
|
/////////////////////////////////////////////////////////////////////////// |
|
|
|
var w = window.innerWidth; |
|
var h = window.innerHeight; |
|
|
|
// store generated data |
|
var data = []; |
|
|
|
var svg = d3.select('body').append('svg').attr('width', w).attr('height', h); |
|
|
|
/////////////////////////////////////////////////////////////////////////// |
|
///////////////// Gooey filter (from Nadieh Bremmer) ////////////////////// |
|
/////////////////////////////////////////////////////////////////////////// |
|
|
|
//SVG filter for the gooey effect |
|
//Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ |
|
var defs = svg.append("defs"); |
|
var filter = defs.append("filter").attr("id","gooeyCodeFilter"); |
|
filter.append("feGaussianBlur") |
|
.attr("in","SourceGraphic") |
|
.attr("stdDeviation","10") |
|
//to fix safari: http://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image |
|
.attr("color-interpolation-filters","sRGB") |
|
.attr("result","blur"); |
|
filter.append("feColorMatrix") |
|
.attr("in","blur") |
|
.attr("mode","matrix") |
|
.attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9") |
|
.attr("result","gooey"); |
|
|
|
//Create a wrapper for the circles that has the Gooey effect applied to it |
|
var circleWrapper = svg.append("g") |
|
.style("filter", "url(#gooeyCodeFilter)"); |
|
|
|
/////////////////////////////////////////////////////////////////////////// |
|
|
|
// var circle = svg.selectAll('circle'); //ORIG |
|
var circle = circleWrapper.selectAll('circle'); |
|
|
|
var force = d3.layout.force() |
|
.size([w, h]) |
|
.linkStrength(0.1) |
|
.friction(0.7) |
|
.on('tick', function () { |
|
circle.attr('cx', function (d) { |
|
return d.x; |
|
}).attr('cy', function (d) { |
|
return d.y; |
|
}); |
|
}); |
|
|
|
var render = function render(data) { |
|
circle = circle.data(data, function (d) { |
|
return d.id; |
|
}); |
|
|
|
circle.enter().append('circle').attr('fill', function (d) { |
|
return d.color; |
|
}).attr('r', Math.floor(Math.random() * 50)).call(force.drag); |
|
|
|
circle.exit().transition().attr('r', 0).remove(); |
|
|
|
force.nodes(data).start(); |
|
}; |
|
|
|
// generate some data |
|
var updateCounter = 0; |
|
var maxUpdates = 60; // only add blobs this number of times, then stop. |
|
var updateInterval; |
|
function update() { |
|
|
|
var n = 0; |
|
var c = ['#FF95FF', '#FCFCFC', '#FFEB3A', '#FFC101', '#14F0EE']; |
|
|
|
return function () { |
|
|
|
// Stop adding blobs if reach max. |
|
updateCounter++; |
|
//console.log("updateCounter:", updateCounter); |
|
if (updateCounter >= maxUpdates) { |
|
console.warn("updateCounter >= "+ maxUpdates +" >>> stopping update cycle."); |
|
window.clearInterval(updateInterval); |
|
} |
|
|
|
data.push({ |
|
id: n, |
|
color: c[n % 5] |
|
}); |
|
//console.log(data); |
|
render(data); |
|
n++; |
|
|
|
}; |
|
|
|
} |
|
|
|
// update every second |
|
// note: calling as update()(); (higher order function) |
|
updateInterval = window.setInterval(update(), 1000); |
