laurieskelly/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##Akinetic hypnodots
100% less bouncing. Easier to see what is going on. Lots of fun/maddening ways to play with the spacing of the dots. See if you can figure out how it figures out where the new circles go.
Forkable, tweakable jsfiddle version

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

<style>
svg{
    border: 5px gray solid;
}
</style>

<body>

<svg id="svg"></svg>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">

var svg = d3.select("#svg")
var h = 200
var w = 600
var rad = 20
var margin = 10
var centerx = w/2
var centery = h/2
var max_side = 4
var xdelta = (centerx-margin-rad)/max_side
var dur = 600
var update_interval = dur*2
var eeze = 'quad' //'quad'//'bouncy'//'elastic'//'circle'//'linear'

svg.attr('height',h).attr('width',w)

svg
    .append('circle')
    .attr('cx',centerx)
    .attr('cy',centery)
    .attr('r',rad)
    .style('fill','orange')

function update(data){
    var circle = svg.selectAll('circle')
    .data(data);

    var sidedness = Math.floor(Math.random()*2)

    circle.enter().append('circle')
        .attr('cy',centery)
        .attr('cx',function(d,i){
            return centerx+(Math.pow(-1,i+sidedness)*d.dx);
        })
        .attr('r',rad)
        .style('fill-opacity',1e-6);
//    circle
  //      .style('fill',function(d){return d.color;})


    circle.transition()
        .duration(dur)
        .ease(eeze) //'elastic','
        .style('fill',function(d){return d.color;})
        .style('fill-opacity',1)

    circle.exit().transition().duration(dur).delay(dur/2)
        .style('fill-opacity','1e-6')
        .remove();
}

function randomcolor(){
    colorrgb = []
    for (var i=0; i<3; i++){
        colorrgb.push(Math.floor(Math.random()*256))
    }
    return 'rgb('+colorrgb.toString()+')'
};

function newData(){
    data = []
//    num_elements = 1+2*Math.floor(Math.random()*max_side);
    num_elements = Math.ceil(Math.random()*2*max_side)
    for(var i=0; i< num_elements; i++){
        datum = {
            'color':randomcolor(),
            'dx': Math.ceil(i/2)*xdelta
        }
        data.push(datum)
    }
    return data;
};

setInterval(function(){
    update(newData())},
    update_interval);

</script>

## thumbnail.png

      
    Raw
  

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

	<style>
	svg{
	border: 5px gray solid;
	}
	</style>

	<body>

	<svg id="svg"></svg>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">

	var svg = d3.select("#svg")
	var h = 200
	var w = 600
	var rad = 20
	var margin = 10
	var centerx = w/2
	var centery = h/2
	var max_side = 4
	var xdelta = (centerx-margin-rad)/max_side
	var dur = 600
	var update_interval = dur*2
	var eeze = 'quad' //'quad'//'bouncy'//'elastic'//'circle'//'linear'

	svg.attr('height',h).attr('width',w)

	svg
	.append('circle')
	.attr('cx',centerx)
	.attr('cy',centery)
	.attr('r',rad)
	.style('fill','orange')

	function update(data){
	var circle = svg.selectAll('circle')
	.data(data);

	var sidedness = Math.floor(Math.random()*2)

	circle.enter().append('circle')
	.attr('cy',centery)
	.attr('cx',function(d,i){
	return centerx+(Math.pow(-1,i+sidedness)*d.dx);
	})
	.attr('r',rad)
	.style('fill-opacity',1e-6);
	// circle
	// .style('fill',function(d){return d.color;})


	circle.transition()
	.duration(dur)
	.ease(eeze) //'elastic','
	.style('fill',function(d){return d.color;})
	.style('fill-opacity',1)

	circle.exit().transition().duration(dur).delay(dur/2)
	.style('fill-opacity','1e-6')
	.remove();
	}

	function randomcolor(){
	colorrgb = []
	for (var i=0; i<3; i++){
	colorrgb.push(Math.floor(Math.random()*256))
	}
	return 'rgb('+colorrgb.toString()+')'
	};

	function newData(){
	data = []
	// num_elements = 1+2Math.floor(Math.random()max_side);
	num_elements = Math.ceil(Math.random()2max_side)
	for(var i=0; i< num_elements; i++){
	datum = {
	'color':randomcolor(),
	'dx': Math.ceil(i/2)*xdelta
	}
	data.push(datum)
	}
	return data;
	};

	setInterval(function(){
	update(newData())},
	update_interval);

	</script>