| SPXL.TVblog | contactgallery | videoflash | processingmyspace | facebook

PGraphics layers in Processing 9 January, 2009 at 11:31 am

Processing sample: Layers_by_spxl


Source code:

Another Processing sketch, this time it is experiments in graphics using PGraphics layers to construct an image.

I like the idea of having artificial “construction lines” optionally appear in an image, similar to showing a “wireframe” on a 3D model. This example uses two layers of construction lines: one behind the objects, and one in front of the objects. The level of detail can also be adjusted; in this case, the crosshairs to the edge of the window are at a higher level (not to be confused with higher layer!) than the small “+” to mark a circle’s centre and a circle’s outline.

The base Shape class includes details for presentation (fill colour, edge colour, edge weight, etc) as well as position and animation (in this case simple velocity with acceleration), including drawing a “trace” of the shape’s location. The motion calculations aren’t “reality-accurate”, but they are time based, not frame based. To demonstrate this, you can increase and decrease the sketch’s frame rate and see that the objects seem to move in similar trajectories whether the updates are regular (eg at 32 fps) or infrequent (eg at 1 fps). Time is “stopped” (or more like skipped) when the sketch is paused.

Another neat trick implemented is seamless wrapping of objects at the edges of the window. This is achieved by drawing an object multiple times, if required, offset by the window width and/or height. A similar trick is used to wrap the trace line generated for the shape.

The overlaying of the (5!) layers hasn’t turned out quite as I expected. If you look closely (press space to pause the animation), you can see that the supposedly semi-transparent red “background” of the circles is actually fully opaque with respect to the layers beneath it(the yellow motion trace is the bottom layer, next layer is the target crosshairs to the edges of the window). In this case the result looks nice, but it isn’t what I was expecting, which was to be able to (partially) see the lower layers through the red circles, a-la Photoshop and its ilk. Perhaps this can be overcome using blend() instead of image(), or maybe it is a flaw/limitation in the way that the drawing operations modify the PGraphics bitmap. What I’d really like to do is have the layers merged by¬† my graphics card so there’s no slowdown by Java having to do so much hard work going over the window several times (which I’m assuming happens now with the image() calls).

Overall, I like the idea of being able to render each object as it comes, instead of having to do everything in stages (eg draw the contents of each layer – all objects for each layer – before the contents of any other layer, necessitating multiple traversals of the object list and either needing to store intermediate results or recalculate, possibly leading to incoherence or other errors). I also like the idea that the objects know how to render themselves in different styles. One thing it isn’t, though, is particularly efficient. There’s afair amount of overhead from drawing things multiple times, for instance, but maybe to get that particular look (or features), that’s the price you have to pay. I might try implementing something similar in DirectX (using C#.Net), though I don’t expect it will be quite as straightforward as using Processing!


Leave a Reply