Medium EffectsAnimated

Pulsing staggered dots with scanlines

A picture built in steps: zoom in and out, then draw staggered dots, then color it, then finish with scanlines. Every step is listed below with its exact numbers.

Play this challenge All challenges

The target picture for the shader challenge "Pulsing staggered dots with scanlines" — Recreate this picture. You pass at a 99% match, then try to write it in fewer characters than the par.

How this challenge works

You write a fragment shader that draws the picture above, live in your browser. A match bar shows how close you are, and the score combines accuracy, code size (the par is 393 characters in Unity (Built-in)) and GPU speed. Work in HLSL, GLSL, WGSL, Metal or Godot and export the result when you are done.

The numbers you need

Space: p = (uv - 0.5) * float2(aspect, 1.0)
Step 1: Zoom in and out: p *= 1.0 + 0.3 * sin(time * 1.5)
Step 2: Pattern: g = p * 3.0; g.x += 0.5 * fmod(floor(g.y) + 1000.0, 2.0); f = frac(g) - 0.5; m = 1.0 - smoothstep(0.17, 0.2, length(f))
Step 3: Colors: lerp(float3(0.28, 0.85, 0.6), float3(0.79, 0.4, 0.88), m)
Step 4: Finish: col *= 0.8 + 0.2 * step(0.5, frac(uv.y * 100.0))

Solve it in your language

Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.

Start coding

How this challenge works

The numbers you need

Solve it in your language

More effects challenges