I pushed my week 2 tiled/grid shader further by animating it.

I also refactored the code into less lines while making it more semantically legible.

Code:

```// Nicole Vella
// 2021

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

float map(float value,float min1,float max1,float min2,float max2){
return min2+(value-min1)*(max2-min2)/(max1-min1);
}

vec2 createGrid(in vec2 st,in vec2 grid,out vec2 indices){

// multiply by the number of cells
// [0,1] range => [0,10] (for example)
st*=grid;

// get the cell indices
// for example, in a grid of 10x10:
// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
indices=floor(st);

// use fract to get the fractional amount of st
// 9.5 => 0.5
// shows the xy coordinate in each cell
st=fract(st);

return st;
}

float drawRectangle(vec2 st,vec2 pos,vec2 size){

float result=1.;
vec2 border=(1.-size)/2.200;

// border animations
// vec2 border = (1.0t-size)/2.200 + cos(st.x *6. + u_time)*0.508;
// border.x =  0.25*sin(st.x*u_time);
// border.y = -0.25*cos(st.y*u_time);

st=st-pos+vec2(.5);

result=step(border.x,st.x);
result*=step(border.x,1.-st.x);
result*=step(border.y,st.y);
result*=step(border.y,1.-st.y);

return result;
}

float drawCircle(vec2 st,vec2 pos,float size){
float d=distance(st,pos);
// step shows values > argument 1, and we want the opposite
// so we invert the results by subtraction 1.0 - the value
return 1.-step(size,d);
}

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

vec2 st0=st;
vec2 indices;
st=createGrid(st,vec2(10.,10.),indices);

float delay=.45;
float circSize=.5;

vec2 size=vec2(.25,.25);
vec2 pos=vec2(.5,.5);

vec3 white=vec3(1.);
vec3 black=vec3(0.);
vec3 canvas=vec3(0.);

// animations
// 0 to 1
float animation0to1=map(sin(u_time*delay),-1.,1.,0.,1.);
// 1 to 0
float animation1to0=map(sin(u_time*delay),-1.,1.,1.,0.);

// bg rect
float rect=drawRectangle(st,vec2(.5),vec2(1.));

// top edge, Left To Right circle
float circleTLTR=drawCircle(st,vec2(animation0to1,1.),circSize);

// bottom edge, Right To Left circle
float circleBRTL=drawCircle(st,vec2(animation1to0,0.),circSize);

// left edge, Top To Bottom circle
float circleLTTB=drawCircle(st,vec2(0.,animation1to0),circSize);

// right edge, Bottom To Top circle
float circleRBTT=drawCircle(st,vec2(1.,animation0to1),circSize);

if((mod(indices.x,2.)==0.&&mod(indices.y,2.)==1.)||(mod(indices.x,2.)==1.&&mod(indices.y,2.)==0.)){

canvas=mix(canvas,white,rect);
canvas=mix(canvas,black,circleTLTR);
canvas=mix(canvas,black,circleBRTL);

}else{

canvas=mix(canvas,black,rect);
canvas=mix(canvas,white,circleRBTT);
canvas=mix(canvas,white,circleLTTB);

}

gl_FragColor=vec4(canvas,1.);
}
```