Update test.js

test.js

@@ -2,6 +2,7 @@
 
 function main() {
   // Get a WebGL2 context
+  /** @type {HTMLCanvasElement} */
   const canvas = document.querySelector("#canvas");
   const gl = canvas.getContext("webgl2");
   if (!gl) {
@@ -9,7 +10,8 @@ function main() {
   }
 
   //────────────────────────────────────────────────────────────
-  // Vertex shader: simply pass the vertex positions along.
+  // Vertex Shader
+  // Simply passes along vertex positions.
   const vs = `#version 300 es
     in vec4 a_position;
     void main() {
@@ -18,11 +20,10 @@ function main() {
   `;
 
   //────────────────────────────────────────────────────────────
-  // Fragment shader: a scientifically–inspired 3D cymatic display.
-  // This shader ray–marches a vibrating “plate” (whose height is defined
-  // by the sum of two sinusoidal (mode) functions) and then shades it with
-  // diffuse and specular lighting. The palette() function is used to inject
-  // a pleasing color variation based on the local vibration amplitude.
+  // Fragment Shader
+  // This shader ray–marches a sphere whose radius is perturbed by multiple
+  // cymatic (sine–based) modes. Its surface is lit with diffuse and specular
+  // shading and decorated with intricate stripe textures and a wild color palette.
   const fs = `#version 300 es
   precision highp float;
   
@@ -31,147 +32,134 @@ function main() {
   uniform float iTime;
   out vec4 outColor;
   
-  // A color palette function (from Shadertoy) to add some “pop”
-  vec3 palette( float t ) {
-      vec3 a = vec3(0.5, 0.5, 0.5);
-      vec3 b = vec3(0.5, 0.5, 0.5);
-      vec3 c = vec3(1.0, 1.0, 1.0);
-      vec3 d = vec3(0.263, 0.416, 0.557);
-      return a + b * cos( 6.28318 * (c * t + d) );
+  // A wild palette function that returns vivid colors.
+  vec3 wildPalette(float t) {
+    vec3 a = vec3(0.5, 0.5, 0.5);
+    vec3 b = vec3(0.5, 0.5, 0.5);
+    vec3 c = vec3(1.0, 1.0, 1.0);
+    vec3 d = vec3(0.0, 0.33, 0.67);
+    return a + b * cos(6.28318 * (c * t + d));
   }
   
-  // The vibrating plate – defined on the xz–plane (with x,z in [-1,1])
-  // and with vertical displacement given by y = plate(x,z,t).
-  // Two modes are added (a “fundamental” and a second–harmonic mode) to mimic
-  // realistic cymatic (Chladni) patterns on a clamped plate.
-  float plate(vec2 pos, float t) {
-      // Map pos from [-1,1] to [0,1] (for clamped–edge conditions)
-      vec2 uv = (pos + 1.0) * 0.5;
-      float mode1 = sin(3.14159 * uv.x) * sin(3.14159 * uv.y) * cos(3.14159 * t);
-      float mode2 = sin(2.0 * 3.14159 * uv.x) * sin(2.0 * 3.14159 * uv.y) * cos(2.0 * 3.14159 * t);
-      return 0.2 * (mode1 + mode2);
+  // The sphere’s surface is modulated by several sine–based modes.
+  // We compute a “displacement” that is added to the base radius.
+  float sphereDisplacement(vec3 p, float t) {
+    float r = length(p);
+    float theta = acos(p.y / r);
+    float phi = atan(p.z, p.x);
+    // Three modes for a rich, cymatic effect:
+    float d1 = sin(3.0 * theta + t) * sin(4.0 * phi + 1.3 * t);
+    float d2 = cos(5.0 * theta - 0.7 * t) * sin(2.0 * phi + 1.1 * t);
+    float d3 = sin(7.0 * theta + 3.0 * t) * cos(6.0 * phi - 2.0 * t);
+    return 0.2 * (d1 + d2 + d3);
   }
   
-  // Compute the normal of the heightfield (the vibrating plate) using finite differences.
-  vec3 calcNormal(vec2 pos, float t) {
-      float eps = 0.001;
-      float h = plate(pos, t);
-      float hx = plate(pos + vec2(eps, 0.0), t) - h;
-      float hz = plate(pos + vec2(0.0, eps), t) - h;
-      return normalize(vec3(-hx, 1.0, -hz));
+  // Signed distance function for the deformed (cymatic) sphere.
+  // Base sphere has radius 1.0; its radius is perturbed by sphereDisplacement.
+  float sdCymaticSphere(vec3 p, float t) {
+    return length(p) - (1.0 + sphereDisplacement(p, t));
   }
   
-  // Given a 3D point p, return its vertical distance to the plate surface.
-  // (If p is exactly on the surface then p.y = plate(p.xz,t) and the result is zero.)
-  float mapHeight(vec3 p, float t) {
-      // Outside the domain x,z ∈ [-1,1] we assume a flat floor at y=0.
-      if (abs(p.x) > 1.0 || abs(p.z) > 1.0) {
-          return p.y;
-      }
-      return p.y - plate(vec2(p.x, p.z), t);
+  // Compute the normal at point p via finite differences of the SDF.
+  vec3 calcNormal(vec3 p, float t) {
+    float eps = 0.001;
+    vec3 n;
+    n.x = sdCymaticSphere(p + vec3(eps, 0.0, 0.0), t) - sdCymaticSphere(p - vec3(eps, 0.0, 0.0), t);
+    n.y = sdCymaticSphere(p + vec3(0.0, eps, 0.0), t) - sdCymaticSphere(p - vec3(0.0, eps, 0.0), t);
+    n.z = sdCymaticSphere(p + vec3(0.0, 0.0, eps), t) - sdCymaticSphere(p - vec3(0.0, 0.0, eps), t);
+    return normalize(n);
   }
   
-  // A simple raycast function that marches a ray from the camera and
-  // returns the distance along the ray at which the plate is hit.
-  float raycast(vec3 ro, vec3 rd, float t) {
-      float tMin = 0.0;
-      float tMax = 20.0;
-      float tCurrent = tMin;
-      float stepSize = 0.02;
-      bool hit = false;
-      for (int i = 0; i < 500; i++) {
-          vec3 pos = ro + rd * tCurrent;
-          float d = mapHeight(pos, t);
-          if (d < 0.001) { 
-              hit = true;
-              break;
-          }
-          tCurrent += stepSize;
-          if (tCurrent > tMax) break;
-      }
-      if (!hit) return -1.0;
-      // Refine the hit point with a short binary search.
-      float tA = tCurrent - stepSize;
-      float tB = tCurrent;
-      for (int i = 0; i < 10; i++) {
-          float tMid = (tA + tB) * 0.5;
-          float dMid = mapHeight(ro + rd * tMid, t);
-          if (dMid > 0.0) {
-              tA = tMid;
-          } else {
-              tB = tMid;
-          }
+  // Ray–marching routine to find the intersection of a ray with the deformed sphere.
+  float raymarch(vec3 ro, vec3 rd, float t, out vec3 pos) {
+    float depth = 0.0;
+    for (int i = 0; i < 100; i++) {
+      pos = ro + rd * depth;
+      float dist = sdCymaticSphere(pos, t);
+      if (abs(dist) < 0.001) {
+        return depth;
       }
-      return (tA + tB) * 0.5;
+      depth += dist;
+      if (depth >= 20.0) break;
+    }
+    return -1.0;
   }
   
   void main() {
-      // Compute normalized screen coordinates (centered on 0)
-      vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
-  
-      // Use the mouse to control the camera’s azimuth and pitch.
-      // Horizontal movement rotates 0–2π; vertical movement adjusts pitch.
-      float angle = iMouse.x / iResolution.x * 6.28318; // full rotation
-      float pitch = mix(0.4, 1.2, iMouse.y / iResolution.y);
-      float radius = 4.0;
-      vec3 ro = vec3(
-          radius * cos(pitch) * cos(angle),
-          radius * sin(pitch),
-          radius * cos(pitch) * sin(angle)
-      );
-      vec3 target = vec3(0.0, 0.0, 0.0);
+    // Normalized pixel coordinates (centered on zero)
+    vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
   
-      // Construct a simple camera coordinate system.
-      vec3 forward = normalize(target - ro);
-      vec3 right = normalize(cross(forward, vec3(0.0, 1.0, 0.0)));
-      vec3 up = cross(right, forward);
+    // Use mouse position to control the camera’s azimuth and pitch.
+    float angle = iMouse.x / iResolution.x * 6.28318;
+    float pitch = mix(0.3, 1.2, iMouse.y / iResolution.y);
+    float radius = 4.0;
+    vec3 ro = vec3(
+      radius * cos(pitch) * cos(angle),
+      radius * sin(pitch),
+      radius * cos(pitch) * sin(angle)
+    );
+    vec3 target = vec3(0.0);
   
-      // Compute the ray direction using a basic perspective projection.
-      vec3 rd = normalize(forward + uv.x * right + uv.y * up);
+    // Build a simple camera coordinate system.
+    vec3 forward = normalize(target - ro);
+    vec3 right = normalize(cross(forward, vec3(0.0, 1.0, 0.0)));
+    vec3 up = cross(right, forward);
   
-      // March the ray to see if and where it hits the vibrating plate.
-      float tHit = raycast(ro, rd, iTime);
-      vec3 color;
-      if (tHit > 0.0) {
-          vec3 pos = ro + rd * tHit;
-          // Get the local normal from the heightfield
-          vec3 normal = calcNormal(vec2(pos.x, pos.z), iTime);
+    // Compute the ray direction.
+    vec3 rd = normalize(forward + uv.x * right + uv.y * up);
   
-          // Standard lighting: diffuse + specular
-          vec3 lightDir = normalize(vec3(0.5, 1.0, 0.8));
-          float diff = max(dot(normal, lightDir), 0.0);
-          vec3 viewDir = normalize(ro - pos);
-          vec3 halfDir = normalize(lightDir + viewDir);
-          float spec = pow(max(dot(normal, halfDir), 0.0), 32.0);
+    // Ray–march the scene.
+    vec3 pos;
+    float d = raymarch(ro, rd, iTime, pos);
+    vec3 color;
+    if (d > 0.0) {
+      // Surface hit: compute normal for lighting.
+      vec3 normal = calcNormal(pos, iTime);
+      vec3 lightDir = normalize(vec3(0.8, 1.0, 0.6));
+      float diff = max(dot(normal, lightDir), 0.0);
+      vec3 viewDir = normalize(ro - pos);
+      vec3 halfDir = normalize(lightDir + viewDir);
+      float spec = pow(max(dot(normal, halfDir), 0.0), 32.0);
+      
+      // Compute spherical coordinates for the hit point.
+      float rPos = length(pos);
+      float theta = acos(pos.y / rPos);
+      float phi = atan(pos.z, pos.x);
   
-          // Base color comes from the palette – modulated by the local vibration amplitude.
-          float h = plate(vec2(pos.x, pos.z), iTime);
-          vec3 baseColor = palette(h * 5.0);
+      // Use the cymatic displacement to drive the wild color palette.
+      float sp = sphereDisplacement(pos, iTime);
+      float factor = sp * 5.0;
+      vec3 baseColor = wildPalette(factor + sin(iTime));
   
-          color = baseColor * diff + vec3(0.1) * spec + vec3(0.1);
-      } else {
-          // If no hit, use a subtle background gradient.
-          color = mix(vec3(0.0, 0.0, 0.1), vec3(0.0), uv.y + 0.5);
-      }
-  
-      outColor = vec4(color, 1.0);
+      // Add intricate stripe textures via high–frequency sine patterns.
+      float stripes = sin(10.0 * phi + iTime) * sin(10.0 * theta + iTime);
+      baseColor *= 0.5 + 0.5 * stripes;
+      
+      // Combine the base color with lighting.
+      color = baseColor * diff + vec3(0.2) * spec;
+      color = mix(color, baseColor, 0.3);
+    } else {
+      // No hit: use a subtle background gradient.
+      color = mix(vec3(0.0, 0.0, 0.1), vec3(0.0), uv.y + 0.5);
+    }
+    outColor = vec4(color, 1.0);
   }
   `;
-  
+
   //────────────────────────────────────────────────────────────
   // Create and compile the shader program using webgl-utils.
   const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
-  
+
   // Look up attribute and uniform locations.
   const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
   const resolutionLocation = gl.getUniformLocation(program, "iResolution");
   const mouseLocation = gl.getUniformLocation(program, "iMouse");
   const timeLocation = gl.getUniformLocation(program, "iTime");
-  
+
   // Create a vertex array object (VAO) and bind it.
   const vao = gl.createVertexArray();
   gl.bindVertexArray(vao);
-  
+
   // Create a buffer and put a full–screen quad in it.
   const positionBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
@@ -187,25 +175,25 @@ function main() {
     ]),
     gl.STATIC_DRAW
   );
-  
-  // Enable the position attribute.
+
+  // Enable the attribute.
   gl.enableVertexAttribArray(positionAttributeLocation);
   gl.vertexAttribPointer(
     positionAttributeLocation,
-    2,           // 2 components per vertex
-    gl.FLOAT,    // data type is float
+    2,         // 2 components per vertex
+    gl.FLOAT,  // data type is float
     false,
     0,
     0
   );
-  
+
   //────────────────────────────────────────────────────────────
-  // Setup mouse / touch interactions.
+  // Set up mouse/touch interactions.
   const playpauseElem = document.querySelector(".playpause");
   const inputElem = document.querySelector(".divcanvas");
   inputElem.addEventListener("mouseover", requestFrame);
   inputElem.addEventListener("mouseout", cancelFrame);
-  
+
   let mouseX = 0;
   let mouseY = 0;
   function setMousePosition(e) {
@@ -213,7 +201,6 @@ function main() {
     mouseX = e.clientX - rect.left;
     mouseY = rect.height - (e.clientY - rect.top) - 1;
   }
-  
   inputElem.addEventListener("mousemove", setMousePosition);
   inputElem.addEventListener("touchstart", (e) => {
     e.preventDefault();
@@ -229,9 +216,9 @@ function main() {
     playpauseElem.classList.remove("playpausehide");
     cancelFrame();
   }, { passive: false });
-  
+
   //────────────────────────────────────────────────────────────
-  // Animation loop variables and functions.
+  // Animation loop.
   let requestId;
   function requestFrame() {
     if (!requestId) {
@@ -244,32 +231,27 @@ function main() {
       requestId = undefined;
     }
   }
-  
+
   let then = 0;
   let time = 0;
   function render(now) {
     requestId = undefined;
-    now *= 0.001; // convert milliseconds to seconds
+    now *= 0.001; // Convert to seconds.
     const elapsedTime = Math.min(now - then, 0.1);
     time += elapsedTime;
     then = now;
-  
-    // Resize canvas if needed.
+
     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-  
-    // Use our program and bind our VAO.
     gl.useProgram(program);
     gl.bindVertexArray(vao);
   
-    // Set the uniforms.
+    // Set uniforms.
     gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
     gl.uniform2f(mouseLocation, mouseX, mouseY);
     gl.uniform1f(timeLocation, time);
   
-    // Draw the full–screen quad.
     gl.drawArrays(gl.TRIANGLES, 0, 6);
-  
     requestFrame();
   }