script.js

let mainCanvas;
const playButton = document.getElementById("play-button");
const vibratoSlider = document.getElementById("vibrato-slider");

let particles = [];

// Set initial BPM
Tone.Transport.bpm.value = 160;

let isAudioPlaying = false;
let currentNote = -1;

let previousOctave;
let randomNum;

let FMinor7 = ["F4", "Ab4", "C5", "Eb5"];
let Db7 = ["Db4", "F4", "Ab4", "C5"];

let chordProgression = [
  ["0:0:0", FMinor7],
  ["0:1:2", FMinor7],
  ["0:2:0", FMinor7],
  ["0:3:0", FMinor7],
  ["1:0:0", FMinor7],
  ["1:1:2", FMinor7],
  ["1:2:0", FMinor7],
  ["1:3:0", FMinor7],
  ["2:0:0", Db7],
  ["2:1:2", Db7],
  ["2:2:0", Db7],
  ["2:3:0", Db7],
  ["3:0:0", Db7],
  ["3:1:2", Db7],
  ["3:2:0", Db7],
  ["3:3:0", Db7],
]

// let melody = ["F3", "Ab3", "C4", "G3", "Bb3", "C4", "Eb4", "C4", "Ab4"];
let melody = ["F", "Ab", "C", "G", "Bb", "C", "Eb", "Db", "Ab"];
let fMinorScale = ["F", "G", "Ab", "Bb", "C", "Db", "Eb"];

let octave = 3;
let detuner = 0;

let bassline = ["F2", null, null, "F2", null,  null, "F2", "C2", "F2", null, null, "F2", null,  null, "F2", "C2", "Db2", null, null, "Db2", null,  null, "Db2", "Ab2", "Db2", null, null, "Db2", null,  null, "Db2", "Ab2"];

let snareLine = [null, null, 1, null, null, null, 1, 1, null, 1, null, 1, 1, null, 1, null]; // Using 1 for hits, null for rests

let synth = new Tone.PolySynth({
  envelope: {
      attack: 0.5,
      decay: 0.2,
      sustain: 0.7,
      release: 0.1
  }
}).toDestination();

let melodicSynth = new Tone.Synth({
  envelope: {
    attack: 0.02,
    decay: 0.5,
    sustain: 0.8,
    release: 1.0
  },
  portamento: 0.1
}).toDestination();

let kick = new Tone.MembraneSynth().toDestination();
let bassSynth = new Tone.FMSynth({
  envelope:{
    attack: 0.02,
    decay: 0.5,
    sustain: 0.5,
    release: 0.2
  }
}).toDestination();

let snare = new Tone.NoiseSynth({
  envelope: {
    attack: 0.005,
    decay: 0.2,
    sustain: 0,
    release: 0.2
  }
}).toDestination();

const filter = new Tone.Filter(500, "lowpass").toDestination();
const highpass = new Tone.Filter(1200, "highpass").toDestination();  

kick.connect(filter);
snare.connect(highpass);


const part = new Tone.Part((time, chord) => {
  synth.triggerAttack(chord, time);
  // Release after two measures for long attack
  synth.triggerRelease(chord, time + Tone.Time("8n"));
  // synth.triggerAttackRelease(chord, "8n", time);
}, chordProgression).start();

part.loop = true;
part.loopStart = "0:0:0"; // Start from the beginning
part.loopEnd = "4:0:0"; // Loop every 4 measures

const kickPart = new Tone.Loop((time) => {
  kick.triggerAttackRelease("C2", "8n", time);
}, "4n").start();


const bassPart = new Tone.Sequence((time, note) => {
  bassSynth.triggerAttackRelease(note, "8n", time);
}, bassline, "8n").start();

const snarePart = new Tone.Sequence((time, hit) => {
  if (hit) {
    snare.triggerAttackRelease("8n", time);  // For noise synth, we only need duration
  }
}, snareLine, "8n").start();

const vibrato = new Tone.Vibrato({
  frequency: 0.1,
  depth: 0.1,
}).toDestination();

const tremolo = new Tone.Tremolo({
  frequency: 5,
  depth: 0.1
}).toDestination();

// Start with melodicSynth routed to vibrato (no tremolo active)
melodicSynth.connect(vibrato);

// Tremolo toggle (spacebar hold)
let tremoloHeld = false;

function applyTremoloRouting() {
  // Ensure context is started
  Tone.start();
  tremolo.start();

  // Route main synths through the tremolo
  // try { synth.disconnect(); } catch (e) {}
  // synth.connect(tremolo);

  // try { bassSynth.disconnect(); } catch (e) {}
  // bassSynth.connect(tremolo);

  // Route melodic synth through tremolo as well
  try { melodicSynth.disconnect(); } catch (e) {}
  melodicSynth.connect(tremolo);
}

function removeTremoloRouting() {
  tremolo.stop();

  // Restore original routings
  // try { synth.disconnect(); } catch (e) {}
  // synth.toDestination();

  // try { bassSynth.disconnect(); } catch (e) {}
  // bassSynth.toDestination();

  try { melodicSynth.disconnect(); } catch (e) {}
  melodicSynth.connect(vibrato);
}

window.addEventListener('keydown', (e) => {
  if (e.code === 'Space' && !e.repeat) {
    e.preventDefault();
    if (!tremoloHeld) {
      tremoloHeld = true;
      applyTremoloRouting();
    }
  }
});

window.addEventListener('keyup', (e) => {
  if (e.code === 'Space') {
    e.preventDefault();
    if (tremoloHeld) {
      tremoloHeld = false;
      removeTremoloRouting();
    }
  }
});

// synth.connect(filter);
// synth.chain(vibrato, freeverb);
// bassSynth.connect(filter);

playButton.addEventListener("click", () => {

    if(!isAudioPlaying){
        isAudioPlaying = true;
        console.log("start audio");
        playButton.innerText = "Stop";

        synth.volume.value = -16;
        bassSynth.volume.value = 0;
        snare.volume.value = -20;
        
        // Make sure our part is properly started
        part.stop(); // Stop first to ensure clean state
        kickPart.stop();
        bassPart.stop();
        snarePart.stop();

        part.start(0); // Start from beginning
        kickPart.start(0);
        bassPart.start(0);
        snarePart.start(0);
        
        // Start the transport
        Tone.Transport.start();
    } else {
        isAudioPlaying = false;
        playButton.innerText = "Play";
        console.log("stop audio");
        Tone.Transport.stop();
        part.stop();
        kickPart.stop();
        bassPart.stop();
        snarePart.stop();

        // Release any hanging notes
        synth.releaseAll();
        kick.releaseAll();
        bassSynth.releaseAll();
        snare.releaseAll();
    }
})

window.addEventListener("mousemove", (event) => {

})

function setup(){
  mainCanvas = createCanvas(600, 400);
  background(200);
}

function draw(){
  cursor("crosshair");
  background(200);
  let colorVal = map(mouseX, 0, width, 0, 255);
  let colorValY = map(mouseY, 0, height, 0, 255);
  
  background(colorVal, 100, colorValY);
  noStroke();

  if(mouseIsPressed === true){
    ellipse(mouseX, mouseY, 30, 30);
  }

  if(mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height){
    if(mouseY <= 400 && mouseY >300){
      octave = 2;
    } else if(mouseY < 300 && mouseY > 200){
      octave = 3;
    } else if (mouseY < 200 && mouseY > 100) {
      octave = 4;
    } else if (mouseY < 100 && mouseY > 0){
      octave = 5;
    }
  }

}

vibratoSlider.addEventListener("input", (event) => {
    const vibratoValue = parseFloat(event.target.value);
    vibrato.frequency.value = vibratoValue;
    vibrato.depth.value = vibratoValue;
});


function mousePressed(){
  

  randomNum = Math.floor(Math.random() * fMinorScale.length);
  melodicSynth.triggerAttack(`${fMinorScale[randomNum]}${octave}`);
  previousOctave = octave;
  // let newTuner = map(mouseX, 0, width, 0.1, 100);
  // vibrato.frequency.value = newTuner;
  // vibrato.depth.value = newTuner;
}

function mouseDragged(){
  if (!randomNum || !previousOctave) return

  if(octave != previousOctave){
    melodicSynth.triggerAttack(`${fMinorScale[randomNum]}${octave}`);
    previousOctave = octave;
  }
}

function mouseReleased(){
  melodicSynth.triggerRelease();

  // vibrato.frequency.value = 0.1;
  // vibrato.depth.value = 0.1;
}


function keyPressed(){
  if(key === "w"){
    const vibratoValue = vibrato.frequency.value + 0.1;

    vibrato.frequency.value = vibratoValue;
    vibrato.depth.value = vibratoValue;
  }

    if(key === "s"){
    const vibratoValue = vibrato.frequency.value - 0.1;

    vibrato.frequency.value = vibratoValue;
    vibrato.depth.value = vibratoValue;
  }
    if(key === "r"){
    const vibratoValue = 0.1;

    vibrato.frequency.value = vibratoValue;
    vibrato.depth.value = vibratoValue;
    console.log("reset");
  }

  if(key === " "){
    console.log("space pressed");
    const tremoloValue = 10;
    tremolo.frequency.value = tremoloValue;
    tremolo.depth.value = 0.5;
  } else {
    tremolo.frequency.value = 5;
    tremolo.depth.value = 0.1;
  }

}