body{
   background-color:#71f4bd;
}

canvas{
   cursor:pointer;
}

// Poisson Disc Sampling -> https://codepen.io/sbuellet/pen/LwggWQ

var pointNbr = 2000,
    radius = 9,
    size = 12,
    step = 10,
    fps = 60,
    distribution,
    length,
    center;


// Canvas setup
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var w = (canvas.width = window.innerWidth);
var h = (canvas.height = window.innerHeight);
var ctx = canvas.getContext("2d");

// init update
function init() {
   w = canvas.width = window.innerWidth;
   h = canvas.height = window.innerHeight;

   center = [w / 2, h / 2];
   //center = [event.clientX, event.clientY];

   distribution = Poisson.distribute(center, pointNbr, radius, w, h);
   length = distribution.length;
}
function update() {
   setTimeout(function() {
      requestAnimationFrame(update);
   }, 1000 / fps);

   if (distribution == null) return;

   // SVG order displaying
   distribution.sort(function(a, b) {
      return a.y - b.y;
   });

   for (var i = 0; i < step; i++) {
      if (distribution.length == 0) return;
      var id = distribution.length;
      p = distribution.shift();

      let a = {x:p.x, y:p.y, z:0};
      let b = {x:center[0], y:center[1],z:0};
      var dist = getDistance(a, b);      
      
      ctx.globalAlpha = 1;
      ctx.beginPath();

      ctx.arc(
         p.x,
         p.y - 10 / mapRange(dist, 0, w / 20, 0.1, 5) * 10,
         Math.abs(mapRange(dist, 0, pointNbr/radius, 1, 0)*size),
         //size / mapRange(dist, 0, 10, 0, 1),
         0,
         Math.PI * 2
      );
      
      ctx.moveTo(p.x, p.y);
      ctx.lineTo(p.x, p.y - 10 / mapRange(dist, 0, w / 20, 0.1, 5) * 10);
      ctx.fillStyle = "#fff";
      ctx.fill();
      ctx.strokeStyle = "#000";
      ctx.fillStyle = "#000";
      ctx.lineWidth = 1;
      ctx.stroke();
   }
}

// event
window.onload = init;
window.onresize = init;
window.onmousedown = init;
window.ontouchstart = init;
update();