Shader_2_Week3_Homework_ Roann_Cordova.frag

// Author:Roann Cordova
// Title:Shader 2 - 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;
}

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;
    
    vec3 color1 = vec3(0.);
    vec3 color2 = vec3(0.);
    vec3 color3 = vec3(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))));
    float d2 = sdCircle(vec2(0.060+st.x+-1.028*(abs(sin(u_time))),-0.5 + st.y+-0.280*(sin(u_time))),0.236);
    float d3 = sdCircle(vec2(st.x-0.492,st.y + -0.084 + (-0.8*abs(sin(u_time*3.))) ),0.288 + (-0.236 * ( abs( sin(u_time)))));
    
   	float d4 = sdCircle(vec2(st.x+-0.052 - (0.880 *abs(sin(u_time/2.)) ),st.y-0.876),0.100+0.220 * (-0.292 + abs(sin(u_time))));
    float d5 = sdCircle(vec2(-1.076+st.x+0.164*(abs(sin(u_time*5.))),-0.5 + st.y+-0.280*(sin(u_time))),0.148);
    float d6 = sdCircle(vec2(st.x-0.212,st.y + -0.084 + (-0.8*abs(sin(u_time*3.))) ),0.100 + (-0.044 * ( abs( sin(u_time)))));
    
    
    //Multiply the size of the canvas and determining how many cells to make in the grid
    st *= 9.0;
	
    
    
	//to determine the index if odd or even using modular
    vec2 modIndex = floor(st);
    
    
    //The statement where it determines if the index is EVEN
    if( mod(modIndex.y, 2.) == 0.000){
        
        st.x -= 0.5 * -(u_time); //This animates the x (row of the circles)
        modIndex = floor(st); //aligning the index in the st integer
        st = fract(st); 
    } 
    
    //The statement where it determines if the index is ODD
    else {
        st.x -= 1. * (u_time); //This animates the x (row of the circles)
        modIndex = floor(st); //aligning the index in the st integer
        st = fract(st);
    }
    
    
    
    
    
    //keeps the position of the circle in the center in every index
    float circ1 = distance( st, vec2(0.5,0.5));
    //draws the circle and using smoothstep to create the "blur" effect
    circ1 = 1. -smoothstep(0.080,0.604, circ1);

    
    vec3 color = vec3(0.); // Declare empty value of color
    
    // EVEN INDEX
    if (mod(modIndex.x, 2.) == 0.0){
        if (mod(modIndex.y, 2.) == 0.0){
            color = vec3(0.855,0.935,0.447) * circ1 ; //Sets the circle color yellow-green
        } 
        else{
            color = vec3(0.349,0.990,0.895) * circ1; //Sets the circle color  blue-green
        } 
    } 
    
    //ODD INDEX
	else if(mod(modIndex.x, 2.) == 1.000){
        if (mod(modIndex.y, 2.) == 0.0){
        	color = vec3(0.397,0.576,0.935) * circ1 ; //Sets the circle color blue-violet
        } 
        else{
       		color = vec3(0.990,0.523,0.504) * circ1; //Sets the circle color peach
        }
	}
    
    
    
 	// //CIRCLES ANIMATION USING if / else-if statements
 	// //Using abs(sin(u_time)) to change values of every RGB channel creating color changing effect.
 	// if (d1<0.0){
 	// color = vec3(0.107,abs(sin(u_time)),1.000);
 	// vec3 layer1 = color;
 	// }
 	// else if (d2<0.0){
 	// color = vec3(1.000,0.632,abs(sin(u_time)));
 	// vec3 layer2 = color;
 	// }
 	// else if (d3<0.0){
 	// color = vec3(0.576,0.365,abs(sin(u_time*2.)));
 	// vec3 layer3 = color;
 	// }

    
    
    //Putting the circle into a layers (circle1,  circle2 , circle3)
    float circle1 = 1. - step(-0.060 , d1);
    float circle2 = 1. - step(-0.060 , d2);
    float circle3 = 1. - step(-0.004 , d3);
    
    //using mix to layer the circles on top of each other
    color = mix (color ,vec3(0.107,abs(sin(u_time)),1.000), circle1);
    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);
    
    

    

    gl_FragColor = vec4(color,1.0);
}