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