This page looks best with JavaScript enabled

Lets Make a Hypno-Disc Shader - WebGL in Shadertoy

 ·   ·  ☕ 1 min read

Time for something a bit different. In this video we’ll delve into WebGL using a tool called ShaderToy, a great way to learn and experiment with shaders all from inside your web browser! As a way to get started and for both of us to get our footing we’ll start with something relatively simple: a basic spiral inspired by the classic hypnotic discs from those classic films and magicians.

The shader itself is relatively easy and uses some simple functions to calculate the position of points directly from the center of the screen. Then those points are used to calculate the angle from the center. Combined these two values provide enough information to make a complete spiral shape.

If you want to play with the shader we made in this video check out this link:

Some other epic examples (samples at the end of the video):
Alien Corridor:
Traced Minkowski Tube:

For even more information about the raymarching example check out: for an in depth explanation of how the formulas work.

Sam Wronski
Sam Wronski
Maker of things and professional software engineer. Lets make something awesome together!