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 converting to polar coordinates and drawing a pattern ☢️

Make These Images Match

By Editing This Code

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
    // radius = distance from center
    float radius = length(xy);
    // angle goes from 0 to 2*PI
    float angle = atan(xy.x, xy.y);

// Correct periods, don't fiddle with these :)
    float angle_period = PI/1.5;
    float radius_period = 1./2.;
    // HERE'S WHAT YOU'LL NEED TO CHANGE!
    // Modulo on floats gives a float
    // so try using step(value, threshold)
    // to force it into either 0 or 1
    float radius_value = mod(radius, radius_period);
    // and don't do it like this exactly >:)
    float angle_value = step(mod(angle, angle_period), 0.2*angle_period);

// Create the checkerboard pattern!
    // This expects the two values to be either 0 or 1
    float checkerboard = mod(radius_value + angle_value, 2.);

// Multiply by desired color to colorize
    // Kinda boring here :)
    vec3 color = vec3(1) * checkerboard;

// 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!