Supershapes

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.

Background

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:

• http://mathworld.wolfram.com/SphericalHarmonic.html
• http://en.wikipedia.org/wiki/Spherical_harmonics

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:

• http://paulbourke.net/geometry/supershape/
• http://en.wikipedia.org/wiki/Superformula

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:

• http://mathworld.wolfram.com/Superellipsoid.html
• http://en.wikipedia.org/wiki/Superellipsoid

Super Toroid

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

For more information, see the following resource:

• http://en.wikipedia.org/wiki/Supertoroid

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:

• http://mathworld.wolfram.com/EllipticTorus.html

---

Change Log

0.0.4 2019-09-16

• Added the ability to cut a cross-section of the current shape, and to project its outer envelope flat onto any plane. Someone asked for it and it sounded like an interesting little project, so here it is. You can rotate the plane using polar angles and offset it in that direction from the shape centre using the controls in the new SECTION/PROJECTION PLANE popover in the top-right toolbar.

• Also, I’ve learnt a bit more about shaders since I originally did this app, so took the opportunity to refine some aspects of the one’s used here. Now there are a couple less and they’re a bit faster and more forgiving on older/slower hardware.

• The edge shading effect seems to work pretty well, so I have now removed the line-based silhouette to further speed up rendering and make it look the same in all browsers.

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 for the lack of a line-based silhouette.

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.

---

Comments