a safe space for learning shaders :^)

shade_space.frag

// Author: Irene
// Title: Sandbox

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec3 red = vec3(1.0, 0.0, 0.0);
vec3 green = vec3(0.0, 1.0, 0.0);
vec3 blue = vec3(0.0, 0.0, 1.0);

float cubicInOut(float t) {
  return t < 0.5
    ? 4.0 * t * t * t
    : 0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0;
}

// plot a line on y using a value between 0.0 - 1.0
float linear(vec2 pt) {
    return smoothstep(0.020, 0.0, abs(pt.y - pt.x));
}

// plot a line given y as a function of xs
float plot(float x, float y, float thickness) {
    float lower_bound = y - thickness / 2.0;
    float upper_bound = y + thickness / 2.0;
    return smoothstep(lower_bound, y, x) - smoothstep(y, upper_bound, x);
}

vec3 graph_example(vec2 pt) {
    // define y value as function of x
    // float y = pt.x;
    float y = smoothstep(0.0, 1.0, pt.x);
    // float y = pow(pt.x, 2.0);
    // float y = smoothstep(0.0, 0.5, pt.x) - smoothstep(0.5, 1.0, pt.x);
    
    // create background gradient
    vec3 color = vec3(y);
    
    // create graph
    float graph = plot(pt.y, y, 0.025);
    // color = graph * vec3(0.0, 1.0, 0.0);

    // combine background gradient and graph
    color = (1.0 - graph) * color + graph * vec3(0.0, 1.0, .0);
    
    return color;
}

vec3 color_example(vec2 pt) {
    // define colors to mix
    vec3 color_a = vec3(0.149,0.141,0.912);
	vec3 color_b = vec3(1.000,0.833,0.224);

    // create background gradient
    vec3 color = vec3(pt.x);

    // modify background gradient as function of x
    // color.r = smoothstep(0.0, 1.0, pt.x);
    // color.g = sin(pt.x * PI);
    // color.b = pow(pt.x, 0.5);
    
    color.r = cos(pt.x * PI);
    color.g = sin(pt.x * PI);

    // define color vector
    vec3 color_mix = vec3(0.0);
    color_mix = mix(color_a, color_b, color);

    // plot transition lines for each channel
    color_mix = mix(color_mix, red, plot(pt.y, color.r, 0.01));
    color_mix = mix(color_mix, green, plot(pt.y, color.g, 0.01));
    color_mix = mix(color_mix, blue, plot(pt.y, color.b, 0.01));
    
    return color_mix;
}

// https://www.youtube.com/watch?v=f4s1h2YETNY
vec3 kishimisu_example(vec2 pt) {
    // pt -= 0.5; // shift (0, 0) to center
    // pt *= 2.0; // shift range to (-1, 1)
    pt = pt * 2.0 - 1.0; // simplification from (pt - 0.5) * 2.0
    pt.x = pt.x * u_resolution.x / u_resolution.y; // adjust res to avoid stretching
    
    // pt *= 2.0;
    // pt = fract(pt);
    // pt -= 0.5;
    pt = fract(pt* 2.0) - 0.5;
    
    float dist = length(pt); // distance of pt from (0, 0)

    // dist = smoothstep(0.0, 0.1, dist);
    dist = sin(dist * 8.0 + u_time) / 8.0;
    dist = abs(dist);
    dist = 0.02 / dist;
    
    vec2 pt0 = pt;
    
    // vec3 color = vec3(dist); // same as vec3(pt.x, pt.y, 0.0)
    vec3 color = vec3(0.724,0.452,0.925);
    color *= dist;
    
    // color = vec3(pt, 1.0);
    
    return color;
}

vec3 ch2_expressive_transition(vec2 pt) {
    vec3 colorA = vec3(0.912, 0.535, 0.447);
    vec3 colorB = vec3(1.000,0.843,0.128);

    float t = u_time * 0.5;
    float pct = cubicInOut(sin(t) / 2.0);

    vec3 color = vec3(mix(colorA, colorB, pct));
    return color;
}

vec3 ch2_sunrise_sunset(vec2 pt) {
    vec3 color = vec3(pt.x);
    return color;
}

vec3 ch2_rainbow(vec2 pt) {
    vec3 y = smoothstep(0.0, 0.1, red) + smoothstep(0.1, 0.2, green);
    vec3 color = vec3(y);
    return color;
}

vec3 ch2_colorful_flag(vec2 pt) {
    vec3 color = vec3(pt.x);
    return color;
}

void main() {
    vec2 pt = gl_FragCoord.xy / u_resolution;
    
    // examples
    // vec3 color = graph_example(pt);
    // vec3 color = color_example(pt);
    vec3 color = kishimisu_example(pt);
    
    // chapter 2 exercises
    // vec3 color = ch2_expressive_transition(pt);
    // vec3 color = ch2_sunrise_sunset(pt);
    // vec3 color = ch2_rainbow(pt);
    // vec3 color = ch2_colorful_flag(pt);
    
    gl_FragColor = vec4(color, 1.0);
}