Chromic CDs

chromic cds

learning gradient, circle, grid, masking, noise / random

View on ShaderToy

// Author: Baangkok Vanijyananda
// Title: Chromic CDs

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359
#define PHI 1.61803398874989484820459  // Φ = Golden Ratio   
#define RANDOM_SEED 987653.0

const vec3 col_black = vec3(2, 2, 2)/255.;
const vec3 col_blue_dark = vec3(24, 29, 45)/255.;
const vec3 col_blue_middle = vec3(92, 128, 146)/255.;
const vec3 col_white = vec3(228, 232, 231)/255.;

float gold_noise(in vec2 xy, in float seed){
       return fract(tan(distance(xy*PHI, xy)*seed)*xy.x);
}

vec2 rotateUV(vec2 uv, float rotation, vec2 mid)
{
    return vec2(
      cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
      cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
    );
}

vec3 get_gradient_color(float gradient_direction) {
    vec3 pct = vec3(smoothstep(0.8, 1.,gradient_direction));
    vec3 pct2 = vec3(smoothstep(0.5, 0.9,gradient_direction));
    vec3 pct3 = vec3(smoothstep(0.0, 0.7,gradient_direction));

    vec3 color = vec3(1.);
    color = mix(col_blue_dark, col_black, pct);
    color = mix(col_blue_middle, color, pct2);
    color = mix(col_white, color, pct3);
    return color;
}

// xy is normalized, unrepeated coord
float mask_grid(vec2 xy, float seed, float grid_size, float threshold){
    vec2 grid_bottom_left = xy-mod(xy, 1./grid_size)+(1./grid_size)*0.5;
    float mask = step(threshold, gold_noise(grid_bottom_left, seed));
    return mask;
}

float mask_circle(vec2 uv, float radius_outer, float border_thickness, vec2 position){
    
    /// inner circle
    float radius_inner = radius_outer - border_thickness;
    float d_inner = sqrt(dot(uv-position,uv-position));
    float t_inner = 1.0 - smoothstep(radius_inner,radius_inner, d_inner);
    
    /// outer circle
    float d_outer = sqrt(dot(uv-position,uv-position));
    float t_outer = 1.0 - smoothstep(radius_outer,radius_outer, d_outer);
    
    /// mask
	return t_outer - t_inner;
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
        vec2 uv = fragCoord.xy/iResolution.xy;
    uv.x *= iResolution.x/iResolution.y;
    vec2 unrepeated_uv = uv;
    
    // repeat coordinate
    float repeat_count = 4.;
	float spacing = 1./repeat_count;
    float repeat_offset = 0.;
    
    uv.x = mod(uv.x+repeat_offset, spacing)/spacing;
    uv.y = mod(uv.y+repeat_offset, spacing)/spacing;
    
    // gradient
    vec2 bg_uv = rotateUV(uv, 1.8*PI, vec2(0.5,0.5));
    vec3 gradient_color = get_gradient_color(bg_uv.y);
    
    vec2 rotated_uv = rotateUV(uv, iTime, vec2(0.5,0.5));
    vec3 rotated_gradient_color = get_gradient_color(rotated_uv.y);
    
    // circle
    float circle_mask = mask_circle(rotated_uv, 0.5, 0.08, vec2(0.5,0.5));
    float circle_mask_thick = mask_circle(rotated_uv, 0.5, 0.248, vec2(0.5,0.5));

    // mask grid randomized
    float mask_grid_randomized = mask_grid(unrepeated_uv, RANDOM_SEED,repeat_count,0.372);
    float mask_grid_randomized_2 = mask_grid(unrepeated_uv, RANDOM_SEED+-0.168,repeat_count,0.796);
    float circle_mask_grid = mix(0., circle_mask, mask_grid_randomized);
    float circle_thick_mask_grid = mix(0., circle_mask_thick, mask_grid_randomized_2);
    
    vec3 color = gradient_color;
    color = mix(color, rotated_gradient_color*1.2, circle_mask_grid);
    color = mix(color, rotated_gradient_color*1.2, circle_thick_mask_grid);


    // noise
    float noise = gold_noise(uv.xy+1., RANDOM_SEED);
    color = mix(color, vec3(noise), 0.060);
    
    // final color
	vec3 final_color = color;

    fragColor = vec4(color,1.0);
}