// Cloned by giddyoff on 11 Aug 2023 from World "Sound Visualizer " by Genesis 
// Please leave this clone trail here.
 
// I got some insite from here to get the sound file and some set up css
//https://p5js.org/reference/#/p5.SoundFile/pause

// Used FFT to analyse audio frequencies i got some help from this short code referenced 
// https://p5js.org/reference/#/p5.FFT




AB.loadCSS ( 'uploads/destinyjames/open.css' );

var song;
var fft;
var button;

AB.newSplash (" <H2> PRESS SPACE TO START PLAYING ! </H2>"); // 
document.body.onkeyup = function(e) {
  if (e.key == " " ||
      e.code == "Space" ||      
      e.keyCode == 32      
  ) {
    AB.removeSplash(); 
  }
}
//const SKYCOLOR = "Black";
function toggleSong() {
    
  if (song2.isPlaying()){
        song2.pause();
    }
  if (song.isPlaying()) {
      
    song.pause();}
  if (song.isPaused)
    {
        song2.play()
    }
    
  if (song2.isPaused)
    {
        song1.play()
    }
  
}

function preload() {
  song = loadSound('/uploads/destinyjames/CentralCeexDave-SprinterINSTRUMENTAL.mp3');
  song2 = loadSound('/uploads/destinyjames/Drake-Rescue-Me-Official-Instrumental.mp3'); 
}

function setup() {
  createCanvas(1500, 1000);
  colorMode(HSB);
  angleMode(DEGREES);
  button = createButton('Pause/Play');
  button.mousePressed(toggleSong);
  song.play();
  fft = new p5.FFT(0.10, 128);
}


 AB.world.newRun = function()                 
    {
        
		// console.log ( "newRun" );
		ABWorld.init (  SKYCOLOR  );}
		
		
function draw() {
  background(1);
  var circle = fft.analyze();
  
  noStroke();
  translate(width / 2, height / 2);
  //beginShape();
  for (var i = 0; i < circle.length; i++) {
    var angle = map(i, 0, circle.length, 0, 360);
    var amp = circle[i];
    var r = map(amp, 0, 256, 200, 500);
    //fill(i, 255, 255);
    var x = r * cos(angle);
    var y = r * sin(angle);
    stroke(i, 255, 255);
    line(0, 0, x, y);
    //vertex(x, y);
    //var y = map(amp, 0, 256, height, 0);
    //rect(i * w, y, w - 2, height - y);
  }
  //endShape();
}



function start()        // user has entered a password 
{
	var  password =  jQuery("input#p").val();
	password = password.trim();
	
	if ( ! alphanumeric ( password ) )
	{
	    $("#errordiv").html( "<font color=red> <B> Error: Password must be alphanumeric. </b></font> " );
	    return;
	}
	
	// else we have a password, start the socket run with this password 
    AB.socketStart ( password );  
    
    AB.removeSplash();   
}


  
function alphanumeric ( str ) 				// return if string is just alphanumeric   
{
	var rc = str.match(/^[0-9a-zA-Z]+$/); 			// start of line  "[0-9a-zA-Z]+"  end of line 
	
	if ( rc ) return true;
	else      return false; 
}