Week 2

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

Leave a Reply