Miscible

A drop of liquid that takes on the colour of a flavour: an unreleased proof of concept for a whisky client’s taste-finder, made at Build in Amsterdam.

The whisky flavour wheel is a fixed vocabulary of ten terms: fruity, floral, grassy, cereal, feinty, peaty, nutty, woody, spicy, winey. Usually it is a diagram of labelled segments. Here it is a single drop whose colour and motion shift as you move through the terms, so a taste reads as a substance rather than a category. The drop fills in as you answer the taste-profile form, and the finished graphic was meant to travel to a shareable wishlist, a generated social image and the newsletter.

Each term carries a colour, and selecting one drives three colour uniforms in the shader. Every parameter is interpolated by a spring rather than a duration, so changes have weight and never land on a fixed beat.

A picture of a liquid

The first version fills the frame with gradient noise at two scales, drifting in a slow circular flow, with the flavour colours blended in. Depth is composited rather than simulated: an SVG mask cuts the drop out of the noise, with a reflection overlay, a separate shadow canvas and a vignette. The shader runs through a small library I wrote to bind a fragment shader to a canvas and skip the rest of WebGL (prototype, code).

Every highlight and edge is decided in advance, so the drop cannot be seen from an angle nobody planned, and two drops cannot touch.

A liquid

The second version is a real 3D scene: an isosurface built with marching cubes at a resolution of eighty, with a custom shader for inset shadow, edge darkening and light held inside a translucent volume.

What it gains is behaviour. Metaballs merge as they approach and separate with surface tension, which is what makes a liquid read as one. Isolation, strength, scale and resolution are exposed live, so the material is tuned by eye. The first version runs anywhere; the second needs a GPU.