bzdgn · December 25, 2016 14:16 · bzdgn · Dec 25, 2016
diff --git a/waveBubbles.html b/waveBubbles.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>HTML5 Canvas Wave & Bubbles Demo</title>
 	</head>
 <body>
 	<canvas width="600" height="600" id="mainCanvas">
 	</canvas>
 	<p><input type="Button" VALUE=" start " onClick="doTimer()"></p>
 	<p><input type="Button" VALUE=" stop " onclick="stopTimer()"></p>
 	
 	<script>
 	<!-- Written by Levent Divilioglu -->
 	<!-- 25.12.2016 -->
 		(function () {
 			canvas = document.getElementById('mainCanvas');
 			ctx = canvas.getContext("2d");
 			
 			WIDTH	= canvas.width;
 			HEIGHT	= canvas.height;
 			
 			BLACK = "black";
 			WHITE = "white";
 			BLUE  = "blue";
 			CLEAR = BLACK;
 			
 			clearScreen();
 			centerX = WIDTH  / 2;
 			centerY = HEIGHT / 2;
 			
 			VELOCITY_MIN = 5;
 			VELOCITY_MAX = 10;
 			
 			WATER_DEPTH = HEIGHT/4;
 			
 			phase = 0;
 			bubbles = generateBubbles(20);
 			// You can trigger this audio file
 			// bubbleExplodeAudio = new Audio('pop2.mp3');
 		})();
 		
 		function handleWave(phase) {
 			var waveLen = 30;
 			drawWave(waveLen, phase);
 		}
 		
 		function drawWave(waveLen, phase) {
 			var pivot = WATER_DEPTH;
 			var DEPTH = HEIGHT - pivot;
 			
 			for(var i = 0; i < WIDTH; i++) {
 				var diff = 10*Math.sin( (i+phase)/waveLen);
 				horizontalLine(i, pivot - diff, DEPTH + diff );
 			}
 		}
 		
 		function generateBubbles(num) {
 			var bubbles = [];
 			
 			for(var i = 0; i < num; i++) {
 				bubbles.push( { "index": i, "r": 1, "x": Math.random() * WIDTH, "y": HEIGHT - 10, "velocity": getRandom(VELOCITY_MIN, VELOCITY_MAX)} );
 			}
 			
 			return bubbles;
 		}
 		
 		function handleBubbles() {
 			for(var i = 0; i < bubbles.length; i++) {
 				if( (bubbles[i].y - bubbles[i].r) <= WATER_DEPTH + 10) {
 					bubbles[i].x = Math.random() * WIDTH;
 					bubbles[i].y = getRandom(HEIGHT-10, HEIGHT);
 					bubbles[i].r = 1;
 					bubbles[i].velocity = getRandom(VELOCITY_MIN, VELOCITY_MAX);
 					// You can trigger this audio file
 					//bubbleExplodeAudio.play();
 				}
 				bubbles[i].y -= bubbles[i].velocity; 	// velocity?
 				bubbles[i].r += 1/bubbles[i].velocity;
 			}
 		}
 		
 		function drawBubbles() {
 			for(var i = 0; i < bubbles.length; i++) {
 				ctx.beginPath();
 				ctx.strokeStyle="white";
 				ctx.arc(bubbles[i].x + bubbles[i].r, bubbles[i].y + bubbles[i].r, bubbles[i].r, 0, 2 * Math.PI, false);
 				ctx.stroke();
 			}
 		}
 		
 		function animate() {
 			clearScreen();
 			phase += 20/(2*Math.PI);
 			handleWave(phase);
 			handleBubbles();
 			drawBubbles();
 		}
 		
 		function horizontalLine(x, y, h) {
 			ctx.fillStyle = BLUE;
 			ctx.fillRect(  x, y, 1, h );
 		}
 		
 		function clearScreen() {
 			ctx.clearRect( 0, 0, WIDTH, HEIGHT );
 			ctx.fillStyle = CLEAR;
 			ctx.fillRect(  0, 0, WIDTH, HEIGHT );
 		}
 		
 		function doTimer() {
 			timerID = setInterval( "animate()", 20 );
 		}
 		
 		function stopTimer() {
 			clearInterval( timerID );
 		}
 		
 		function getRandom(a,b) {
 			return a + Math.random()*(b-a);
 		}
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML5 Canvas Wave & Bubbles Demo</title>
	</head>
	<body>
	<canvas width="600" height="600" id="mainCanvas">
	</canvas>
	<p><input type="Button" VALUE=" start " onClick="doTimer()"></p>
	<p><input type="Button" VALUE=" stop " onclick="stopTimer()"></p>

	<script>
	<!-- Written by Levent Divilioglu -->
	<!-- 25.12.2016 -->
	(function () {
	canvas = document.getElementById('mainCanvas');
	ctx = canvas.getContext("2d");

	WIDTH = canvas.width;
	HEIGHT = canvas.height;

	BLACK = "black";
	WHITE = "white";
	BLUE = "blue";
	CLEAR = BLACK;

	clearScreen();
	centerX = WIDTH / 2;
	centerY = HEIGHT / 2;

	VELOCITY_MIN = 5;
	VELOCITY_MAX = 10;

	WATER_DEPTH = HEIGHT/4;

	phase = 0;
	bubbles = generateBubbles(20);
	// You can trigger this audio file
	// bubbleExplodeAudio = new Audio('pop2.mp3');
	})();

	function handleWave(phase) {
	var waveLen = 30;
	drawWave(waveLen, phase);
	}

	function drawWave(waveLen, phase) {
	var pivot = WATER_DEPTH;
	var DEPTH = HEIGHT - pivot;

	for(var i = 0; i < WIDTH; i++) {
	var diff = 10*Math.sin( (i+phase)/waveLen);
	horizontalLine(i, pivot - diff, DEPTH + diff );
	}
	}

	function generateBubbles(num) {
	var bubbles = [];

	for(var i = 0; i < num; i++) {
	bubbles.push( { "index": i, "r": 1, "x": Math.random() * WIDTH, "y": HEIGHT - 10, "velocity": getRandom(VELOCITY_MIN, VELOCITY_MAX)} );
	}

	return bubbles;
	}

	function handleBubbles() {
	for(var i = 0; i < bubbles.length; i++) {
	if( (bubbles[i].y - bubbles[i].r) <= WATER_DEPTH + 10) {
	bubbles[i].x = Math.random() * WIDTH;
	bubbles[i].y = getRandom(HEIGHT-10, HEIGHT);
	bubbles[i].r = 1;
	bubbles[i].velocity = getRandom(VELOCITY_MIN, VELOCITY_MAX);
	// You can trigger this audio file
	//bubbleExplodeAudio.play();
	}
	bubbles[i].y -= bubbles[i].velocity; // velocity?
	bubbles[i].r += 1/bubbles[i].velocity;
	}
	}

	function drawBubbles() {
	for(var i = 0; i < bubbles.length; i++) {
	ctx.beginPath();
	ctx.strokeStyle="white";
	ctx.arc(bubbles[i].x + bubbles[i].r, bubbles[i].y + bubbles[i].r, bubbles[i].r, 0, 2 * Math.PI, false);
	ctx.stroke();
	}
	}

	function animate() {
	clearScreen();
	phase += 20/(2*Math.PI);
	handleWave(phase);
	handleBubbles();
	drawBubbles();
	}

	function horizontalLine(x, y, h) {
	ctx.fillStyle = BLUE;
	ctx.fillRect( x, y, 1, h );
	}

	function clearScreen() {
	ctx.clearRect( 0, 0, WIDTH, HEIGHT );
	ctx.fillStyle = CLEAR;
	ctx.fillRect( 0, 0, WIDTH, HEIGHT );
	}

	function doTimer() {
	timerID = setInterval( "animate()", 20 );
	}

	function stopTimer() {
	clearInterval( timerID );
	}

	function getRandom(a,b) {
	return a + Math.random()*(b-a);
	}
	</script>
	</body>
	</html>