Piccolo2D.js

Port of Piccolo2D to the HTML5 environment.

View the Project on GitHub allain/piccolo2d.js

About

Piccolo2D.js is a port of Piccolo2D.java to the HTML5 environment.

Piccolo2D is a toolkit that supports the development of 2D structured graphics programs, in general, and Zoomable User Interfaces (ZUIs), in particular. A ZUI is a new kind of interface that presents a huge canvas of information on a traditional computer display by letting the user smoothly zoom in, to get more detailed information, and zoom out for an overview. We use a "scene graph" model that is common to 3D environments. Basically, this means that Piccolo2D maintains a hierarchal structure of objects and cameras, allowing the application developer to orient, group and manipulate objects in meaningful ways.

Why use Piccolo2D? It will allow you to build structured graphical applications without worrying so much about the low level details. The infrastructure provides efficient repainting of the screen, bounds management, event handling and dispatch, picking (determining which visual object the mouse is over), animation, layout, and more. Normally, you would have to write all of this code from scratch. Additionally, if you want to build an application with zooming, that's built right into the framework too.

Examples

Events

Demonstrates: Event Handling

Activities

Demonstrates: Scheduling Activities

Hierarchy

Demonstrates: Very Deeply Nested Nodes

Sticky Nodes

Demonstrates: activities, sticky nodes

PImage Example

Demonstrates: creation of PImages

Calendar Example

Example used to benchmark the basic code.

Demonstrates: events, scene construction