Skip to content

Instantly share code, notes, and snippets.

@newby-jay

newby-jay/index.html

Forked from syntagmatic/index.html
Last active January 1, 2018 15:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save newby-jay/e727d8cffeb1d4cebafe to your computer and use it in GitHub Desktop.
Save newby-jay/e727d8cffeb1d4cebafe to your computer and use it in GitHub Desktop.
Download ZIP
Brownian motion
Raw
index.html
<style>
html, body { margin: 0; padding: 0;}
</style>
<canvas id="canvas"></canvas>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var num = 1e4;
var canvas = document.getElementById("canvas");
var width = canvas.width = 960;
var height = canvas.height = 500;
var ctx = canvas.getContext("2d");
var Aparticles = d3.range(num).map(function(i) {
return [Math.round(width*Math.random()), Math.round(height*Math.random()), 0.3+Math.random()];
});
var Bparticles = d3.range(num).map(function(i) {
return [width/2, height/2, 0.3+Math.random()];
});
var rn = d3.random.normal(0, 1);
d3.timer(step);
function step() {
//ctx.fillStyle = "#000";
ctx.fillStyle = "rgba(0, 0, 0, .05)"; // fade old
ctx.fillRect(0,0,width,height);
ctx.fillStyle = "#01A9DB";//"#00BFFF";
Aparticles.forEach(moveDrawPoint);
ctx.fillStyle = "#FA5882";
Bparticles.forEach(moveDrawPoint);
}
function moveDrawPoint (p) {
p[0] += rn()/p[2];
p[1] += rn()/p[2];
if (p[0] < 0) p[0] += width;
if (p[0] > width) p[0] -= width;
if (p[1] < 0) p[1] += height;
if (p[1] > height) p[1] -= height;
ctx.fillRect(p[0],p[1],p[2],p[2]);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment