singleMove Metronome

testing the transform

by Joe LeMonnier

HTML

<input type="button" value="play" id="play" />
<div id="canvas"></div>

JavaScript

var paper = Raphael("canvas",500,500);

var metronome = function(opts) {    
    opts = opts || {};
    
    var len = opts.len || 200, 
        angle = opts.angle || 20,
        width = len * Math.cos(angle),
        x = opts.x || 0,
        y = opts.y || 0,
        tempo = 100;
 
    var arm = paper.path("M" + (x + width) + "," + y + "v" + len).attr({
        'stroke-width': 5,
        stroke: "#999"
    });
        
    var weight = paper.path("M" + (x+width) + ","  + (y+len) + "h9l3,-18h-24l3,18h12")
        .attr({
            'stroke-width': 0,
            fill: '#666'
        });

    weight.position = (len - 18) / 2;
    weight.transform("T0,-" + weight.position);
        
    var label1 = paper.text(x + width, y + len + 15, tempo);
    var label2 = paper.text(x + width, y + len + 35, weight.position);
    var label3 = paper.text(x + width, y + len + 55, drag_position);
    var label4 = paper.text(x + width, y + len + 65, weight.transform());
    var drag_position; 

    weight.drag(
        function(x, y, dx, dy, e) {
            drag_position = Math.min(len - 18, Math.max(0, this.position - y));
            tempo = Math.round(20 + 160 * drag_position / (len - 18));
            label1.attr("text", tempo);
            label2.attr("text", weight.position);
            label3.attr("text", drag_position);
            label4.attr("text", this.transform());


           this.transform('T0,-' + drag_position);            
        },
        function(x, y, e) {
            this.attr("fill", "#99F");
        },
        function(e) {
            this.position = drag_position;
            this.attr("fill", "pink");
        }
    );    
    
    return {
        play: function(repeats) {
        
        
//            var armAnim = {
//                "25%": { transform:"R" + angle + " " + (x+width) + "," + (y+len) },
//              "75%": { transform:"R-" + angle + " " + (x+width) + "," + (y+len)},
//                "100%": { transform:"R0 " + (x + width) + "," +...