let modifiedImg;

let var1 = 0;

let var2 = 0;

let quarterSize = 200; // Size of the quarter you want to display and edit

​

function preload() {

  // Load your image

  img = loadImage('ireland.jpg');

}

​

function setup() {

  createCanvas(400, 400);

  // Create a copy of the original image just to show the unmodified image

  modifiedImg = createImage(quarterSize, quarterSize);

  modifiedImg.copy(img, 0, 0, quarterSize, quarterSize, 0, 0, quarterSize, quarterSize);

}

​

function draw() {

  background(255);

​

  // Move the image

  var1 += 1;

  var2 += 1;

​

  // Display the original quarter-sized image

  image(img, 0, 0, quarterSize, quarterSize);

​

  // Modify the quarter-sized image every frame

  modifyImage();

​

  // Display the modified quarter-sized image

  image(modifiedImg, var1, var2, quarterSize, quarterSize);

}

​

// Sample function just to change colors (this could be whatever change you wanna make to the image)

function modifyImage() {

  // Apply changes to the copied image

  modifiedImg.loadPixels();

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

    modifiedImg.pixels[i] = modifiedImg.pixels[i] + 1; // Red

    modifiedImg.pixels[i + 1] = modifiedImg.pixels[i + 1] + 0.25; // Green

    modifiedImg.pixels[i + 2] = modifiedImg.pixels[i + 2] + 0.5; // Blue

  }

  modifiedImg.updatePixels();

}

​