Raphael starfield

responsive starfield example

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.1/raphael-min.js"></script>
<div id="paper"></div>

CSS

#paper{
    width: 100%;
    background: #333;
    position: fixed;
}

JavaScript

var canvas = (function(){

        var $window = $(window),    
            paper = Raphael(document.getElementById('paper'), $window.width(), $window.height()); 

        $window.resize(function(){
            paper.canvas["setAttribute"]("width", $window.width()); 
            paper.canvas["setAttribute"]("height", $window.height()); 
        });

        return {
            width: function(){
                return $window.width(); 
            },
            height: function(){
                return $window.height();
            },
            inst: function(){
                return paper;    
            }
        }

    })(); 

    //////////////////////////////////////////////////

    var camera = (function(){

        return {
            X: function(){
                return canvas.width()/2;
            },
            Y: function(){
                return canvas.height()/2;
            }
        };
    })();
    
    //////////////////////////////////////////////////

    var point = function(){
            
        this.reset();

        this.inst = canvas.inst().circle(0, 0, 0)
            .attr('fill', 'white')
            .attr('stroke', 0);

        this.move();

    };

    point.prototype.reset = function(){
        this.X = this.rnd(canvas.width());
        this.Y = this.rnd(canvas.height());
        this.R = 1;
        this.O = 0;
    };

    point.prototype.move = function(){
        this.inst.attr('cx', this.X);
        this.inst.attr('cy', this.Y);
        this.inst.attr('r', this.R);
        this.inst.attr('fill-opacity', this.O);        
    };

    point.prototype.outOfBounds = function(){
        return (this.X > canvas.width() || this.X < 0) || (this.Y > canvas.height() || this.Y < 0);
    };

    point.prototype.tick = function(){
        
        if(this.outOfBounds()){
            
            this.reset();
                        
        } else {

            var relative = this.translate('relative', {
                x:...