Overview

The aim of this app is to let you interact with a range of parametric shape generation algorithms, using the adjacent sliders to adjust parameters and see their effects in real-time. As a starting point, use the examples menu as a basis and the 'Randomize' button () to explore different shapes.

The shape parameter sliders are specific to each algorithm whereas the shell parameters allow you to stretch and offset the generated surface into shell-like forms. It should be fast enough on most modern computers and tablets, but you can turn off real-time updating if you need to.

Background

This is another HTML5 version of one of my Java applets. This one grew out of some experiments using spherical harmonics as a way of doing real-time diffuse lighting and shading simulations. As I tend to only really understand stuff when I can see it, I did a quick viewer in Processing a while ago to help make sure I was getting all the calculations correct.

Some of the visualisations and shapes started to look reasonably interesting, so I polished it up a bit and then did this WebGL version. As the basic infrastructure was already there, it seemed logical to add in some other shape types as well.

Spherical Harmonics are really interesting as they can be used to reduce what is usually an inordinately expensive integration of the diffuse lighting environment into a series of much faster dot products. This is done by approximating the diffuse lighting environment, given as a complex luminous distribution over an intergrating sphere, with a matrix of Spherical Harmonics coefficients.

Using this instead of a standard diffuse surface reflection model can make very detailed and realistic diffuse lighting effects possible in close to real-time. Robin Green explains it better and in much more detail in Spherical Harmonic Lighting: The Gritty Details.

Development

This viewer was probably most inspired by Paul Bourke’s page on Spherical Harmonics, as well as the many other supershapes viewers written by others. As a lot of my visualisations of building performance involve overlaying analysis data on coloured grids within a 3D model, I figured it was worth spending some time on the generation and animation of them as a way of developing and testing my own grid libraries.

Interesting Features

I guess the most interesting features of this app are as follows:

• Animating the shape transitions entirely on the GPU using interpolating shaders,
• Developing SVG-based data sliders that scale and interact reasonably well across desktop and mobile,
• Doing a fair bit of work with the parameters of each shape so that the random generation is a bit smarter,
• Getting my silhouette calculations to work fast enough in Javascript, and
• Implementing an app-wide Undo/Redo system.

© Dr. Andrew J. Marsh, 2014.