VOS Bounce Animation Script | Regplex.com - Lab Regplex in the Valley Of Steel

Bouncing Object Animation Script Running

Code:
(JQuery Required)

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta charset="utf-8">
		<Title>Lab Regplex Bounce Animation Script</title>
		<style>
			body {
				margin: 0;
				padding: 0 .4em;
				font: 1em/1.2 Arial, sans-serif;
				background-color: #222;
				background-image: url("bg.gif");
				background-repeat: repeat;
				background-attachment: fixed;
				margin: auto auto;
				overflow: hidden;
			}
		</style>
		
		<script src="jquery.js"></script>
		
		<script>
			var ballcanvas;
			var context;
			var balls = 5;
			var xpos = [];
			var ypos = [];
			var xspeed = [];
			var yspeed = [];
			var revx = [];
			var revy = [];
			var spinpos = [];
			var spinspeed = [];
			var objsize = [];
			var szmax = [];
			var szmin = [];
			var szrev = [];
			var scalespeed = [];
			var rimg = [];
			var edge = [];

$(document).ready(function() {
				ballcanvas = document.getElementById("bcanvas");
				context = ballcanvas.getContext("2d");
				context.globalAlpha=0.7;
				
				for (var v=0;v<balls;v++) {
					xpos[v] = randnum(30,(window.innerWidth-30));
					ypos[v] = randnum(30,(window.innerHeight-30));
					xspeed[v] = randnum(2,12);
					yspeed[v] = randnum(2,12);
					spinpos[v] = randnum(0,359);
					spinspeed[v] = randnum(2,10);
					revx[v] = false;
					revy[v] = false;
					szmin[v] = 20; 
					szmax[v] = 150;
					scalespeed[v] = randnum(1,3);
					if (iseven(v)) { objsize[v] = randnum(szmin[v],szmax[v]/2); } 
					else { objsize[v] = randnum(szmax[v]/2,szmax[v]); }
				}
				bounce(ballcanvas,context);
			
			});
			function torad(n) {
				return n*(Math.PI/180);
			}
			function randnum(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
			function iseven(n) {
				return n == parseFloat(n)? !(n%2) : void 0;
			}
			function drawRotatedImage(image, x, y, angle, bz) { 
				context.save(); 
				context.translate(x, y);
				context.rotate(torad(angle));
				context.drawImage(image, -(bz/2), -(bz/2), bz, bz);
				context.restore();
			}
			function bounce() {
				setTimeout(function() {
					requestAnimationFrame(bounce);
					ballcanvas.width = window.innerWidth;
					ballcanvas.height = window.innerHeight;
					context.clearRect(0, 0, window.innerWidth, window.innerHeight);

for (var vv = 0;vv < balls;vv++) {
					
						//create a vos ball image object
						rimg[vv] = new Image();
						rimg[vv].src = "vosemblem.png";
					
						//constantly incremented variable, at 359 its set back to 0 creating a loop
						spinpos[vv] = spinpos[vv] + spinspeed[vv];
						if (spinpos[vv] > 359) { spinpos[vv] = 0; }
				
						//size each object up and down between max and min
						if (objsize[vv] > (szmax[vv]-1)) { szrev[vv] = true; }
						if (objsize[vv] < (szmin[vv]+1)) { szrev[vv] = false; }
						
						if (szrev[vv]) { objsize[vv] -= scalespeed[vv]; } 
						else { objsize[vv] += scalespeed[vv]; }

//find the edge of the object
						edge[vv] = (objsize[vv]/2);

//detect collision with wall...
						if ((xpos[vv]-edge[vv]) < 1) { revx[vv] = false; }
						if ((xpos[vv]+edge[vv]) > (window.innerWidth-1)) { revx[vv] = true;}
						if ((ypos[vv]-edge[vv]) < 1) { revy[vv] = false; }
						if ((ypos[vv]+edge[vv]) > (window.innerHeight-1)) { revy[vv] = true; }

if (revx[vv]) { xpos[vv] -= xspeed[vv]; }
						else { xpos[vv] += xspeed[vv]; }
						if (revy[vv]) { ypos[vv] -= yspeed[vv]; }
						else { ypos[vv] += yspeed[vv]; }

rimg[vv].width = objsize[vv];
						rimg[vv].height = objsize[vv];
						
						if (iseven(vv)) { drawRotatedImage(rimg[vv], xpos[vv], ypos[vv], spinpos[vv], objsize[vv]); }
						else { drawRotatedImage(rimg[vv], xpos[vv], ypos[vv], -spinpos[vv], objsize[vv]); }
					}
				}, 20);
			}
		</script>
	</head>
	<body>
	
		<canvas id="bcanvas"></canvas>
		
	</body>
</html>

Return