Clock shader

clock.glsl

// Author: Mario Brandao
// Title: a siple clock written in GLSL and executed in http://editor.thebookofshaders.com/

#ifdef GL_ES
precision mediump float;
#endif

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

vec3 full_color = vec3(.2, .5, .8);
float stroke = .003;
float sec_length = 60.0;
float sec_pointer_length = .4;

float drawFullCircle(vec2 p, float d, vec2 uv)
{
    return (distance(p, uv) <= d) ? 1. : 0.;
}

float drawLineCircle(vec2 p, float d, float stroke, vec2 uv)
{
    return drawFullCircle(p, d, uv) - drawFullCircle(p, d - stroke, uv);
}

float drawLine(vec2 p1, vec2 p2, vec2 uv, float a)
{
    float r = 0.;
    float one_px = 1. / u_resolution.x; //not really one px
    
    // get dist between points
    float d = distance(p1, p2);
    
    // get dist between current pixel and p1
    float duv = distance(p1, uv);

    //if point is on line, according to dist, it should match current uv 
    r = 1.-floor(1.-(a*one_px)+distance (mix(p1, p2, clamp(duv/d, 0., 1.)),  uv));
        
    return r;
}

float drawTriangle(vec2 p1, vec2 p2, vec2 p3, vec2 uv, float stroke) {
    return drawLine(p1, p2, uv, stroke)
         + drawLine(p2, p3, uv, stroke)
         + drawLine(p3, p1, uv, stroke);
}

float drawArrowTriangle(vec2 p1, vec2 p2, vec2 p3, vec2 uv, float stroke) {
    return drawLine(p1, p2, uv, stroke)
         + drawLine(p3, p1, uv, stroke);
}

vec2 rotate(vec2 origin, vec2 destination, float degrees) {
    float angle_radians = radians(degrees);
    float cosTheta = cos(angle_radians);
    float sinTheta = sin(angle_radians);
    
    // Translate the destination to be relative to the origin
    vec2 translatedDestination = destination - origin;
    
    // Apply the rotation transformation
    vec2 rotatedDestination;
    rotatedDestination.x = cosTheta * translatedDestination.x - sinTheta * translatedDestination.y;
    rotatedDestination.y = sinTheta * translatedDestination.x + cosTheta * translatedDestination.y;
    
    // Translate the rotated destination back to its original position
    rotatedDestination += origin;
    
    return rotatedDestination;
}

float floor_step(float value, float step) {
    return floor(value / step) * step;
}

float drawTickLine(vec2 c, vec2 uv, float degrees) {
    vec2 p1 = vec2(.0, .43);
    vec2 p2 = vec2(.0, .46);
    return drawLine(rotate(c, c+p1, -degrees), rotate(c, c+p2, -degrees), uv, 1.);
}

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution;

    vec2 c = vec2(.5, .5);
    float circle_marks = drawFullCircle(c+vec2(.0, .455), .022, st)
        		+ drawFullCircle(c+vec2(.455, .0), .022, st)
        		+ drawFullCircle(c-vec2(.0, .455), .022, st)
        		+ drawFullCircle(c-vec2(.455, .0), .022, st);
    float hour_ticks = drawTickLine(c, st, 30.) + drawTickLine(c, st, 60.)
        		    + drawTickLine(c, st, 120.) + drawTickLine(c, st, 150.)
        		    + drawTickLine(c, st, 120.) + drawTickLine(c, st, 150.)
        		    + drawTickLine(c, st, 210.) + drawTickLine(c, st, 240.)
        		    + drawTickLine(c, st, 300.) + drawTickLine(c, st, 330.);
	float outer_circle = drawLineCircle(c, .45, 0.01, st) - circle_marks + hour_ticks;
    float sec_circle = drawFullCircle(c, .03, st);
    float min_circle = drawFullCircle(c, .02, st);
    
    float second = mod(u_time, sec_length) / sec_length;
    float minute = mod(u_time / sec_length, sec_length) / sec_length;
//    float pointer_sec = (st.x >= second - stroke && st.x <= second + stroke) ? 1. : 0.;

    vec2 sec_up = vec2(c.x, c.y + sec_pointer_length);
    vec2 sec_circle_up = vec2(c.x, c.y + sec_pointer_length - .1);
    float sec_step = floor_step(360. * -second, 5.);
    float pointer_sec = drawLine(c, rotate(c, sec_up, sec_step), st, 2.);
    float pointer_circle = drawFullCircle(rotate(c, sec_circle_up, sec_step), .01, st);
    
    vec2 min_up = vec2(c.x, c.y + .2);
    float pointer_min = drawLine(c, rotate(c, min_up, 360. * -minute), st, 5.);
    
    float triangle_0 = drawArrowTriangle(vec2(.5, .91), vec2(.48, .94), vec2(.52, .94), st, 2.);
    float triangle_3 = drawArrowTriangle(vec2(.91, .5), vec2(.94, .48), vec2(.94, .52), st, 2.);
    float triangle_6 = drawArrowTriangle(vec2(.5, .09), vec2(.48, .06), vec2(.52, .06), st, 2.);
    float triangle_9 = drawArrowTriangle(vec2(.09, .5), vec2(.06, .48), vec2(.06, .52), st, 2.);
    float triangles = triangle_0 + triangle_3 + triangle_6 + triangle_9;
    
    float alpha = sec_circle + outer_circle + pointer_sec + pointer_min + pointer_circle + triangles;
    
    gl_FragColor = vec4(
        (pointer_sec - min_circle) + sec_circle + pointer_circle - pointer_min - min_circle,
        outer_circle + triangles,
        pointer_min + min_circle,
        alpha
    );
}

simplegrid.glsl

// Author: Mario Brandao
// Title: a siple shader to draw a grid, in GLSL and executed in http://editor.thebookofshaders.com/

#ifdef GL_ES
precision mediump float;
#endif

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

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;

    vec3 color = vec3(0.);
    color = vec3(st.x,st.y,abs(sin(u_time)));
    
    float stroke = .002;
    float alpha = smoothstep(stroke, stroke, mod(st.x + .1, .2))
                * smoothstep(stroke, stroke, mod(st.y + .1, .2));

    gl_FragColor = vec4(color, alpha);
}