let myCanvas;

​

function preload() {

  img = loadImage('porsche.png');

}

​

function setup() {

  createCanvas(640, 480);

  pixelDensity(1);

  myCanvas = createGraphics(img.width, img.height);

}

​

function draw() {

  img.loadPixels();

  myCanvas.loadPixels()

  let x, y, loc, r, g, b, maxdist, d, adjustbrightness;

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

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

      // Calculate the 1D location from a 2D grid

      loc = (x + y * img.width) * 4;

      // Get the R,G,B values from image

      r = img.pixels[loc];

      g = img.pixels[loc + 1];

      b = img.pixels[loc + 2];

      // Calculate an amount to change brightness based on proximity to the mouse

      maxdist = 50;

      d = dist(x, y, mouseX, mouseY);

      adjustbrightness = (255 * (maxdist - d)) / maxdist;

      r = constrain(r + adjustbrightness, 0, 255);

      g = constrain(g + adjustbrightness, 0, 255);

      b = constrain(b + adjustbrightness, 0, 255);

      // Make a new color and set pixel in the window

      myCanvas.pixels[loc] = r;  // Adapted to only change the brightness, not the colors

      myCanvas.pixels[loc + 1] = g;

      myCanvas.pixels[loc + 2] = b;

      myCanvas.pixels[loc + 3] = 255;

    }

  }

  myCanvas.updatePixels();

  image(myCanvas, 0, 0);

}