let Cat;

let myImage;

​

//preload cat image into p5

function preload() {

  Cat = loadImage("cat.jpg");

}

​

function setup() {

  //create canvas of imported cat image

  createCanvas(Cat.width, Cat.height);

​

  //create image using width and height

  myImage = createImage(width, height);

  console.log(width, height);

​

  myImage.loadPixels();

  Cat.loadPixels();

​

  //Make every other pixel green - skip every pixel

  for (let i = 0; i < myImage.pixels.length; i += 8) {

    myImage.pixels[i] = 0;

    myImage.pixels[i + 1] = Cat.pixels[i + 1];

    myImage.pixels[i + 2] = 0;

    myImage.pixels[i + 3] = Cat.pixels[i + 3];

  }

​

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

  for (let i = 130 * width * 4; i < 140 * width * 4; i++) {

    myImage.pixels[i] = 255;

    myImage.pixels[i + 1] = 255;

    myImage.pixels[i + 2] = 255;

    myImage.pixels[i + 3] = 255;

  }

​

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

  // loop row pixel

  for (let x = width / 2 - 5; x < width / 2 + 5; x++) {

    // loop column pixel

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

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

      myImage.pixels[i] = 0;

      myImage.pixels[i + 1] = 0;

      myImage.pixels[i + 2] = 255;

      myImage.pixels[i + 3] = 255;

    }

  }

​

  myImage.updatePixels();

​

  image(myImage, 0, 0);

}

​

function draw() {

  //background(220);

}

​