Build GLSL shaders with natural language

Favorites

    History

      Explore

      • organic motion background
      • a kaledioscope effect with trippy patterns and colors
      • dreamscape with chromatic abberation effect where mouse is
      • dreamscape
      • isometric vector art grid
      • sun
      • smoke mist turbulent
      • a smooth rainbow gradient with colors gently flowing into eachother
      • soft rainbow gradients flowing into eachother gently
      • morphing madness
      • gentle rainbow gradient
      • swirling
      • displacement shader on image with distortion centered around the mouse. add chromatic aberration effect which grows stronger at the edges
      Explore more
      ```glsl
      precision mediump float;
      
      uniform float u_time;
      uniform vec2 u_mouse;
      uniform vec2 u_resolution;
      varying vec2 v_uv;
      
      #define PI 3.14159265359
      
      // Simplex 2D noise
      vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
      
      float snoise(vec2 v) {
        const vec4 C = vec4(0.211324865405187, 0.366025403784439,
                 -0.577350269189626, 0.024390243902439);
        vec2 i  = floor(v + dot(v, C.yy));
        vec2 x0 = v -   i + dot(i, C.xx);
        vec2 i1;
        i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
        vec4 x12 = x0.xyxy + C.xxzz;
        x12.xy -= i1;
        i = mod(i, 289.0);
        vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
        + i.x + vec3(0.0, i1.x, 1.0 ));
        vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
          dot(x12.zw,x12.zw)), 0.0);
        m = m*m ;
        m = m*m ;
        vec3 x = 2.0 * fract(p * C.www) - 1.0;
        vec3 h = abs(x) - 0.5;
        vec3 ox = floor(x + 0.5);
        vec3 a0 = x - ox;
        m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
        vec3 g;
        g.x  = a0.x  * x0.x  + h.x  * x0.y;
        g.yz = a0.yz * x12.xz + h.yz * x12.yw;
        return 130.0 * dot(m, g);
      }
      
      // FBM (Fractal Brownian Motion)
      float fbm(vec2 p, int octaves) {
          float value = 0.0;
          float amplitude = 0.5;
          float frequency = 1.0;
          
          for (int i = 0; i < 8; i++) {
              if (i >= octaves) break;
              value += amplitude * snoise(p * frequency);
              amplitude *= 0.5;
              frequency *= 2.0;
          }
          
          return value;
      }
      
      // Smoothstep function for organic transitions
      float organicStep(float edge0, float edge1, float x) {
          float t = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
          return t * t * (3.0 - 2.0 * t);
      }
      
      void main() {
          // Adjust UV for aspect ratio
          vec2 uv = v_uv;
          float aspect = u_resolution.x / u_resolution.y;
          uv.x *= aspect;
          
          // Mouse influence
          vec2 mousePos = u_mouse;
          mousePos.x *= aspect;
          float mouseDistance = distance(uv, mousePos);
          float mouseInfluence = 1.0 - smoothstep(0.0, 0.5, mouseDistance);
          
          // Time variables for animation
          float slowTime = u_time * 0.2;
          float mediumTime = u_time * 0.5;
          
          // Base noise layers
          vec2 baseOffset = vec2(sin(slowTime * 0.3), cos(slowTime * 0.2)) * 0.3;
          
          // Layer 1: Slow moving background waves
          float layer1 = fbm(uv * 0.5 + baseOffset, 4);
          
          // Layer 2: Medium frequency details
          float layer2 = fbm(uv * 1.5 + vec2(mediumTime * 0.1, 0.0), 3);
          
          // Layer 3: Fine details with mouse influence
          float mouseScale = 1.0 + mouseInfluence * 0.5;
          float layer3 = fbm(uv * 3.0 * mouseScale + vec2(0.0, mediumTime * 0.2), 2);
          
          // Combine layers with different weights
          float combinedNoise = layer1 * 0.5 + layer2 * 0.3 + layer3 * 0.2;
          
          // Add some swirling motion based on mouse
          float swirl = sin(mouseDistance * 10.0 - mediumTime) * 0.05 * mouseInfluence;
          combinedNoise += swirl;
          
          // Map to green color palette
          vec3 darkGreen = vec3(0.05, 0.2, 0.05);
          vec3 mediumGreen = vec3(0.1, 0.4, 0.1);
          vec3 lightGreen = vec3(0.2, 0.6, 0.2);
          vec3 brightGreen = vec3(0.4, 0.8, 0.3);
          
          // Create organic color transitions
          float t = (combinedNoise + 1.0) * 0.5; // Map from [-1,1] to [0,1]
          
          vec3 color;
          if (t < 0.33) {
              float nt = organicStep(0.0, 0.33, t) * 3.0;
              color = mix(darkGreen, mediumGreen, nt);
          } else if (t < 0.66) {
              float nt = organicStep(0.33, 0.66, t) * 3.0 - 1.0;
              color = mix(mediumGreen, lightGreen, nt);
          } else {
              float nt = organicStep(0.66, 1.0, t) * 3.0 - 2.0;
              color = mix(lightGreen, brightGreen, nt);
          }
          
          // Add subtle pulsing effect
          float pulse = 0.05 * sin(u_time * 0.5);
          color *= 1.0 + pulse;
          
          // Add subtle vignette
          float vignette = 1.0 - smoothstep(0.5, 1.5, length(v_uv - 0.5) * 2.0);
          color *= vignette * 1.2;
          
          // Enhance colors near mouse
          color = mix(color, color * 1.2, mouseInfluence * 0.5);
          
          gl_FragColor = vec4(color, 1.0);
          
          #include <colorspace_fragment>
      }
      ```