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
        }
    }
}

Comments:

Hm, great keyword bind, definitely saves a lot of boilerplate. I'm very excited about this langage. Good luck as you get closer to release!

Posted by Ivan Lazarte on November 11, 2006 at 01:52 PM PST #

I really like the work that has been done here. I had an idea to design/implement a Flash-like framework for Java Applets, which looks like what you have done here. My only concern is: Why another scripting language? Why not build a simplified swing/applet framework in Java? Just as you can develop GUI's with NetBean's Matisse, there can be a tool to develop super-rich Java applets. Is the reason why F3 was created was to create faster loading applets? That way the JVM does not have to verify a lot of bytecode, it just interprets a script-language? Do you think Java RMI technology could be used to solve the speed issue (have a server that sends requested objects as needed)? The only drawback to this I think would be the overhead on the publisher's side. Again, excellent work! I really like this project. I think that if Java Applets can make a comeback as Web 3.0. Working with HTML, and AJAX to create rich web applications is a construction and maintenance nightmare. Programming with Applets would be much easier, portable, and maintainable!

Posted by DS on November 14, 2006 at 06:30 AM PST #

Simple and Nice example !

Posted by شات مصرى on December 04, 2010 at 08:13 PM PST #

Simple and Nice example !

Posted by شات on December 04, 2010 at 08:13 PM PST #

Simple and Nice example !

Posted by دردشة on December 04, 2010 at 08:13 PM PST #

Simple and Nice example !

Posted by دردشة مصرية on December 04, 2010 at 08:13 PM PST #

Simple and Nice example !

Posted by شات on December 15, 2010 at 03:37 AM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

user12610627

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today