Skip to content

Instantly share code, notes, and snippets.

@syntagmatic

syntagmatic/index.html

Last active January 1, 2018 15:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save syntagmatic/5107530 to your computer and use it in GitHub Desktop.
Save syntagmatic/5107530 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Random Motion
Raw
index.html
<canvas id="canvas"></canvas>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var num = 20000;
var canvas = document.getElementById("canvas");
var width = canvas.width = 960;
var height = canvas.height = 500;
var ctx = canvas.getContext("2d");
var particles = d3.range(num).map(function(i) {
return [Math.round(width*Math.random()), Math.round(height*Math.random())];
});
d3.timer(step);
function step() {
ctx.fillStyle = "rgba(255,255,255,0.3)";
ctx.fillRect(0,0,width,height);
ctx.fillStyle = "rgba(0,0,0,0.5)";
particles.forEach(function(p) {
p[0] += Math.round(2*Math.random()-1);
p[1] += Math.round(2*Math.random()-1);
if (p[0] < 0) p[0] = width;
if (p[0] > width) p[0] = 0;
if (p[1] < 0) p[1] = height;
if (p[1] > height) p[1] = 0;
drawPoint(p);
});
};
function drawPoint(p) {
ctx.fillRect(p[0],p[1],1,1);
};
</script>
<style>
html, body { margin: 0; padding: 0; }
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment