Sunday 17 January 2021

Flourish is a visual toy app that draws harmonographs, sinuous curves simulating a multi-pendulum trace:

Front page of Flourish, showing thumbnails of harmonographs

Each harmonograph is determined by a few dozen parameter values, which are chosen randomly. The number of parameters depends on the number of pendulums, which defaults to 3.

Click a thumbnail to see a larger version. The large-image pages have thumbnails of “adjacent” images. Each harmonograph is determined by a few dozen parameter values. For each parameter, four nearby values are substituted, giving four thumbnails for each parameter. Clicking an adjacent thumbnail continues your exploration of the parameter space:

A large harmonograph, with adjacent thumbnails

The settings dialog lets you adjust the number of pendulums (which determines the number of parameters) and the kinds of symmetry you are interested in.

I started this because I wanted to understand how the parameters affected the outcome, but I was also interested to give it a purely visual design. As an engineer, it was tempting to present the values of the parameters quantitatively, but I like the simplicity of just clicking curves you like.

I repeated a trick I’ve used in other mathy visual toys: when you download a PNG file of an image, the parameter values are stored in a data island in the file. You can re-upload the image, and Flourish will extract the parameters and put you back into the parameter-space exploration at that point.

This is one of those side projects that let me use different sorts of things than I usually do: numpy, SVG, sass, Docker, and so on. I had more ideas for things to add (there is color in the code but not the UI). Maybe someday I will build them.

BTW, I am happy that my first post of 2021 is called “Flourish.” I hope it is a harbinger of things to come.


Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.