Arty2/beep.html

## 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>