Inspiration

I recently came upon a gem of a video on YouTube from the Numberphile channel. If you don’t follow Numberphile then shame on you, it’s a wonderful series of videos on all matters mathematic and numerical. There’s a sibling channel called Computerphile that is equally as good but focuses on all matters computery. Now you may be wondering if that is a real word but it is! Isn’t it amazing how all kinds of terms ultimately become legitimized via sufficient adoption. Computery can refer things of or pertaining to computers or it can sometimes refer to the quality of a person too. Anyway, I digress.

The subject of the inspirational video was that of irrational numbers and specifically how some of them are more (or less) irrational than others. This was illustrated via a discussion of how seeds are packed into the head of a flower. The video contained various illustrations and animations that were very neat and enlightening and after seeing them I decided that I wanted to write some code to render those animations myself. And that, dear reader, is the point of this post.

A Seed Renderer

Here’s a little JavaScript app that will render seeds according to various parameters. The basic parameters are presented just below the image and are 1) the width (in pixels) of a seed, 2) the fraction of a clockwise turn at which to render the next seed (this can be entered as a fraction or a decimal), and 3) an outward radial spacing factor which controls how much each seed is moved out away from the origin per turn (a value of 1 will ensure that after one full turn around the origin the next seed will be placed one seed width further out). Some initial values are plugged in but you can change them and then click the ‘Draw Flower’ button.

Just below the basic parameters is an input that allows you to dial in a delta to the rotation-factor and two buttons that will then re-render the flower after having incremented or decremented the rotation-factor by the delta amount. This allows you to see how the layout of the seeds changes as the rotation-factor changes. Try it.

Animation

Here’s another JavaScript app that will animate the changes in the seed rendering pattern as the rotation-factor changes. Just dial in a starting rotation-factor, a delta for the factor between each render and a delay (the number of milliseconds to wait between renders). The ‘Start’ button will start the animation. I bet you can guess what the ‘Stop’ button does.