Skip to content

Instantly share code, notes, and snippets.

@sxv
Created June 12, 2016 04:34
Show Gist options
  • Save sxv/5903d7de7ee6bcdbc259196b8ffb95b7 to your computer and use it in GitHub Desktop.
Save sxv/5903d7de7ee6bcdbc259196b8ffb95b7 to your computer and use it in GitHub Desktop.
dots1
<canvas id="canvas"></canvas>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var num = 2000;
var canvas = document.getElementById("canvas");
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var particles = d3.range(num).map(function(i) {
return [Math.round(width*Math.random()), Math.round(height*Math.random()), 2];
});
d3.timer(step);
var xVel = 0;
var yVel = 0;
var bounce = 20;
ctx.fillStyle = "rgba(0,0,0,0.5)";
function step() {
ctx.fillStyle = "rgba(255,255,255,0.3)";
ctx.fillRect(0,0,width,height);
last = [];
particles.forEach(function(p) {
bounce = Math.random()*4*p[2];
xRand = Math.random();
yRand = Math.random();
p[0] += Math.round(bounce*xRand - bounce/2 + xVel);
p[1] += Math.round(bounce*yRand - bounce/2 + yVel);
// if (p[0] > width/2) p[0] += Math.round(bounce*Math.random()-bounce/2 - xVel)
// else if (p[0] < width/2) p[0] += Math.round(bounce*Math.random()-bounce/2 + xVel);
// if (p[1] < height/2) p[1] += Math.round(bounce*Math.random()-bounce/2 + yVel);
// else if (p[1] > height/2) p[1] += Math.round(bounce*Math.random()-bounce/2 - yVel);
if (xRand < 0.5 && yRand < 0.5) { ctx.fillStyle = colors[0]; }
else if (xRand < 0.5 && yRand > 0.5) { ctx.fillStyle = colors[1]; }
else if (xRand > 0.5 && yRand < 0.5) { ctx.fillStyle = colors[2]; }
else if (xRand > 0.5 && yRand > 0.5) { ctx.fillStyle = colors[3]; }
// 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;
if(last.indexOf(p[0]+p[1]*.1) == -1) {
// console.log(last.length)
last.push(p[0]+p[1]*.1);
if(p[2]>1) p[2]-=0.2;
}
else {
p[2]+=1;
}
drawPoint(p);
});
};
function drawPoint(p) {
ctx.fillRect(p[0],p[1],p[2],p[2]);
};
function mousemove() {
var p = d3.mouse(this);
// xVel = xScale(p[0]);
// yVel = yScale(p[1]);
// bounce = bounceScale(p[0]);
}
xScale = d3.scale.linear().domain([0, width]).range([-10, 10])
yScale = d3.scale.linear().domain([0, height]).range([-10, 10])
bounceScale = d3.scale.linear().domain([0, width]).range([0, 20])
colors = ["#ca0020","#f4a582","#92c5de","#0571b0"];
d3.select('body').on('mousemove', mousemove)
</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