let cnvW = 750;

let cnvH;

const rows = 15;

let w;

​

let maxDist; 

let angle = 2;

​

function setup() {

  // cnvW = windowWidth;

  cnvH = cnvW;

  w = cnvW / rows;

  createCanvas(cnvW, cnvH);

  maxDist = floor(dist(0,0, width/1.5, height/1.5));

  textSize(w*0.2);

}

​

​

function draw() {

  background(220);

  translate(-w/2, -w/2);

​

  for (let y = w; y < height; y += w) {

    for (let x = w; x < width; x += w) {

      push();

      const d = dist(x, y, width/2, height/2);

      const offset = map(d, 0, width/2, -PI, PI);

      const a = angle + offset;

      let h = floor(map(sin(a), -1, 1, w*3, maxDist));

      let f = map(h, w*3, maxDist, 10, 255);

      fill(f);

      rect(x, y, w);

​

      fill(0);

      textAlign(CENTER, CENTER);

      text(`${y.toFixed(0)},${x.toFixed(0)}`, x+w/2, y+w/2*0.8);

      text(h, x+w/2, y+w/2*1.3);

      // text(`${d.toFixed(0)}`, x+w/2, y+w/2+12);

      // text(`${d.toFixed(0)}`, x+w/2, y+w/2+12);

      // noFill();

      pop();

    }

  }

  push();

  translate(w/2, w/2);

  let s = w;

  stroke(255,0,0);

  noFill();

  rect(width/2-(s/2), height/2-(s/2), s);

  pop();

  angle += 0.025;

  // noLoop();

}

​

​