Ceylon Web Runner: Oscilloscope

README.md

Ceylon Oscilloscope Example

Demonstrates the use of the HTML Canvas, along with some minor cuteness involving destructuring.

To run the program, just press 'Run' above. Then check out the code in the other tabs.

Adapted from this original code.

context.ceylon

alias Number => Integer|Float;

"Ascribes static types to the operations of the HTML 
 canvas context. Note that this is not necessary, 
 since we could access the canvas in a dynamic block, 
 but it makes the code more typesafe."
dynamic CanvasRenderingContext2D {
    
    shared formal variable String fillStyle;
    shared formal variable String strokeStyle;
    shared formal variable Number lineWidth;
    shared formal variable String font;

    shared formal void beginPath();
    shared formal void closePath();

    shared formal void moveTo(Number x, Number y);
    shared formal void lineTo(Number x, Number y);

    shared formal void fill();
    shared formal void stroke();

    shared formal void fillText(String text, Number x, Number y, Number maxWidth=-1);

    shared formal void arc(Number x, Number y, Number radius, Number startAngle, Number endAngle, Boolean anticlockwise);
    shared formal void arcTo(Number x1, Number y1, Number x2, Number y2, Number radius);

    shared formal void bezierCurveTo(Number cp1x, Number cp1y, Number cp2x, Number cp2y, Number x, Number y);

    shared formal void strokeRect(Number x, Number y, Number width, Number height);
    shared formal void fillRect(Number x, Number y, Number width, Number height);
    shared formal void clearRect(Number x, Number y, Number width, Number height);

    //TODO: more operations!!
}

module.ceylon

module web_ide_script "1.0.0" {
    import ceylon.numeric "1.3.2";
}

run.ceylon

import ceylon.numeric.float {
    sin
}

shared void run() {
    value [ctx, w, h] = createCanvas();
    
    void clear() {
    	ctx.fillStyle = "#000";
    	ctx.fillRect(0,0,w,h);
    }
    clear();
    
    function remainder(Float x, Integer i)
        => (x/i).fractionalPart * i;

    value graphs = [
        ["red", sin],
        ["green", 
         (Float x) => 2.0 - (remainder(x,8)-4).magnitude],
        ["blue", 
         (Float x) => 3.0 * sin(x/12)^2 * sin(x)]
    ].indexed;
    
    variable value x = 0;
    void do() {
        x = (x+1) % w;
        if (x == 0) {
            clear();
        }
        for (i->[color, f] in graphs) {
            value y = 
                f(75.0 * x / w) * h/40 
                	+ h/3 * (i+0.5);
            ctx.fillStyle = color;
            ctx.fillRect(x, y, 3, 3);
        }
    }

    dynamic {
        dynamic id = setInterval(do, 1);
        setOnStop(() => clearInterval(id));
    }
}


[CanvasRenderingContext2D, Integer, Integer]
createCanvas() {
    dynamic {
        dynamic win = openCanvasWindow();
        dynamic canvas = win.ceylonCanvas;
        Integer w = canvas.scrollWidth;
        Integer h = canvas.scrollHeight;
        canvas.width = w;
        canvas.height = h;
        CanvasRenderingContext2D ctx 
            = canvas.getContext("2d");
        return [ctx, w, h];
    }
}

Click here to run this code online