Skip to content
Noor Haddad
Work

Case study 03 / 06

Field: lattice

Shader playground

Uniforms

A shader playground for students who have never written one

Client
Kade School of Interaction, Rotterdam
Year
2025
Role
Product design, creative code, curriculum design
Team
  • Noor Haddad — design & front-end
  • Bas Verhoef — course lead
  • Mei Takahashi — WebGL engineering
  • 140 first-year students — testing
The Uniforms editor open on a laptop against a bright blue ground: lesson list on the left, shader code with a frequency slider in use, and blue and white stripes in the preview.

The brief

Light & Number teaches 140 first-year students at Kade to draw with maths. For three years its shader week was the one students dreaded. They typed into a generic online editor, missed one decimal point, and the preview went black. The compiler log then pointed at line 8 for a mistake on line 4, because the editor’s hidden header shifted every line number.

Bas Verhoef, who leads the course, asked for a tool that gets every student to a working shader inside one lesson. The constraints were blunt: it had to run on the school’s Chromebooks, fit a 90-minute lesson with 24 students to one teacher, and need nothing installed beyond the school account.

Decisions

  1. 01

    Never a black screen

    The preview keeps rendering the last shader that compiled while you type. A mistake doesn’t take the picture away; it puts a coral mark on the line and one sentence under it. I rewrote the 30 most common compiler messages from two years of student logs, so “wrong operand types” becomes “GLSL wants decimals here: write 24.0 instead of 24”.

  2. 02

    Every number is a slider

    Any number in the code can be dragged. Students find out what 24.0 does by moving it, then read why. Dragging writes the new value back into the code, so the sketch is always the text, never hidden state that disappears on reload.

  3. 03

    Lessons are remixes

    Each of the eight lessons opens on a sketch that already works, with one thing missing and marked. Nobody starts from an empty file, and the first change anyone makes is a single number.

  4. 04

    Uniforms you can watch

    The panel the tool is named after shows u_time, u_mouse and u_resolution as live values next to the preview. The three inputs every shader gets stop being magic words and become numbers you can see changing.

Outcome

Over two cohorts, completion of the shader exercises went from 41% to 87%, and the median time to a first working shader dropped from 26 minutes to 6. Students saved 2,300 sketches in the first term, most of them remixes of someone else’s.

Mei rebuilt the compile step so a full recompile takes under 4 ms on the slowest Chromebook, which is what makes dragging a number feel like touching the picture. Three partner schools now teach with Uniforms, and the error rewrites are an open list that teachers keep adding to.

Live demo

Break it on purpose

Try it

The Uniforms playground: shader code on the left, blue and white stripes in the preview, the live uniform values and three sliders for frequency, speed and softness.
Fig. 01The playground itself. Pick a sketch, drag its numbers or edit the code, then press Make a mistake: the preview keeps the last working frame and the error is explained at its line.
Uniforms: The same mistake in Uniforms: line 4 is marked in coral with a card saying GLSL wants decimals here, while the preview still shows the last working stripes.
Generic editor: The editor the course used before: dark theme, a black preview and a console of five red compiler errors pointing at lines 8, 9 and 12.
Generic editorUniforms
Fig. 02One mistake, a whole number in float maths, before and after. The old editor reported five errors starting at line 8; Uniforms shows one, at line 4, and keeps the picture.

Writing the error messages

Mei and I collected 11,000 compile errors from two years of the old editor’s logs and grouped them by what the student had actually done wrong. Thirty patterns covered 92% of them. Each rewrite follows the same shape: what’s wrong, on which line, and the one thing to try.

Only the first error is ever shown. In student code, the second and third are almost always echoes of the first, and a list of five red lines reads as “you are bad at this” rather than “add .0 here”.

The full Uniforms editor at Lesson 4: a lesson list, code where the number 31.5 is being dragged on a ruler, the striped preview, the uniforms panel, a task card and a strip of earlier saves.
Fig. 03Lesson 4 in the editor. Dragging the frequency rewrites the number in the code as the preview follows; every save lands in the history strip.
A printable lesson sheet titled Stripes are just sin(), with a sine wave diagram above the stripes it produces, the starter code with one marked gap and four steps.
The teacher view on a tablet: 21 of 24 students have a working shader, three need help with named errors, and a chart of the most common mistakes this lesson.
Fig. 04Left: every lesson starts from a working sketch with one marked gap. Right: the teacher view groups the class by what people are stuck on, so one explanation reaches seven students at once. (figures 4 and 5)

“The first year we used it, nobody asked me why their screen was black. They asked why their stripes were wobbling. That’s a much better question to spend a lesson on.”

Bas VerhoefCourse lead, Light & Number
A gallery of twelve student sketches: diagonal stripes, a foggy skyline, coral ripples, a bent checkerboard, a sunset, a moiré, dots, a pulsing circle, city lights at night, zebra waves, plaid and an orbiting dot.
Fig. 06Twelve of the 2,300 sketches saved in the first term, rendered from the students’ own code.
finished the shader exercises, up from 41%
87%
median to a first working shader, down from 26
6 min
sketches saved in the first term
2,300
partner schools now teaching with it
3