TooneTouch

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100); // Use HSB for easier color manipulation
  noStroke(); // No borders for the circles

  // --- Tone.js Setup ---
  // Create a PolySynth with a sine wave oscillator for cell notes
  synth = new Tone.PolySynth(Tone.Synth, {
    oscillator: { type: "sine" },
    envelope: { attack: 0.05, decay: 0.1, sustain: 0.5, release: 1 }
  }).toDestination();

  // Create a Reverb effect for ambience, connected to master output
  reverb = new Tone.Reverb(2).toDestination();
  // Connect the cell synth to the reverb
  synth.connect(reverb);

  // Initialize ambient drone synth
  ambientDrone = new Tone.Synth({
    oscillator: { type: "sawtooth" }, // Sawtooth wave for a richer, more complex drone sound
    envelope: { attack: 4, decay: 2, sustain: 0.8, release: 8 } // Long attack/release for a smooth drone
  }).connect(reverb); // Connect drone to reverb as well

  // Start Tone.Transport for scheduling autonomous events
  // Note: Tone.Transport will start, but audio won't play until Tone.context.resume() is called
  Tone.Transport.start(); // https://tonejs.github.io/docs/14.7.77/Transport#start

  // Initialize idle sequence for autonomous cell triggering
  idleSequence = new Tone.Sequence((time, value) => {
    if (value === 1 && mode === 'idle') {
      triggerRandomCell();
    }
  }, [1, null, 1, null, null, 1, null, 1, null, null, 1, null, 1, null, null, 1], "8n");
  idleSequence.loop = true;
  idleSequence.loopEnd = "2m"; // Loop length of 2 measures

  // --- Visuals Setup ---
  cellSpacing = min(width, height) / gridSize;

  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      let x = i * cellSpacing + cellSpacing / 2;
      let y = j * cellSpacing + cellSpacing / 2;
      let note = random(scale);
      cells.push(new Cell(x, y, note));
    }
  }

  // We no longer call switchMode('idle') here.
  // The first user interaction will handle starting the sketch.
  lastInteractionTime = millis(); // Initialize interaction time
}

function draw() {
  if (playOverlayActive) {
    // Draw the "Press to Play" overlay
    fill(0); // Black background for the overlay
    rect(0, 0, width, height);

    fill(255); // White text
    textSize(32);
    textAlign(CENTER, CENTER);
    textFont('Arial', 32); // Using a common font and size
    text('Press to Play', width / 2, height / 2);
  } else {
    // Existing drawing logic for idle/interactive mode
    // --- Fading Trails and Background ---
    if (mode === 'interactive') {
      fill(0, 0, 0, 15); // Slightly less transparent black for interactive mode trails
    } else {
      // Idle mode background: pulsing hue, saturation, and brightness for a more vibrant effect
      let idleHue = (frameCount * 0.1) % 360; // Slow, continuous hue shift
      let idleSaturation = map(sin(frameCount * 0.03), -1, 1, 50, 80); // Pulsing saturation
      let idleBrightness = map(sin(frameCount * 0.02), -1, 1, 20, 50); // Pulsing brightness
      fill(idleHue, idleSaturation, idleBrightness, 15); // Semi-transparent color for trails and background
    }
    rect(0, 0, width, height); // Draw over the entire canvas

    // Update and display each cell
    for (let cell of cells) {
      cell.update();
      cell.display();
    }

    // Check for inactivity to switch back to idle mode
    if (mode === 'interactive' && millis() - lastInteractionTime > idleTimeoutDuration) {
      switchMode('idle');
    }
  }
}

function mousePressed() {
  if (playOverlayActive) {
    // If the overlay is active, this is the first user interaction
    if (Tone.context.state !== 'running') {
      Tone.context.resume(); // Start the audio context
      // https://tonejs.github.io/docs/14.7.77/Context#resume
    }
    playOverlayActive = false; // Dismiss the overlay
    lastInteractionTime = millis(); // Reset interaction timer to prevent immediate idle timeout
    switchMode('idle'); // Start the sketch in idle mode
    return; // Exit mousePressed to prevent immediate cell interaction
  }

  // --- Existing cell interaction logic (only runs after overlay is dismissed) ---
  // Switch to interactive mode on any mouse interaction
  if (mode === 'idle') {
    switchMode('interactive');
  }
  lastInteractionTime = millis(); // Reset interaction timer

  // Find the cell closest to the mouse and trigger its expansion
  let closestCell = null;
  let minDist = Infinity;

  for (let cell of cells) {
    let d = dist(mouseX, mouseY, cell.x, cell.y);
    if (d < minDist) {
      minDist = d;
      closestCell = cell;
    }
  }

  if (closestCell) {
    closestCell.triggerExpand();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  cellSpacing = min(width, height) / gridSize;

  // Recalculate cell positions and reset their states and sizes
  let index = 0;
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      let x = i * cellSpacing + cellSpacing / 2;
      let y = j * cellSpacing + cellSpacing / 2;
      cells[index].x = x;
      cells[index].y = y;
      cells[index].size = 0; // Reset size
      cells[index].targetSize = 0; // Reset target size
      cells[index].state = 0; // Reset state to idle
      index++;
    }
  }
}

function switchMode(newMode) {
  mode = newMode;
  if (mode === 'idle') {
    console.log('Switching to Idle Mode');
    idleSequence.start(Tone.now()); // Start the autonomous cell triggering sequence
    // Start the ambient drone in idle mode.
    // We triggerAttackRelease with a very long duration (32 measures)
    // so the drone plays continuously until triggerRelease() is called.
    ambientDrone.triggerAttackRelease("C3", "32m", Tone.now()); // Play a low C note
  } else {
    console.log('Switching to Interactive Mode');
    idleSequence.stop(Tone.now()); // Stop the autonomous sequence
    // Stop the ambient drone in interactive mode by releasing it
    ambientDrone.triggerRelease(Tone.now());
    // Optionally, clear any currently expanding cells to give the user immediate control
    for (let cell of cells) {
      if (cell.state !== 0) {
        cell.size = 0;
        cell.targetSize = 0;
        cell.state = 0;
      }
    }
  }
}

function triggerRandomCell() {
  let randomCell = random(cells);
  if (randomCell) {
    // Only trigger if the cell is currently idle or contracting
    if (randomCell.state === 0 || randomCell.state === 2) {
      randomCell.triggerExpand();
    }
  }
}

class Cell {
  constructor(x, y, note) {
    this.x = x;
    this.y = y;
    this.size = 0; // Current size of the circle
    this.targetSize = 0; // Desired size for expansion
    this.speed = random(0.02, 0.08); // Speed of expansion/contraction
    this.state = 0; // 0: idle, 1: expanding, 2: contracting
    this.note = note; // The musical note assigned to this cell
    this.hue = random(360); // Random initial hue for the cell
  }

  // Update the cell's size based on its state
  update() {
    if (this.state === 1) { // If expanding
      if (this.size < this.targetSize) {
        this.size += cellSpacing * this.speed;
        if (this.size >= this.targetSize) {
          this.size = this.targetSize;
          // Trigger sound when fully expanded
          synth.triggerAttackRelease(this.note, "4n"); // Play note for a quarter note duration
          // https://tonejs.github.io/docs/14.7.77/PolySynth#triggerattackrelease
          this.state = 2; // Change state to contracting
        }
      }
    } else if (this.state === 2) { // If contracting
      if (this.size > 0) {
        this.size -= cellSpacing * this.speed * 0.5; // Contract slower than expanding
        if (this.size <= 0) {
          this.size = 0;
          this.state = 0; // Change state to idle
        }
      }
    }
  }

  // Display the cell as a circle
  display() {
    // Map the cell's size to saturation and brightness for visual feedback
    let saturation = map(this.size, 0, cellSpacing, 30, 100);
    let brightness = map(this.size, 0, cellSpacing, 10, 100);
    fill(this.hue, saturation, brightness, 90); // Use the random hue with mapped saturation/brightness
    circle(this.x, this.y, this.size); // Draw the circle
    // https://p5js.org/reference/#/p5/circle
  }

  // Method to trigger the cell's expansion
  triggerExpand() {
    // Only trigger if the cell is idle or contracting
    if (this.state === 0 || this.state === 2) {
      this.targetSize = cellSpacing * 0.9; // Expand to 90% of the cell spacing
      this.state = 1; // Set state to expanding
      this.hue = random(360); // Change hue on trigger for visual variety
      // https://p5js.org/reference/#/p5/random
    }
  }
}