// Translated by ChatGPT4

// TODO: this is not done yet but too tired to complete it

​

let img;       // The source image

let cellsize = 2; // Dimensions of each cell in the grid

let cols, rows;   // Number of columns and rows in our system

​

function setup() {

  createCanvas(600, 400, WEBGL);

  img = loadImage("assets/SewardPark_600x400_ByJonFroehlich.jpg"); // Load the image

  cols = width/cellsize;              // Calculate # of columns

  rows = height/cellsize;             // Calculate # of rows

}

​

function draw() {

  background(255);

  img.loadPixels();

​

  // Begin loop for columns

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

    // Begin loop for rows

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

      let x = i*cellsize + cellsize/2; // x position

      let y = j*cellsize + cellsize/2; // y position

      let loc = 4 * (y * img.width + x); // Pixel array location

      let c = color(img.pixels[loc], img.pixels[loc + 1], img.pixels[loc + 2], img.pixels[loc + 3]); // Grab the color

      // Map brightness to a z position as a function of mouseX

      let z = map(brightness(c), 0, 255, 0, mouseX);

      // Translate to the location, set fill and stroke, and draw the rect

      push();

      translate(x - width / 2, y - height / 2, z); 

      fill(c);

      noStroke();

      rectMode(CENTER);

      rect(0, 0, cellsize, cellsize);

      pop();

    }

  }

}

​