Uniforms

u_resolution u_time u_mouse component masks functions coordinate translation

Venn


Infinite Hills


Spotlight


In-class Challenge

Explore the code examples above by completing the following challenges in order.
Don’t skip any.

Modify the Venn Example

  1. Make there be 3 circles: Red, Green, and Blue
  2. Make one of the circles follow the mouse.

Modify the Infinite Hills Example

  1. Make the hills scroll faster.
  2. Add a yellow sun near the horizon.

Modify the Spotlight Example

  1. Make the spotlight have a soft edge.
  2. Show a dim version of the pattern in the darkness.

Challenging Challenges

Make these!

Hills Challenge Venn Outline Crosshair

out_color *= 1.0 - (step(d, 0.2) - step(d, 0.19));
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

float hill_mask(vec2 coord) {
    float hill1 = sin(coord.x * 1.1) * 0.20;
    float hill2 = sin(coord.x * 15.0) * 0.05;
    float hill3 = sin(coord.x * 21.1) * 0.02;
    float hill_mask = step(coord.y, 0.3 + hill1 + hill2 + hill3);
    return hill_mask;
}

float sun_mask(vec2 coord) {
    float d = distance(vec2(0.5, 0.5), coord);
    float sun_mask = step(0.2, d);
    return 1.0 - sun_mask;
}

void main() {
    // boilerplate get normalized coord
    vec2 coord_N = gl_FragCoord.xy / u_resolution;
    coord_N.y /= u_resolution.x / u_resolution.y;

    // calculate sky
    vec3 sky = mix(vec3(0.7, 0.7, 1.0), vec3(0.0, 0.2, 1.0), coord_N.y);

    // start scene
    vec3 scene = sky;

    // composite sun
    vec3 sun_yellow = vec3(1.0, 1.0, 0.0);
    scene = mix(scene, sun_yellow, sun_mask(coord_N + vec2(u_time * 0.04, 0.0)));

    // composite hills
    vec3 hill_green = vec3(0.0, 0.9, 0.0);
    scene = mix(scene, hill_green, hill_mask(coord_N + vec2(u_time, 0.0)));

    // add alpha to scene color, return to pipeline
    gl_FragColor = vec4(scene, 1.0);
}