armollica/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      var width = 960,
          height = 500;

      var scale = {
        x: d3.scale.linear().domain([0, 1]).range([0, width]),
        y: d3.scale.linear().domain([0, 1]).range([height, 0]),
        r: d3.scale.linear().domain([0, 1]).range([1, 4]),
        a: d3.scale.linear().domain([0, 1]).range([.1, .6])
      };

      var canvas = d3.select("body").append("canvas")
        .attr("width", width)
        .attr("height", height);

      var context = canvas.node().getContext("2d");

      var particles = d3.range(1000)
        .map(function() {
          return {
            x: Math.random(),
            y: Math.random(),
            r: Math.random(),
            t: Math.random()*2*Math.PI
          };
        });

      draw(particles);
      setInterval(function() {
        particles = tick(particles);
        draw(particles);
      }, 66);

      function tick(particles) {
        return particles.map(function(d) {
          d.t += Math.random()*.5 - .25;
          d.x += .001*Math.cos(d.t);
          d.y += .001*Math.sin(d.t);
          d.r += Math.random()*.01 - .005;
          if (d.x < 0 || d.x > width) {
            d.x = .5;
            d.r = .1;
          }
          if (d.y < 0 || d.y > height) {
            d.y = .5;
            d.r = .1;
          }
          if (d.r <= 0) d.r = .1;
          return d;
        });
      }

      function draw(particles) {
        context.clearRect(0, 0, width, height);
        particles.forEach(function(d) {
          var x = scale.x(d.x),
              y = scale.y(d.y),
              r = scale.r(d.r),
              a = scale.a(d.r);

          context.beginPath()
          context.arc(x, y, r, 0, 2*Math.PI);
          context.fillStyle = "rgba(255, 255, 255," + a + ")";
          context.fill();
        });
      }
    </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	body {
	background-color: black;
	}
	</style>
	</head>
	<body>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var width = 960,
	height = 500;

	var scale = {
	x: d3.scale.linear().domain([0, 1]).range([0, width]),
	y: d3.scale.linear().domain([0, 1]).range([height, 0]),
	r: d3.scale.linear().domain([0, 1]).range([1, 4]),
	a: d3.scale.linear().domain([0, 1]).range([.1, .6])
	};

	var canvas = d3.select("body").append("canvas")
	.attr("width", width)
	.attr("height", height);

	var context = canvas.node().getContext("2d");

	var particles = d3.range(1000)
	.map(function() {
	return {
	x: Math.random(),
	y: Math.random(),
	r: Math.random(),
	t: Math.random()2Math.PI
	};
	});

	draw(particles);
	setInterval(function() {
	particles = tick(particles);
	draw(particles);
	}, 66);

	function tick(particles) {
	return particles.map(function(d) {
	d.t += Math.random()*.5 - .25;
	d.x += .001*Math.cos(d.t);
	d.y += .001*Math.sin(d.t);
	d.r += Math.random()*.01 - .005;
	if (d.x < 0 \|\| d.x > width) {
	d.x = .5;
	d.r = .1;
	}
	if (d.y < 0 \|\| d.y > height) {
	d.y = .5;
	d.r = .1;
	}
	if (d.r <= 0) d.r = .1;
	return d;
	});
	}

	function draw(particles) {
	context.clearRect(0, 0, width, height);
	particles.forEach(function(d) {
	var x = scale.x(d.x),
	y = scale.y(d.y),
	r = scale.r(d.r),
	a = scale.a(d.r);

	context.beginPath()
	context.arc(x, y, r, 0, 2*Math.PI);
	context.fillStyle = "rgba(255, 255, 255," + a + ")";
	context.fill();
	});
	}
	</script>
	</body>
	</html>