screensaver/s1clone/scripts/background.js

	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);
		}
	}