Chapter 6: Paint by Numbers

JavaScript

var paper = Raphael(0, 0, 500, 500);
// var rsr = Raphael('rsr', '210.569', '139.862'); 

var colors = paper.set();

for (var c = 0; c < 17; c += 1) {
    for (var i = 0; i < 3; i += 1) {
        colors.push(paper.rect(10 + c * 20, 10 + i * 20, 20, 20)
            .attr({
                fill: Raphael.hsl(c / 16, 1, (i+1)/4),
                stroke: "#CCC"
            })
        );
    }
}

var selected_color = "red";

var selected_color_box = paper.rect(10 + 17 * 20, 10, 60, 60).attr({
    fill: "red",
    stroke: "#CCC"    
});

colors.click(function() {
    selected_color = this.attr("fill");
    colors.attr("stroke", "#CCC");
    this.attr("stroke", "#000").attr("stroke-width", 1).toFront();
    selected_color_box.attr("fill", selected_color);
    
});

function person(rsr) { 
rsr.setStart();

 var path4439 = rsr.path("M 94.650218,428.56472 C 84.921712,424.58 80.075004,421.10004 77.915421,416.54906 c -1.841868,-3.88145 -2.057345,-9.91086 -0.512558,-14.34224 0.965934,-2.77088 0.672505,-3.7979 -2.828303,-9.89922 -9.517781,-16.58791 -10.948499,-29.52784 -5.717273,-51.70911 1.589297,-6.73888 1.907924,-23.99799 0.550911,-29.84127 -0.532696,-2.29378 -2.803838,-5.85958 -5.866375,-9.21049 -6.396026,-6.99827 -10.683047,-17.18632 -14.031803,-33.34639 -2.519552,-12.15859 -2.530461,-12.41093 -0.951088,-22 L 50.15663,236.5 45.490873,232.50853 C 29.727713,219.02344 20.537771,203.07414 19.584376,187.54738 19.1612,180.65563 19.474375,178.35117 21.765208,171.5 c 1.471232,-4.4 3.818709,-9.74529 5.216615,-11.87843 2.19301,-3.34642 2.455223,-4.58095 1.911587,-9 -0.887362,-7.2131 1.424617,-14.19539 6.677073,-20.16507 3.8673,-4.39538 4.250008,-5.30899 4.203834,-10.0355 -0.0423,-4.3305 -0.836486,-6.55211 -4.75,-13.28748 -2.584561,-4.44816 -4.699201,-8.98208 -4.699201,-10.075365 0,-3.021099 3.576693,-4.379036 9.9157,-3.76462 13.967849,1.353851 28.540172,8.681415 36.340141,18.273325 6.717172,8.26035 9.115554,14.90407 9.186702,25.44795 0.05175,7.66853 -0.269679,9.17993...