let r = 30;

let mX = 0;

let mY = 0;

let easing = 0.05;

let s;

let m = 50;

let xText, sizeText, sizeSubText, yText;

let t;

let a = 255;

let b = 255;

​

function setup() {

  let container = select("#p5-container");

  let canvas = createCanvas(container.width, container.height);

  // Associa il canvas al contenitore

  canvas.parent(container);

  background(b);

}

​

function mousePressed() {

  if (mouseButton == CENTER) {

    saveCanvas("mesmerator", "png");

  }

}

​

function draw() {

​

​

​

  if (mouseIsPressed == true) {

    r = min(r + 10, 250);

  } else {

    r = max(r - 10, 100);

  }

​

  mX = mX + (mouseX - mX) * easing;

  mY = mY + (mouseY - mY) * easing;

​

  for (var x = 0; x <= width + 25; x += m) {

    for (var y = 0; y <= height + 25; y += m) {

      d = dist(x, y, mX, mY);

      sz = map(d, 0, r, 200, 25);

      ellipse(x, y, max(sz, 0));

    }

  }

​

​

}

​

//makes the canvas responsive

function windowResized() {

   let container = select("#p5-container");

  resizeCanvas(container.width, container.height);

  a = 0;

  background(b);

}

​