Celtic Handpan

let handpan; // Global variable to store the handpan object

// Base class representing a sound cell
class SoundCell {
  constructor(name, sound) {
    this.name = name; // Name of the sound (e.g., 'A3')
    this.sound = sound; // Associated sound file
  }

  getName() {
    return this.name; // Return the name of the sound
  }

  play() {
    this.sound.play(); // Play the sound
  }

  stop() {
    this.sound.stop(); // Stop the sound if it's playing
  }

  toggle() {
    // Toggle between playing and stopping the sound
    this.sound.isPlaying() ? this.sound.stop() : this.sound.play();
  }

  display(cellLength, outline, outlineWeight) {
    // Visual representation of the cell
    push();
    noFill();
    stroke(outline);
    strokeWeight(outlineWeight);
    ellipseMode(CORNER);
    circle(0, 0, cellLength);
    pop();
  }
}

// Subclass that adds color and fade effects to SoundCell
class NoteCell extends SoundCell {
  constructor(note, sound, color) {
    super(note, sound); // Call the parent class constructor
    this.color = color; // Cell color for visual effects
    this.alpha = 0; // Transparency for fading effect
  }

  play() {
    super.play(); // Play the sound
    this.alpha = 255; // Set full opacity when played
  }

  display(cellLength, outline, outlineWeight) {
    // Visual representation with fading effect
    push();
    if (this.sound.isPlaying()) {
      const currentTime = this.sound.currentTime();
      const duration = this.sound.duration();
      this.alpha = map(currentTime, 0, duration, 255, 0); // Gradual fade-out
    }
    const hue = color(this.color);
    hue.setAlpha(this.alpha); // Apply alpha transparency
    noStroke();
    fill(hue);
    ellipseMode(CORNER);
    circle(0, 0, cellLength); // Draw the cell
    super.display(cellLength, outline, outlineWeight); // Call parent display
    pop();
  }
}

// Class representing the handpan quadrille
class Handpan extends Quadrille {
  constructor(jaggedArray) {
    super(jaggedArray); // Initialize the quadrille with a jagged array
  }

  play(row, col) {
    const cell = this.read(row, col); // Access the cell at the given position
    cell?.play(); // Play the sound if the cell exists
  }
}

// Preload function to load sounds and create the handpan structure
function preload() {
  const notes = ['A3', 'A4', 'B2', 'B3', 'B4', 
                 'CSharp4', 'D4', 'E4', 'FSharp3', 'FSharp4']; // Note names
  const colors = ['red', 'orange', 'yellow', 'lime', 'green',
                  'aqua', 'cyan', 'skyblue', 'blue', 'purple']; // Cell colors
  const sounds = []; // Array to store NoteCell objects
  // Create NoteCell objects for each note
  notes.forEach((note, index) => {
    const sound = loadSound(`/sounds/${note}.wav`); // Load sound file
    const cellColor = colors[index]; // Get the corresponding color
    // Add to the sounds array
    sounds.push(new NoteCell(note, sound, cellColor));
  });
  // Define the jagged array structure of the handpan
  const jaggedArray = [
    [sounds[0], sounds[1], sounds[2], sounds[3]], // First row
    [sounds[4], null, null, sounds[5]],           // Second row with nulls
    [sounds[6], sounds[7], sounds[8], sounds[9]]  // Third row
  ];
  handpan = new Handpan(jaggedArray); // Create the Handpan object
}

// Setup function to initialize the canvas
function setup() {
  // Match canvas to quadrille dimensions
  createCanvas(4 * Quadrille.cellLength, 3 * Quadrille.cellLength);
}

// Draw function to render the handpan on the canvas
function draw() {
  background(0); // Clear the canvas with a black background
  // Define how each cell should be displayed
  const objectDisplay = ({ value, cellLength, outline, outlineWeight }) => {
    // Use NoteCell's display method
    value.display(cellLength, outline, outlineWeight);
  };
  // Draw the handpan quadrille
  drawQuadrille(handpan, { tileDisplay: 0, objectDisplay });
}

// Mouse interaction to play the sound of the pressed cell
function mousePressed() {
  const row = handpan.mouseRow; // Get the row pressed by the mouse
  const col = handpan.mouseCol; // Get the column pressed by the mouse
  handpan.play(row, col); // Play the corresponding sound
}