changed colors and fixed some other JS issues

functions.js

@@ -104,42 +104,38 @@ function validateForm()
 function toggleColor()
 {
 	showColor = !showColor;
-	var x = document.getElementsByName('key');
+	var keys = document.getElementsByName('key');
+	const distMap = {
+		square: 0,
+		lead: 1,
+		saw: 2,
+		bass: 3,
+	};
+
 
 	if (showColor)
 	{
-		for (i = 0; i < x.length; i++)
+		for (let i = 0; i < keys.length; i++)
 		{
-			var dist = x[i].id.substring(0,x[i].id.indexOf("_"));
+			const [ dist, atariIndex ] = keys[i].id.split('_');
-			var atariIndex = x[i].id.substring(x[i].id.indexOf("_")+1);
+			const distValue = distMap[dist];
 
-			if (atariIndex != "nil")
+			const noteData = typeof distValue === 'number' && noteArray[distValue] && noteArray[distValue][atariIndex];
-			{
+			if (noteData) {
-				if (dist == "square")		dist = 0;
+				console.log(noteData[8]);
-				else if (dist == "lead")	dist = 1;
+				keys[i].style.backgroundColor = noteData[8];
-				else if (dist == "saw")		dist = 2;
-				else if (dist == "bass")	dist = 3;
-
-				x[i].style.backgroundColor = noteArray[dist][atariIndex][8];
 			}
 		}
 	}
 	else
 	{
-		for (i = 0; i < x.length; i++)
+		for (let i  = 0; i < keys.length; i++)
 		{
-			var dist = x[i].id.substring(0,x[i].id.indexOf("_"));
+			const [dist, atariIndex] = keys[i].id.split('_');
-			var atariIndex = x[i].id.substring(x[i].id.indexOf("_")+1);
+			const distValue = distMap[dist];
 
-			if (atariIndex != "nil")
+			if (typeof distValue === 'number' && atariIndex !== 'nil') {
-			{
+				keys[i].style.backgroundColor = keys[i].classList.contains('wkey') ? '#FFFFFF' : '#000000';
-				if (dist == "square")		dist = 0;
-				else if (dist == "lead")	dist = 1;
-				else if (dist == "saw")		dist = 2;
-				else if (dist == "bass")	dist = 3;
-
-				if (x[i].className.match("wkey"))	x[i].style.backgroundColor = "#FFFFFF";
-				else											x[i].style.backgroundColor = "#000000";
 			}
 		}
 	}
@@ -185,22 +181,24 @@ function showFloatingDiv(keyID,e)
 
 function exchange()
 {
-	var dist = activeKeyID.substring(0,activeKeyID.indexOf("_"));
+	var distName = activeKeyID.substring(0,activeKeyID.indexOf("_"));
 	var atariIndex = activeKeyID.substring(activeKeyID.indexOf("_")+1);
+	let dist = null;
 
-	if (dist == "square")		dist = 0;
+	if (distName == "square") dist = 0;
-	else if (dist == "lead")	dist = 1;
+	else if (distName == "lead") dist = 1;
-	else if (dist == "saw")		dist = 2;
+	else if (distName == "saw") dist = 2;
-	else if (dist == "bass")	dist = 3;
+	else if (distName == "bass") dist = 3;
+	else return;
 
-	for (j = 0; j < 32; j++)
+	for (j = 0; j < 32; j++) {
-		if (j != atariIndex && noteArray[dist][atariIndex][1] == noteArray[dist][j][1])
+		if (j != atariIndex && noteArray[dist][atariIndex][1] == noteArray[dist][j][1]) {
-		{
+			document.getElementById(activeKeyID).id = distName + "_" + j;
-			document.getElementById(activeKeyID).id = dist+"_"+j;
+			activeKeyID = distName + "_" + j;
-			activeKeyID = dist+"_"+j;
 			atariIndex = j;
 			break;
 		}
+	}
 
 	//update floating div
 	var x = document.getElementById('floatDiv');

index.php

@@ -70,26 +70,65 @@
 
 	while (($file = readdir($dir)) != null)
 	{
-		//format: distortion_atari note index_note name_octave_freq_error_MIDI note index_pitch bend left bits_pitch bend right bits
+		// $note_array[dist][x]:
+
+		// [0] audio file name
+		// [1] note name w/ octave
+		// [2] octave
+		// [3] frequency
+		// [4] error (cents)
+		// [5] MIDI note (0-255)
+		// [6] pitch bend left bits
+		// [7] pitch bend right bits
+		// [8] color
+
 		if (strpos($file,".ogg"))
 		{
 			$info = explode("_",$file);
 			$info[2] = str_replace("+","#",$info[2]);
 			$info[count($info)-1] = substr($info[count($info)-1],0,strpos($info[count($info)-1],".ogg"));
+			// print_r($info);
 
-			if (!isset($note_array[$info[0]][$info[1]]))
+			$dist = $info[0];
-				$note_array[$info[0]][$info[1]] = array();
+			$noteIndex = $info[1];
 
-			array_push($note_array[$info[0]][$info[1]],$file);
+			// [0] distortion name
-			for ($i = 2; $i < count($info); $i++)
+			// [1] note index
-				array_push($note_array[$info[0]][$info[1]],$info[$i]);
+			// [2] note name w/ octave
+			// [3] octave
+			// [4] frequency
+			// [5] error (cents)
+			// [6] MIDI note (0-255)
+			// [7] pitch bend left bits
+			// [8] pitch bend right bits
+
+			if (!isset($note_array[$dist][$noteIndex]))
+				$note_array[$dist][$noteIndex] = array();
+
+			array_push($note_array[$dist][$noteIndex],$file);
+			for ($i = 2; $i < count($info); $i++) {
+				array_push($note_array[$dist][$noteIndex], $info[$i]);
+			}
+
+			$hue = 135;
+			$sat = 50;
+			$lum = 65;
+
+			// info = [ distortion, note index, note name w/ octave, octave, freq error
+
+			$hueCorrection = 270 - $hue;
+			$errorCents = $info[5];
+
+			$errorHue = $hueCorrection * ($errorCents / 50);
+
+			$hue = $hue + $errorHue;
 
 
-			$red = str_pad(dechex(100+2*$note_array[$info[0]][$info[1]][4]),2,"0",STR_PAD_LEFT);
+			// $red = str_pad(dechex(100+2*$note_array[$info[0]][$info[1]][4]),2,"0",STR_PAD_LEFT);
-			$green = str_pad(dechex(150),2,"0",STR_PAD_LEFT);
+			// $green = str_pad(dechex(150),2,"0",STR_PAD_LEFT);
-			$blue = str_pad(dechex(100-2*$note_array[$info[0]][$info[1]][4]),2,"0",STR_PAD_LEFT);
+			// $blue = str_pad(dechex(100-2*$note_array[$info[0]][$info[1]][4]),2,"0",STR_PAD_LEFT);
-			$color = $red.$green.$blue;
+			// $color = $red.$green.$blue;
-			$note_array[$info[0]][$info[1]][8] = '#' . $color;
+			$note_array[$dist][$noteIndex][8] = "hsl({$hue} {$sat} {$lum})"; //'#' . $color;
 		}
 	}
 
@@ -163,6 +202,7 @@
   </head>
 
   <body>
+
     <?php
 
       $xstart = 10;