Shader_1_Week3_Homework_ Roann_Cordova.frag

// Author:Roann Cordova
// Title:Shader 1 - Week 3 Homework

#ifdef GL_ES
precision mediump float;
#endif

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



//The Function of Making a Circle 
//from: Inigo Quilez
float sdCircle( vec2 st, float r )
{
    return length(st) - r;
}


//The Function of Making a Box 
//from: Inigo Quilez
float sdBox( in vec2 st, in vec2 b )
{
    vec2 d = abs(st)-b;
    return length(max(d,0.0)) + min(max(d.x,d.y),0.0);
}


void main() {
    //Normalize the coordinates in the canvas
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    
    float  pct = 0.0;
    
    //using the sdCircle functions to animate (resize/ place ) the circles in the canvas
    float d1 = sdCircle(vec2(st.x+0.532 - (1.8 *abs(sin(u_time/2.)) ),st.y-0.444),0.572 *(-0.292 + abs(sin(u_time/4.))));
    float d2 = sdCircle(vec2(0.060+st.y+-1.028*(abs(sin(u_time/12.))),-0.5 + st.x+-0.280*(sin(u_time))),0.396);
    float d3 = sdCircle(vec2(st.y-0.492,st.x + -0.084 + (-0.8*abs(sin(u_time/10.))) ),0.288 + (-0.236 * ( abs( sin(u_time/4.)))));
    
	//rhombus properties
    float b1 = sdBox(vec2(st.x +-0.020 - abs(sin(u_time/3.)), 0.244+st.y - abs(sin(u_time))),vec2(0.090,0.060));
    float b2 = sdBox(vec2(st.y +-0.156 - abs(sin(u_time/9.)), 0.124+st.x - abs(sin(u_time))),vec2(0.060,0.180));
    
    
    
    vec3 color = vec3(st.x * abs(sin(u_time/3.)),st.y * abs(sin(u_time/6.)),0.323); // Declare value of color (background)

    
    //Putting the circle into a layers (circle1,  circle2 , circle3)
    float circle1 = 1. - step(-0.132 , d1);
    float circle2 = 1. - step(-0.060 , d2);
    float circle3 = 1. - step(0.028 , d3);
    
    
	//Putting the round boxes into a layers (box1,  box2 , box3)
    float box1 = 1. - step(0.042 - (-0.044 * abs(sin(u_time)) ) , b1);
    float box2 = 1. - step(0.090 - (0.068 * abs(sin(u_time)) ) , b2);
                                      
    // //using mix to layer the circles on top of each other
    color = mix (color ,vec3(1.000,0.632,abs(sin(u_time))), circle2);
	color = mix (color ,vec3(0.576,0.365,abs(sin(u_time*2.))), circle3);
    color = mix (color ,vec3(0.107,abs(sin(u_time)),1.064), circle1);

    
    // //using mix to layer the rounded boxes on top of each other
	color = mix (color ,vec3(st.x * abs(sin(u_time/6.)),st.y * abs(sin(u_time/4.)),st.x), box1);
    color = mix (color ,vec3(st.y,abs(sin(u_time*2.)),0.640), box2);
    

    gl_FragColor = vec4(color,1.0);
}