flower

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Use HSB so we can easily cycle through hues
  colorMode(HSB, 360, 100, 100, 100);

  // Create a graphics buffer for the background gradient
  bgGradient = createGraphics(width, height);
  drawBgGradient(); // Draw the gradient once

  background(0, 0, 100, 100); // Start with a solid white background (initial clear)
}

function draw() {
  // Keep the semi-transparent background for the trailing effect
  background(0, 0, 100, 8);
  // Draw the pre-computed static background gradient behind the trails
  image(bgGradient, 0, 0);

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

  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
    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 (faster cycling for more vibrancy)
    const hue = (frameCount * 1.2 + d * 0.3) % 360;

    // Vary saturation and brightness based on distance from center for more vibrant strokes
    const sat = map(d, 0, min(width, height) / 2, 100, 40); // Full sat near center, more muted at edges
    const bright = map(d, 0, min(width, height) / 2, 100, 70); // Full bright near center, slightly darker at edges

    noFill();

    // Draw two strokes for a layered effect (neon glow)
    const angleStep = TWO_PI / symmetry;

    // 1st stroke: Thicker, slightly darker, and more transparent
    strokeWeight(sw * 1.5);
    stroke(hue, sat, bright * 0.7, 30); // 30% alpha

    for (let i = 0; i < symmetry; i++) {
      rotate(angleStep);
      line(mx, my, pmx, pmy);
      push();
      scale(1, -1);
      line(mx, my, pmx, pmy);
      pop();
    }

    // 2nd stroke: Thinner, brighter, and less transparent (drawn on top)
    strokeWeight(sw);
    stroke(hue, sat, bright, 70); // 70% alpha

    for (let i = 0; i < symmetry; i++) {
      rotate(angleStep);
      line(mx, my, pmx, pmy);
      push();
      scale(1, -1);
      line(mx, my, pmx, pmy);
      pop();
    }

    // Add particles along the drawing path
    if (particles.length < maxParticles) {
      for (let i = 0; i < 2; i++) { // Add 2 particles per frame when drawing
        particles.push(new Particle(mx, my, hue, sat, bright));
      }}
  }

  // Update and display particles
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].display();
    if (particles[i].alpha <= 0) {
      particles.splice(i, 1); // Remove dead particles
    }
  }

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

function drawBgGradient() {
  bgGradient.colorMode(HSB, 360, 100, 100, 100);
  bgGradient.noStroke();

  // Draw a radial gradient using concentric circles
  const maxDim = max(width, height);
  for (let r = 0; r <= maxDim; r += 2) {
    // Hue, saturation, and brightness change with distance from center
    const gradientHue = map(r, 0, maxDim, 200, 260);
    const gradientSat = map(r, 0, maxDim, 80, 20);
    const gradientBright = map(r, 0, maxDim, 50, 95);

    bgGradient.fill(gradientHue, gradientSat, gradientBright);
    bgGradient.ellipse(width / 2, height / 2, r * 2);
  }
  // Apply a blur filter to smooth out the gradient (done only once on setup/resize)
  bgGradient.filter(BLUR, 8);
}

function keyPressed() {
  if (key === 'c' || key === 'C') {
    // Clear instantly, then redraw the background gradient and clear particles
    background(0, 0, 100, 100);
    drawBgGradient(); // Redraw static gradient
    particles = []; // Clear all particles
  } 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);
  // Reinitialize and redraw the background gradient on resize
  bgGradient = createGraphics(width, height);
  drawBgGradient();
  background(0, 0, 100, 100); // Clear to solid white after resize
  particles = []; // Clear particles on resize
}

class Particle {
  constructor(x, y, hue, sat, bright) {
    this.x = x;
    this.y = y;
    // Random velocity for spread, biased slightly outward from center
    this.vx = random(-1.5, 1.5);
    this.vy = random(-1.5, 1.5);
    this.hue = hue;
    this.sat = sat;
    this.bright = bright;
    this.alpha = 100; // Start fully opaque
    this.lifetime = random(30, 90); // Frames to live (0.5 to 1.5 seconds at 60fps)
    this.radius = random(1, 4); // Small particle size
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.alpha -= 100 / this.lifetime; // Fade out over lifetime
  }

  display() {
    noStroke();
    fill(this.hue, this.sat, this.bright, this.alpha);
    ellipse(this.x, this.y, this.radius * 2);
  }
}