jcnesci/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Having fun recreating the gooey blob effect from this World POTUS project by Accurat and Google:
http://www.worldpotus.com
Code initially forked from eesur's block (d3js | circles update with force layout) and then added Nadieh's gooey + color blending effect
(Gooey effect - Rotating circles - Blending colors)

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<!-- http://clrs.cc/ -->
<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">
<style>
    body { background: #488DFB; }
</style>

<body>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- d3 code -->
<script src="script-compiled.js" charset="utf-8"></script>


## script-compiled.js
'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);
	<!DOCTYPE html>
	<meta charset="utf-8">
	<!-- http://clrs.cc/ -->
	<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">
	<style>
	body { background: #488DFB; }
	</style>

	<body>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<!-- d3 code -->
	<script src="script-compiled.js" charset="utf-8"></script>
	'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);