Showcase 05 · Neural network
Learns live
A small neural network learns to draw the Moralo wordmark right in your browser: from random weights, with no server and no pretrained model. Step by step, noise turns into a sharp picture. Paint on the stage and the network learns your strokes straight away.
The live demo needs JavaScript and WebGL 2 with floating-point textures. The picture shows what the network draws after a few seconds of training; the explanation below reads fine without it.
- Parameters
- –
- Training steps/s
- –
- Loss
- –
- Frames/s
- –
- Training
- WebGL 2 · GPU
How it works
The network is a function: it takes a position (x, y) and answers with three values – how much ink lies there, where on the colour gradient the point sits and how strongly it glows. Three hidden layers of 16, 32 or 64 neurons each, a few thousand weights in total. In every training step it draws thousands of random points from the target image, compares its answer with the target (mean squared error) and nudges every weight a little in the direction that shrinks the error.
The forward pass, the backward pass (backpropagation) and the Adam optimiser are written by hand here and run as matrix operations in fragment shaders on the graphics card, several steps per frame. The graphics card then evaluates the whole network for every screen pixel. There is no pretrained model and no model file: what you see is being made right now.
The comparison shows why the choice of activation matters. A plain ReLU network mostly learns soft, coarse shapes and stays blurry. With Fourier features – the position is first translated into many sine waves of different frequencies – edges appear. SIREN uses the sine as the activation in every layer and draws the fine edges of the letters sharp the fastest. The colours come from the design tokens and follow the theme without the network having to learn again.