Josh On Design

Brainstorm!

Every now and then I get the idea to build a cool program that does something interesting. Sometimes I get an idea by seeing another program, or seeing an interesting API I've never noticed before. Sometimes both. A few weeks ago I was thinking about how close to 3D I could get while still using the Java2D APIs. There's no perspective transforms in Java2D but you can fake a lot of 3D with creative use of the standard affine transforms. Around the same time Romain complained about having to draw some 3d diagrams using Photoshop. It wasn't hard work, just tedious.

Brainstorm! Build a stacked image editor in Java!

Of course, every time I get one of these ideas I then think "well, I've got to make a build file, and set up my environment, and build some base classes, and ...." Eventually I go back to what I was doing and forget about it. The overhead sometimes doesn't make it worth it. Even if I do write the core code I never develop it into an app that someone else can run. It just becomes a hack that sits on my hard drive until I delete it for more space. Well not this time...

I've been working on some framework stuff for SwingLabs and one of the offshoots is a zip file which contains a prefab project zip. Inside the zip is a ready to go build file, src and lib directories, and some custom tools to build double-clickable jars. With this zip file I can dive right into the code I want to write and not worry about the overhead. (Don't worry. I'll be releasing this project zip in the future with the framework.) With my project.zip file I hand I got to work and wrote a stacked image editor in a few hours.

A Stacked Image Editor

Here's the basic idea. I have process or system I would like to diagram. It can be represented as a series of images floating above each other, usually at an angle so you can see how they all fit together. The program needs to let you select images, layer them on top of each other, and then tweak the display settings until you like what you see. Here's an example:

Suppose I have a frame, panel, and text field in an application I'm writing about. Here are screenshots of each component:

A JXPanel A JXFrame A JTextField

I want to make a stacked diagram to visually show how they all nest together. Here's what the editor will look like:

Stacked Editor

Each image is loaded into the editor and has it's own settings for a border and transparency. You can also change the shear of the images, which is was makes them appear to be in 3D. A shear is really an affine transform with no perspective (meaning the back will be as big as the front), but for close up objects it's a pretty convincing illusion. Especially when you adjust the inter slice distance and horizontal offset to make it appear more isometric. You can save the resulting diagram as a PNG image but there is no native file format to store the slice settings. I figured the app will usually only be used once per diagram so it didn't matter too much. Perhaps I could add it later. After using it for a bit I added the match sizes checkbox since you often want to make your images congruent.

The entire application runs as a double clickable jar that you can find here. (note. It's 5 megs because there's a lot of junk in there I haven't stripped out yet. Oh, and it probably requires 1.5.).

Try it out and tell me what you think. Thanks,

- Josh