Interactive 3D in a Web Page

The example above shows one of my first experiments generating an interactive sun-path diagram. This is part of a series illustrating basic solar concepts.

Overview

Generating the sun-path diagram was actually pretty easy - writing the graphical user interface (GUI) turned out to be the main challenge. There are a few GUIs available for Processing, but none appeared to offer the level of interactive overlay and control I needed. Experiments with AWT and Swing components quickly showed that transparency and flickering was going to be an enormous problem there. Thus I wrote my own.

That’s the smart reason - the dumb reason is that I simply haven’t been able to get multiple jar files in an archive parameter to work yet, so I can’t include any external libraries and had to write it myself.

The Interface

The main work in producing this applet was getting the 2D overlays over the 3D diagram and effectively managing all the user interaction with different elements. Also, because it involves a fair bit of trigonometry (which is slow to calculate), I didn’t want the model looping through and constantly redrawing itself (as Processing does by default). Thus it took a while to work out how to obtain seemless interaction and activity feedback whilst only redrawing those parts of the frame that need it when they need it.

It was surprisingly fun to go back to basics and design simple stuff like buttons and sliders. Processing makes working with images pretty trivial so there seems to be huge potential for skinning all the components. Things like the menus and popup modal dialogs proved a little trickier, but that just means managing mouse and key events pretty tightly and maintaining a keyboard focus and mouse capture system. Of course, this allows you to tab between components and use keyboard control for most things.

Again, it’s the end of the weekend so work is looming. I’ll try to get back and describe more next weekend.

Comments