// https://p5js.org/reference/#/p5/get

let g;

let s; // = width / g.width;

let test = true;

let diag = false;//true; // print

​

​

function setup() {

  createCanvas(500, 500);

​

  g = createGraphics(10, 10);

  s = width / g.width;

  g.background(0);

}

​

function getBr(x, y) {

  let d = g.pixelDensity();

  let a = [];

  let index;

  let avg;

  if (test) {

    a = g.get(x, y);

    avg = (a[0] + a[1] + a[2]) / 3;

  } else {

​

    for (let i = 0; i < d; i++) {

      for (let j = 0; j < d; j++) {

        // loop over

        index = 4 * ((y * d + j) * g.width * d + (x * d + i));

        a.push(g.pixels[index]);

        a.push(g.pixels[index + 1]);

        a.push(g.pixels[index + 2]);

      }

    }

    avg = (a[0] + a[1] + a[2]) / 3;

  }

  if (diag) console.log("d " + d + " x " + x + " y " + y + " index " + index);

  if (diag) console.log(a[0], a[1], a[2], avg);

  return avg; // grey at x,y

}

​

function draw() {

  background(100);

  noStroke();

  /*

      let s = width/g.width;

      g.loadPixels();

      for (let y = 0; y < g.height; y++) {

          for (let x = 0; x < g.width; x++) {

              let b = getBr(x,y);

              fill(b);

              ellipse(x*s,y*s,s,s);

          }

      }

      if (mouseIsPressed) {

          g.noStroke();

          g.fill(255);

          g.rect(mouseX/s,mouseY/s,2,2);

      }

*/

  make_grey_circles();

  image(g, 0, 0, 100, 100);

  fill(200, 200, 0);

  text("FPS: " + nf(frameRate(), 1, 1), 10, 20);

}

​

function make_grey_circles() {

  //  g.loadPixels();

  for (let y = 0; y < g.height; y++) {

    for (let x = 0; x < g.width; x++) {

      let b = getBr(x, y);

      fill(b);

      ellipse(s / 2 + x * s, s / 2 + y * s, s, s);

    }

  }

}

​

function mousePressed() {

  g.noStroke();

  g.fill(255);

  g.rect(mouseX / s, mouseY / s, 2, 2);

}

​

function keyPressed() {

  if (key == 't') test = !test;

  if (key == 'p') diag = !diag;

​

}