stimulation final boss

function setup() {
  // Create a canvas that fills the entire browser window
  createCanvas(windowWidth, windowHeight);
  
  // Add some initial particles randomly across the canvas
  // This ensures there are particles present even before the mouse moves
  for (let i = 0; i < maxParticles / 4; i++) { // Add more initial particles
    particles.push(new Particle(random(width), random(height)));
  }

  // Set the initial position of the bouncing ball to the center of the canvas
  ballX = width / 2;
  ballY = height / 2;

  // Set initial positions for all four pinwheels
  pinwheel1X = 100; // Top-left
  pinwheel1Y = 100;

  pinwheel2X = width - 100; // Top-right
  pinwheel2Y = 100;

  pinwheel3X = 100; // Bottom-left
  pinwheel3Y = height - 100;

  pinwheel4X = width - 100; // Bottom-right
  pinwheel4Y = height - 100;

  // Create the button dynamically using p5.js DOM functions
  myButton = createButton('Click Me!');
  // Style the button first so we can get its dimensions correctly
  myButton.style('background-color', '#4CAF50'); // Green background (keeping it green for visibility)
  myButton.style('color', 'white'); // White text
  myButton.style('font-size', '16px');
  myButton.style('border', 'none');
  myButton.style('padding', '10px 20px');
  myButton.style('cursor', 'pointer');
  myButton.style('z-index', '1000'); // Ensure button is on top of canvas

  // Position the button in the middle of the canvas
  // We use .elt.offsetWidth and .elt.offsetHeight to get the actual HTML element's dimensions
  myButton.position(width / 2 - myButton.elt.offsetWidth / 2, height / 2 - myButton.elt.offsetHeight / 2);
  myButton.mousePressed(buttonClicked); // Attach the function to be called on click

  // Initialize the drawing layer
  drawingLayer = createGraphics(width, height);
  drawingLayer.stroke(255); // White stroke color for the drawing layer
  drawingLayer.strokeWeight(4); // Set the thickness of the lines on the drawing layer
}

function draw() {
  // 1. Draw the permanent drawing layer onto the main canvas
  image(drawingLayer, 0, 0);

  // 2. Draw a semi-transparent black background over the drawing layer and any dynamic elements from the previous frame.
  // This creates a fading trail effect for the particles, ball, and pinwheels,
  // but the lines on drawingLayer will persist because drawingLayer is redrawn each frame.
  background(0, 20); 

  // --- Particle System Logic ---
  // Add new particles at the current mouse position
  for (let i = 0; i < newParticlesPerFrame; i++) {
    if (particles.length < maxParticles) { // Only add if we haven't reached the max limit
      particles.push(new Particle(mouseX, mouseY));
    }
  }

  // Iterate through the particles array from end to beginning
  // This is important when removing elements from an array during iteration.
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];

    // Calculate a force that attracts the particle towards the mouse
    let mousePos = createVector(mouseX, mouseY);
    let attractionForce = p5.Vector.sub(mousePos, p.pos); // Vector from particle to mouse
    attractionForce.setMag(0.2); // Stronger attraction force
    p.applyForce(attractionForce); // Apply the attraction force

    // Calculate a force that repels the particle from the bouncing ball
    let ballPos = createVector(ballX, ballY);
    let distanceToBall = p5.Vector.dist(p.pos, ballPos);

    // If the particle is within a certain range of the ball, apply a repulsion force
    if (distanceToBall < 100) { // Repel if within 100 pixels
      let repulsionForce = p5.Vector.sub(p.pos, ballPos); // Vector from ball to particle
      repulsionForce.normalize(); // Set magnitude to 1
      // Scale repulsion strength based on distance (stronger when closer)
      repulsionForce.mult(map(distanceToBall, 0, 100, 1.5, 0)); 
      p.applyForce(repulsionForce); // Apply the repulsion force
    }

    p.update(); // Update the particle's position and lifespan
    p.show();   // Display the particle

    // If the particle has "died" (lifespan is less than 0), remove it from the array
    if (p.isDead()) {
      particles.splice(i, 1);
    }
  }

  // --- Bouncing Ball Logic ---
  // Update the ball's position based on its speed
  ballX += xSpeed;
  ballY += ySpeed;
  
  // Check for bouncing off the left or right edges
  if (ballX - ballRadius < 0 || ballX + ballRadius > width) {
    xSpeed = -xSpeed; // Reverse the X speed
  }
  
  // Check for bouncing off the top or bottom edges
  if (ballY - ballRadius < 0 || ballY + ballRadius > height) {
    ySpeed = -ySpeed; // Reverse the Y speed
  }
  
  // Set the ball's color to white (as requested)
  fill(255); 
  noStroke(); // No outline for the ball
  
  // Draw the ball as an ellipse
  ellipse(ballX, ballY, ballRadius * 2, ballRadius * 2);

  // --- Drawing Logic ---
  // If the mouse is pressed, draw a line onto the permanent drawing layer
  if (mouseIsPressed) {
    // drawingLayer.stroke(255); // Already set in setup(), but can be overridden here if needed
    // drawingLayer.strokeWeight(4); // Already set in setup()
    drawingLayer.line(pmouseX, pmouseY, mouseX, mouseY); // Draw the line on the drawing layer
  }

  // --- Pinwheels Logic ---
  // Draw all four pinwheels
  drawPinwheel(pinwheel1X, pinwheel1Y, pinwheelSize);
  drawPinwheel(pinwheel2X, pinwheel2Y, pinwheelSize);
  drawPinwheel(pinwheel3X, pinwheel3Y, pinwheelSize);
  drawPinwheel(pinwheel4X, pinwheel4Y, pinwheelSize);

  // --- Button Click Counter Logic ---
  fill(255); // White text color
  noStroke();
  textSize(24); // Larger text size for visibility
  textAlign(CENTER, CENTER); // Center the text
  text('Clicks: ' + clickCount, width / 2, height / 2 + 50); // Display the counter below the button
}

function drawPinwheel(x, y, size) {
  push(); // Isolate transformations so they don't affect other elements
  translate(x, y); // Move the origin to the pinwheel's center
  rotate(frameCount * pinwheelSpeed); // Rotate based on frameCount for continuous spin

  fill(255); // Pinwheel color is white (as requested for new additions)
  noStroke();
  
  // Draw radiating rectangles to form a pinwheel
  let armLength = size / 2;
  let armWidth = 10;
  let numArms = 8;
  
  for (let i = 0; i < numArms; i++) {
    rectMode(CENTER); // Draw rectangles from their center
    rect(armLength / 2, 0, armLength, armWidth); // Draw one arm
    rotate(TWO_PI / numArms); // Rotate for the next arm
  }
  
  pop(); // Restore previous transformations
}

function buttonClicked() {
  console.log('Button clicked!');
  clickCount++; // Increment the click counter
}

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y); // Position vector
    this.vel = createVector(random(-1.5, 1.5), random(-1.5, 1.5)); // Slightly faster initial random velocity
    this.acc = createVector(0, 0); // Acceleration vector (used for applying forces)
    this.size = random(3, 10); // More varied random size
    this.color = color(255, 150); // Particles are now white with transparency
    this.lifespan = 255; // Initial lifespan (will decrease over time)
  }

  // Method to apply a force to the particle
  applyForce(force) {
    this.acc.add(force);
  }

  // Method to update the particle's state (position, velocity, lifespan)
  update() {
    this.vel.add(this.acc); // Apply acceleration to velocity
    this.vel.limit(6);     // Slightly higher limit the particle's maximum speed
    this.pos.add(this.vel); // Apply velocity to position
    this.acc.mult(0);      // Reset acceleration for the next frame
    this.lifespan -= random(0.5, 1.5); // Slower lifespan decrease for longer trails
  }

  // Method to display the particle on the canvas
  show() {
    noStroke(); // No outline for the particles
    fill(this.color, this.lifespan); // Fill with the particle's color and current lifespan (alpha)
    ellipse(this.pos.x, this.pos.y, this.size); // Draw the particle as an ellipse
  }

  // Method to check if the particle has "died" (lifespan < 0)
  isDead() {
    return this.lifespan < 0;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Optional: Reset ball position on resize if desired
  ballX = width / 2;
  ballY = height / 2;

  // Recalculate and reposition the pinwheels
  pinwheel1X = 100; // Top-left
  pinwheel1Y = 100;

  pinwheel2X = width - 100; // Top-right
  pinwheel2Y = 100;

  pinwheel3X = 100; // Bottom-left
  pinwheel3Y = height - 100;

  pinwheel4X = width - 100; // Bottom-right
  pinwheel4Y = height - 100;

  // Reposition the button in the middle on resize
  myButton.position(width / 2 - myButton.elt.offsetWidth / 2, height / 2 - myButton.elt.offsetHeight / 2);

  // Recreate the drawing layer with the new canvas size
  drawingLayer = createGraphics(width, height);
  drawingLayer.stroke(255); // Re-set drawing styles
  drawingLayer.strokeWeight(4);
}