Added bouncing google logo example

rheh · Apr 1, 2013 · 128606a · 128606a
1 parent 5f2be90
commit 128606a
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 0 deletions.
diff --git a/bounce/background.png b/bounce/background.png
diff --git a/bounce/bounce.js b/bounce/bounce.js
@@ -0,0 +1,127 @@
+/*jslint plusplus: true, sloppy: true, indent: 4 */
+var canvas = null,
+	ctx = null,
+	letters =  [],
+	bg = null;
+
+(function () {
+
+    "use strict";
+    // this function is strict...
+    // RequestAnimFrame: a browser API for getting smooth animations
+    window.requestAnimFrame = (function () {
+        return window.requestAnimationFrame ||
+                window.webkitRequestAnimationFrame ||
+                window.mozRequestAnimationFrame ||
+                window.oRequestAnimationFrame ||
+                window.msRequestAnimationFrame ||
+        function (callback) {
+            window.setTimeout(callback, 1000 / 60);
+        };
+    })();
+
+}());
+
+function clearCanvas() {
+	// clear canvas
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+function update() {
+	var i  = letters.length;
+	clearCanvas();
+	while (i--) {
+		letters[i].move();
+		letters[i].draw();
+	}
+}
+
+function setUpLetterArray() {
+	return [
+		{
+			/* G */
+			bgimagex: 0,
+			bgimagey: 0,
+			factor: 1,
+			height: 156,
+			width: 130,
+			top: (0 - Math.floor((Math.random() * 400) + 1))
+		},
+		{
+			/* o */
+			bgimagex: 133,
+			bgimagey: 35,
+			factor: 1,
+			height: 100,
+			width: 90,
+			top: (0 - Math.floor((Math.random() * 400) + 1))
+		},
+		{
+			/* o */
+			bgimagex: 222,
+			bgimagey: 35,
+			factor: 1,
+			height: 100,
+			width: 90,
+			top: (0 - Math.floor((Math.random() * 400) + 1))
+		},
+		{
+			/* g */
+			bgimagex: 315,
+			bgimagey: 50,
+			factor: 1,
+			height: 142,
+			width: 88,
+			top: (0 - Math.floor((Math.random() * 400) + 1))
+		},
+		{
+			/* l */
+			bgimagex: 405,
+			bgimagey: 0,
+			factor: 1,
+			height: 192,
+			width: 40,
+			top: (0 - Math.floor((Math.random() * 400) + 1))
+		},
+		{
+			/* e */
+			bgimagex: 450,
+			bgimagey: 45,
+			factor: 1,
+			height: 100,
+			width: 75,
+			top: (0 - Math.floor((Math.random() * 400) + 1))
+		}
+	];
+}
+
+function loop() {
+	update();
+	window.requestAnimFrame(loop);
+}
+
+function setUpBalls() {
+	var iCounter,
+		x = 0,
+		lettersConf = setUpLetterArray();
+
+	for(iCounter = 0; iCounter < lettersConf.length; iCounter++) {
+		letters.push(new Letter(x, bg, lettersConf[iCounter]));
+		x += lettersConf[iCounter].width;
+	}
+
+	loop();
+}
+
+function loadBackground(callback) {
+	// Load the background
+	bg = new Image();
+	bg.src = 'background.png';
+	bg.onload = callback;
+}
+
+window.addEventListener('load', function (ev) {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	loadBackground(function() { setUpBalls(); });
+}, false);
diff --git a/bounce/bouncing-letters.png b/bounce/bouncing-letters.png
diff --git a/bounce/google-bouncing-logo-theory.png b/bounce/google-bouncing-logo-theory.png
diff --git a/bounce/google-logo-photoshop-tutorial.png b/bounce/google-logo-photoshop-tutorial.png
diff --git a/bounce/index.html b/bounce/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Bounce Animation</title>
+		<script src='bounce.js'></script>
+		<script src='letter.js'></script>
+	</head>
+	<body>
+		<canvas id="canvas" width="600" height="600">Canvas Not Supported</canvas>
+	</body>
+</html>
diff --git a/bounce/letter.js b/bounce/letter.js
@@ -0,0 +1,47 @@
+var Letter = function (x, bg, ballSettings) {
+	this.vy = 0;
+	this.vx = 0;
+	this.vyAdjust = -13;
+	this.width = ballSettings.width;
+	this.height = ballSettings.height;
+	this.x = x;
+	this.y = ballSettings.top;
+	this.originaly = ballSettings.top;
+	this.imagex = ballSettings.bgimagex;
+	this.imagey = ballSettings.bgimagey;
+	this.bg = bg;
+	this.bounceFactor = ballSettings.factor;
+	this.bounces = 0;
+
+	this.draw = function () {
+		ctx.drawImage(this.bg,
+			this.imagex, this.imagey,
+			this.width, this.height,
+			this.x, this.y,
+			this.width, this.height
+		);
+	};
+
+	this.impact = function () {
+		this.vy = this.vyAdjust;
+		this.bounces++;
+	};
+
+	this.move = function () {
+		this.y += this.vy;
+		this.vy += 0.25; //gravity;
+		// Bounce the ball when it hits the bottom
+		if(this.bounces > 1) {
+
+			if ((this.y + this.height) > canvas.height + 200) {
+				this.bounces = 0;
+				this.vyAdjust = -13;
+				this.y = this.originaly;
+			}
+		}
+		else if ((this.y + this.height) > canvas.height - 10) {
+			this.impact();
+			this.vyAdjust = (this.vyAdjust * this.bounceFactor);
+		}
+	};
+};