1. Create a smiley in shader toy
This is the first step in to create a circle function and utilise that to create a shape
float Circle(vec2 uv, vec2 c, float r, float blur){
float d = length(uv - c);
// need to smoothstep
float color = smoothstep(r,r-blur,d);
return color;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
uv = uv-0.5;// remapping to center
// we need x value to be based aspect ratio corrected
uv.x*= iResolution.x/iResolution.y;
vec3 col = vec3(0.);
float face = Circle(uv, vec2(0.), 0.4, 0.01);
col +=face;
float lEye = Circle(uv, vec2(-0.18,0.1), .1, .01);
face -= lEye;
float rEye = Circle(uv, vec2(0.18,0.1), .1, .01);
face -= rEye;
float mouth = Circle(uv, vec2(0.,0.), .3, .01);
mouth -= Circle(uv, vec2(0.,0.09), .31, .01);
face -= mouth;
col = vec3(1.,1.,0)*face;
fragColor = vec4(col,1.);
}
Learnings
- Normalising the pixel coordinates to 0-1 so as to work uniformly on all screens
- remapping the coordinate system from left bottom to center by subtracting 0.5
- x axis aspect ratio correction by multiplying with aspect ratio
- Creating a circle. need to learn aout SDFs
- its all about adding and subtracting.
- its hard