learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Lesson 6 of 10 · Shader patterns

The spiral

The vortex. Shapes falling to center.

In the last lesson you used the angle to make slices. Now you add the distance from the center, and the slices twist. They become a spiral.

Here is the trick: where before you had sin(ang * 3.), now you have sin(ang * 3. + dist * 6.). The distance pushes the angular pattern and curls it. More distance = more push = more twist.

Angle + distance. The curve that never ends.

ang + distThe angle gives you the direction. The distance tells you how far from the center. When you add them inside a sin(), the radial stripes curve. It is the same trick you used with + T to rotate, but now instead of time, it is space doing the twisting.
TryChange 6. to 12., tighter spiral. To 2., loose spiral. Add - T at the end to make it spin. Hint: sin(ang * 3. + dist * 6. - T)
Freebie

SPECTRUM

Find // replace this in the code and swap that line for this:
col = iri(v * 0.6 + dist * 0.4 + T * 0.1) * (.5 + geo * .5);

Paste it. The spiral catches every color in the spectrum.

The code

[object Object]
close