Birthday

by Timatnet

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<img id="birthday"...

CSS

body {background: white; width: 1366px; margin-left: auto; margin-right: auto;}
pre {color: black}
img {position: relative; opacity: 0.0; width: 860px; }

JavaScript

// Поздравление Артура с днём рождения
function d(){}
var screen_height = 700, screen_width = 1366, screen_x = 5, screen_y = 5;
function random_x() { return Math.random()*(screen_width-screen_x)+screen_x; }
function random_y() { return Math.random()*(screen_height-screen_y)+screen_y; }
function rainbow() {
    var r = Math.random();
    if(r < 1./6) return "#f00";
    else if(r < 2./6) return "#f90";
    else if(r < 3./6) return "#ff5";
    else if(r < 4./6) return "#4f0";
    else if(r < 5./6) return "#08f";
    else return "#c90";
}
var canvas = document.createElement('canvas');
var img = document.getElementById('birthday');
canvas.getContext('2d').drawImage(img, 0, 0 );

function getPixel(x,y) {
    return canvas.getContext('2d').getImageData(x*200/1366, y*200/1366, 1, 1).data;
}

function isAttractor(x,y) {
    var pix = getPixel(x,y);
    return (pix[0] < 128 && pix[1] < 128 && pix[2] < 128 && pix[3] > 128 );
}
function randomAttractor() {
    var x, y;
    do {
        x = random_x();
        y = random_y();
    } while(!isAttractor(x,y));
    return [x,y];
}

var paper = Raphael(screen_x, screen_y, screen_width, screen_height);

var ball_radius = 40;

function create_ball() {
    var circle = paper.circle(random_x(), random_y(), ball_radius)
        .attr({opacity: 0})
        .attr("fill", rainbow())
        .animate({opacity: 0.5}, 700)
        .hover(function() {
            this.animate({r:ball_radius+10}, 300, "bounce");
        }, function() {
            this.animate({r:ball_radius}, 1000, "bounce");
        }).click(function() {
            this.animate({r:ball_radius+20,'fill-opacity':0}, 100, function() {this.remove();});
            var pos = this.getBBox();
            for(var i = 0; i < 60; ++i) {
                var attractor = randomAttractor();
                paper.circle(pos.x+pos.width/2+Math.random()*pos.width/2-Math.random()*pos.width/2, pos.y+pos.height/2+Math.random()*pos.height/2-Math.random()*pos.height/2, 7).attr("fill",...