jeffcatania/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Compare to SVG Swarm.
A response to Trevor Bedford's post, Comparing performance of Processing.js and D3.js.
forked from mbostock's block: Canvas Swarm

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Canvas Swarm</title>
<style>

canvas {
  position: absolute;
  top: 0;
}

</style>
<div id="fps">FPS: <span>?</span></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var ParticleSystem = function() {
  let alpha = .02,
			speed = .005,
      time0 = Date.now(),
      time1 = 0,
      fps = 0,
      iteration = function() {},
      start = function() {
        time0 = Date.now();

    		d3.timer(function() {
      		iteration();

     			time1 = Date.now();
     			fps = Math.round(1000 / (time1 - time0));
      		time0 = my.time1
    		})
      }

  function my() {

  }

  my.alpha = function(value) {
    if (!arguments.length) return alpha;
    alpha = value;
    return my;
  };

  my.speed = function(value) {
    if (!arguments.length) return speed;
    speed = value;
    return my;
  };

  my.iteration = function(value) {
    if (!arguments.length) return iteration;
    iteration = value;
    return my;
  };

  my.start = function(value) {
    if (!arguments.length) return start;
    start = value;
    return my;
  };

  return my;
}

var data = d3.range(57).map(function() {
  return {xloc: 0, yloc: 0, xvel: 0, yvel: 0};
})

var width = 960,
    height = 500,
    angle = 2 * Math.PI;

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 1])
    .range([0, height]);

var fps = d3.select("#fps span");

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

var context = canvas.node().getContext("2d");
context.fillStyle = "steelblue";
context.strokeStyle = "#666";
context.strokeWidth = 1.5;


var particle = ParticleSystem()
 .iteration(function() {

  context.clearRect(0, 0, width, height);
/*
  data.forEach(function(d) {
    d.xloc += particle.speed() + Math.random() * particle.alpha();
    d.yloc += particle.speed() + Math.random() * particle.alpha();
    if(d.xloc > 1 || d.yloc > 1) {
      d.xloc = particle.speed() ;
      d.yloc = particle.speed() ;
    }
    context.beginPath();
    context.arc(x(d.xloc), y(d.yloc), 10, 10, 0, angle);
    context.fill();
    context.stroke();
  })
  */

  	fps.text(particle.fps())

	})
  //.start()

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Canvas Swarm</title>
	<style>

	canvas {
	position: absolute;
	top: 0;
	}

	</style>
	<div id="fps">FPS: <span>?</span></div>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var ParticleSystem = function() {
	let alpha = .02,
	speed = .005,
	time0 = Date.now(),
	time1 = 0,
	fps = 0,
	iteration = function() {},
	start = function() {
	time0 = Date.now();

	d3.timer(function() {
	iteration();

	time1 = Date.now();
	fps = Math.round(1000 / (time1 - time0));
	time0 = my.time1
	})
	}

	function my() {

	}

	my.alpha = function(value) {
	if (!arguments.length) return alpha;
	alpha = value;
	return my;
	};

	my.speed = function(value) {
	if (!arguments.length) return speed;
	speed = value;
	return my;
	};

	my.iteration = function(value) {
	if (!arguments.length) return iteration;
	iteration = value;
	return my;
	};

	my.start = function(value) {
	if (!arguments.length) return start;
	start = value;
	return my;
	};

	return my;
	}

	var data = d3.range(57).map(function() {
	return {xloc: 0, yloc: 0, xvel: 0, yvel: 0};
	})

	var width = 960,
	height = 500,
	angle = 2 * Math.PI;

	var x = d3.scale.linear()
	.domain([0, 1])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([0, 1])
	.range([0, height]);

	var fps = d3.select("#fps span");

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

	var context = canvas.node().getContext("2d");
	context.fillStyle = "steelblue";
	context.strokeStyle = "#666";
	context.strokeWidth = 1.5;


	var particle = ParticleSystem()
	.iteration(function() {

	context.clearRect(0, 0, width, height);
	/*
	data.forEach(function(d) {
	d.xloc += particle.speed() + Math.random() * particle.alpha();
	d.yloc += particle.speed() + Math.random() * particle.alpha();
	if(d.xloc > 1 \|\| d.yloc > 1) {
	d.xloc = particle.speed() ;
	d.yloc = particle.speed() ;
	}
	context.beginPath();
	context.arc(x(d.xloc), y(d.yloc), 10, 10, 0, angle);
	context.fill();
	context.stroke();
	})
	*/

	fps.text(particle.fps())

	})
	//.start()

	</script>