raphael_sample logo noise

noizy logo on raphael.js :)

by nekosmash

HTML

<script src="http://dl.dropbox.com/u/63305355/Airbus_Special_italic_400.font.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="canvas"></div>

CSS

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:100%;
    background:#fff;
}

JavaScript

var paper;
var center;
var p;
var p2;
var rectarray = new Array(20);
var rectmax=100;

window.onload = function () {

    w = ($(window).width());
    center = w/2;
    x= center - 193;
    
    //create paper
    paper = Raphael("canvas");
    var font = paper.getFont('Airbus Special');
    
    p = paper.print(x,70, 
                    'RAPHAELIST',
                    font,
                    50,
                    'middle',
                    .1)
        .attr({opacity:0});
    p.animate({opacity:1},1000);
    p2 = paper.print(x,85,
         'Tutorials and Samples about raphael.js',
                font,
                13,
                'middle',
                .1);
    
    for(i=0;i<rectmax;i++){
        var color;
        if(i%2==0){
            color="#000";
        }else{
            color="#fff";
        }
        randx = (center-300)+Math.floor(
            Math.random()*400
        );
        randy = 20+Math.floor(
            Math.random()*40
        );
        randh = Math.floor(
            Math.random()*10
        );
        rectarray[i]=paper.rect(randx,randy,i*10,randh)
            .attr({fill:color,stroke:"none",opacity:0});
    }
    sq_blink();
    setTimeout("blink()",3000);
};

var sq_count=0;
function sq_blink(){
    rectarray[sq_count].attr({opacity:1});
    rectarray[sq_count].animate({opacity:0,transform:"t50,0"},100);
    setTimeout("sq_blink_r()",20);
    sq_count++;
};

function sq_blink_r(){
    rectarray[sq_count].attr({opacity:0});
    if(sq_count<rectmax-1){
        sq_blink();
    }else{
        sq_count=0;
        p.toFront();
    }
    
}

var blink_count = 0;
function blink(){
    
    rand10 = 10-Math.floor(
            Math.random()*20
        );
    rand5 = 5-Math.floor(
            Math.random()*10
        );
    
    switch (blink_count){
        case 0:
            sq_blink();
            p.attr({opacity:1,transform:"t"+rand10+",-"+rand10});
            p2.attr({opacity:1,transform:"t"+rand5+",-"+rand5});
      ...