How I painted famous programs with their own source

Описание и применение

Демонстрация превращает исходный код в «масляные» картины, используя чистый JavaScript и canvas, с детерминированным генератором случайных чисел и оптимизацией рендеринга.

Задача

Create oil‑painting visualizations of source code without external libraries or server side processing.

Результат

The demo renders code as oil paintings in under half a second, preserving code structure and token types in visual form.

Рабочий процесс

• Tokenize source into kinds (keyword, function, type, string, name, number, operator, comment, bracket).
• Hash source and mode to a 32‑bit seed and use mulberry32 RNG for deterministic randomness.
• Assign each token an anchor point on the canvas based on line/column or composition layout.
• Generate a flow field for strokes and trace each stroke, building a ribbon with pressure‑based width and shading.
• Render five painting passes: underdrawing, underpainting, body colour, glazes, detail.
• Draw token characters along each stroke, rotating to follow the curve.
• Optimize canvas context with willReadFrequently:true to move rendering to CPU and reduce time from 12s to 0.5s.
• Provide a studio interface for users to paste code and see the resulting painting.

Доказательства

It's plain JavaScript and a canvas. No libraries, no server, no build step.

Источник

Instead the source is hashed into a 32-bit seed, and the seed drives a small generator called mulberry32

Источник

The seed comes from the code and the composition, but not the palette: const seed = hash(mode + '␟' + src);

Источник

The Painting class draws a few strokes per animation frame, so on the site you can watch it happen.

Источник

I never read pixels back in the painter. I only wanted the CPU path. The same painting went from about 12 seconds to about half a second.

Источник