Arty2 · May 6, 2018 22:54
diff --git a/beep.html b/beep.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>beep</title>
 	<meta charset="utf-8" />
 	<style>
 		body {
 			margin: 20px;

 			background: #0000FF;
 			color: #FFF;
 			font-size: 39px;
 			line-height: 38px;
 			word-wrap: break-word;

 			/*font-size: 60px;
 			letter-spacing: -12px;
 			line-height: 32px;*/
 		}

 		@-webkit-keyframes rotation {
 			from {-webkit-transform: rotate(0deg);}
 			to   {-webkit-transform: rotate(270deg);}
 		}
 		#canvas b:last-child {
 			-webkit-animation: rotation 0.2s 1 linear;
 		}
 		b {			
 			display: inline-block;
 		}
 	</style>
 </head>
 <body>
 	<div id="canvas"></div>
 	<script type="text/javascript">
 		tiles = ['╱', '╲']; // straight lines
 		tiles = ['◢', '◣', '◤', '◥']; // triangles
 		tiles = ['╭', '╮', '╯', '╰']; // circle segments

 		timing = 200; // milliseconds
 		rows = 10;
 		columns = 30;
 		items = rows * columns;

 		step = 220;
 		notes = 1

 		AudioContext = (
 			window.AudioContext ||
 			window.webkitAudioContext ||
 			null
 		);

 		if (AudioContext) {
 			context = new webkitAudioContext();

 		} else {
 			// alert('browser does not support AudioContext');
 		}
 		window.onclick = function() { // mute
 			AudioContext = null;
 		}


 		function beep(key) {
 			if (!AudioContext) { return; }
 			var osc = context.createOscillator();
 			osc.connect(context.destination);
 			osc.type = 3; // Sine wave = 0, Square wave = 1, Sawtooth wave = 2, Triangle wave = 3
 			var volume = context.createGain();
 			osc.connect(volume);
 			volume.connect(context.destination);
 			volume.gain.setValueAtTime(notes, context.currentTime);
 			volume.gain.linearRampToValueAtTime(0, context.currentTime + timing / 2000)
 			volume.gain.linearRampToValueAtTime(notes, context.currentTime + timing / 1000)

 			osc.frequency.value = step + key * step; // Hz
 			osc.noteOn(0);
 			osc.noteOff(context.currentTime + timing * notes / 1000 );
 		}

 		function print(key) {
 			var x = count%columns;
 			var y = Math.floor(count/columns);
 			document.getElementById('canvas').innerHTML += '<b id="' + x + '-' + y
 			+ '" data-key="' + key
 			+ '" data-x="' + x
 			+ '" data-y="' + y
 			+ '">' + tiles[key] + '</b>';
 			if ( (count + 1)%columns == 0 ) {
 				document.getElementById('canvas').innerHTML += '<br/>';
 			}
 			color(key, x, y);
 		}

 		linked = [ [[-1],[-1]], [[0,3],[-1]], [[0,3],[1,0]], [[-1],[1,0]] ];
 		function color(key, x, y) { //optimise this function
 			var up_left = document.getElementById( (x-1) + '-' + (y-1) );
 			var up_right = document.getElementById( x + '-' + (y-1) );
 			var down_right = document.getElementById( x  + '-' + y ); // current
 			var down_left = document.getElementById( (x-1) + '-' + y );

 			if ( down_left && linked[key][0].indexOf( down_left.dataset.key*1 ) != -1 ) {
 				down_right.style.color = '#000';
 				down_left.style.color = '#000';
 			}

 			if ( up_right && linked[key][1].indexOf( up_right.dataset.key*1 ) != -1 ) {
 				down_right.style.color = '#000';
 				up_right.style.color = '#000';
 			}

 			if ( (up_left && up_right && down_left) && up_left.dataset.key == 0 && up_right.dataset.key == 1 && down_right.dataset.key == 2 && down_left.dataset.key == 3) {
 				up_left.style.color = '#FF0000';
 				up_right.style.color = '#FF0000';
 				down_right.style.color = '#FF0000';
 				down_left.style.color = '#FF0000';

 				step = step/notes;
 				timing = timing*notes;
 				notes++;
 			}

 		}

 		count = 0;
 		function run() {
 			var key = Math.floor(Math.random() * tiles.length);

 			print(key);
 			beep(key);

 			if (count++ < items - 1) {
 				setTimeout(run, timing);
 			} else {
 				//osc.disconnect();
 			}

 		}
 		setTimeout(run, 2000);

 		</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>beep</title>
	<meta charset="utf-8" />
	<style>
	body {
	margin: 20px;

	background: #0000FF;
	color: #FFF;
	font-size: 39px;
	line-height: 38px;
	word-wrap: break-word;

	/*font-size: 60px;
	letter-spacing: -12px;
	line-height: 32px;*/
	}

	@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(270deg);}
	}
	#canvas b:last-child {
	-webkit-animation: rotation 0.2s 1 linear;
	}
	b {
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<div id="canvas"></div>
	<script type="text/javascript">
	tiles = ['╱', '╲']; // straight lines
	tiles = ['◢', '◣', '◤', '◥']; // triangles
	tiles = ['╭', '╮', '╯', '╰']; // circle segments

	timing = 200; // milliseconds
	rows = 10;
	columns = 30;
	items = rows * columns;

	step = 220;
	notes = 1

	AudioContext = (
	window.AudioContext \|\|
	window.webkitAudioContext \|\|
	null
	);

	if (AudioContext) {
	context = new webkitAudioContext();

	} else {
	// alert('browser does not support AudioContext');
	}
	window.onclick = function() { // mute
	AudioContext = null;
	}


	function beep(key) {
	if (!AudioContext) { return; }
	var osc = context.createOscillator();
	osc.connect(context.destination);
	osc.type = 3; // Sine wave = 0, Square wave = 1, Sawtooth wave = 2, Triangle wave = 3
	var volume = context.createGain();
	osc.connect(volume);
	volume.connect(context.destination);
	volume.gain.setValueAtTime(notes, context.currentTime);
	volume.gain.linearRampToValueAtTime(0, context.currentTime + timing / 2000)
	volume.gain.linearRampToValueAtTime(notes, context.currentTime + timing / 1000)

	osc.frequency.value = step + key * step; // Hz
	osc.noteOn(0);
	osc.noteOff(context.currentTime + timing * notes / 1000 );
	}

	function print(key) {
	var x = count%columns;
	var y = Math.floor(count/columns);
	document.getElementById('canvas').innerHTML += '<b id="' + x + '-' + y
	+ '" data-key="' + key
	+ '" data-x="' + x
	+ '" data-y="' + y
	+ '">' + tiles[key] + '</b>';
	if ( (count + 1)%columns == 0 ) {
	document.getElementById('canvas').innerHTML += '<br/>';
	}
	color(key, x, y);
	}

	linked = [ [[-1],[-1]], [[0,3],[-1]], [[0,3],[1,0]], [[-1],[1,0]] ];
	function color(key, x, y) { //optimise this function
	var up_left = document.getElementById( (x-1) + '-' + (y-1) );
	var up_right = document.getElementById( x + '-' + (y-1) );
	var down_right = document.getElementById( x + '-' + y ); // current
	var down_left = document.getElementById( (x-1) + '-' + y );

	if ( down_left && linked[key][0].indexOf( down_left.dataset.key*1 ) != -1 ) {
	down_right.style.color = '#000';
	down_left.style.color = '#000';
	}

	if ( up_right && linked[key][1].indexOf( up_right.dataset.key*1 ) != -1 ) {
	down_right.style.color = '#000';
	up_right.style.color = '#000';
	}

	if ( (up_left && up_right && down_left) && up_left.dataset.key == 0 && up_right.dataset.key == 1 && down_right.dataset.key == 2 && down_left.dataset.key == 3) {
	up_left.style.color = '#FF0000';
	up_right.style.color = '#FF0000';
	down_right.style.color = '#FF0000';
	down_left.style.color = '#FF0000';

	step = step/notes;
	timing = timing*notes;
	notes++;
	}

	}

	count = 0;
	function run() {
	var key = Math.floor(Math.random() * tiles.length);

	print(key);
	beep(key);

	if (count++ < items - 1) {
	setTimeout(run, timing);
	} else {
	//osc.disconnect();
	}

	}
	setTimeout(run, 2000);

	</script>
	</body>
	</html>