Animation -- jp_doodle demo

jp_doodle makes implementing special purpose interactive visualizations easy.

Code

var element = $('#target_div');
// Attach a dual canvas associated with the element as a child of the element
// configured with width 400 and height 400.
var config = {
            width: 400,
            height: 400,
        };
element.dual_canvas_helper(config);

// Some math...
five_seconds = Math.PI / 6.0;
twelve_oclock = Math.PI / 2.0;
outer_radius = 100;
inner_radius = 80;

// Draw the clock face.
var face = element.circle({x:0, y:0, r:100, color:"#dcf", name:true});
element.circle({x:0, y:0, r:100, color:"#449", fill:false, lineWidth:10});

// Draw the numbers on the clock as unnamed texts.
for (var i=1; i<=12; i++) {
    var angle = twelve_oclock - i * five_seconds;
    element.text({
        text: ""+i, font: "20px Arial", color: "#937", align: "center",
        x: Math.cos(angle)*inner_radius, y: Math.sin(angle)*inner_radius - 7})
}

// Draw a "seconds hand" and name it so we can change it later.
var seconds_hand = element.rect({
    name: true,  // Use any available name
    x:0, y:0, w: inner_radius-15, h:5,
    color: "#937", degrees: 90});
    
// Add a background yellow dot. Note that there is no blinking dot yet.
var blinking_dot = null;
element.circle({x:100, y:100, r:12, color:"yellow"});

// Every animation frame, adjust the seconds hand using the time.
// Also add or delete a blinking dot every other second.
var animate = function () {
    var seconds = ((new Date()).getTime() * 0.001) % 60;
    var degrees = - 6 * seconds;
    // Adjust the seconds hand.
    //element.change("seconds hand", {degrees: degrees});
    seconds_hand.change({degrees: degrees})
    // every other second create or delete the blinking dot
    if ((seconds % 2) < 1) {
        if (!blinking_dot) {
            // Add the blinking dot.
            blinking_dot = element.circle({name: true, x:100, y:100, r:10, color:"red"});
        }
    } else if (blinking_dot) {
        // Remove the blinking dot.
        blinking_dot.forget();
        blinking_dot = null;
    }
    // Repeat the animation again on the next animation iteration.
    requestAnimationFrame(animate);
}
// Adjust the canvas coordinate transform to center the drawn objects on the canvas.
element.fit(null, 10);  // 10 pixel margin

// Add transitions
var bigger = false;
var transition_face = function() {
    var seconds = 10;
    if (bigger) {
        face.transition({r:100, color:"#dcf"}, seconds);
    } else {
        face.transition({r:30, color:"#fcd"}, seconds);
    }
    bigger = !bigger;
};
$("<button>transition face</button>").appendTo(element).click(transition_face);

// Adjust the canvas coordinate transform to center the drawn objects on the canvas.
element.fit(null, 10);  // 10 pixel margin

// Start the animation
animate();

Discussion

Objects drawn on a dual canvas can be modified or deleted if they have been given a unique name. The illustration above modifies the object named "seconds hand" to animate the clock hand and it deletes and recreates the object named "blinking dot" periodically.