for web wensday on corbun does weird webs upd

function preload() {
  // Load the image from the provided URL
  // The preload() function ensures the image is fully loaded before setup() runs.
  centerImage = loadImage('https://images.steamusercontent.com/ugc/1688248122333193690/E203434B4344D6B9AEF48513F5F682656647EE83/?imw=512&&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Use HSB so we can easily cycle through hues
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 100, 100); // start with solid white (HSB: hue 0, sat 0, brightness 100)

  // Set imageMode to CENTER once in setup().
  // This makes it easy to position images by their center.
  imageMode(CENTER);
}

function draw() {
  // Slightly transparent background for trailing effect (now white)
  background(0, 0, 100, 8);

  translate(width / 2, height / 2); // center the coordinate system

  // Draw the image at the new origin (which is now the center of the canvas)
  // The kaleidoscope lines will be drawn on top of this image.
  // To make it small, we'll draw it at 50% of its original width and height.
  image(centerImage, 0, 0, centerImage.width * 0.5, centerImage.height * 0.5);

  if (mouseIsPressed) {
    // Mouse position relative to center
    const mx = mouseX - width / 2;
    const my = mouseY - height / 2;
    const pmx = pmouseX - width / 2;
    const pmy = pmouseY - height / 2;

    // Distance from center controls stroke weight
    // The image's size will also affect the effective drawing area,
    // so we can adjust the map range if needed.
    const d = dist(0, 0, mx, my);
    const sw = map(d, 0, min(width, height) / 2, 12, 1);

    // Hue cycles over time and with distance
    // Increased cycle speed slightly for more "brightness" / change
    const hue = (frameCount * 0.8 + d * 0.2) % 360;

    // Make saturation 100 for maximum vibrancy, brightness 100 for maximum brightness
    stroke(hue, 100, 100, 100); // Full saturation, full brightness
    strokeWeight(sw);
    noFill();

    const angleStep = TWO_PI / symmetry;

    // Draw the stroke rotated and mirrored around the center
    for (let i = 0; i < symmetry; i++) {
      rotate(angleStep);

      // Original stroke
      line(mx, my, pmx, pmy);

      // Mirrored stroke (flip vertically)
      push();
      scale(1, -1);
      line(mx, my, pmx, pmy);
      pop();
    }
  }

  // Reset transform to draw UI text in the top-left corner
  resetMatrix();

  // Text instructions are removed, so no changes needed here.
}

function keyPressed() {
  if (key === 'c' || key === 'C') {
    // Clear instantly (now to solid white)
    background(0, 0, 100, 100);
  } else if (keyCode === UP_ARROW) {
    symmetry = constrain(symmetry + 1, 2, 32);
  } else if (keyCode === DOWN_ARROW) {
    symmetry = constrain(symmetry - 1, 2, 32);
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0, 0, 100, 100); // Clear to solid white on resize
}