let SIZE = 10; // Adjust to control pixelation size

let time = 0;  // Variable to track animation progress

​

function preload() {

  img = loadImage('yerg.jpg'); // Replace with a default image path

}

​

function setup() {

  createCanvas(400, 400);

  noStroke();

  img.resize(width, height); // Resize the image to fit canvas

}

​

function draw() {

  background(10);

  pixelateImage();

  time += 0.1; // Increment time for animation

}

​

function pixelateImage() {

  if (!img) return; // Ensure the image is loaded

  img.loadPixels();

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

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

      // Get color of the pixel block with a wave offset

      let offset = sin(time + x * 0.1 + y * 0.1) * SIZE; // Create a wave effect

      let xOffset = x + offset;

      let yOffset = y + offset;

​

      // Wrap around edges to prevent out-of-bounds errors

      xOffset = constrain(xOffset, 0, width - 1);

      yOffset = constrain(yOffset, 0, height - 1);

      let i = (floor(yOffset) * width + floor(xOffset)) * 4;

      let r = img.pixels[i];

      let g = img.pixels[i + 1];

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

      fill(r, g, b);

      rect(x, y, SIZE, SIZE);

    }

  }

}

​