Chapter 4: Baseball

by Stéphane Cabaret

JavaScript

//pixels per foot
var paper = Raphael(0, 0, 500, 500),
    SCALE = 1,
    HOME_PLATE = { x: 250, y: 350 },
    FOUL_POLE = 250;

    var foul_line_left = "M" + HOME_PLATE.x + "," + HOME_PLATE.y + "l" + -1 * FOUL_POLE * Math.cos(Math.PI / 4) + "," + -1 * FOUL_POLE * Math.sin(Math.PI / 4);

    var outfield_fence = "a" + FOUL_POLE + "," + FOUL_POLE + " 0 0,1 " + 2 * HOME_PLATE.x * Math.cos(Math.PI / 4) + "," + 0;

    var foul_line_right = "L" + HOME_PLATE.x + "," + HOME_PLATE.y;

    var field = paper.path(foul_line_left + outfield_fence + foul_line_right).attr({ stroke: "none", fill: "green" });

    var outfield_fence = "a" + FOUL_POLE + "," + 1.5 * FOUL_POLE + " 0 0,1 " + 2 * HOME_PLATE.x * Math.sin(Math.PI / 4) + "," + 0;

    var field = paper.path(foul_line_left + outfield_fence + foul_line_right).attr({ stroke: "none", fill: "green" });

    var infield = paper.set();
    
    infield.push(paper.rect(HOME_PLATE.x, HOME_PLATE.y, 90, 90).attr({stroke: "none", fill: "#993300"}));
        
    infield.attr("transform", "R-135 " + HOME_PLATE.x + " " + HOME_PLATE.y);

    //bases
    for (var c = 0; c < 4; c += 1) {
        infield.push(paper.rect(HOME_PLATE.x + 85 * (c % 2), HOME_PLATE.y + 85 * (c >= 2), 5, 5).attr({stroke: "none", "fill": "white"}));    
    }

    infield.attr("transform", "R-135 " + HOME_PLATE.x + " " + HOME_PLATE.y);