​

// if you use preload, setup() will wait for loads to finish before runningfunction

function preload() {

  img = loadImage("Cbridge.jpg");

  img.resize(200, 0);

}

​

function setup() {

  createCanvas(400, 400);

  background(100);

  // display the loaded image at 0, 0

  image(img, 0, 0);

  noStroke();

  // noprotect

  // looping through all pixels of the image (increase 1 to change # of pixels drawn)

  for (let x = 0; x < 200; x = x + 250) {

    for (let y = 0; y < 150; y = y + 250) {

      let pxCol = img.get(x, y);

      // the color information when you use get uses the following format:

      //pxCol[0] = red;

      //pxCol[1] = green

      //pxCol[2] = blue

      fill(pxCol[0], pxCol[1] + 30, pxCol[2]);

      rect(x * 4, y * 4, 20, 20);

    }

  }

}

​

function draw() {

  noStroke();

  frameRate(60);

  //noprotect();

  // looping through all pixels of the image (increase 1 to change # of pixels drawn)

  for (let x = 0; x < 200; x = x + 2) {

    for (let y = 0; y < 150; y = y + 2) {

      let pxCol = img.get(x, y);

      // get uses RGB values

      fill(pxCol[0] + 70, pxCol[1] - 50, pxCol[2], 5);

      rect(x * random(4), y * random(4), random(10), random(10));

    }

  }

  //noLoop();

}

​