Creative coding · Advanced
Drawing with light: a shader studio
A procedural poster drawn with coordinates and distance fields. Learn to construct and repeat shapes, introduce controlled variation and give animation a compositional purpose while retaining a static alternative.
Written by Akis Apostoliadis for Skillfolio · 4 written lessons · Self-paced
Checking purchase availability…
Course price: $69 USD, plus applicable tax. One payment for this course. Compare all-course package prices: $29/month or $299 lifetime.
What you’ll make
A responsive procedural poster with parameter controls, a tested shader and a reduced-motion composition.
Before you begin
JavaScript, vectors, basic algebra and a working WebGL or Three.js shader host.
Who it’s for
Creative developers ready to write fragment shaders rather than assemble effects.
- GLSL
- Distance fields
- Uniforms
- Procedural color
The complete curriculum
Preview the first lesson free. Purchase unlocks the remaining lessons, project and downloads.
Make the coordinate system visible
Visualize fragment coordinates and correct aspect ratio before building a composition.
18 min read · 60 min practice · Free preview
A shape is a distance decision
Build a shape from a distance field and separate geometry from edge treatment.
18 min read · 60 min practice · Included with purchase
Repeat a rule, then break it intentionally
Create deliberate repetition by separating cell identity from local cell coordinates.
18 min read · 75 min practice · Included with purchase
Give time a compositional purpose
Animate a shader through a small set of purposeful uniforms with a complete static state.
17 min read · 75 min practice · Included with purchase
See the work
Coordinates become composition. Completed instructor specimen using fictional teaching material; not a learner result.This course works towards: A responsive procedural poster with parameter controls, a tested shader and a reduced-motion composition.
Explore completed teaching examples and the decisions behind them. These are instructor-authored examples, not learner testimonials.
What’s included
- Original written lessons, worked examples and guided practice.
- A course project, review criteria and reference responses.
- Downloadable course materials for purchased lessons.
Explore the course before committing. Start with the free lesson, or compare other courses.