Ball that follows your mouse

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  ball.x = width / 2;
  ball.y = height / 2;

  // Create the settings panel container
  settingsPanel = createDiv();
  settingsPanel.class('settings-panel');
  settingsPanel.style('display', 'none'); // Hidden by default

  // Create the toggle button for the settings panel
  settingsToggleBtn = createButton('⚙️ Settings');
  settingsToggleBtn.class('settings-toggle-btn');
  settingsToggleBtn.mousePressed(toggleSettingsPanel);
  settingsToggleBtn.touchStarted(toggleSettingsPanel); // Also for mobile touch
  settingsToggleBtn.position(10, 10); // Top-left

  // Add settings elements to the settingsPanel
  addSetting('Ball Size:', ballSizeSlider = createSlider(10, 100, ball.size, 1));
  ballSizeSlider.input(() => ball.size = ballSizeSlider.value());

  addSetting('Ball Color:', ballColorPicker = createColorPicker(ball.color));
  ballColorPicker.input(() => ball.color = ballColorPicker.value());

  addSetting('Follow Speed:', followSpeedSlider = createSlider(0.01, 0.2, followSpeed, 0.01));
  followSpeedSlider.input(() => followSpeed = followSpeedSlider.value());

  addSetting('Particle Count:', particleCountSlider = createSlider(0, 50, particleCount, 1));
  particleCountSlider.input(() => particleCount = particleCountSlider.value());

  addSetting('Particle Color:', particleColorPicker = createColorPicker(particleColor));
  particleColorPicker.input(() => particleColor = particleColorPicker.value());

  addSetting('Particle Size:', particleSizeSlider = createSlider(2, 20, particleSize, 1));
  particleSizeSlider.input(() => particleSize = particleSizeSlider.value());

  addSetting('Trail Length:', trailLengthSlider = createSlider(5, 50, 10, 1));
  trailLengthSlider.input(() => {}); // Value used in draw()

  addSetting('Glow Effect:', glowCheckbox = createCheckbox('', glowEnabled));
  glowCheckbox.changed(() => glowEnabled = glowCheckbox.checked());

  addSetting('Glow Color:', glowColorPicker = createColorPicker(glowColor));
  glowColorPicker.input(() => glowColor = glowColorPicker.value());

  addSetting('Glow Strength:', glowStrengthSlider = createSlider(0, 50, glowStrength, 1));
  glowStrengthSlider.input(() => glowStrength = glowStrengthSlider.value());
}

function draw() {
  // --- Trail Effect ---
  // Draw semi-transparent background to create a trail effect
  let trailAlpha = map(trailLengthSlider.value(), 5, 50, 10, 50); // More trail with lower value
  background(0, trailAlpha); // Black background with varying transparency

  // --- Update Ball Position ---
  let targetX, targetY;

  if (touches.length > 0) {
    // Mobile touch input
    targetX = touches[0].x;
    targetY = touches[0].y;
  } else {
    // Desktop mouse input
    targetX = mouseX;
    targetY = mouseY;
  }

  // Smoothly move the ball towards the target
  ball.vx = lerp(ball.vx, (targetX - ball.x) * followSpeed, 0.1);
  ball.vy = lerp(ball.vy, (targetY - ball.y) * followSpeed, 0.1);

  // Apply friction
  ball.vx *= friction;
  ball.vy *= friction;

  // Clamp speed
  ball.vx = constrain(ball.vx, -maxSpeed, maxSpeed);
  ball.vy = constrain(ball.vy, -maxSpeed, maxSpeed);

  ball.x += ball.vx;
  ball.y += ball.vy;

  // Keep ball on screen
  ball.x = constrain(ball.x, ball.size / 2, width - ball.size / 2);
  ball.y = constrain(ball.y, ball.size / 2, height - ball.size / 2);

  // --- Particle System ---
  if (frameCount % 5 === 0) { // Emit particles every few frames
    if (particles.length < particleCount) {
      particles.push(new Particle(ball.x, ball.y));
    }
  }

  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].display();
    if (particles[i].isDead()) {
      particles.splice(i, 1);
    }
  }

  // --- Draw Ball with Glow Effect ---
  if (glowEnabled) {
    drawingContext.shadowBlur = glowStrengthSlider.value();
    drawingContext.shadowColor = glowColorPicker.value();
  } else {
    drawingContext.shadowBlur = 0; // Turn off glow
  }

  fill(ballColorPicker.value());
  ellipse(ball.x, ball.y, ball.size); // FIXED: Changed from ball.sizeSlider.value() to ball.size

  drawingContext.shadowBlur = 0; // Reset glow for other elements
}

function addSetting(label, control) {
  let container = createDiv();
  container.class('setting-item');
  container.parent(settingsPanel);

  let p = createP(label);
  p.parent(container);
  control.parent(container);
}

function toggleSettingsPanel() {
  isSettingsVisible = !isSettingsVisible;
  if (isSettingsVisible) {
    settingsPanel.style('display', 'flex'); // Use flex for better layout
    settingsToggleBtn.html('✖️ Close Settings'); // Change button text
  } else {
    settingsPanel.style('display', 'none');
    settingsToggleBtn.html('⚙️ Settings');
  }
}

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = random(-2, 2);
    this.vy = random(-2, 0); // Particles tend to float upwards
    this.alpha = 255;
    this.lifetime = particleLifetime;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += 0.05; // Gravity for particles
    this.alpha -= (255 / this.lifetime);
    this.lifetime--;
  }

  display() {
    fill(red(particleColorPicker.value()), green(particleColorPicker.value()), blue(particleColorPicker.value()), this.alpha);
    ellipse(this.x, this.y, particleSizeSlider.value());
  }

  isDead() {
    return this.lifetime <= 0;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Ensure the ball stays on screen after resize
  ball.x = constrain(ball.x, ball.size / 2, width - ball.size / 2);
  ball.y = constrain(ball.y, ball.size / 2, height - ball.size / 2);
}

function touchStarted() {
  return false;
}

function touchMoved() {
  return false;
}