Animating my tile shader

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.

screen-shot-2021-02-05-at-10-34-54-am screen-shot-2021-02-05-at-10-34-59-am screen-shot-2021-02-05-at-10-35-03-am

Code:

// Nicole Vella
// 2021
// Metaball Grid Shader

#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.);
}

Leave a Reply