Embedding Shadertoy shaders in web pages

Did you know you can run custom GPU pixel shaders from javascript inside a web browser?  I am super delighted by that fact.

Shadertoy (https://www.shadertoy.com/) is basically Youtube for GLSL shaders.

You can embed a Shadertoy shader in a webpage using this little snippet:

<iframe src="https://www.shadertoy.com/embed/4td3Wn" style="height: 500px; width: 500px;"></iframe>

Just change "4td3Wn" in the snippet to the code for your shader.  The code is the bit after "/view/" in the URL of the shader you want. You'll also need to set your shader to "public" or "public + api".


Here's an example.  You can see the code at https://www.shadertoy.com/view/4td3Wn - but you might want to mute your speakers first.  I can't find a way to disable the sound on the video that the shader uses as a data source.  Also note that this shader in chrome doesn't work if you have two copies open (this embedded version and the shadertoy site, for example).