let catPixels;

let w, h;

​

function preload() {

  cat = loadImage('cat.jpg');

}

​

function setup() {

  w = cat.width;

  h = cat.height;

  createCanvas(w, h);

  catPixels = cat.loadPixels();

  /*

  // 2.1 Make every other pixel green.

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

    for (let y = 0; y < h; y++) {  

      writeColor(cat, x, y, w, h, 0, 255, 0, 255);

    }

  }

  */

  /*

  // 2.2 Erase a line that is 10 pixels tall across the middle of it

  for (let x = 0; x < w; x++) {

    for (let y = h/2; y < h/2 + 10; y++) {  

      writeColor(cat, x, y, w, h, 0, 0, 0, 0);

    }

  }

  */

  /*

  // 2.3 Turn a line that is 10 pixels wide down the middle of it blue.

  for (let x = 0; x < w; x++) {

    for (let y = h/2; y < h/2 + 10; y++) {  

      writeColor(cat, x, y, w, h, 0, 0, 255, 255);

    }

  } 

  */

  cat.updatePixels();

  image(cat, 0, 0);

}

​

/*

function writeColor(...) writes color to each image pixel

img: image object

x, y: (x,y) coordinates of the image pixel

w, h: width and height of the image

r, g, b, a: red, green, blue and alpha channel of each pixel

*/ 

function writeColor(img, x, y, w, h, r, g, b, a) {

  index = (x + y * w) * 4;

  img.pixels[index + 0] = r;

  img.pixels[index + 1] = g;

  img.pixels[index + 2] = b;

  img.pixels[index + 3] = a;

}

​