pulsate demo

pplaquette · Jul 16, 2010 · 62f0170 · 62f0170
1 parent ef11e96
commit 62f0170
Showing 1 changed file with 160 additions and 0 deletions.
diff --git a/ch05/pulsate.html b/ch05/pulsate.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html> 
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
+<head> 
+	<meta charset="utf-8" /> 
+	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
+	<title>Pulsate - Canvas version</title> 
+	<meta name="DC.title" content="Pulsate - Canvas version" /> 
+	<meta name="description" content="Pulsate - Canvas version" /> 
+	<meta name="keywords" content="pulsate, html5, canvas" /> 
+	<meta name="author" content="Julien Villetorte" /> 
+	<style type="text/css" media="screen"> 
+		#pulsate{
+			position:fixed;
+			left:50%;
+			top:50%;
+			margin-left:-256px;
+			margin-top:-256px;
+			background-color:#1a1a1a;
+		}		
+	</style> 
+</head> 
+<body> 
+	<header> 
+		HTML5 version of Pulsate using Canvas &amp; &lt;audio&gt;, by <a href="http://twitter.com/delphiki">@delphiki</a><br /> 
+		Piano sounds by <a href="http://twitter.com/Geoffrey_C">@Geoffrey_C</a><br /> 
+		Flash original version: <a href="http://lab.andre-michelle.com/pulsate">http://lab.andre-michelle.com/pulsate</a><br /> 
+	  <small>Easily modified pulsate using <a href="http://twitter.com/rem">@rem</a> &amp; <a href="http://twitter.com/brucel">@brucel</a></small> by rem<br />
+		<input type="checkbox" id="swearing_mode" /><label for="swearing_mode"> Swearing mode</label><br /> 
+		<input type="button" value="Reset" id="resetButton" />		
+	</header> 
+	<canvas id="pulsate" width="512" height="512"> 
+	Your browser does not support Canvas.
+	</canvas> 
+	<script type="text/javascript"> 
+		var FilesOgg = new Array('son1.ogg', 'son2.ogg', 'son3.ogg', 'son4.ogg', 'ahole.ogg', 'awwcrap.ogg', 'bite_me.ogg', 'gotohell.ogg', 'jerk_ass.ogg');
+		var FilesWav = new Array('son1.wav', 'son2.wav', 'son3.wav', 'son4.wav', 'ahole.wav', 'awwcrap.wav', 'bite_me.wav', 'gotohell.wav', 'jerk_ass.wav');
+		var sound = new Audio();
+
+		var faces = [];
+		faces.push(document.createElement('img'));
+    faces.push(document.createElement('img'));
+
+    faces[0].src = 'bruce-ball.png';
+    faces[1].src = 'remy-ball.png';
+
+
+		var canPlayOgg = ("no" != sound.canPlayType("audio/ogg")) && ("" != sound.canPlayType("audio/ogg"));
+		var canPlayWav = ("no" != sound.canPlayType("audio/wav")) && ("" != sound.canPlayType("audio/wav"));
+		var files = canPlayOgg ? FilesOgg : (canPlayWav ? FilesWav : '');
+		for(i = 0; i < files.length; i++){
+			sound.src = files[i];
+			sound.load();
+		}
+
+		window.addEventListener('load', function () {
+			var elem = document.getElementById('pulsate');
+			var color = '#ff9900';
+			var lineWidth = 2;
+
+			if (!elem || !elem.getContext){
+				return;
+			}
+			var context = elem.getContext('2d');
+			if (!context){
+				return;
+			}
+			context.strokeStyle = color;
+			context.lineWidth = lineWidth;
+
+			var circles = new Array();
+			elem.addEventListener('click', function (e){
+				var element = elem;
+				var elementX = elementY = 0;
+				do{
+  					elementX += element.offsetLeft;
+  					elementY += element.offsetTop;
+  					element = element.offsetParent;
+				}while(element && element.style.position != 'absolute');
+				var ev = e || window.event;
+				var diffx = ev.clientX - elementX;
+				var diffy = ev.clientY - elementY;
+
+				var pCircle = { "x" : diffx,
+								"y" : diffy,
+   								"radius" : 0,
+   								"enlarge" : true
+							 };
+				circles.push(pCircle);
+			}, false);
+
+			function playSound(max_radius){
+				if(files == '')
+					return;
+
+				if(document.getElementById('swearing_mode').checked){
+					var idx = Math.floor(Math.random()*files.length) + 4;
+					var a = new Audio(files[idx]);
+				}
+				else{
+					if(max_radius < 20)
+						var a = new Audio(files[3]);
+					else if(max_radius < 30)
+						var a = new Audio(files[2]);
+					else if(max_radius < 60)
+						var a = new Audio(files[1]);
+					else
+						var a = new Audio(files[0]);
+				}
+				a.play();
+			}
+
+			function draw(){
+				context.clearRect (0, 0, elem.width, elem.height);
+				for(i = 0; i < circles.length; i++){
+					context.beginPath();  
+          // context.arc(circles[i].x, circles[i].y, circles[i].radius, 0, Math.PI*2, true); 
+          context.drawImage(faces[i%2], circles[i].x - (circles[i].radius/2), circles[i].y - (circles[i].radius/2), circles[i].radius, circles[i].radius);
+          // context.stroke();
+
+					for(j = 0; j < circles.length; j++){
+						if(i != j){
+							var dist = Math.sqrt( (circles[j].x - circles[i].x) * (circles[j].x - circles[i].x) + (circles[j].y - circles[i].y) * (circles[j].y - circles[i].y) );
+							if( dist < (circles[i].radius + circles[j].radius - 1) // -2 px line width
+								&& (dist > circles[i].radius) && (dist > circles[j].radius) ){
+								circles[i].enlarge = false;
+								circles[j].enlarge = false;
+								playSound(((circles[i].radius >= circles[j].radius) ? circles[i].radius : circles[j].radius));
+							}
+						}
+					}
+
+					if(circles[i].enlarge){
+						circles[i].radius += 0.3;
+					}
+					else if(circles[i].radius - 0.3 > 0.5){
+							circles[i].radius -= 0.3;
+					}
+					else{
+						circles[i].radius = 0.5;
+						circles[i].enlarge = true;
+					}		
+				}
+			}
+
+			function reset(){
+				circles = new Array();
+				context.clearRect (0, 0, elem.width, elem.height);
+			}
+
+			document.getElementById('resetButton').addEventListener('click', function () {
+				reset();
+			}, false);
+
+			setInterval(draw, 10);
+			draw();
+
+		}, false);
+	</script> 
+</body> 
+</html>