Screenshot of Supershapes app

Figure 1: A screenshot of the SuperShapes app running inside a web browser.

Launch app in new tab...

The quickest way to get into this app is to click the Randomize button (image of 2 Dice), located in the top-left of the Shape Parameters panel, a few times to generate some random shapes. As not all the shape equations are stable for all values across their parameter range, I’ve done a bit of work to limit the randomisation to reasonably valid values for each shape type.

You can then use the menus along the top to change the Shape Type and Surface Color mode, or you can use the shortcut keys indicated in the menus if you have a keyboard attached.

You can adjust any of the adjacent sliders to interact with the shape in real-time. The Shape Parameter sliders are specific to each shape type whereas the Shell Parameters are common to all and allow you to stretch and offset the generated surface into shell-like forms. The shape regeneration should be fast enough on most modern computers and tablets, but you can turn off real-time updating if you need to using the Slider settings menu. Also, not all the sliders are active for all shape equations, but you should be able to easily see when they are enabled/disabled.


This is basically a HTML5 version of one of my Java applets. It grew out of some experiments I was doing using spherical harmonics as a way of modeling real-time diffuse lighting in 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. In the end I included both the super-formula and spherical harmonics generators and added a couple of new parametric shapes. I’ve also added new vertex colouring options, a few more examples, an undo/redo system to keep track of parameter changes and more shell control parameters.

This viewer was probably mostly inspired by Paul Bourke’s web pages on Spherical Harmonics and the Superformula, as well as the many other super-shapes 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 a bit of 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:

  • 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 shape silhouette calculations to work fast enough in Javascript, and

  • Implementing an app-wide Undo/Redo system.

Shape Types

The following is a brief description of each of the currently implemented shape types as well as some useful references:

Spherical Harmonics

Spherical harmonics refer to a series of equations for generating frequency modulations on the surface of a sphere. Whereas cartesian harmonics are a function of the X and Y dimensions, spherical harmonics are a function of latitudinal and longitudinal angles. In the particular use case here, the arbitrary scalar value mapped over the spherical surface is used to displace the vertices of the sphere to generate interesting 3D forms.

For more information, see the following resources:

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 integrating 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.

Superformula Shapes

Super Shapes are forms generated using Johan Gielis’ generalisation of the superellipse formula, often termed the superformula. This was proposed in 2003 as a framework for simulating natural forms and is basically an equation with four input parameters that generate a range of natural-looking polygons. Two superformula (hence eight parameters) are used to generate complex natural-looking 3D forms. By modulating the radius and/or the Z coordinates, it can also be used to create interesting shells, spirals and helixes.

For more information, see the following resources:

Super Ellipsoid

A super ellipsoid is simply the product of two superellipse equations in two cartesian planes that are normal to each other. The result is a 3D form than can range through cubic, octahedral, pyramidal, conical to asymptotically concave.

For more information, see the following resources:

Super Toroid

A super toroid is a doughnut-like surface of revolution created by extruding a superellipse cross-section around the path of another superellipse.

For more information, see the following resource:

Elliptic Torus

An elliptic torus is another doughnut-like surface of revolution created by revolving a displaced ellipse around a circular path. The parameters control the degree of displacement and its eccentricity.

For more information, see the following resource:

Change Log

0.0.3 2017-09-15

  • Added new Export Geometry... menu item in the Settings Data menu. This allows you to export the current shape as a .OBJ, .STL or .PLY file. The .OBJ and .PLY formats can both include vertex colours whereas .STL does not support them.

  • As Chrome no longer supports WebGL line widths on any platform (or ANGLE-based browsers), additional edge shading has been added to the shape to compensate.

0.0.2 2014-09-15

  • Added new Slider Settings menu in top-right for adjusting slider input.

    • Added ‘Normal Increments’ and ‘Finer Increments’ to control slider resolution.

    • Added an option to toggle ‘Real-Time Update’ when any of the sliders are dragged.

    • Added a toggle for the display of buttons for each of these options.

  • Added Settings Data menu with options to import, view and edit application settings.

  • Added ability to store and reset current settings as the default startup configuration.

0.0.1 2014-07-18

  • Initial release.


Sam Curry 04 Dec, 2018 - 08:21

SuperShapes export button not working any longer :-(

Dr. Andrew Marsh 06 Dec, 2018 - 06:25

Hi Sam,

Oops, sorry about that. It was referencing an old version of the geometry exporter but I've now fixed it.

However, when I did a standard page refresh to reload the latest in my own browser, I noticed that it still didn't update properly and was still using the version in it's cache.

To solve this I just cleared the browser cache and it worked. This is pretty easy to do in Chome as it has an option in the main menu, but there are good instructions on how to do this in every major browser available at


Click here to comment on this page.