<html>
	<head>
		<title>Circles</title>
		<script type="text/paperscript" canvas="myCanvas">

			var count = 150;
			var path = new Path.Circle({
				center: [0, 0],
				radius: 10,
				fillColor: 'white',
				strokeColor: 'black'
			});

			var symbol = new Symbol(path);
			for (var i = 0; i < count; i++) {
				var center = Point.random() * view.size;
				var placedSymbol = symbol.place(center);
				placedSymbol.scale(i / count);
			}
				
		var keyData = {

			q: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/bubbles.mp3']
			}),
			color: '#1abc9c'
			},
			w: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/clay.mp3']
			}),
			color: '#2ecc71'
			},
			e: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/confetti.mp3']
			}),
			color: '#3498db'
			},
			r: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/corona.mp3']
			}),
			color: '#9b59b6'
			},
			t: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/dotted-spiral.mp3']
			}),
			color: '#34495e'
			},
			y: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/flash-1.mp3']
			}),
			color: '#16a085'
			},
			u: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/flash-2.mp3']
			}),
			color: '#27ae60'
			},
			i: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/flash-3.mp3']
			}),
			color: '#2980b9'
			},
			o: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/glimmer.mp3']
			}),
			color: '#8e44ad'
			},
			p: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/moon.mp3']
			}),
			color: '#2c3e50'
			},
			a: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/pinwheel.mp3']
			}),
			color: '#f1c40f'
			},
			s: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/piston-1.mp3']
			}),
			color: '#e67e22'
			},
			d: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/piston-2.mp3']
			}),
			color: '#e74c3c'
			},
			f: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/prism-1.mp3']
			}),
			color: '#95a5a6'
			},
			g: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/prism-2.mp3']
			}),
			color: '#f39c12'
			},
			h: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/prism-3.mp3']
			}),
			color: '#d35400'
			},
			j: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/splits.mp3']
			}),
			color: '#1abc9c'
			},
			k: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/squiggle.mp3']
			}),
			color: '#2ecc71'
			},
			l: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/strike.mp3']
			}),
			color: '#3498db'
			},
			z: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/suspension.mp3']
			}),
			color: '#9b59b6'
			},
			x: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/timer.mp3']
			}),
			color: '#34495e'
			},
			c: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/ufo.mp3']
			}),
			color: '#16a085'
			},
			v: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/veil.mp3']
			}),
			color: '#27ae60'
			},
			b: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/wipe.mp3']
			}),
			color: '#2980b9'
			},
			n: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/zig-zag.mp3']
			}),
			color: '#8e44ad'
			},
			m: {
			sound: new Howl({
          src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/piston-3.mp3']
			}),
			color: '#2c3e50'
			}
		}
	
			var circles = [];
			
			function onKeyDown(event) {
				if(keyData[event.key]){
					var maxPoint = new Point(view.size.width, view.size.height);
					var randomPoint = Point.random();
					var point = maxPoint * randomPoint;
					var newCircle = new Path.Circle(point, 300)
					newCircle.fillColor = keyData[event.key].color;
					keyData[event.key].sound.play();
					circles.push(newCircle);
				}
				console.log(circles);
			}

			function onFrame(event) {
			  for(var i = 0; i < circles.length; i++){
				circles[i].scale(0.9);
				circles[i].fillColor.hue += 1;
				if(circles[i].area < 1){
				  circles[i].remove(); 
				  circles.splice(i, 1); 
				  i--; 
				  console.log(circles);
				}
			  }
				for (var i = 0; i < count; i++) {
					var item = project.activeLayer.children[i];
					item.position.x += item.bounds.width / 20;
					if (item.bounds.left > view.size.width) {
						item.position.x = -item.bounds.width;
					}
				}
			}	
		</script>		
	</head>
	<body>
		<canvas id="myCanvas" resize></canvas>
	</body>
</html>
canvas {
	width:	100%;
	height:	100%;
	background: black;
}

body, html {
	height: 100%;
	margin: 0;
}
// Instruction: press any alpha key to play a sound.
Rerun