For this shader I tried out a lot of different patterns and shapes. I started with using rectangles that span across cells but I later turned to circles as I thought they were more mesmerizing especially when in motion.

While working on it I got more comfortable with the 4 cell system where at first it was kind of confusing me.

// Author: Brian Nguyen
// Title: 2D Pattern
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265359
#define TWO_PI 6.28318530718
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 drawSidedShape(vec2 st,vec2 pos,float size,int sides,vec2 indices){
float d=0.;
// st = st *2.-1.;
st-=pos;
// Number of sides of your shape
int N=sides;
// Angle and radius from the current pixel
float a=atan(st.x,st.y)+PI;
float r=TWO_PI/float(N);
// Shaping function that modulate the distance
d=cos(floor(sin(u_time)*1.+a/r)*r-a)*length(st);
d=smoothstep(.734,1.-size,1.-d);
return d;
}
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 indices;
st=createGrid(st,vec2(5.),indices);
vec3 color=vec3(0.);
if(mod(indices.x,2.)==0.&&mod(indices.y,2.)==0.){
// lower left cell - triangle fan
color=vec3(0.);
float r=0.;
r+=drawSidedShape(st,vec2(.5,.5),.016,3,indices);
color=mix(color,vec3(1.),r);
}else if(mod(indices.x,2.)==1.&&mod(indices.y,2.)==0.){
// lower right cell - orange bg with blue circles
color=vec3(.945,.549,.001);
float r=0.;
for(int k=0;k<20;k++){
for(int i=0;i<20;i++){
r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
}
}
color=mix(color,vec3(.023,.530,.905),r);
}else if(mod(indices.x,2.)==0.&&mod(indices.y,2.)==1.){
// upper left - cyan with blue scircles
color=vec3(.320,.945,.733);
float r=0.;
for(int k=0;k<20;k++){
for(int i=0;i<20;i++){
r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
}
}
color=mix(color,vec3(.023,.530,.905),r);
}else{
// upper right - white bg with black circles
color=vec3(.940,.940,.940);
float r=0.;
for(int k=0;k<20;k++){
for(int i=0;i<20;i++){
r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
}
}
color=mix(color,vec3(0.),r);
}
gl_FragColor=vec4(color,1.);
}