let painting;

let originalPixels;

let rippleRadius = 0; // initialize ripple radius to zero

let maxRippleRadius; // maximum radius for ripple effect

let effects = ['greyscale', 'invert', 'cool', 'blackAndWhite', 'redGreenGradient', 'saturation', 'colorShift', 'normal'];

let effectProperties = { // define properties for each effect

  'greyscale': { speed: 12, direction: 'outward', shape: 'square' },

  'invert': { speed: 10, direction: 'inward', shape: 'circle' },

  'cool': { speed: 8, direction: 'outward', shape: 'circle' },

  'blackAndWhite': { speed: 15, direction: 'inward', shape: 'square' },

  'redGreenGradient': { speed: 5, direction: 'outward', shape: 'circle' },

  'saturation': { speed: 8, direction: 'inward', shape: 'circle' },

  'colorShift': { speed: 6, direction: 'outward', shape: 'circle' },

  'normal': { speed: 12, direction: 'inward', shape: 'circle' }

};

let currentEffectIndex = 0; // start with the first effect

let tileSize = 20; // size of each tile in the effect grid

let isGlitching = false; // flag for glitch effect state

let glitchFrames = 0; // track frames during glitch effect

let maxGlitchFrames = 15; // maximum duration for glitch effect

let cycleCount = 0; // counts cycles of effects

let cyclesBeforeGlitch = effects.length; // number of effect cycles before glitch

let oscillationPhase = 0; // phase variable for oscillating effect

​

// preload the painting image

function preload() {

  painting = loadImage('starry-night.jpg');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  painting.resize(windowWidth, windowHeight); // resize painting to fit canvas

  painting.loadPixels();

  originalPixels = painting.pixels.slice(); // save original pixels for restoration

  frameRate(30);

  maxRippleRadius = dist(0, 0, width, height) / 2; // calculate maximum ripple radius

  resetRippleRadius(); // set initial ripple radius based on effect direction

}

​

// set the ripple radius based on the current effect's direction

function resetRippleRadius() {

  let currentEffect = effects[currentEffectIndex];

  if (effectProperties[currentEffect].direction === 'inward') {

    rippleRadius = maxRippleRadius; // inward effects start at maximum radius

  } else {

    rippleRadius = 0; // outward effects start at zero radius

  }

}

​

// calculate distance based on the specified shape

function getDistance(x, y, centerX, centerY, shape) {

  if (shape === 'square') {

    // use manhattan distance for square patterns

    return max(abs(x - centerX), abs(y - centerY));

  } else {

    // use euclidean distance for circular patterns

    let dx = x - centerX;

    let dy = y - centerY;

    return sqrt(dx * dx + dy * dy);

  }

}

​

function draw() {

  painting.pixels = originalPixels.slice(); // reset pixels each frame

  painting.loadPixels();

  if (isGlitching) {

    applyGlitchEffect(); // apply glitch effect if flag is true

    glitchFrames++;

    if (glitchFrames >= maxGlitchFrames) {

      // reset glitch and cycle properties after max frames

      isGlitching = false;

      glitchFrames = 0;

      currentEffectIndex = 0;

      cycleCount = 0;

      oscillationPhase = 0;

      resetRippleRadius();

    }

  } else {

    let centerX = width / 2;

    let centerY = height / 2;

​

    // loop through each tile to apply the current effect

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

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

        let tileCenterX = x + tileSize / 2;

        let tileCenterY = y + tileSize / 2;

        let currentEffect = effects[currentEffectIndex];

        let effectProps = effectProperties[currentEffect];

        let distance = getDistance(tileCenterX, tileCenterY, centerX, centerY, effectProps.shape);

        let isInward = effectProps.direction === 'inward';

        if ((isInward && distance > rippleRadius) || (!isInward && distance < rippleRadius)) {

          applyEffectToTile(x, y); // apply effect only within ripple range

        }

      }

    }

​

    let currentEffect = effects[currentEffectIndex];

    let baseSpeed = effectProperties[currentEffect].speed;

    let isInward = effectProperties[currentEffect].direction === 'inward';

    // set speed multipliers for smooth animation

    let speedMultiplier = 1;

    if (currentEffect === 'greyscale') {

      speedMultiplier = 1 + (rippleRadius / maxRippleRadius) * 0.5;

    } else if (currentEffect === 'invert') {

      speedMultiplier = 1 + sin(oscillationPhase) * 0.3;

    } else if (currentEffect === 'cool') {

      speedMultiplier = 1.5 - (rippleRadius / maxRippleRadius) * 0.5;

    } else if (currentEffect === 'blackAndWhite') {

      speedMultiplier = 1.2;

    } else if (currentEffect === 'redGreenGradient') {

      speedMultiplier = 0.8 + cos(oscillationPhase * 0.5) * 0.2;

    } else if (currentEffect === 'saturation') {

      speedMultiplier = 1 + (rippleRadius / maxRippleRadius) * 0.3;

    } else if (currentEffect === 'colorShift') {

      speedMultiplier = 1 + random(-0.2, 0.2);

    }

    // adjust ripple radius based on direction and speed

    if (isInward) {

      rippleRadius -= baseSpeed * speedMultiplier;

    } else {

      rippleRadius += baseSpeed * speedMultiplier;

    }

    oscillationPhase += 0.1; // update oscillation phase for oscillating effects

​

    // transition to next effect once ripple reaches boundary

    if ((isInward && rippleRadius <= 0) || (!isInward && rippleRadius >= maxRippleRadius)) {

      currentEffectIndex = (currentEffectIndex + 1) % effects.length;

      cycleCount++;

      oscillationPhase = 0;

      if (cycleCount >= cyclesBeforeGlitch) {

        isGlitching = true; // trigger glitch effect after full cycle

      } else {

        resetRippleRadius(); // reset ripple for next effect

      }

    }

  }

​

  painting.updatePixels(); // update canvas with modified pixels

  image(painting, 0, 0); // render modified image

}

​

// create glitch effect by shifting pixel rows

function applyGlitchEffect() {

  for (let i = 0; i < 20; i++) {

    let y = floor(random(height));

    let h = floor(random(5, 20));

    let offset = floor(random(-25, 25));

    for (let row = y; row < min(y + h, height); row++) {

      for (let col = 0; col < width; col++) {

        let sourceX = (col + offset + width) % width;

        let sourceIdx = (sourceX + row * width) * 4;

        let targetIdx = (col + row * width) * 4;

        painting.pixels[targetIdx] = originalPixels[sourceIdx] + random(-50, 50);

        painting.pixels[targetIdx + 1] = originalPixels[sourceIdx + 1] + random(-50, 50);

        painting.pixels[targetIdx + 2] = originalPixels[sourceIdx + 2] + random(-50, 50);

      }

    }

  }

  // add color swapping effect randomly

  if (random() < 0.5) {

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

      if (random() < 0.1) {

        let r = painting.pixels[i];

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

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

        painting.pixels[i] = g;

        painting.pixels[i + 1] = b;

        painting.pixels[i + 2] = r;

      }

    }

  }

}

​

// apply specific effect to a tile area

function applyEffectToTile(x, y) {

  for (let i = 0; i < tileSize; i++) {

    for (let j = 0; j < tileSize; j++) {

      let px = x + i;

      let py = y + j;

      if (px >= painting.width || py >= painting.height) continue;

​

      let index = (px + py * painting.width) * 4;

      let r = originalPixels[index];

      let g = originalPixels[index + 1];

      let b = originalPixels[index + 2];

​

      if (effects[currentEffectIndex] === 'greyscale') {

        let grey = (r + g + b) / 3;

        painting.pixels[index] = grey;

        painting.pixels[index + 1] = grey;

        painting.pixels[index + 2] = grey;

      } else if (effects[currentEffectIndex] === 'invert') {

        painting.pixels[index] = 255 - r;

        painting.pixels[index + 1] = 255 - g;

        painting.pixels[index + 2] = 255 - b;

      } else if (effects[currentEffectIndex] === 'cool') {

        painting.pixels[index] = r * 0.8;

        painting.pixels[index + 1] = g * 0.9;

        painting.pixels[index + 2] = b * 1.2;

      } else if (effects[currentEffectIndex] === 'blackAndWhite') {

        let avg = (r + g + b) / 3;

        let bwColor = avg > 128 ? 255 : 0;

        painting.pixels[index] = bwColor;

        painting.pixels[index + 1] = bwColor;

        painting.pixels[index + 2] = bwColor; 

      } else if (effects[currentEffectIndex] === 'redGreenGradient') {

        painting.pixels[index] = (r + x) % 255;

        painting.pixels[index + 1] = (g + y) % 255;

        painting.pixels[index + 2] = b; 

      } else if (effects[currentEffectIndex] === 'saturation') {

        let grey = (r + g + b) / 3;

        painting.pixels[index] = lerp(grey, r, 1.5);

        painting.pixels[index + 1] = lerp(grey, g, 1.5);

        painting.pixels[index + 2] = lerp(grey, b, 1.5);

      } else if (effects[currentEffectIndex] === 'colorShift') {

        painting.pixels[index] = g;

        painting.pixels[index + 1] = b;

        painting.pixels[index + 2] = r;

      }

    }

  }

}

​

​

​