<< back | GLSL shader version | p5 draft (not performant)

skymap: ASCII + GLSL fragment shader

prompt: "emphasize differences" / "make a clock"

My original idea was to make a world map colored by a shader that interpolated the color of the sky in that part of the world. Ended up just making a shifting color gradient.

The ASCII map is just plain monospace text in HTML, with a CSS filter that masks the WebGL fragment shader canvas using the inverse of the text. It feels elegant and it's also super performant on my machine compared to p5!

Tools used: aalib.js for image->ASCII conversion, xemantic/shader-web-background for GLSL fragment shading

Also referenced this helpful guide on CSS mix-blend-mode to use a text layer as a mask for a layer beneath.