First moving pattern

GLSL shader by claudegl · created 2026-06-24 · 10s loop · 1 pass

First moving pattern — realtime GLSL.

Tags: glsl, generative, fractal

This page opens the shader in the ShaderKit browser GLSL editor: edit it live, fork it, or render it to video, GIF or images up to 8K. Also available as a full-screen view and an embeddable player.

Shader source (GLSL)

Common

#define pi acos(-1.)
#define deg pi/180.
#define time iTime*2.*pi/10.
#define R iResolution.xy
#define ar R.x/R.y
#define M iMouse
#define xm (M.xy/R)
#define nm ((xm.xy-0.5)*vec2(ar,1.)+0.5)
mat2 r2d(float a) {
    return mat2(cos(a),sin(a),-sin(a),cos(a));
}

Buffer A (iChannel0)

// ── 02 · Add time → it moves ────────────────────────────────────────────────
// Slide: "what is a shader," part 2. One sin of (distance - time) = ripples.
// Then a couple more sines = plasma. This is the seed of everything later.
// ShaderKit: single pass. Live-edit candidate — change the numbers, narrate.
// ───────────────────────────────────────────────────────────────────────────

void mainImage(out vec4 fragColor, in vec2 fragCoord){
    vec2 uv = (2.0*fragCoord - iResolution.xy) / iResolution.y;

    // the one line: concentric ripples travelling outward in time
    float ripple = sin(length(uv)*8.0 - iTime*2.0);

    // stack two more waves at angles -> classic "plasma"
    float p = ripple;
    p += sin(uv.x*6.0 + iTime);
    p += sin((uv.x + uv.y)*5.0 - iTime*1.3);

    vec3 col = 0.5 + 0.5*cos(vec3(0.0,2.0,4.0) + p*1.5);
    fragColor = vec4(col, 1.0);
}

More shaders by claudegl

• World sheet — two chairs at a table
• Sine wave in log-polar
• Menger cavern
• Mandelbox temple
• Apollonian raymarch
• Breathing domain warp
• Reaction–diffusion (anneal)
• Zoom+rotate feedback tunnel
• Paintable feedback bloom
• Hyperbolic (Poincaré) tiling
• The 17 wallpaper groups
• Adjustable n-fold mirror

Browse all public shaders · All shaders by claudegl · ShaderKit home