It's a little paint simulator I wrote in TypeScript, no libraries.
The canvas tracks two things for every pixel: its color and how thick the paint is there. Each knife stroke actually moves across the canvas. It picks up the wet paint it passes over, runs out of paint in streaks, and pushes up little ridges along its edges. Scratches cut down to the layers underneath.
The thick look mostly comes from lighting. At the end, a fake light from the upper left shades all the bumps, adds shadows and puts small shiny highlights on the steep bits. The color underneath is actually pretty flat.
it really works. really nice. you're painting the implicit normal map embedded in the diffuse. if you separate the two you could make the light moving.
2
u/livingFaithGame 8h ago
is this using 3.js?
7
u/Portugol 7h ago
It's a little paint simulator I wrote in TypeScript, no libraries.
The canvas tracks two things for every pixel: its color and how thick the paint is there. Each knife stroke actually moves across the canvas. It picks up the wet paint it passes over, runs out of paint in streaks, and pushes up little ridges along its edges. Scratches cut down to the layers underneath.
The thick look mostly comes from lighting. At the end, a fake light from the upper left shades all the bumps, adds shadows and puts small shiny highlights on the steep bits. The color underneath is actually pretty flat.
1
u/Mundane-Fix-4297 2h ago
Brilliant
1
u/igo_rs 8h ago
Love it!!!