Visualization of Tr3 and Sky



Click here to download an executable Java JAR file that visualizes a visual music synthesizer, written in Tr3. After the Java application starts, wait while it downloads a 3 Meg XML file, automatically. 


Visualization


        Three colored arcs, with
            Red representing hierarchy (Parent-Children)
            Green representing input events (When)
            Blue representing output procedures (How)

        Yellow auras represent selected nodes   


Interaction

double click
on node		 expands a node or contracts it
right click zooms to fit all of viz into window
right drag manually zooms in and out
type keywords in
Q box in
upper right panel		 searches for that keyword  in shown nodes
click or highlight keyword in right panel automatically puts word(s) in Q box and highligts nodes
single click on
panel titles		 "Parent, Children, What, When, How, Why"  puts contents of that field in search box  which will highlight the nodes in Yellow and update arcs to reflect that relationship.


double clicking
panel title 		"Parents, Children, What, When, How, Why" puts contents of that field in search box AND selects displayed nodes that match each word which will turn nodes black with yellow highlight
double clicking on the panel title for view °v° reduces the view to the currently selected nodes
pressing on spacebar show relationship between selected nodes sometimes hidden relationships will appea

Hints


Play with the depth slider to expand the degree of interest.

Turning off the community slider speeds up complex rendering.


Tr3 and Vizster


The visualization is NOT a development environment; it is a seriously tweaked version of the Vizster application written with the Prefuse toolkit. Much of the Vizster interaction, such as zooming and community highlighting works the same in Tr3.


Vizster works at the macro level, visualizing communities of people. Tr3 works at the micro level, as a scripting language that ties together Human gestures and devices. Some day, macro and micro will seamlessly integrate with each other.


The future


Typing keywords in the Q box to reduce the view to matching words. Typing keywords in the Q box to expand include matching keywords, hidden from view. Typing a Tr3 expression in the Q box to filter a view (reduce what is shown or find what is hidden based on an xpath like query).


Change highlighting, where the randomly assigned colors are replaced by  overlapping topologies of red, green, and blue. Layers of convex hulls resemble the topo maps from the real world, with one major difference. Instead of one, there are now three "mountain ranges", of red, green and blue, that intersect each other. These points of intersection are additive, so that red+green+blue areas glow white.


Drawing an arc between nodes creates a connection between them. Drawing an arc between hulls connects the nodes inside both hulls by name. Drawing a line around a few nodes can create a new hull. Hulls can be collapsed into a single node.


Both indirect and direct connections are shown. For instance, the when panel in
        tr3 » main » seq » one » event
attaches all the mouse inputs with the declaration of:
        @ mouse°

however the how panel in
        tr3 » input » mouse » time
does NOT show the connection to event, even though double clicking on the time node does show green arrows to two event  nodes.


This is a work in progress. Let me know what you think. Thanks!


Warren