Over the last few weeks, I’ve been learning Shaders via The Book of Shaders! I’ve come across many important concepts, like basic shaping functions, colors (adding, multiplying, mixing), and basic shape creation.

Unfortunately, I lost some of the shaders I created :( Here are the rest

Distance Field Stacking - 8/1/26

Attempted to create some illuminati guy, combined with a sunset behind it and some convergence toward the middle. I used 4 distance fields with this and polar coordinates!

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359
#define TWO_PI 6.28318530718

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Reference to
// http://thndl.com/square-shaped-shaders.html

void main(){
  vec2 st = gl_FragCoord.xy/u_resolution.xy;
  st.x *= u_resolution.x/u_resolution.y;
  vec3 color = vec3(0.0);
  float d = 0.0;

  // Remap the space to -1. to 1.
  st = st *2.-1.;

  // Number of sides of your shape
  int N = 3;

  // 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(.5 + a/r)*r-a)*length(st);
    
  // 2nd func
  float f = abs(cos(a * 3.));
  d = min(d, f);
    
  // 3rd func 
  float g = fract(length(st) * 10.);
  d = min(d, g);
    
  // 4th func - oval eye
  float face_r = 0.2;
  d = max(d, 1. - step(face_r, length(st) * cos(a * 40.)));
  
  color = vec3(1.0-smoothstep(.4,.41,d));
  //color = vec3(d);

  gl_FragColor = vec4(color,1.0);
}

Simple Scale and Rotate - 8/2/26

Here I matmul’d a scale and rotation matrix, and then multiplied the resulting transformation matrix with a position vector.

On the Phone to LI - 8/6/26

Don’t ask me how I did this but it happened. I was trying to make a rectangle (with a horizontal line and a cutout in the top right) rotate with a delay (based on vertex x-pos) but it turned into this. I think the main function was literally rotate2D(st, PI*0.25 + u_time + delay * 20.). Don’t ask me how delay * 20. turned it into this…