Pixels

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);

  circle(width/4, height/2, 200);

  // Load canvas pixels into pixels array
  loadPixels();

  // Modify pixels
  for (let i = 0; i < pixels.length; i += 4) {
    let value = map(i, 0, pixels.length, 0, 255);
    pixels[i] = value;
  }

  // Update canvas pixels
  updatePixels();

  circle(width/4*3, height/2, 200);
}

let img;

function preload() {
  img = loadImage('city_night.jpg')
}

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(0);

  // Draw the original image
  image(img, 0, 0);

  // Load image pixels into pixels array
  img.loadPixels();

  // Modify pixels
  for (let i = 0; i < img.pixels.length; i += 4) {
    let value = map(i, 0, img.pixels.length, 0, 200);
    pixels[i] = value;
  }

  // Update image pixels
  img.updatePixels();

  // Draw the modified image
  image(img, img.width, 0);
}