Repeating Patterns with `fract()`: Creating Infinite Tiles

So far, every gradient we have created stretches across the screen only once.

The value starts at 0.0 on one side and slowly reaches 1.0 on the other.

That is useful, but many shaders need patterns that repeat over and over.

Think about bricks, checkerboards, stripes, floor tiles, or pixel art.

Instead of writing the same pattern many times, GLSL gives us a simple function called fract().

It allows us to repeat almost anything.

Before You Continue

This tutorial builds on the previous lessons.

Part 1: Your First Shader: Painting the Entire Screen One Color

Part 2: Understanding UV Coordinates: The Secret Behind Every Shader
Part 3: Your First Gradient: Using UV Coordinates to Paint Space

Part 4: Mixing Colors with mix(): Creating Smooth Color Transitions
Part 5: Keeping Values Under Control with clamp()
Part 6: Adding Contrast with pow(): Making Gradients More Interesting
Now we are going to make those gradients repeat forever.

What Does fract() Do?

The fract() function keeps only the decimal part of a number.

Its structure is simple.

fract(value)

Let's look at a few examples.

fract(0.25)

Result

0.25

Now try

fract(1.25)

Result

0.25

And

fract(2.25)

Result

0.25

Notice something interesting?

Every whole number disappears.

Only the decimal part remains.

Why Is This Useful?

Imagine counting.

0.0

0.2

0.4

0.6

0.8

1.0

1.2

1.4

1.6

1.8

2.0

Now apply fract().

0.0

0.2

0.4

0.6

0.8

0.0

0.2

0.4

0.6

0.8

0.0

Instead of continuing upward forever, the value starts over every time it reaches the next whole number.

That repeating behavior is exactly what we need for procedural patterns.

Repeating a Gradient

Suppose we have a normal gradient.

float value = vUv.x;

It stretches across the screen once.

Now multiply it.

float value = vUv.x * 5.0;

The value now reaches 5.0.

If we wrap it using fract(),

float value = fract(vUv.x * 5.0);

the gradient repeats five times across the screen.

Instead of one long fade, you now have five smaller fades.

A Complete Shader

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;

void main() {

    float value = fract(vUv.x * 8.0);

    gl_FragColor = vec4(vec3(value), 1.0);

}

The screen now contains eight repeating gradients.

Changing the number changes how many repetitions appear.

Vertical Repetition

Nothing limits fract() to horizontal movement.

Try this.

float value = fract(vUv.y * 8.0);

Now the repetition runs from bottom to top.

Repeating in Both Directions

We can repeat both coordinates.

vec2 grid = fract(vUv * 6.0);

Now both the horizontal and vertical positions restart every time they reach the next whole number.

This creates a tiled coordinate system.

Many procedural textures begin with this simple idea.

Creating Simple Stripes

Try this shader.

float stripe = fract(vUv.x * 10.0);

gl_FragColor = vec4(vec3(stripe), 1.0);

You will see repeating bands across the screen.

Each band is simply another copy of the original gradient.

Creating a Simple Grid

Now display both coordinates.

vec2 grid = fract(vUv * 8.0);

gl_FragColor = vec4(grid.x, grid.y, 0.0, 1.0);

Every square now contains its own UV coordinates.

Instead of one large UV space, you have many smaller ones.

This technique appears in countless procedural shaders.

Why Is fract() So Useful?

You will find fract() in shaders that create

• Checkerboards
• Tiles
• Stripes
• Brick walls
• Pixel art
• Noise
• Procedural textures
• Animated patterns

It is one of the easiest ways to create repetition without copying code.

Try These Experiments

Repeat four times.

fract(vUv.x * 4.0)

Repeat ten times.

fract(vUv.x * 10.0)

Repeat both directions.

fract(vUv * 6.0)

Try changing the numbers.

Notice how the pattern becomes smaller as the repetition increases.

A Small Challenge

Can you create these patterns?

• Four horizontal stripes.
• Ten vertical stripes.
• A tiled grid.
• Tiny repeating gradients.
• Large repeating gradients.

Try solving them before reading the next lesson.

What We Learned

The fract() function removes the whole number and keeps only the decimal part.

That simple behavior makes values restart over and over again.

By combining fract() with UV coordinates, we can repeat gradients, create tiled spaces, and build the foundation for many procedural textures.