//creation du contexte 2D
w = window.innerWidth;
h = window.innerHeight;
var ctx = getContext(w, h);
var canvas = ctx.canvas;
document.body.appendChild(canvas);
canvas.width = w;
canvas.height = h;

let cx = w / 2;
let cy = h / 2;
let G = new Graphics(ctx);
let mousePoint = new Point(0, 0);
ctx.strokeStyle = "#9881ab";

/**
TUTOS de Nicolas BARRADEAU : 
YOUPI.IO
Exos dit du poisson
Ou comment placer des points de façon aléatoire, mais d'une façon plus 'aggloméré/Organique/Naturel"
Voir la page http://devmag.org.za/2009/05/03/poisson-disk-sampling/

   the points are tightly packed together; but
    no closer to each other than a specified minimum distance.



**/
var distribution // Tableau de Coordonnées (Point(x,y))

window.onload = function(){
  //computes a Poisson disc distribution
  distribution = getDistrib();
  draw();
} 


function draw() {
  requestAnimationFrame(draw)
  ctx.restore();
  ctx.save();
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = "white";
  // on se met au centre de la page
 // ctx.translate(cx, cy);
  var count = (Math.sin(performance.now() * 0.003) * .5 + .5) * distribution.length;
  //G.text(count, 24,20,100)
  
  for (i = 0; i < count; i++) {
    ctx.globalAlpha = 1 - i / count;
    var p = distribution[i];
    G.disc(p, 1);
  }
  if(count < 1 ) {
    distribution = getDistrib();
  }
}
canvas.addEventListener('mousedown', function () { distribution = getDistrib(); });

function getDistrib() {
  return Poisson.distribute(30000, 4, w, h)
}
document.addEventListener("mousemove", e => {
  mousePoint.x = e.clientX;
  mousePoint.y = e.clientY;
});