The programs are well suited as a tutorial, and also
indicates frameworks for real applications based on
the library.
To keep the demo programs simple (within single files),
model classes are implemented as inner classes
of the main class. In real applications these will
normally be in separate files.
|
Demo 1
A program demonstrating:
- Basic graphics window and scene setup
- Setting canvas background color
- Basic scene composition
- The use of style
- Example geometry generation
- Simple annotation with positioning
The program shows the basic steps involved when
creating a graphics canvas; Creating the
GWindow component, the GScene
(defining the viewport and the world extent),
creating a
GObject
(the graphics object) consisting of
GSegments (polyline geometry) with optional
GText annotation.
Rendering style is specified through GStyle
objects.
Demo1.java
|
|
|
Demo 1a
A program demonstrating:
- World extent and world coordinates
- Defualt zoom interaction
This program is almost identical to the previous, but by
specifying an explicit world extent and supplying geometry
as world coordinates the canvas can be made zoomable as
shown.
Demo1a.java
|
|
|
Demo 2
A program demonstrating:
- Positional feature among sibling graphical objects
- Simple selection interaction
- Dynamic style changes
- Matrix4x4 for geometry generation
- Text elements and annotation strategy
- Device relative geometry
The program produce a set of graphics objects in a
predetermined screen order. Selecting an object will
highlight it, and the user can change its depth position
through the GUI provided.
All elements has an associated text. Note that the text
elements are in the front even if the object it annotates
is in the back. This follows the G annotation
strategy which is as follows:
- All annotations are put in the front (annotations in the
back are of limited use and therefore avoided)
- Annotations never hide other annotations (partly- or not
visible annotations are of limited use and therefore avoided)
- Annotations are never cut (partly visible annotations
are of limited use and therefore avoided)
A client application can override the annotation strategy
by adding the static text hint.
Demo2.java
|
|
|
Demo 3
A program demonstrating:
- Annotation layout mechanism
- Visibility settings
- Custom line style
A number of lines are created, each with an associated
text with position hint bottom. The requested
position of the annotations will cause them to overlap,
but as this is not allowed by the rendering engine they
are repositioned so they become visible and non-overlapping.
Annotation that cannot fulfill these requirements are not
rendered. This are further illustrated by resizing the
the window.
This program also shows different visibility modes for
GObjects. Accessing the toggle buttons at the top
switch between geometry visible, annotation visible, both
visible or neither visible. Visibility is a feature of
GObjects, and affects the entire subtree of
components rooted in that node.
Demo3.java
|
|
|
Demo 4
A program demonstrating:
- Text position hints
- Annotation algorithm
A random polyline is regenerated on each re-transformation
(i.e. resize) event. Several text elements has been added
and resizing the window illustrates how the annotations
are repositioned according to the new geometry of the
polyline.
Text position hints has three components:
- Position along the line -
first,
last,
top,
bottom,
left,
right and
middle (center of polyline bounding box).
- Location relative to rendering point -
center,
north,
south,
east,
west,
north east,
north west,
south east and
south west.
- Algorithm -
static (place at requested position)
dynamic (adjust to ensure visibility)
Demo4.java
|
|
|
Demo 5
A program demonstrating:
- Custom world extent
- Zoom interaction
- Text background color
- The effect of transparency
- Annotation layout algorithm
This demo program sets an explicit world extent and supply
geometry as world coordinates (floating point coordinates are
interpreted as world extent relative while integer
coordinates is interpreted as device relative).
Specifying geometry relative to the world extent makes the
scene zoomable and panable as shown in this program through
the default ZoomInteraction.
The sample curve have a set of texts associated with it.
Note during zoom how the annotation algorithm always ensure
that they never overlap and that they are always on screen.
Demo5.java
|
|
|
Demo 6
A program demonstrating:
- Custom selection interaction
- Object detection features
- Style inheritance
- Dynamic style setting
A random set of lines are rendered within the scene, and
a custom interaction is implemented to select lines that
either intersects or are inside the current
selection rectangle. The selected objects are dynamically
highlighted by switching style component.
Demo6.java
|
|
|
Demo 7
A program demonstrating:
- More annotation techniques
- Custom interaction
- Using transparent colors
- True scale resize
To position the edge annotation, invisible vertical and
horizontal lines are drawn, and the texts are positioned
at the ends of these.
The program implements an interaction illustrating how
the scene can be updated just by moving the cursor over it.
The moving object use a transparent color so the background
graphics shows through.
The program also illustrates the true scale feature
of the scene; The scale ratio of this scene is fixed and
independent of window shape as can be seen during resize.
The default scene setting is to squeeze the world extent
to fir the current viewport.
Demo7.java
|
|
|
Demo 8
A program demonstrating:
- Nested GObject hierarchy
- Style inheritance
- Simple selection interaction
Style (color, line width, line style, fill, font etc.)
determines how graphics elements are rendered and can be
explicitly put on any level of the scene. Where a style
property has not been explicitly specified, this
property is inherited from an above level.
This program illustrates this feature. The graphic object
contains children nodes as illustrated. Initially all nodes
inherits background color from the scene where it is explicitly
set (white). Clicking a node set a random background color
on that node. This background color is inherited down the tree
to nodes that does not explicitly define background color.
Clicking mouse button 2 on a node unsets the background
color at that node.
Demo8.java
|
|
|
Demo 9
A program demonstrating:
- A simple animation
- Using the Geometry and Matrix4x4
classes to generate geometry
- Dynamic annotation changes
The program creates a scene which depends on a circular
angle. By drawing the object explicitly with changing angle,
the result becomes an animation.
Demo9.java
|
|
|
Demo 10
A program demonstrating:
- Simple image handling
- Simple drawing interaction
GSegments can be associated with images.
For large
scale background images like the map in the demo, the common
approach is to create a single device coordinate segment
serving as the image anchor.
In this demo program, an additional segment (the red path)
is put on top of the image, and filled with geometry through
a simple drawing interaction.
Note that this program takes the image as input parameter.
The image is not provided, but any image can be used.
Demo10.java
|
|
|
Demo 11
A program demonstrating:
- A custom move interaction
- Switching interactions
- Update world extent geometry
- Scroll handling
The GObject consist of a set of randomly positioned
GSegments with geometry specified in world coordinates.
The program implements a move interaction where the geometry
of the moved object is permanently changed so it becomes
persistent through later re-transformations. This can be
verifyed using the zoom interaction provided.
This program also demonstrates how to use scrollbars with
G. Simply pass the two scrollbar components to the
GScene which will take care of the details.
Demo11.java
|
|
|
Demo 12
A program demonstrating:
- Point annotations
- Annotation algorithm
- Annotation background color
- Point images
- Printing feature
A single line is created in a specified world extent.
The geometry is independent on visual extent and viewport
and therefore precomputed in the GObject constructor.
All points are associated with a symbol (a GImage).
Any image can be used for this purpose; in this case a
predefined square symbol is used.
An annotation is bound to each point. Text position algorithm
is set to static to avoid text repositioning if a
point becomes invisible due to zooming.
The program also demonstrates the simplicity of printing
the GWindow content.
Demo12.java
|
|
|
Demo 13
A program demonstrating:
- A sample interactive game application
- A custom interaction
- Dynamic graphics highlighting
The program implements the rules and graphics representation
of the game Reversi.
The game alternates between white and black player moves.
When the cursor is moved over the board, legal cells
are highlighted. A piece is placed by clicking the left
mouse button inside a legal cell.
Demo13.java
|
|
|
Demo 14
A program demonstrating:
- A sample game application
- Graphics animation
- GObject re-parenting
The program animates the solution to the famous Towers
of Hanoi puzzle.
The world extent is chosen to make it simple to position
pegs and discs. Pegs and discs are objects inheriting
from GObject. Initially the discs are children of the
left-most peg, and during the solution they are re-parented
according to their new position.
Demo14.java
|
|
|
Demo 15
A program demonstrating:
- A rudimentary chart library
- The use of multiple scenes
- World extent usage
- Zooming and scrolling
- Nice number generation
The example illustrates a rudimentary setup for a generic
chart library. The graphics consists of two scenes:
The annotation scene is in the back and contains
axis annotation, title,
chart background, grid lines etc. This scene covers the
entire window, and geometry is specified in device
coordinates.
The plot scene is in the front and contains the
graphs.
This scene has a viewport that match the chart exactly
and world extent settings that is chart relative so that
chart values can be plotted directly.
The chart is zoomable and scrollable. The annotation scene
has the plot world
extent as user data in order to correctly update
the axes annotation on redraw.
Note that G is not a chart library (like
JFreeChart for instance). But it can easily be used as the
foundation for one as this example illustrates.
Note also that this program utilize the
nicenumbers
module for producing axes annotation.
Demo15.java
|
|
|
Demo 16
A program demonstrating:
- A rudimentary pie chart class
- Annotation techniques
- Example geometry generation
The example illustrates a rudimentary pie chart class.
It can hold a number of labeled fractions each
rendered with a specified style.
The label and percentage are added to an invisible line that
originate in each sector center and extends out of the
pie chart. The annotation layout manager ensure that
annotations follows these lines and don't overlap.
Note again that G is not a chart library,
but that it can easily be used as the foundation for one
as this example illustrates.
Demo16.java
|
|
|
Demo 17
A program demonstrating:
- A rudimentary bar chart class
- Rendering techniques
The example illustrates a rudimentary bar chart class.
It can hold a number of bars each rendered in 3D with a
specified color.
As G is a foundation library it does not support complex
shapes like 3D bars as shown. Such shapes can however easily
be provided by extending GObject, and the geometry
can be
created through the generic Geometry class which
comes as part of G.
Demo17.java
|
|
|
Demo 18
A program demonstrating:
- Advanced image handling
- The use of multiple scenes
This program illustrates advanced image handling.
As in Demo15, two scenes are used; A device
relative
scene for annotation, and a domain relative scene for data.
The data in this case is a seismic image. The image scene
is zoomable and scrollable. The annotation scene has the
domain scene as user data in order to correctly
update the axes annotation on redraw.
Note that G never scale images. When scaling is needed
this must be handled by the client application, typically within
the draw() method as shown here.
This gives the application
full control over the scaling process, and it avoids
unnecessary caching and processing inside the rendering engine.
Note that this program takes the image and the image extent
information as input parameters. The image is not provided,
but any image can be used.
Note also thet the program use the
nicenumbers
module for producing annotation.
Demo18.java
|
|
|
Demo 19
A program demonstrating:
- An actual game application
- Embedded AWT components
- Custom selection interaction
- Dynamic annotations
- Geometry generation
The program is an implementation of the game Simon.
The colored sectors are created by connecting two circle
sectors of different radius and remove superfluous vertexes.
The game start button is a JButton embedded
in the graphics using the GComponent wrapper attached
to a GSegment.
Demo19.java
|
|
|
Demo 20
A program demonstrating:
- A math application
- Polyline performance
- Geometry generation
The program generates the famous Koch Snowflake,
a fractal geometric shape with infinite circumference and
finite area.
Initially the snowflake has three edges. The user can
add or remove levels to the snowflake using the +
and - buttons. The graphics implementation is
simple. A single GSegment holds the curve and its
geometry
is recomputed for each add/remove level command based on
the current geometry.
The canvas is zoomable so that the fractal nature of the
shape can be inspected.
Note that the number of points in the curve increase
exponentially with number of levels, and that the performance
of the program degrades accordingly.
Demo20.java
|
|
|
Demo 21
A program demonstrating:
- A rudimentary sheet music library
- GObject extension
- Spline generation
The program illustrates how GObjects can
be extended to represent reusable higher level objects,
in this case a stave and a note. When
properly implemented, these classes can be used
in any graphics application.
A proper implementation would gather stave and note
properties in suitable classes and take instances of these
as input to the GStave and GNote outlined
here. In this demo program only a few properties are
included and they are part of the graphics classes to make
the implementation compact.
The note representation is vector based
and is therefore fully scalable.
Note that this program utilize the
spline
module to generate note geometry.
Demo21.java
|
|
|
Demo 23
A program demonstrating:
- Advanced geometry generation
- Dynamic update
- Threading
The complete geometry for a clock is generated by
use of the Geometry and the Matrix4x4
classes.
The clock handle geometry is updated in response to a
timer task running once a second. The scene is zoomable.
Demo23.java
|
|
G is a generic graphics library built on top
of Java 2D in order to make scene graph oriented 2D
graphics available to client applications in a high
level, easy to use way.
