Chapter 5: Brick Wall

by Stéphane Cabaret

JavaScript

var paper = Raphael(0, 0, 500, 500);

function brickwall(x, y, width, height, bricks) {
    var h = height / bricks,
        w = width / 3,
        props = { fill: "firebrick", stroke: "#CCC" };
    
    for (var b = 0; b < bricks; b += 1) {
        // we'll stick these at 0,0 for now and arrange them in a sec
        var shortbrick = paper.rect(0, 0, w, h).attr(props);
        var longbrick = paper.rect(0, 0, 2 * w, h).attr(props);
        // alternate brick patterns        
        if (b % 2) {
            shortbrick.transform("T" + x + "," + (y + b * h));
            longbrick.transform("T" + (x + w) + "," + (y + b * h));
        } else {
            longbrick.transform("T" + x + "," + (y + b * h));
            shortbrick.transform("T" + (x + 2 * w) + "," + (y + b * h));
        }
    }    
}

brickwall(300, 20, 40, 300, 30);

var ball = paper.circle(50, 50, 10).attr("fill", "orange");

var anim = Raphael.animation({
    "70%": { cx: 292, cy: 150 },
    "100%": { cx: 50, cy: 250 }
}, 1000);

ball.animate(anim);