bloom

Making bloom

Four measurements,
one iris.

I use R’s iris dataset to teach. Here, I wanted a botanical sketchbook for drawing the flowers behind those familiar numbers, with flowing stems and enough open space to look closely.

Follow one flower from its measurements to its final wash of colour. Take each step at your own pace.

The measurements

The iris dataset records 150 flowers: 50 each of setosa, versicolor and virginica. Edgar Anderson measured the length and width of their petals and sepals, in centimetres.

I keep those four measurements together. This is observation 84, an Iris versicolor.

Four values, passed to geometry(). Every drawing below uses this same observation, seed 2701 and the sketchbook’s stem style.

A line for the stem

I wanted the stem to flow. A Bézier curve joins the root to the flower; two control points gently pull the line into a bend.

The stem and blade-shaped leaves are drawing choices. A saved seed varies the stem’s bend, root position and leaf attachments, lengths, widths and angles. The dataset does not measure them.

The curve and its four points, from stemGeometry().

The flower takes shape

Each centimetre becomes 52 drawing units. A 5.1 cm petal starts out 265.2 units long, with a width that tapers towards its tip.

I repeat each measured pair three times: three petals, three sepals. These six shapes share four measurements.

geometry() sets the dimensions; envelope() shapes the edges.

From outline to folds

The flat shapes bend, cup and ripple in three dimensions. The whole flower then turns, leans or nods around its throat before projecting back onto the page. The wireframe follows that same view; nearer organs paint over farther ones.

A saved random seed gives each flower its particular variation. Use that seed again, and the same folds return. They are artistic choices, not measurements of the original specimen.

surface() folds; projected() brings it onto the page. The dot follows the same point as step 3.

The watercolor

Colours from The Grand Budapest Hotel palette blend across the surfaces. A small pigment field spreads farther lengthwise than sideways; fine grain and branching veins give the wash its texture.

I kept the flower recognizable, the stem long, and the surrounding space quiet. The measurements give it proportions; the drawing gives it its character.

pigment() and paintOrgan(), with colours from the Wes Anderson palette collection.

Colour from the cinema

The Wes Anderson palette package credits Wes Anderson Palettes, a collection of film stills and colour studies. These are three of those studies. Their swatches show the inspiration; bloom’s film presets use the package’s colour values, which can differ from the studies pictured here.

Two brothers in a blue and ochre train compartment, with pale green, blue, cream, rust and grey swatches below.
The Darjeeling Limited (2007)
Madame D in a pink hotel interior, with salmon, magenta, gold, pale pink and dark brown swatches below.
The Grand Budapest Hotel (2014)
Mr and Mrs Fox outside in golden light, with yellow, dusty red, dark brown, ochre and cream swatches below.
Fantastic Mr. Fox (2009)

Scene studies: Wes Anderson Palettes, as reproduced in this collection. Film stills belong to their respective rights holders.

In bloom, choose a film as a starting point, borrow individual colours from other films, or add a colour of your own. Changing the paper changes the ground beneath the wash. None of these colours comes from the iris measurements.

I wrote the drawing in JavaScript with Canvas 2D, and the page in HTML and CSS. It all runs in your browser. In the sketchbook, the drawing progresses on its own, from curves to colour. Here, Next lets you pause and look at each step.

Process inspiration: Nadieh Bremer’s Marble Butterflies, and its connection between data, variation and drawing.

The maths and code, a little closer

These illustrations share one recipe, observation 84 and seed 2701. Flower coordinates use a 1200 × 1600 drawing space: origin at top left, with y increasing downward. The marked point follows the same sepal before and after folding.


The stem curve

B(t) = (1−t)³P₀ + 3(1−t)²tP₁
+ 3(1−t)t²P₂ + t³P₃

Measured dimensions

length: l * scale,
width:  w * scale

The dataset supplies one petal pair and one sepal pair per observation, not six separately measured organs. For a print, bloom selects whole observations and arranges their flowers together. The four measured dimensions remain exact in the unfolded surfaces. Their apparent size changes as the flower turns. The saved seed determines stems, leaves, folds and orientation. Colours and pigment are drawing choices.

Projection

Within each surface, t runs from base to tip and v across its width. The flower rotates in three dimensions about its throat. After rotation, depth contributes to its position on the page:

X = pivotₓ + x′
Y = pivotᵧ + y′ + 0.56z′

Pigment

The seeded pigment grid diffuses for 22 steps, with different rates along its two axes:

b[i] = a[i]
  + .055 * (left + right - 2*a[i])
  + .19  * (up + down - 2*a[i]);

Earlier garden flowers

Flowers saved in the earlier garden keep their positions and paintings. Those with a growth curve enlarge around their roots over seven days. This is an artistic time curve, not a growth observation in the dataset. The new composed prints keep a fixed layout.

u = clamp(age in days ÷ 7, 0, 1)
Displayed scale = 0.35 + 0.65(3u² − 2u³)

The site runs as static files. IndexedDB stores recipes, images, positions and dates in this browser. Save print keeps a finished composition; Start over replaces only the current experiment. Clearing browser storage can remove saved artwork. A PNG captures the current view; importing one returns a picture, without its individual flower records.

The shared view uses yaw, pitch and roll. Mean surface depth determines which organs paint first; these are drawing choices. The functions below come directly from painting.js. print.js arranges three flowers on a shared scale and draws their construction. garden.js manages the current print, saved collection and earlier garden.