Web browsers can do some surprising things with graphics. But the techniques behind those jaw-dropping demos often remain mysterious even to experienced developers. A recent CodePen podcast episode aimed to change that.
Episode 376 featured Ilithya, a creative developer and shader artist, walking through her workflow and favorite pens. The conversation touched on everything from getting started with shaders to handling the fear of math that stops many developers from trying.
What the Episode Covers
- Ilithya's background in shaders and how she got started
- Where shaders fit into typical web development workflows
- Live walkthroughs of her "roar typo" and "3D polaroid" pens
- Collaboration strategies when building shader art with others
- Mental models like "thinking in layers" for complex effects
- Why the fear of coding and math shouldn't hold you back
- The minimum code needed to start experimenting today
The episode runs about 37 minutes with natural stopping points if you want to jump to specific topics.
Why Shaders Deserve Attention
Shaders occupy a strange space in web development. They're incredibly powerful yet underutilized by most developers. The average JavaScript developer thinks in logic and DOM manipulation—shaders require thinking in coordinates, color values, and mathematical transformations applied across millions of pixels simultaneously.
The mental shift matters. When you write JavaScript, you issue commands. When you write a fragment shader, you describe what each pixel should look like given its position and time. The GPU handles the rest, often processing thousands of pixels in parallel. This creates possibilities that JavaScript simply cannot match for visual work.
Ilithya's work demonstrates the range. Her "roar typo" pen manipulates letterforms through displacement effects—transforming static text into animated, organic shapes. Her "3D polaroid" creates depth and lighting effects entirely through shader math, no 3D library required.
The collaboration angle stood out. Working on shader projects with others requires different communication than typical development. You're often describing visual goals rather than functional requirements. Ilithya mentioned collaborating with Eliza Struthers-Jobin, highlighting how the creative coding community shares techniques and inspires each other's work.
Our Analysis
Most Android users won't write shaders themselves, but understanding the concept matters more than you might think. Modern mobile browsers support WebGL, meaning shader-based effects run on your phone. Games, visualization tools, and increasingly sophisticated web apps use these techniques.
The accessibility angle is worth noting. Ilithya emphasized starting small—don't try to build a photorealistic water simulation on day one. The same principle applies to learning any new technical skill. Browser-based shader playgrounds like CodePen lower the barrier by letting you experiment without build tools or environment setup.
The fear-of-math concern deserves particular attention. Shader development does involve mathematics, but visual artists sometimes pick it up faster than traditional programmers. If you can think in terms of "this should be brighter near the center and fade to darker at the edges," you're already thinking like a shader developer. The math formalizes those intuitions.
Watch for shader techniques bleeding into more mainstream web development. CSS has started incorporating GPU-accelerated properties. Libraries abstract shader complexity into more approachable APIs. The underlying concepts become more relevant even if the syntax stays hidden.
A Practical Starting Point
Say you want to experiment with shaders on your Android device. You can browse CodePen directly in Chrome or Firefox, view shader-based pens, and fork them to experiment. Change a color value, hit save, and see the result immediately. This trial-and-error approach works well for building intuition without requiring any local setup.
The minimum viable shader starts with a function that takes pixel coordinates and returns a color. From there, adding time-based animation, user input responsiveness, or texture sampling creates increasingly complex behavior. Ilithya's recommendation: start with an existing pen you find visually interesting and modify one thing at a time until you understand why it works.
What to Watch Next
The shader learning curve is real but manageable. Episode 376 of the CodePen podcast provides an accessible entry point for curious developers. Beyond that, search for GLSL tutorials on YouTube—Alex Trost has created shader walkthroughs mentioned in the episode. Explore CodePen's trending shaders to see what's possible.
The web graphics landscape keeps advancing. WebGPU promises even more capabilities. Understanding shaders now positions you to take advantage as these technologies mature and become more widely supported.
Key takeaways
- Shader programming requires different mental models than standard web development
- CodePen provides accessible sandbox environments for experimentation
- Start with existing examples and modify incrementally to learn
- Visual thinking matters as much as mathematical precision
- Modern browsers already support shader-based experiences on Android
Frequently asked questions
What programming language do web shaders use?
WebGL shaders use GLSL (OpenGL Shading Language), which has C-like syntax. WebGPU uses WGSL, a newer language designed specifically for the web.
Do I need to be a mathematician to write shaders?
No. Understanding basic algebra and geometry helps, but visual intuition works alongside formal math. Many developers learn the math as needed rather than studying it upfront.
Can I run shaders on Android phones?
Yes. Both Chrome and Firefox on Android support WebGL and WebGPU. Many CodePen shader pens work on mobile devices.
How long does it take to learn shader programming?
It varies widely. Basic understanding might come in days; producing sophisticated visual work takes months of practice. Starting with simple modifications to existing shaders accelerates learning.
Where can I find shader tutorials for beginners?
CodePen hosts many searchable examples. YouTube contains GLSL walkthroughs for various skill levels. The Shadertoy website offers a different perspective on browser-based shader art.