EvenOdd - RC Shader Jam

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
camera.position.z = 1;

const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById("shader")
});
let w = Math.min(window.innerWidth * 0.9, window.innerHeight * 0.9);
let h = w;
renderer.setSize(w, h);

const shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    u_resolution: {
      value: new THREE.Vector2(window.innerWidth, window.innerHeight)
    },
    u_time: { value: 0 }
  },
  vertexShader: `
     void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
     `,
  fragmentShader: `
      precision mediump float;
      uniform vec2 u_resolution;
      uniform float u_time;
      
      float circle(in vec2 p, float r){
          return length(p) - r;
      }
      
      float random (vec2 st) {
          return fract(sin(dot(st.xy,
              vec2(12.9898,78.233)))*
              43758.5453123);
      }
      void main() {
          vec2 uv = gl_FragCoord.xy /         u_resolution.xy;
          // const int n = 20;
          
          // vec3 c1 = vec3(0.2,0.2,0.4);
          // vec3 c2 = vec3(0.4,0.6,0.3);
          // vec3 c3 = vec3(0.7,0.4,0.3);
          // vec3 c4 = vec3(0.1,0.62,0.2);
          // vec3 c5 = vec3(0.3,0.35,0.5);
          // recipe:
          // float a[5] = float[5](3.4, 4.2, 5.0, 5.2, 1.1);
          //vec3 a[5] = vec3[5](c1,c2,c3,c4,c5);
//           vec3 a[20] = vec3[20](
//             c1,c1,c1,c1,c1,
//             c1,c1,c1,c1,c1,
//             c1,c1,c1,c1,c1,
//             c1,c1,c1,c1,c1
//           );
          
//           for( int i=0;i<20;i++){
//               a[i] = vec3(
//                 random(vec2(i,   i+1)),
//                 random(vec2(i+2, i+3)),
//                 random(vec2(i+4, i+5)) / 2.
//               );
//           }
          float sinD = 1.;
          for (int i = 0; i < 20; i++)
          {           
            
            vec2 p = vec2(
            random(vec2(i, i+2)), 
            random(vec2(i, i+4))
            );
            float r = random(vec2(i, i+1)); 

            sinD = sinD * sign(circle(uv - p.xy,r));
          }
          
          
          // for (int i = 0; i < 20; i++)
          // {
          //   sinD = sinD * sign(circle(uv - a[i].xy,a[i].z));
          // }
          vec3 color1 = sinD*vec3(0.2, 0.0, 0.5); // Purple
          vec3 color2 = sinD*vec3(1.0, 0.5, 0.0); // Orange
          vec3 gradient = mix(color1, color2, uv.y);
          gl_FragColor = vec4(gradient, 1.0);
      }
    `
});

const geometry = new THREE.PlaneGeometry(2, 2);
const mesh = new THREE.Mesh(geometry, shaderMaterial);
scene.add(mesh);

function shadeMe() {
  shaderMaterial.uniforms.u_time.value += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(shadeMe);
}
shadeMe();

window.addEventListener("resize", () => {
  w = Math.min(window.innerWidth * 0.9, window.innerHeight * 0.9);
  h = w;
  renderer.setSize(w, h);
  shaderMaterial.uniforms.u_resolution.value.set(w, h);
});