How I painted famous programs with their own source

说明与用途

使用纯 JavaScript 和 canvas 的网页演示，将源代码转换为油画，采用确定性随机数生成器和 CPU 渲染以提升性能。

问题

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.

来源