Round 3 - Usability

Although our long term objective with this project included incorporating Anthony's tool design, given our available resources (1 artist, 2 programmers), our short term objective beginning last December was to create a multimedia production system consisting of just Maya + Photoshop + Illustrator + Scripting, with the intent of eventually sticking Anthony's tool in the middle, and have it incrementally assume some of the work performed in Maya/Photoshop/Illustrator and some of that performed by scripting.

2D Usability

As mentioned, due to performance and functionality requirements, this is fundamentally a 3d system. Nevertheless we expect to be able to script 2d graphics with the same ease or better, as compared to javafx 1.x.

Although, it's based on a 3d scene graph, the user experience of creating 2d-only content is quite similar to that of javafx 1.x, for example:

Stage {
    scene: Scene2D {
         content: Rectangle { height: 100, width: 100, fill: Color.BLUE }
    }
}

where Scene2D is merely a convenience class whose definition is essentially:

public class Scene2D extends Scene {
    override var camera = Camera2D {}
    override var enableLighting = false;
}

The Camera2D provides a parallel projection with pixel coordinates corresponding to the coordinate system normally used in 2d, and lighting is turned off.

There are a number of discrepancies, however. As mentioned, we use linear algebra directly, so concatenation of transformations is represented by multiplication, rather than by a JavaFX script sequence as in javafx 1.x. Matrix constructor functions are provided for convenience:

var x: Number;
var y: Number;
var sx: Number = 1;
var sy: Number = 1;
var rect: Rectangle;

Stage {
    scene: Scene2D {
         content: rect = Rectangle { 
             height: 100, width: 100, fill: BLUE 
             transform: bind lazy translate(x, y) \* scale(sx, sy)
         }
    }
}

Mat4 provides named access to its translation and rotation components:

var locationInScene:Vec3 = rect.worldTransform.getTranslation();

For convenience the Node class also provides variables for its initial translation:

public abstract class Node {
     ...
     public var transform: Mat4 = IDENTITY;
     public var x: Number;
     public var y: Number;
     public var z: Number;
     public def localTransform = bind lazy translate(x, y, z) \* transform \* ...;
}
Note that even 2d objects hava a z coordinate.

Origins

We (as humans) often prefer a relative origin in describing 2 dimensional and 3 dimensional objects, e.g, "from the top", "from the middle", "from the front". In this system, based on artist input, by default most 2d objects have the origin of their vertices at CENTER/MIDDLE. However, this can be overridden declaratively. This includes the above mentioned rectangle, so in actuality to make it correspond to a rectangle in javafx 1.x, I'd write:

Stage {
    scene: Scene2D {
         content: Rectangle { 
              originX: LEFT
              originY: TOP
              height: 100, width: 100, fill: BLUE 
         }
    }
}

BASELINE is also an option for originY. For TextShape's this is the default. However, any user defined custom node can declare its own baseline (by overriding Node's baseline variable):

public class Button extends CustomNode {
    var text: String;
    var t:TextShape;
    var font: Font = Font {};
    var action: function();
    override var baseline = bind lazy t.baseline;
    override var internalContent = Group {
        onMouseUp: function(e)
        {
            if (mouseOver) {
                action();
            }
        }
        content:
        [Rectangle {
            arcHeight: 20;
            arcWidth: 20;
            width: bind lazy t.bounds.width + 20;
            height: bind lazy t.bounds.height + 10;
            fill: bind lazy if (mouseDown != 0 and mouseOver) GRAY else DARKGRAY;
         },
         t = TextShape {
             onMouseMove: function(e) { println(e) }
             fill: Color.WHITE;
             originY: Origin.MIDDLE;
             text: bind lazy text;
             font: bind lazy font;
        }]
  };
}

In this case I've declared Button's baseline to be that of the text it uses as a label. Then, simply by declaring a Button with a baseline origin, I can automatically align it with text or other elements which have meaningful baselines, regardless of font size, as in the following snippet:

    
            ... 
            TextShape {
                font: Font { size: 24 }
                text: bind "D{idx}g";
                fill: RED;
                originY: TOP;
                extrude: 4;
            }, 
            Button {
                x: 110;
                text: "Button";
                originY: BASELINE;
                font: Font { size: 36 }
                action: function() { active = not active ; println("set active {active}")}
            },
            TextShape {
                font: Font { size: 24 }
                text: bind "D{idx}g";
                fill: BLUE;
                originY: BOTTOM;
            },
            TextShape {
                font: Font { size: 24 }
                text: bind "D{idx}g";
                fill: ORANGE;
                originX: RIGHT;
            },
            TextShape {
                font: Font { size: 24 }
                text: bind "D{idx}g";
                fill: WHITE;
                originX: LEFT;
            },
            TextShape {
                font: Font { size: 24 }
                text: bind "D{idx}g";
                fill: color(1, 1, 1, .5);
                originY: MIDDLE;
            },
            ...   

As you can see in this picture the button is properly baseline aligned with the orange and the white text.

As a side note, this system has no UI controls, by artist decision. Whenever they need them, the artists want to create their own buttons, sliders, and etc, Nevertheless, the system does have all the capabilities to support so-called UI controls if such were desired.

There's a lot more I could and should say about expressing 2d graphics in this system, but that will have to wait for a later post.

Comments:

Hi Chris

Thanks for blogging about this project. Personally, it sounds more like cutting-edge work which I felt has been missing from the official JFX releases to date. I guess the obvious question I have it--will this be released as open source? I assume the answer is "no", which is too bad--I hate to see hard work like this go to waste.

Alternatively, maybe you could get the OK to post some videos online so we could see how good the rendering was (outside of just static images).

Thanks for sharing, looking forward to hearing more about it.

Patrick

Posted by Patrick Wright on July 10, 2009 at 06:53 PM PDT #

In my opinion, the same approach can be used for enterprise software tools integrated with Web Services as in Sun Java CAPS. Note that as above nobody is going to say "Hey, here you go, why don't you test your enterprise tools on my enterprise". Instead in each case we need to simulate the enterprise software problem that our tool is supposed to solve. http://www.aygulum.net
http://sohbetcide.com

Posted by Chat on June 17, 2010 at 09:01 AM PDT #

In my opinion, the same approach can be used for enterprise software tools integrated with Web Services as in Sun Java CAPS. Note that as above nobody is going to say

Posted by konyachat on November 01, 2010 at 07:13 PM PDT #

why don't you test your enterprise tools on my enterprise". Instead in each case we need to simulate the enterprise

Posted by chat siteleri on November 01, 2010 at 07:13 PM PDT #

In my opinion, the same approach can be used for enterprise software tools integrated with Web Services as in Sun Java CAPS. Note that as above nobody is going to say "Hey, here you go, why don't you test your enterprise tools on my enterprise". Instead in each case we need to simulate the enterprise software problem that our tool is supposed to solve.http://www.memleketchat.com

Posted by Chat on November 01, 2010 at 07:14 PM PDT #

Simple and Nice example !

Posted by شات on December 15, 2010 at 04:02 AM PST #

vhery betefuol

Posted by emlak on April 08, 2011 at 02:13 AM PDT #

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