​

function preload() {

  catImage = loadImage("cat.jpg");

}

​

function setup() {

  createCanvas(catImage.width, catImage.height);

}

​

function draw() {

  catImage.loadPixels();

​

  // Loop through the image pixels

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

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

      let i = (x + y * width) * 4;

​

      if ((x + y) % 2 == 0) {

        catImage.pixels[i + 0] = 0; // red

        catImage.pixels[i + 1] = 255; // green

        catImage.pixels[i + 2] = 0; // blue

        catImage.pixels[i + 3] = 255; // alpha

      }

    }

  }

​

  // transparent

  for (let i = 135 * catImage.width * 4; i < 145 * catImage.width * 4; i++) {

    catImage.pixels[i] = 0;

  }

​

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

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

      let i = (x + y * width) * 4;

​

      if (x <= catImage.width / 2 + 5 && x > catImage.width / 2 - 5) {

        catImage.pixels[i + 0] = 0; // red

        catImage.pixels[i + 1] = 0; // green

        catImage.pixels[i + 2] = 255; // blue

        catImage.pixels[i + 3] = 255; // alpha

      }

    }

  }

​

  catImage.updatePixels();

  image(catImage, 0, 0);

}

​