Lissajous curve in HTML5 cakejs

Here, I show you a Lissajous curve with HTML 5 canvas. (No flash use!)

This program use cakejs (2D scene graph library.) Note: cakejs seems to be no longer maintained as of 2017.

Source code is straightforward. A object with radial gradient moves along the curve. Frequency ratio is 5:6.

    var rect = new Rectangle(20, 20, {centered: true});
    var g = new Gradient({
        type: "radial",
        endRadius: rect.width / 2,
        colorStops: [[0, "rgba(240,240,240,100)"], [0.1, "rgba(0,240,100,50)"], [1, "rgba(0,240,100,0)"]]
    });
    rect.fill = g;
    var phase = Math.PI * 0.5;
    rect.addFrameListener(function(t, dt) {
        var cx = canvas.width  * 0.5;
        var cy = canvas.height * 0.5;
        var a = Math.min(cx, cy) - rect.width * 0.5;

        rect.x = cx + a * Math.sin((5) * t * 0.0005);
        rect.y = cy + a * Math.sin((6) * t * 0.0005 + phase);
    });

Cakejs's demo is very very cool. I like Missile Fleet game demo.

See also