let sound1, sound2, sound3; // Declare sound variables

let saturationLevel = 1; // Starting saturation level

​

function preload() {

  img = loadImage('your-image.jpg'); // Replace with your image path

  sound1 = loadSound('sound1.mp3'); // Replace with your sound files

  sound2 = loadSound('sound2.mp3');

  sound3 = loadSound('sound3.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight); // Set canvas to full window size

  noLoop(); // Draw the image once, and update when user interacts

}

​

function draw() {

  background(220);

  applySaturation(img, saturationLevel);

}

​

function applySaturation(img, level) {

  img.loadPixels();

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

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

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

      let r = img.pixels[index];

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

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

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

​

      // Convert RGB to HSB to manipulate saturation

      let hsb = rgbToHsb(r, g, b);

      hsb[1] = constrain(Math.pow(hsb[1] * level, 1.5), 0, 1); // Dramatic saturation increase

      hsb[2] = constrain(hsb[2] + 0.1, 0, 1); // Slight brightness boost

      let rgb = hsbToRgb(hsb[0], hsb[1], hsb[2]);

​

      // Update pixel values

      img.pixels[index] = rgb[0];

      img.pixels[index + 1] = rgb[1];

      img.pixels[index + 2] = rgb[2];

      img.pixels[index + 3] = a; // Keep alpha channel unchanged

    }

  }

  img.updatePixels();

  image(img, 0, 0, width, height); // Resize image to fit canvas

}

​

function mousePressed() {

  // Change saturation level on mouse click and play sound

  if (saturationLevel < 3) {

    saturationLevel++;

    if (saturationLevel === 2) {

      sound1.play();

    } else if (saturationLevel === 3) {

      sound2.play();

    }

  } else {

    saturationLevel = 1;

    sound3.play();

  }

  redraw(); // Update the canvas

}

​

// Utility functions to convert between RGB and HSB

function rgbToHsb(r, g, b) {

  let maxVal = Math.max(r, g, b);

  let minVal = Math.min(r, g, b);

  let h, s, v = maxVal / 255;

​

  let d = maxVal - minVal;

  s = maxVal === 0 ? 0 : d / maxVal;

​

  if (maxVal === minVal) {

    h = 0; // Achromatic

  } else {

    switch (maxVal) {

      case r: h = (g - b) / d + (g < b ? 6 : 0); break;

      case g: h = (b - r) / d + 2; break;

      case b: h = (r - g) / d + 4; break;

    }

    h /= 6;

  }

​

  return [h, s, v];

}

​

function hsbToRgb(h, s, v) {

  let r, g, b;

  let i = Math.floor(h * 6);

  let f = h * 6 - i;

  let p = v * (1 - s);

  let q = v * (1 - f * s);

  let t = v * (1 - (1 - f) * s);

​

  switch (i % 6) {

    case 0: r = v, g = t, b = p; break;

    case 1: r = q, g = v, b = p; break;

    case 2: r = p, g = v, b = t; break;

    case 3: r = p, g = q, b = v; break;

    case 4: r = t, g = p, b = v; break;

    case 5: r = v, g = p, b = q; break;

  }

​

  return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];

}

​

// Ensure canvas resizes dynamically with the window

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  redraw(); // Redraw image on resize

}

​