thole/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<html>
    <head>
      <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
      <style>
        circle.wup {
          stroke-width: 0.5;
          fill:steelblue;
          stroke:black;
          fill-opacity:1;
          stroke-opacity:1;
        }
      </style>
    </head>
    <body>
      <div id="wups"></div>
    </body>

    <script>

      var circle = {};
      circle.cx = 480;
      circle.cy = 250;
      circle.r = 10;
      circle.t = 1;
      circle.d = 2 * Math.PI;
      circle.count = 0;

        circle.next = function(w,h,c){
            if(this.count > c - 10){
                circle.t = -1;
            }

            var r = this.r  + circle.t *  Math.floor((Math.random()*2)+1);
            if(r < 2){r = 2;circle.t = 1}
            if(r > 18){r = 18;circle.t = -1}

            var randomD = Math.floor((Math.random()*25)+1);

            // edge detection
            if(circle.cx <= 0 + 18 || circle.cx > (w-18)  || circle.cy <= 0 + 18 || circle.cy > (h-18)){
                d = (circle.d + Math.PI + (2 * Math.PI)) % (2 * Math.PI)
            }
            // randpm direction change
            else if(randomD === 1){
               var d =  Math.random()*2 * Math.PI;
            }
            else{
                d = circle.d;
            }

            var l = Math.floor((Math.random())+1);
            var cx = this.cx + l * Math.cos(d);
            var cy = this.cy + l * Math.sin(d);
            var randomT = Math.floor((Math.random()*10)+1);


            var result = {
                'cx':cx,
                'cy':cy,
                'r':r,
                't': randomT === 1 ? -1 * circle.t : circle.t,
                'd':d,
                'count':this.count + 1,
                'next':this.next
            }

            return result;
        };

        var w = 960;
        var h = 500;
        var m = [10,10,10,10]
        var wupcounter = w*h/20;

        var wups = new Array();

        var svg = d3.select("#wups").append("svg")
                .attr("width", w + m[1] + m[3])
                .attr("height", h + m[0] + m[2])

        var lastCircle = [10,10,10];

        for(var i = 0; i < wupcounter; i++){
            circle  = circle.next(w + m[1] + m[2],h + m[0] + m[3],wupcounter);
            wups.push(circle);
        }

        svg.selectAll("circle")
              .data(wups)
              .enter()
              .append("circle")
              .attr("class","wup")
              .attr('cx',function(d){return d.cx;})
              .attr('cy',function(d){return d.cy;})
              .attr('r',function(d){return d.r})

    </script>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<html>
	<head>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<style>
	circle.wup {
	stroke-width: 0.5;
	fill:steelblue;
	stroke:black;
	fill-opacity:1;
	stroke-opacity:1;
	}
	</style>
	</head>
	<body>
	<div id="wups"></div>
	</body>

	<script>

	var circle = {};
	circle.cx = 480;
	circle.cy = 250;
	circle.r = 10;
	circle.t = 1;
	circle.d = 2 * Math.PI;
	circle.count = 0;

	circle.next = function(w,h,c){
	if(this.count > c - 10){
	circle.t = -1;
	}

	var r = this.r + circle.t * Math.floor((Math.random()*2)+1);
	if(r < 2){r = 2;circle.t = 1}
	if(r > 18){r = 18;circle.t = -1}

	var randomD = Math.floor((Math.random()*25)+1);

	// edge detection
	if(circle.cx <= 0 + 18 \|\| circle.cx > (w-18) \|\| circle.cy <= 0 + 18 \|\| circle.cy > (h-18)){
	d = (circle.d + Math.PI + (2 * Math.PI)) % (2 * Math.PI)
	}
	// randpm direction change
	else if(randomD === 1){
	var d = Math.random()2 Math.PI;
	}
	else{
	d = circle.d;
	}

	var l = Math.floor((Math.random())+1);
	var cx = this.cx + l * Math.cos(d);
	var cy = this.cy + l * Math.sin(d);
	var randomT = Math.floor((Math.random()*10)+1);


	var result = {
	'cx':cx,
	'cy':cy,
	'r':r,
	't': randomT === 1 ? -1 * circle.t : circle.t,
	'd':d,
	'count':this.count + 1,
	'next':this.next
	}

	return result;
	};

	var w = 960;
	var h = 500;
	var m = [10,10,10,10]
	var wupcounter = w*h/20;

	var wups = new Array();

	var svg = d3.select("#wups").append("svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])

	var lastCircle = [10,10,10];

	for(var i = 0; i < wupcounter; i++){
	circle = circle.next(w + m[1] + m[2],h + m[0] + m[3],wupcounter);
	wups.push(circle);
	}

	svg.selectAll("circle")
	.data(wups)
	.enter()
	.append("circle")
	.attr("class","wup")
	.attr('cx',function(d){return d.cx;})
	.attr('cy',function(d){return d.cy;})
	.attr('r',function(d){return d.r})

	</script>
	</html>