//https://www.youtube.com/watch?v=CY5aGEXsGDo

// button design https://www.w3schools.com/css/ css comLab class

let song;

let currentPlaySong=1;

​

let song1;

let hasPlayed = false;

let hasPlayed1 = false;

let fft; //this is to generate the wave form Fast Fourier Transform https://p5js.org/reference/p5.sound/p5.FFT/

​

let r1;

​

​

particles=[];

​

//button to start sketch 

let button; 

let started= false; 

​

function preload() {

  song = loadSound("/sound.mp3");

  song1 = loadSound("/sound1.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

 // createCanvas(windowWidth, windowHeight, SVG);

  angleMode(DEGREES);

  fft = new p5.FFT(); 

//   button 

  button = createButton('Start');

  button.position(width/2, 530);

  button.mousePressed(startSketch);

​

}

​

​

function draw() {

background(0);

  //added this before translate to position correctly 

   if(!started){

  text('1-Move the curser to change the shape.',width/2 -130,450);

  text('2-Press A or a to listen to the Arabic version', width/2-130,470)

     text('3-Press E or e to listen to the English Remix', width/2-130,490)

      text('4-Press R or r to Reset & S or s to Save', width/2-130,510)

  fill(255);

  textSize(15);

  }

  translate(width/2, height/2);

  //particles respond to frequencies 

  fft.analyze();

  amp = fft.getEnergy(20,[200]);

// shape 

​

  let waveData = fft.waveform();

  if (started) {

  for(let t = -1; t <=1; t+=0.09){

    //interaction to change shape based on curser 

    let freqX= map(mouseX,0,width,1,15);

    let freqY= map(mouseY,0,height,1,15);

    //interaction to change shape based on curser this is a little limited so i did not use it 

    let offSet =map(mouseX,0,width,0,150);

   beginShape();

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

    stroke(255);

    fill(0)

    strokeWeight(1);

    let index = floor(map(i,0,180,0,waveData.length -1));

r1= map(waveData[index], -1,1,100,300);

    let x1= r1 * cos(20*i)*t *cos(i*freqX);

    let y1= r1 *sin(10*i)*sin(i*freqY); 

   vertex(x1,y1); 

    //having point is the reason why it was not connected

  //  point(x1,y1); 

  }

  endShape(CLOSE);

  } 

let p = new particle();

  particles.push(p);

    for(let i=particles.length-10; i>=0;i--){

      if(!particles[i].edges()) {

    particles[i].update(amp > 190);

    particles[i].show();

  }else{

    particles.splice(i,0);

  }

    }

  } 

}

​

​

​

​

//function to switch from arabic to english version of the song and reset  

function keyPressed() {

  if (key === 'a' || key === 'A') {

    switchToSong1();  // play song 1 when 'a' is pressed

  } else if (key === 'e' || key === 'E') {

    switchToSong2();  // play song 2 when 'e' is pressed

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

    resetSongs();  // reset the songs when 'R' is pressed

  }else if (key === 's' || key === 'S') {

    // Save the canvas as PNG without stopping the sound

    save("myPNG.png");

  }

}

 //I need to add this because if i dont for some reason when I press a it does not play 

function switchToSong1() {

  if (!song.isPlaying()) {

    song1.pause();  // pause song 2 if it's playing

    song.play();    // play song 1

    currentSong = 1;

  }

}

​

function switchToSong2() {

  if (!song1.isPlaying()) {

    song.pause();   // pause song 1 if it's playing

    song1.play();   // play song 2

    currentSong = 2;

  }

}

​

function resetSongs() {

  // stop both songs

  song.stop();

  song1.stop();

  // Reset to the first song

  currentSong = 1;

}

​

​

function startSketch() {

  started = true;

  button.hide(); // hide the button after starting the sketch

}

​

​