dots1

index.html

<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>