Week 2 Shader

I wanted to explore creating textures through black and white gradients. As well as using the idea of truchet tiles.

I began with simple shapes and gradients.

 

screenshot-2021-02-03-181448

 

Tiling them generates a texture.

screenshot-2021-02-03-181431

 

Moving the location of the circles will create different patterns, some becoming almost seamless.

screenshot-2021-02-03-181344

 

Code:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
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){
st*=grid;
indices=floor(st);
st=fract(st);
return st;
}

float drawRectangle(vec2 st,vec2 pos,vec2 size){
float result=1.;
vec2 border=(1.-size)/2.200;
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);
return 1.-step(size,d);
}

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

// good practice to take a copy of the original st
// before you change it
vec2 st0=st;

vec2 indices;

// create our grid
st=createGrid(st,vec2(10.,10.),indices);

vec3 color=vec3(0.);

// a float to control animation speed
float speed=.5;

float circle1=drawCircle(st,vec2(1.,1.),.5);
float circle2=drawCircle(st,vec2(0.,0.),.5);

// animations
// float circle1=drawCircle(st,vec2(0.,map(cos(u_time*speed),-1.,1.,0.,1.)),.5);
// float circle2=drawCircle(st,vec2(1.,map(cos(u_time*speed),-1.,1.,1.,0.)),.5);
// float circle1=drawCircle(st,vec2(map(sin(u_time*speed),-1.,1.,0.,1.),map(cos(u_time*speed),-1.,1.,0.,1.)),.5);
// float circle2=drawCircle(st,vec2(map(cos(u_time*speed),-1.,1.,0.,1.),map(sin(u_time*speed),-1.,1.,0.,1.)),.5);

// color = vec3(st.t.y,abs(sin(u_time)));
vec2 size=vec2(.25,.25);
vec2 pos=vec2(.5,.5);

// color = mix( color, vec3(pct2)*(atan(u_time)+1.)*0.03, circle2);

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

// various gradients based on different distances
float pct=distance(st,vec2(.5));
float pct2=distance(st,vec2(1.,1.));
float pct3=distance(st,vec2(0.,0.))*2.;
float pct4=distance(st,vec2(0.,0.));
float pct5=distance(st,vec2(map(sin(u_time*speed),-1.,1.,0.,1.),map(cos(u_time*speed),-1.,1.,0.,1.)));

// use the mix function to draw multiple shapes
color=mix(color,vec3(pct2),rect);
color=mix(color,vec3(pct5),circle1);
color=mix(color,vec3(pct),circle2);

gl_FragColor=vec4(color,1.);
}

Leave a Reply