December 2014

Programming today exercises our symbolic reasoning. We write code—a sequence of symbols—in a text editor.

But when we explain ideas to colleagues, we don’t just speak words, we draw diagrams and gesture with our hands. We augment the symbolic channel with a spatial channel.

How can we communicate programs to a computer over a spatial channel?

Shadershop is an interface for programming GPU shaders in the mode of a direct manipulation image editor like Photoshop. It is an experiment in leveraging the programmer’s spatial reasoning the way that coding today leverages the programmer’s symbolic reasoning.


Part 1. Harmonics

We contrast symbolic and spatial reasoning, introduce shaders, introduce the interface, and add sine waves in a harmonic series.

Part 2. Noise

We build the noise function and sum it in a geometric series to create fractal noise.

Part 3. Higher Dimensions

We introduce the color map to view two-dimensional functions and build fractal noise in two dimensions.


Shadershop runs in the browser. It has been tested in Chrome 39.

Keyboard Commands

Source Code

Source code is hosted on Github.

Coming Soon

I’m in the process of recording two more videos and writing notes on the ideas in Shadershop and documentation of the development process.


Shadershop was developed within the Communications Design Group.

The presentation in the videos was initially prepared for the Future Programming Workshop 2014. Thanks to Jonathan Edwards, Richard Gabriel, and the participants of the workshop for feedback.

Thanks to Ryan Alexander for assistance with WebGL. Thanks to Glen Chiacchieri, Yoshiki Ohshima, Ken Perlin, and Bret Victor for ideas and encouragement.