Lesson 5 of 10 · Shader patterns
Going polar
HAL sees you. Sectors of an iris.
Until now everything was horizontal and vertical, p.x and p.y. But there is another way to describe a position: what angle are you at? and how far from the center?
Those are polar coordinates. Instead of left-right and up-down, you think in spin and distance. Like a clock: every point has an hour (angle) and a distance from the center.
Same space. Another way to traverse it.
atan(p.y, p.x)Gives you the angle of the frag relative to the center. It goes from -3.14 to 3.14 (one full turn). Top is 1.57, right is 0, bottom is -1.57. With this you can make anything circular.
Change
3. to 6., more slices. To 1., just a spinning gradient. Try adding + T to the angle to make it all rotate slowly. Hint: sin(ang * 3. + T)The code
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
float ang = atan(p.y, p.x);
float d = length(p);
float v = sin(ang * 3.) * .5 + .5;
float rings = smoothstep(.03,.0, abs(fract(d*4.)-.5)-.2);
float eye = smoothstep(0.25, 0.23, d);
float pupil = smoothstep(0.12, 0.1, d);
float shadow = smoothstep(0.0,.3, length(p+vec2(.05,-.07))-.8);
vec3 col = vec3(0.04,0.03,0.06) * shadow;
col += vec3(.2,.15,.1) * rings * (1.-eye);
col += vec3(.3,.12,.08) * v * (1.-eye) * .3;
col = mix(col, vec3(0.9,0.15,0.05), eye);
col = mix(col, vec3(0.95,0.85,0.2), pupil*.8);
col += vec3(.9,.2,.1) * exp(-d*2.) * .5;
col = hueShift(col, 0.0);
gl_FragColor = vec4(col, 1.);
}