One of the first mistakes beginners make is trying to move a shape directly.
In reality, that's not what happens.
The shape never moves.
Instead, we move the coordinate system that the shape is drawn inside.
This idea is called translation, and you'll use it in almost every shader you write.
Imagine a Piece of Paper
Imagine drawing a circle on a sheet of paper.
Now slide the paper to the left.
Did the circle move?
Not really.
The drawing stayed exactly where it was on the paper.
Only the paper moved.
That's exactly how translation works in GLSL.
We're not moving the shape.
We're moving the coordinates.
Our Original Circle
We'll start with a simple circle.
vec2 uv = vUv;
float circle = 1.0 -
step(
0.25,
distance(uv, vec2(0.5))
);
The circle appears in the middle because we're measuring the distance from the center of the UV space.
Moving the Coordinate System
Suppose we subtract a value from the X coordinate.
uv.x -= 0.20;
Most beginners expect the circle to move left.
Instead, it moves right.
That feels backwards.
Why Does It Move the Opposite Way?
Remember that we're moving the coordinate system.
When the coordinates move left, every shape appears to move right.
Imagine looking through a window.
If you slide the window left, everything outside seems to move right.
The objects haven't moved.
Your viewpoint has.
The same thing happens in GLSL.
Moving Up and Down
Moving vertically works the same way.
uv.y += 0.15;
The coordinate system moves upward.
The shape appears to move downward.
Again, the movement feels opposite because we're changing the coordinates, not the geometry.
Complete Shader
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 vUv;
void main(){
vec2 uv = vUv;
uv.x -= 0.20;
uv.y += 0.10;
float circle =
1.0 -
step(
0.25,
distance(uv, vec2(0.5))
);
gl_FragColor = vec4(vec3(circle),1.0);
}
Changing only two lines moves the circle to a completely different position.
Moving with a Vector
Instead of changing X and Y separately, use a vector.
uv -= vec2(0.2, 0.1);
This shifts both directions at the same time.
It also makes the code cleaner.
Animating the Position
Let's move the circle continuously.
uv.x -= sin(uTime) * 0.25;
The circle slides left and right forever.
Because sin() changes smoothly, the movement feels natural.
Moving Diagonally
Nothing limits us to one direction.
uv -= vec2(
sin(uTime),
cos(uTime)
) * 0.20;
Now the circle travels around the screen in a looping path.
This simple animation appears in many procedural effects.
Moving Multiple Shapes
Translation becomes even more useful when several shapes are involved.
vec2 uvA = uv - vec2(0.20,0.0);
vec2 uvB = uv + vec2(0.20,0.0);
Each coordinate system creates its own shape.
This lets us position objects independently without changing the drawing code.
Why Translation Matters
Almost every shader uses translation.
Some common examples include
- Moving user interface elements.
- Sliding backgrounds.
- Animated particles.
- Procedural icons.
- Game effects.
- Loading animations.
- Infinite scrolling textures.
- Motion graphics.
- Water movement.
- Camera movement.
Learning translation is one of the biggest milestones in shader programming.
Try These Experiments
Move a circle left.
Move it right.
Move it diagonally.
Animate it using sin().
Create two moving circles.
Create four circles using different coordinate offsets.
Notice that the drawing code never changes.
Only the coordinates do.
Posted Using INLEO
