TV-aksjonen 2025

Shader Battle

Make the image on the left match the image on the right by editing the fragment shader code below.

Here, we're making a kaleidoscope-esque effect. The images below are sliced up like pies and given a repeated pattern. You'll have to flip every second slice so that they all mirror each other like in the image on the right.

Make These Images Match

By Editing This Code

// No need to touch this!
// This is the base image that we warp later
vec3 computeTexture(in vec2 uv) {
    uv *= 1.5;
    return vec3(1) * step(mod(uv.x, .1), .05);
}

void main()
{
    // These are the coordinates on the screen
    // They go from -1 to 1 vertically (y),
    // and further horizontally (x).
    vec2 xy = getCenteredCoords();

// Polar coordinates as before
    // radius = distance from center
    float radius = length(xy);
    // angle goes from 0 to 2*PI
    float angle = atan(xy.x, xy.y);

// Transform angle
    // We want each pie slice to mirror its two neighbours
    // The code currently just slices up the image in 12 repeated slices
    // (don't change the period, it is correct)
    float period = PI/6.;
    // HERE'S WHAT YOU'LL NEED TO CHANGE!
    angle = mod(angle, period);

// After transforming polar coords,
    // we travel back to cartesian space
    // (comment out this line to see the base image)
    xy = vec2(radius * sin(angle), radius * cos(angle));

// Then call the texture function
    vec3 color = computeTexture(xy);

// gl_FragColor is the magic variable that gets drawn on screen
    gl_FragColor = vec4(color, 1.0);
}

What do I do With This Thing?

The pixels in the image can be manipulated with the fragment shader code written above.

Fragment shaders run once for each pixel in an image. Each run is given the coordinate of a pixel in the image, and outputs the color we want that pixel to have.

Fragment shaders are written in GLSL. Think of it as a strange dialect of C.

GLSL has various built-in functions, see the official documentation.

Note that in GLSL, floats can't be used together with ints as you may be used to. I recommend using only floats, e.g. 2.0, and not ints, e.g. 2, when solving these tasks.

If you've got the time, The Book of Shaders has a nice introduction, and a lot more.

Submit Your Solution

When you think you've found the right answer, submit it below, and find out if it's correct!

Not logged in. You must sign up or log in before you can submit your solution!