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.

G Features

Create a GWindow as top level graphics node and link to a Swing panel. Add a GScene which defines viewport and world extents. Build the graphics hierarchy by GObjects and add to the scene. GObjects consists of GSegments (polylines) and other GObjects. Rendering information is supplied by GStyle objects added to any level of the graphics. Annotations (GText), raster images (GImage) and AWT/Swing components (GComponent) are added to segments with specified position hints. Interactions are implemented through the GInteraction interface.

The graphics is double buffered to keep rendering smooth. The implementation makes heavy use of regions to keep track of objects and damage area in order to keep the rendering pipeline as efficient as possible.


Version Library Source Demos Documentation
1.0 (December 2009) G.jar G.src.jar G.demos.jar docs.jar (online)
1.1 (not scheduled)        
2.0 (not scheduled)        

Demo Programs / Tutorial

Below is a collection of some simple G programs that demonstrates the library features and the typical architecture for scene setup and user interactions.

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.

To run a demo program, follow these simple steps:

  1. Download G.jar to some directory, for instance .../gtest/G.jar
  2. Copy/paste the demo program from the browser and store locally: .../gtest/Demo1.java
  3. Compile the demo program: javac -classpath G.jar Demo1.java
  4. Run the demo program: java -classpath G.jar;. Demo1 (MS/Windows) or java -classpath G.jar:. Demo1 (Unix).

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.


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.


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:

  1. All annotations are put in the front (annotations in the back are of limited use and therefore avoided)
  2. Annotations never hide other annotations (partly- or not visible annotations are of limited use and therefore avoided)
  3. 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.


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.


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)


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.



License Information

The above library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version.

The above library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.

In short:

osi certified