Frost shader: ice crystals growing on glass
Frost growing across a cold window from one corner, branching into feathers of ice, with the warm lamps of a room glowing behind the glass. Drawn live in your browser by a WebGPU program.
Drawn live on your graphics card as you watch. This program was written by hand for this site; the Agent did not make it.
The request
“A cold night, seen through a window pane. Frost grows across the window from the lower corner, branching into fine feathers of ice that catch the light, while the warm lamps of the room behind glow soft and blurred through the glass.”
How it is drawn
Frost is ice crystallising onto cold glass. Ice grows fastest along its crystal’s six-fold axes, and the heat freezing water gives off slows the ice behind the front, so the front breaks into branches with side branches: the feathers on a window on a cold morning.
The program grows them with Kobayashi’s phase-field model of solidification, on a grid of about one cell per pixel that the host keeps between frames. Each cell holds a phase, glass or ice, and the heat the ice has added. Each step the phase moves towards ice where the glass is cold enough, faster along each crystal’s own six directions; the heat spreads and slows the growth, and a little noise sets off the side branches. The glass is coldest at the lower corner and along the frame, so the frost starts there and slows as it crosses the pane.
Each pixel then looks through the ice it finds there. Thin ice bends the room’s light at its edges, older and thicker ice scatters it to a soft glow, and its small facets each catch a lamp or not as the view drifts. The bare glass is misted, except round the ice, where its heat has cleared it. In the last seconds the frost melts back, newest ice first, to how the film began.
What runs it
It is a picture program: a JavaScript module that draws the picture with WebGPU (external website, opens in a new tab), the same kind of program the editor’s Picture Program effect runs. It plays here the way the editor plays one, in the picture sandbox (opens in a new tab): a page on another origin with no access to this page, your storage or the network, told which frame to draw.
It keeps no clock and uses no chance, so a frame comes out the same however it is reached, and its last frame leads back into its first. On a device too slow for it, its still stays in place; where there is no WebGPU, the stage says so.
Make your own
In the editor, a Shader, Simulation or Picture Program effect takes a program you write or paste (opens in a new tab), checks it and tries it on your computer before it enters the project. The settings a program declares become properties you keyframe on the timeline; this piece declares none, but yours can.
The Agent (opens in a new tab) can also write a program from a request like the one above, as a draft you review. That belongs to the Agent subscription, which opens soon; writing your own is free.