add squares.glsl

www/shaders/squares.glsl

@@ -0,0 +1,50 @@
+// is highp wasteful for this shader?
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+uniform float uTime;
+uniform vec2 uResolution;
+
+#define ROWS 10.
+
+float rand(in vec2 _st) {
+  return fract(sin(dot(_st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+}
+
+// #define STEPS 10.
+
+void main() {
+  // float ROWS = mod(uTime, 2. * STEPS);
+  
+  float aspect = uResolution.x / uResolution.y;
+  float cols = floor(ROWS * aspect);
+  
+  vec2 uv = vec2(
+    ceil(gl_FragCoord.x / uResolution.x * cols) / cols,
+    ceil(gl_FragCoord.y / uResolution.y * ROWS) / ROWS
+  );
+  // vec2 uv = ceil(gl_FragCoord.xy / uResolution * vec2(ROWS, COLS)) / vec2(ROWS, COLS);
+
+  float offset = rand(uv) + rand(vec2(uTime, uTime));
+  float id = mod(abs(uv.y * ROWS + uv.x * cols + offset), 4.); // project f(t) = (1, 1)t + uv against the y-axis
+  vec3 col = vec3(255., 0., 0.) / 255.;
+  if (id < 1.) {
+    col = vec3(156., 207., 216.) / 255.;
+  } else if (id < 2.) {
+    col = vec3(246., 193., 119.) / 255.;
+  } else if (id < 3.) {
+    col = vec3(196., 167., 231.) / 255.;
+  } else if (id < 4.) {
+    col = vec3(235., 111., 146.) / 255.;
+  }  
+  // vec3 col = vec3(id, id, id);
+
+  // float val1 = rand(uv);
+  // float val2 = rand(val1 + uv);
+  // float val3 = rand(val2 + uv);
+  // vec3 col = vec3(val1, val2, val3);
+  gl_FragColor = vec4(col,1.0);
+}