Chris Oliver's Weblog

F3 vs Processing

One of the comments to my earlier posts asked whether F3 is a competitor to Processing.

No, not really. F3 is intended to provide a general purpose GUI development platform and not just an "electronic scratchpad" for 2D graphics like Processing.

That said, F3 can do many of the same things as Processing, for example below is the F3 equivalent to this simple processing example.

Note the use of the F3 bind operator in this example. F3 performs dependency-based evaluation of the right-hand operand of the bind operator. Whenever any of the values it depends on changes the result is incrementally reevaluated and, if the overall value of the expression changed, the left-hand side is automatically updated.

In this example, when the gx, gy, rightColor, and leftColor attributes are modified in the update() operation, the dimensions and colors of the rectangles are also implicitly updated due to the bindings.

import f3.ui.*;
import f3.ui.canvas.*;

public class Mouse1d extends CompositeNode {
    public attribute width: Number;
    public attribute height: Number;
    attribute gx: Number;
    attribute gy: Number;
    attribute leftColor: Number;
    attribute rightColor: Number;
    operation update(x:Number);
}

attribute Mouse1d.gx = 15;
attribute Mouse1d.gy = 35;
attribute Mouse1d.leftColor = 0.0;
attribute Mouse1d.rightColor = 0.0;

operation Mouse1d.update(x:Number) {
    leftColor = -0.002 * x/2 + 0.06;
    rightColor =  0.002 * x/2 + 0.06;
    
    gx = x/2;
    gy = 100-x/2;
    
    if (gx < 10) {
        gx = 10;
    } else if (gx > 90) {
        gx = 90;
    }
    
    if (gy > 90) {
        gy = 90;
    } else if (gy < 10) {
        gy = 10;
    }
}

function Mouse1d.composeNode() =
Clip {
    shape: Rect {width: bind width, height: bind height}
    content:
    [Rect {
        height: bind height
        width: bind width
        fill: black
        selectable: true
        onMouseMoved: operation(e:CanvasMouseEvent) {
            update(e.localX);
        }
    },
    Rect {
        x: bind width/4-gx, 
        y: bind width/2-gx
        height: bind gx*2
        width: bind gx*2
        fill: bind new Color(0.0, leftColor + 0.4, leftColor + 0.6, 1.0) 
    },
    Rect {
        x: bind width/1.33-gy,
        y: bind width/2-gy
        height: bind gy*2
        width: bind gy*2
        fill: bind new Color(0.0, rightColor + 0.2, rightColor + 0.4, 1.0)
    }]
};


Frame {
    visible: true
    content: Canvas {
        content: Mouse1d {
            width: 200
            height: 200
        }
    }
}

Posted at 11:15AM Nov 11, 2006 by Christopher Oliver in F3  |  Comments[2]