let cat;

​

// p5.Element object

let catImg;

​

// p5.Image object

let catImage;

​

// Why do we need preload?

function preload() {

  cat = loadImage('cat.jpg');

  catImg =   createImg('cat.jpg', 'cat in a box');

​

  // Show the <img> HTML element on the page

  catImage = createImage(480, 270);

}

​

function setup() {

​

  // Load in the pixels

  // Show the pixels array go from 0 to Uint after load

  cat.loadPixels();

  catImage.loadPixels();

​

  // 2 of them have a pixels array, but they are empty!

  console.log("loadImage", cat, cat.pixels.length);

  console.log("createImg", catImg);

  console.log("createImage", catImage, catImage.pixels.length);

​

  // Is 518400 expected? Explain rgba pixels array

​

  // Use the image object to size the canvas

  createCanvas(catImg.width, catImg.height);

​

  // Loop through pixels array

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

    // Take the pixel from cat and give it catImage

    catImage.pixels[i] = cat.pixels[i];

  }

​

  catImage.updatePixels();

  // Do we need to do the same for cat?

​

  // How come the image hasn't updated?

  image(catImage, 0, 0);

  //image(cat, 0, 0);

}

​