//Created by Mirette Dahab

//September 17th, 2024

//created as an assignment for The Code of Music

​

let trackNames = ["chimeloop", "loop1", "loop2", "vocalloop"];

let players = [];

let trackStates = [false, false, false, false];

let audioInitialized = false;

let allTracksLoaded = false;

let speedFactor = 1;

​

function setup() {

  createCanvas(800, 600);

  frameRate(10); // Initial frame rate

  textAlign(CENTER, CENTER);

  textSize(24);

  console.log("press 1,2,3 and 4 to toggle On/Off different tracks, Press spacebar to speed everything up! ")

}

​

function preload() {

  let tracksLoaded = 0;

​

  for (let i = 0; i < trackNames.length; i++) {

    players[i] = new Tone.Player({

      url: "tracks/" + trackNames[i] + ".wav",

      loop: true,

      autostart: false,

      onload: () => {

        tracksLoaded++;

        if (tracksLoaded === trackNames.length) {

          allTracksLoaded = true; //true when all tracks are loaded

        }

      }

    }).toDestination();

  }

}

​

function draw() {

  background(7, 14, 25);

​

  if (!audioInitialized) {

    if (!allTracksLoaded) {

      fill(255);

      text("Loading tracks...", width / 2, height / 2); // loading message

    } else {

      fill(255);

      text("Press any key to start audio", width / 2, height / 2); // start message

    }

    return; // Stop the draw loop here until audio is initialized

  }

​

  // Visuals 

  let gr = color(144, 251, 120);  // Color for track 1 visuals

  let pi = color(255, 124, 110);  // Color for track 2 visuals

  let r = color(248, 40, 22);     // Color for track 3 visuals

  let p = color(96, 35, 250);     // Color for track 4 visuals

​

  if (trackStates[0]) {

    drawVisuals(gr, 30 / speedFactor, 50 / speedFactor); // Track 1

  }

  if (trackStates[1]) {

    drawVisuals(pi, 20 / speedFactor, 20 / speedFactor); // Track 2 

  }

  if (trackStates[2]) {

    drawVisuals(r, 40 / speedFactor, 30 / speedFactor);  // Track 3 

  }

  if (trackStates[3]) {

    drawVisuals(p, 10 / speedFactor, 20 / speedFactor);  // Track 4 

  }

}

​

function drawVisuals(fillColor, xSpacing, ySpacing) {

  fill(fillColor);

  strokeWeight(1);

  for (let i = 0; i <= width; i += xSpacing) {

    for (let j = 0; j < height; j += ySpacing) {

      ellipse(i, random(j), random(5));

    }

  }

}

​

function keyPressed() {

  if (!audioInitialized) {

    // Start the audio on first user interaction

    Tone.start().then(() => {

      audioInitialized = true;

    });

  }

​

  if (audioInitialized) {

    if (key === '1') {

      toggleTrack(0); // track 1

    } else if (key === '2') {

      toggleTrack(1); // track 2

    } else if (key === '3') {

      toggleTrack(2); // track 3

    } else if (key === '4') {

      toggleTrack(3); // track 4

    } else if (key === ' ') {

      speedFactor = speedFactor === 1 ? 1.3 : 1; // Toggle between speeds

      frameRate(10 * speedFactor);

      for (let i = 0; i < players.length; i++) {

        players[i].playbackRate = speedFactor; // Adjust playback rate of audio tracks

      }

    }

  }

}

​

function toggleTrack(trackIndex) {

  if (players[trackIndex].loaded) { // Only toggle the track if it's fully loaded

    if (trackStates[trackIndex]) {

      players[trackIndex].stop();   // Stop the track if it's playing

      trackStates[trackIndex] = false;

    } else {

      players[trackIndex].start();  // Start the track if it's stopped

      trackStates[trackIndex] = true;

    }

  } else {

    console.log("Track " + trackNames[trackIndex] + " is not loaded yet.");

  }

}

​