step()

Syntax

float step(float edge, float x)
vec2 step(vec2 edge, vec2 x)
vec2 step(float edge, vec2 x)
vec3 step(vec3 edge, vec3 x)
vec3 step(float edge, vec3 x)

Live example

Edit the code and the preview updates as you type.

How it works

step(edge, x) compares two numbers and answers with 0 or 1:

step(0.5, 0.2) // 0.0, because 0.2 < 0.5
step(0.5, 0.8) // 1.0
step(0.5, 0.5) // 1.0, equal counts as "not less"

There is no in-between, so the result has a perfectly sharp edge. In the example the background switches from dark to bright at a moving line.

The rectangle uses step twice per axis. step(0.3, uv) is 1 to the right of / above 0.3, step(uv, 0.7) is 1 to the left of / below 0.7, and multiplying them keeps only the area where both are true.

Typical uses

• Masks: a 0/1 value you can multiply with a color or pass to mix.
• Replacing if statements: color = mix(a, b, step(0.5, uv.x)) instead of branching.
• Shapes from distances: step(length(p), 0.5) is 1 inside a circle of radius 0.5.

Common mistakes

• Swapping the arguments, the most common mistake. The threshold comes first: step(edge, x). step(uv.x, 0.5) flips the result.
• Aliasing. The edge is exactly one pixel sharp, so slanted or curved edges look jagged. Use smoothstep with a small width to anti-alias.

Related functions

Tutorials that use step()

• Grid Lines
  Use fract() and step() to draw grid lines.
• Drawing Circles
  Learn to draw basic shapes using distance functions and understand the pixel coordinate system and distance function applications.
• Rectangle Border
  Create a border by subtracting an inner rectangle mask from an outer one.
• Stripes and Bands
  Build repeating stripes with fract and step, and switch colors with mix.
• Circle Drawing (Distance Function)
  Draw a circle using normalized coordinates and the distance function length(), then color it with a simple conditional.
• Simple Rectangle
  Learn to draw rectangles using conditional statements and understand coordinate ranges and boundary detection.