​

function preload() {

  img = loadImage('cat.jpg');

}

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  background(220);

  image(img, 0, 0, 600, 400);

  pixelGreen();

  blueLine();

  clearLine();

  /*stroke('green');

  for (let z = 0; z < 400; z = z+2){

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

  point(y, z);

  }}

  */

​

}

​

function blueLine(){

  stroke('blue');

  strokeWeight(10);

  line(300, 0, 300, 400);

}

​

function clearLine(){

  stroke(0);

  strokeWeight(10);

  line(0, 200, 600, 200);

}

function pixelGreen() {

  img.loadPixels();

​

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

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

      const idx = (x + y * img.width) * 4;

      img.pixels[idx] = 0;     // red value

      img.pixels[idx + 1] = 255; // green value

      img.pixels[idx + 2] = 0;   // blue value

    }

  }

​

  img.updatePixels();

}