​

function preload() {

  img = loadImage('img.png'); // Ensure the image path is correct

}

​

function setup() {

  createCanvas(554, 498);

  colorMode(HSB, 360, 100, 100); // Set the color mode to HSB

  img.loadPixels();

  frameRate(30); // Optional: control the speed of the frame rate

}

​

function draw() {

  background(0);

  // Modify the hue for the entire image based on frameCount

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

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

      let index = (x + y * img.width) * 4;

      let h = img.pixels[index];

      let s = img.pixels[index + 1];

      let b = img.pixels[index + 2];

      let a = img.pixels[index + 3];

​

      // Calculate new hue, cycling over time

      let newHue = (h + (frameCount % 360)) % 360;

      // Update the pixel values

      img.pixels[index] = newHue;

      img.pixels[index + 1] = s;

      img.pixels[index + 2] = b;

      img.pixels[index + 3] = a;

    }

  }

  img.updatePixels();

  image(img, 0, 0); // Draw the updated image

}

​