six parameters in search of an app

A few days ago I came across mention of the superformula, and was intrigued enough to look it up.  I started with that source of all knowledge, wikipedia, which had the formula, and better still, a reference to the original paper, published way back in … 2003.  I always assume these sort of formulae are much older, partly from having got hooked on this kind of thing from reading an 1872 edition of Curve Tracing back when I was an undergraduate.  One thing I'd like to do at some stage is implement a web version of much of Curve Tracing.

The superformula is

Depending on the values of its six parameters, it describes curves like:

It’s not totally clear from that wikipedia figure how the formula works.  The superformula is begging for an interactive exploration tool.  There are nice apps on the web, but I decided to write my own anyway, to continue practicing with Processing.  I then used processing.js to make a web version, and have put it, with a bit of explanation and some more examples, up on my main website.

As usual, the UI took way more time than the core code.  For a language specifically designed as an interactive software sketchbook, Processing has rubbish GUI widgets.  But it is easy to write interactive code.

Using processing.js is an experience, because it is somewhat stricter than Processing itself.  So code development becomes two stage.  I use the “write a line, test a line” style, because it’s much easier to spot immediately when something has gone wrong.  Here it’s “write a line, get it to work in Processing in its IDE, then get it to work with processing.js in a browser”, which is more challenging, especially as the processing.js version error messages are all basically: “nope”.

But still, I now have a much better understanding of the superformula.  And now I can make shapes like

just by fiddling with six parameters!  (Well, seven, it actually turns out.)

Fun!