Drawing one shape is useful.
Drawing hundreds of shapes automatically is where procedural graphics become truly exciting.
Many backgrounds, wallpapers, game textures, and motion graphics aren't made from large images.
Instead, a small mathematical shape is repeated over and over across the screen.
Because the computer generates every copy, the pattern stays perfectly sharp at every resolution.
Up until now, we've mostly worked in the original UV space.
vec2 uv = vUv;
The UV coordinates range from 0.0 to 1.0.
That gives us one copy of a shape.
To create many copies, we need to repeat the UV coordinates.
The easiest way is to multiply them.
vec2 uv = vUv * 5.0;
Instead of one square, the coordinate system now covers five copies across the screen.
The values become larger than 1.0.
Now we need a way to bring them back into the familiar 0.0 to 1.0 range.
fract()We already learned about fract() in the first GLSL series.
It keeps only the decimal part of a number.
fract(2.75)
returns
0.75
Apply that idea to the UV coordinates.
uv = fract(uv);
Each section now behaves like its own miniature UV space.
Every tile ranges from 0.0 to 1.0.
Now we can reuse our circle code.
float circle =
1.0 -
step(
0.30,
distance(uv, vec2(0.5))
);
Instead of drawing one circle, GLSL now draws a circle inside every repeated tile.
With only two extra lines of code, we've filled the screen with shapes.
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 vUv;
void main(){
vec2 uv = fract(vUv * 5.0);
float circle =
1.0 -
step(
0.30,
distance(uv, vec2(0.5))
);
gl_FragColor = vec4(vec3(circle),1.0);
}
Every tile contains an identical procedural circle.
No textures are required.
Increase the scale.
vUv * 8.0
The pattern becomes much denser.
Decrease it.
vUv * 3.0
Now each shape becomes larger.
One number controls the entire layout.
The same technique works for every procedural shape.
Rounded rectangles.
vec2 p = fract(vUv * 6.0) - 0.5;
Stars.
vec2 p = fract(vUv * 4.0) - 0.5;
Hexagons.
vec2 p = fract(vUv * 7.0) - 0.5;
Once a shape works once, it can be repeated forever.
Each repeated shape can have its own colour.
vec3 color = vec3(
uv.x,
uv.y,
1.0 - uv.x
);
color *= circle;
The pattern now changes colour across the screen while keeping the same repeated geometry.
Move the UV coordinates over time.
uv.x += uTime * 0.2;
Or move them vertically.
uv.y += uTime * 0.2;
Because fract() wraps the coordinates automatically, the pattern scrolls forever.
There are no visible seams.
Every repeated tile can also rotate.
Although rotation requires a small amount of matrix mathematics, the same transformation can be applied to every tile independently.
This creates animated backgrounds often seen in games and music visualizers.
We'll explore rotations in a future tutorial.
Procedural patterns appear almost everywhere.
Many of these effects begin with nothing more than repeated UV coordinates.
Repeat circles.
Repeat stars.
Repeat rounded rectangles.
Create a larger grid.
Create a smaller grid.
Scroll the pattern.
Change the colours.
Try combining several procedural shapes together.
Can you create these effects?
Every challenge combines ideas from both GLSL series.
Today we learned that procedural shapes become much more powerful when they are repeated across the screen.
Using fract() with scaled UV coordinates, we transformed a single shape into an entire procedural pattern.
This simple technique is one of the foundations of procedural textures, animated backgrounds, and generative art.