initial commit

s1clone/scripts/background.js

@@ -0,0 +1,188 @@
+
+	var canvas;
+	var ctx;
+	var starPool = new Array();
+	var stop = false;
+	(function() {
+    var resourceCache = {};
+    var loading = [];
+    var readyCallbacks = [];
+
+    // Load an image url or an array of image urls
+    function load(urlOrArr) {
+        if(urlOrArr instanceof Array) {
+            urlOrArr.forEach(function(url) {
+                _load(url);
+            });
+        }
+        else {
+            _load(urlOrArr);
+        }
+    }
+
+    function _load(url) {
+        if(resourceCache[url]) {
+            return resourceCache[url];
+        }
+        else {
+            var img = new Image();
+            img.onload = function() {
+                resourceCache[url] = img;
+
+                if(isReady()) {
+                    readyCallbacks.forEach(function(func) { func(); });
+                }
+            };
+            resourceCache[url] = false;
+            img.src = url;
+        }
+    }
+
+    function get(url) {
+        return resourceCache[url];
+    }
+
+    function isReady() {
+        var ready = true;
+        for(var k in resourceCache) {
+            if(resourceCache.hasOwnProperty(k) &&
+               !resourceCache[k]) {
+                ready = false;
+            }
+        }
+        return ready;
+    }
+
+    function onReady(func) {
+        readyCallbacks.push(func);
+    }
+
+    
+	})();
+	$(function() {
+		canvas=document.getElementById("bg");
+		ctx = canvas.getContext("2d");
+		
+		canvas.width = $(document).width()-20;
+		canvas.height = $(document).height()-20;
+		//starPool[0] = new sparkle(120, 100, false, 0.4);
+		initiate();
+		main();
+		//star(ctx,100,100,40,5,0.5);
+	});
+	var requestAnimFrame = (function(){
+    return window.requestAnimationFrame       ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame    ||
+        window.oRequestAnimationFrame      ||
+        window.msRequestAnimationFrame     ||
+        function(callback){
+            window.setTimeout(callback, 1000 / 30);
+        };
+	})();
+	
+	function initiate(){
+		for(var i = 0; i<1; i++){
+			starPool[i] = new sparkle(50,50, false, 0.05);
+		}
+	}
+	
+	function main(){
+	ctx.clearRect(0, 0, $(document).width()-20, $(document).height()-20);
+    callframe();
+		if(stop==true){
+			console.log("ended");
+		}else{
+			requestAnimFrame(main);
+		}
+	}
+	
+	function callframe(){
+		for(var i = 0; i<15; i++){
+			if(starPool[i] != null){
+				if(starPool[i].dead != true){
+					starPool[i].refresh();
+				}else{
+					starPool[i] = null;
+					starPool[i] = newSparkle();
+				}
+			}else{
+				starPool[i] = newSparkle();
+			}
+		}
+	}
+	
+	function newSparkle(){
+		var xtrue = false;
+		var ytrue = false;
+		var x = 0;
+		var y = 0;
+		while(xtrue==false){
+			x = Math.floor(Math.random() * (($(document).height()-50) - 50 + 1)) + 50;
+			$.each( starPool, function( nr, star ) {
+				if(star != null){
+					if((star.posx-50)>x || (star.posx+50)<x){
+						xtrue=true;//überlappungen noch entfernen durch verknüpfen von x und y
+					}
+				}
+			});
+		}
+		while(ytrue==false){
+			y = Math.floor(Math.random() * (($(document).width()-50) - 50 + 1)) + 50;
+			$.each( starPool, function( nr, star ) {
+				if(star != null){
+					if((star.posy-50)>y || (star.posy+50)<y){
+						ytrue=true;
+					}
+				}
+			});
+		}
+		
+		return new sparkle(y,x, false, 0.05);
+	}
+	function star(c, x, y, r, p, m,o)
+	{
+	ctx.fillStyle = "rgba(255, 255, 255, "+o+")";
+	ctx.save();
+	ctx.beginPath();
+	ctx.translate(x, y);
+	ctx.moveTo(0,0-r);
+		for (var i = 0; i < p; i++)
+		{
+			ctx.rotate(Math.PI / p);
+			ctx.lineTo(0, 0 - (r*m));
+			ctx.rotate(Math.PI / p);
+			ctx.lineTo(0, 0 - r);
+		}
+	ctx.fill();
+	ctx.restore();
+	}
+	
+	
+	//object matrix
+	
+	//object
+	function sparkle(posx, posy, full, opacity){
+		this.posx = posx;
+		this.posy = posy;
+		this.full = full;
+		this.dead = false;
+		this.speed = Math.floor(Math.random() * (5 - 0.2 + 1)) + 0.2;
+		this.opacity = opacity;
+		this.refresh = function(){
+			if(this.full == false){
+				if(this.opacity>=1){
+					this.full=true;
+				}else{
+					this.opacity +=0.01 * this.speed;
+				}
+			}
+			if(this.full==true){
+				this.opacity -=0.01;
+			}
+			if(this.opacity <= 0){
+				this.dead = true;
+			}
+			star(ctx, posx, posy, 30, 5, 0.5, this.opacity);
+		}
+	}