Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active November 28, 2018 12:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save mbostock/2647922 to your computer and use it in GitHub Desktop.
Save mbostock/2647922 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Swarm
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
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 data = d3.range(500).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([-5, 5])
.range([0, width]);
var y = d3.scale.linear()
.domain([-5, 5])
.range([0, height]);
var time0 = Date.now(),
time1;
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;
d3.timer(function() {
context.clearRect(0, 0, width, height);
data.forEach(function(d) {
d.xloc += d.xvel;
d.yloc += d.yvel;
d.xvel += 0.04 * (Math.random() - .5) - 0.05 * d.xvel - 0.0005 * d.xloc;
d.yvel += 0.04 * (Math.random() - .5) - 0.05 * d.yvel - 0.0005 * d.yloc;
context.beginPath();
context.arc(x(d.xloc), y(d.yloc), Math.min(1 + 1000 * Math.abs(d.xvel * d.yvel), 10), 0, angle);
context.fill();
context.stroke();
});
time1 = Date.now();
fps.text(Math.round(1000 / (time1 - time0)));
time0 = time1;
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment