In addition to the SVG, we can generate graphic in javascript directly. 

canvas=require("canvas");
canvas = new canvas.canvas(mb_rt.root);
with(canvas) {
    size(200,200);
    smooth();
    background(0);
    strokeWeight(10);
    for(i=0;i<width;i++) {
        x = random(255);
        y = random(0,width);
        stroke(0,100);
        line(i,0,x,height);
    }
}
 

The canvas class will be converted into MB API call. For example, 

mb_rt.rect(0,0,200,200,0,0);
strokeWidth=10;
for(i=0;i<width;i++) {
    x=Math.random()*255;
    y=Math.random()0*width;
    strokeColor = 255; // grey 0, alpha 255
    var p = mb_rt.path_new("M "+i+",0 L "+x+","+height+" z");
    p.stroke_width=strokeWidth;
    canvas.root.add_shape(p);
    var paint = mb_rt.paint_color_new(strokeColor);
    paint.stroke(p);
}

Our goal is to port all functions of the processing.js and make it similiar with the processing.js so that apllication can be ported easily to MB.

In order to generate animation, we have two ways to do it. Firstly, we can change the whole image completely in every frame. For example,

function draw() {
    app.canvas.clear();
    app.canvas.rect(0,0,200,200);
    .....
    app.update();
}

setInterval(function() {draw();},33);

The canvas.clear() will delete all shapes and coords in the canvas so that we can add graphics from the scratch. The other way is to remember the shapes and coords so that we can change the properties again in the future. For example,

group = app.canvas.group();
app.canvas.rect(0,0,20,20);
app.canvas.group_end();
x=0;
step=10;
setInterval(function() { 
    group.x = x;
    x = x + step;
    if (x > 400) step = -20;
    if (x < 0) step = 20;
},30);

Frame mode

The first method is implemented as the frame mode, which is started by the

canvas.draw = function() {
    canvas.clear();
}
canvas.frameMode(30);

This function will call draw every 30 ms until the canvas.noLoop() is called. The canvas.redraw can be used to call the draw function.