First to come

function preload() {
  // Load the Roboto font using the reliable Fontsource CDN
  robotoFont = loadFont('https://unpkg.com/@fontsource/roboto@latest/files/roboto-latin-400-normal.woff');
}

function setup() {
  // Create a canvas that fills the window, handling tablet landscape orientation
  createCanvas(windowWidth, windowHeight);
  textFont(robotoFont); // Set the font for text
  colorMode(HSB, 360, 100, 100, 100); // Use HSB color mode for consistent grayscale
  background(0, 0, 10); // Dark background
  noStroke(); // Particles will be drawn without an outline

  // Initialize particles with random positions, colors from our palette, and sizes
  for (let i = 0; i < numParticles; i++) {
    particles.push({
      x: random(width),
      y: random(height),
      vx: 0, // Initial velocity x
      vy: 0, // Initial velocity y
      hue: random(particleHues), // Assign a random hue from our custom palette
      brightness: random(80, 100), // Light gray to white for steam
      alpha: random(20, 50),     // Transparency for steam effect
      size: random(1, 3) // Random particle size
    });
  }
}

function draw() {
  // Create subtle trails by drawing a semi-transparent rectangle over the canvas
  // This gives the "steam" a fading, ethereal quality
  fill(0, 0, 10, 5); // Dark background, low alpha (5 out of 100)
  rect(0, 0, width, height); // Cover the entire canvas

  for (let p of particles) {
    // Get a vector from a Perlin noise field to guide the particle's movement
    // noise() takes x, y, and an optional third dimension (frameCount for animation)
    // The result is mapped to an angle (0 to TWO_PI * 2 for more dynamic flow)
    let angle = noise(p.x * flowFieldScale, p.y * flowFieldScale, frameCount * flowFieldSpeed) * TWO_PI * 2;
    let flowVx = cos(angle) * particleSpeed; // Convert angle to x velocity
    let flowVy = sin(angle) * particleSpeed; // Convert angle to y velocity

    // Smoothly interpolate the particle's velocity towards the flow field vector
    p.vx = lerp(p.vx, flowVx, 0.1);
    p.vy = lerp(p.vy, flowVy, 0.1);

    // React to touch/mouse input
    let touchPoints = [];
    if (mouseIsPressed) {
      touchPoints.push({ x: mouseX, y: mouseY }); // Add mouse as a touch point
    }
    for (let t of touches) {
      touchPoints.push({ x: t.x, y: t.y }); // Add all active touches
    }

    for (let t of touchPoints) {
      let d = dist(p.x, p.y, t.x, t.y); // Distance from particle to touch
      if (d < touchInfluenceRadius && d > 0) { // If within influence radius and not at the exact touch point
        // Calculate angle from touch to particle
        let angleToTouch = atan2(p.y - t.y, p.x - t.x);
        // Map distance to force magnitude (stronger closer to touch)
        let forceMagnitude = map(d, 0, touchInfluenceRadius, touchInfluenceForce, 0);
        // Apply force to particle velocity, pushing it away from the touch
        p.vx += cos(angleToTouch) * forceMagnitude;
        p.vy += sin(angleToTouch) * forceMagnitude;
      }
    }

    // Update particle position based on velocity
    p.x += p.vx;
    p.y += p.vy;

    // Wrap particles around the edges of the canvas
    if (p.x < 0) p.x = width;
    if (p.x > width) p.x = 0;
    if (p.y < 0) p.y = height;
    if (p.y > height) p.y = 0;

    // Draw the particle with its individual vibrant hue from our palette
    // HSB: p.hue (from palette), Saturation 75 (vibrant), p.brightness (for light/dark variations), p.alpha (for transparency)
    fill(p.hue, 75, p.brightness, p.alpha);
    circle(p.x, p.y, p.size);
  }

  // Draw the logo text "P5JS.AI"
  // Use min(width, height) for responsive text sizing on various screens
  textSize(min(width, height) * 0.15); // Adjust multiplier for desired size
  textAlign(CENTER, CENTER); // Center the text horizontally and vertically
  textFont(robotoFont); // Apply the loaded font
  fill(240, 95, 95); // Vibrant deep blue text (Hue 240, Saturation 95, Brightness 95)
  noStroke(); // Ensure text has no outline
  // Position slightly above the center to leave room for the steam below/around
  text("P5JS.AI", width / 2, height / 2 - min(width, height) * 0.05);
}

function touchMoved() {
  // Prevent default browser behavior (scrolling) when touching the canvas
  return false;
}

function windowResized() {
  // Resize the canvas when the window (or tablet orientation) changes
  resizeCanvas(windowWidth, windowHeight);
  // Reinitialize particles to fit the new canvas size, creating a fresh flow
  particles = [];
  for (let i = 0; i < numParticles; i++) {
    particles.push({
      x: random(width),
      y: random(height),
      vx: 0,
      vy: 0,
      hue: random(particleHues), // Assign a random hue from our custom palette
      brightness: random(80, 100),
      alpha: random(20, 50),
      size: random(1, 3)
    });
  }
}