Combining Translation, Rotation, and Scaling in GLSL

@hey2d 61

7 days ago

coding

By themselves, translation, rotation, and scaling are useful.

Together, they become incredibly powerful.

Almost every animated shader, game effect, motion graphic, or procedural interface combines these three operations.

The exciting part is that the drawing code usually stays exactly the same.

Only the coordinates change.

Thinking Like a Shader

Imagine you have a rubber stamp.

The stamp always draws the same square.

Instead of carving a new stamp every time, you simply move it, rotate it, or resize it before pressing it onto the paper.

Procedural shaders work in the same way.

The shape never changes.

Only its coordinate system does.

Starting with Centered Coordinates

As before, we'll begin by centering the UV coordinates.

vec2 uv = vUv - 0.5;

Every transformation will happen around this point.

Step One: Translation

Let's move the coordinate system.

uv -= vec2(0.25, 0.0);

The rectangle now appears slightly to the right.

Translation decides where the object lives.

Step Two: Scaling

Next, resize the coordinate system.

uv /= 1.5;

The rectangle becomes larger.

Remember that dividing the coordinates makes the shape appear bigger.

Step Three: Rotation

Now rotate the coordinates.

float angle = uTime;

float c = cos(angle);

float s = sin(angle);

mat2 rotation = mat2(

c, -s,

s,  c

);

uv = rotation * uv;

The object now spins smoothly while staying at its translated position.

Drawing the Shape

Now draw the rectangle.

float rect =

step(-0.20, uv.x) *

(1.0 - step(0.20, uv.x)) *

step(-0.10, uv.y) *

(1.0 - step(0.10, uv.y));

Notice that the drawing code is identical to previous lessons.

Only the coordinates changed.

Complete Shader

#ifdef GL_ES
precision mediump float;
#endif

uniform float uTime;
varying vec2 vUv;

void main(){

    vec2 uv = vUv - 0.5;

    uv -= vec2(0.25, 0.0);

    uv /= 1.5;

    float angle = uTime;

    float c = cos(angle);
    float s = sin(angle);

    mat2 rotation = mat2(
        c, -s,
        s,  c
    );

    uv = rotation * uv;

    float rect =

        step(-0.20, uv.x) *

        (1.0 - step(0.20, uv.x)) *

        step(-0.10, uv.y) *

        (1.0 - step(0.10, uv.y));

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

}

With only a few transformations, we've created a moving, rotating, and resized object.

Why the Order Matters

Let's swap two operations.

Rotate first.

Then translate.

uv = rotation * uv;

uv -= vec2(0.25,0.0);

The animation changes completely.

Instead of spinning around its own center, the rectangle now travels in a circular path.

Nothing else changed.

Only the order.

This is one of the most important ideas in computer graphics.

Another Example

Scale after rotating.

uv = rotation * uv;

uv *= 2.0;

The rectangle rotates exactly the same way, but now appears smaller.

Every transformation affects those that come after it.

Building a Transformation Pipeline

Professional shaders often follow a simple sequence.

Center coordinates

↓

Translate

↓

Rotate

↓

Scale

↓

Draw shape

Keeping transformations organized makes complex shaders much easier to understand.

Creating Multiple Objects

Every object can have its own coordinate system.

vec2 uv1 = uv;
vec2 uv2 = uv;

uv1 -= vec2(0.25,0.0);

uv2 += vec2(0.25,0.0);

Each object can then receive its own rotation or scaling.

This technique allows dozens of animated objects to exist inside one shader.

Combining Everything with Animation

Nothing stops us from animating every transformation.

uv -= vec2(sin(uTime),0.0)*0.2;

uv /= 1.2 + sin(uTime)*0.2;

Now the rectangle moves while changing size.

Add rotation as well, and all three transformations work together.

Where Is This Used?

Transformation pipelines appear in almost every graphics application.

Game user interfaces.
Motion graphics.
Animated logos.
Particle systems.
Interactive backgrounds.
Scientific visualizations.
Procedural artwork.
Audio visualizers.
Loading screens.
Mobile applications.

Learning this workflow prepares you for much larger shader projects.

Try These Experiments

Translate before rotating.

Rotate before translating.

Scale before rotating.

Rotate before scaling.

Animate every transformation.

Create two objects with different transformation orders.

Watch how dramatically the motion changes.

A Small Challenge

Can you create these effects?

A spinning button that grows and shrinks.
Two rotating rectangles moving in opposite directions.
A loading animation with several rotating objects.
A simple solar system.
A procedural logo built from multiple transformed shapes.

Every challenge uses exactly the same transformation techniques you've learned over the past few lessons.

Posted Using INLEO

coding glsl waiv inleo hive

0.000

0 comments