20240308

nemutas · Mar 8, 2024 · 9375e35 · 9375e35
1 parent 89108c6
commit 9375e35
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 0 deletions.
diff --git a/src/20240308/index.html b/src/20240308/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>torusknot star</title>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body style="overflow: hidden">
+    <canvas></canvas>
+    <div class="links">
+      <a href="/webgl-sketch/">../</a>
+      <a class="source" href="" target="_blank" rel="noopener noreferrer">source</a>
+    </div>
+  </body>
+
+  <script type="module" defer>
+    import fs from './sketch.fs'
+    import { entry } from '../scripts/entry.ts'
+    entry(fs)
+  </script>
+</html>
diff --git a/src/20240308/sketch.fs b/src/20240308/sketch.fs
@@ -0,0 +1,54 @@
+#version 300 es
+precision highp float;
+
+uniform sampler2D backBuffer;
+uniform vec2 resolution;
+uniform vec2 mouse;
+uniform float time;
+uniform float prevTime;
+uniform int frame;
+
+in vec2 vUv;
+out vec4 outColor;
+
+#define sat(v) clamp(v, 0.0, 1.0)
+
+const float PI = acos(-1.0);
+const float p = 3.0, q = 10.0;
+
+float sdSegment(in vec2 p, in vec2 a, in vec2 b) {
+  vec2 pa = p - a, ba = b - a;
+  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+  return length(pa - ba * h);
+}
+
+vec3 torusknot(float t) {
+  float r = 1.0 + 0.5 * cos(2.0 * PI * p * t);
+  float theta = 2.0 * PI * q * t;
+  float z = 0.5 * sin(2.0 * PI * p * t);
+  return vec3(r * cos(theta), r * sin(theta), z);
+}
+
+void main() {
+  vec2 uv = vUv, asp = resolution / min(resolution.x, resolution.y), suv = (uv * 2.0 - 1.0) * asp;
+  vec4 b = texture(backBuffer, uv);
+
+  // float speed = 0.1;
+  float speed = 3.0; // star
+  // float speed = 2.0; // rectangle
+  vec2 p1 = torusknot(fract(prevTime * speed)).xy;
+  vec2 p2 = torusknot(fract(time * speed)).xy;
+  float l = smoothstep(0.01, 0.00, sdSegment(suv * 2.0, p1, p2));
+
+  b.rgb *= step(0.1, b.rgb);
+  vec3 col = vec3(sat(l), b.rg);
+  col = mix(b.rgb, col * 5.0, 0.2);
+
+  outColor = vec4(col, 1.0);
+}
+
+//----------------------------
+// Reference
+//----------------------------
+// https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%BC%E3%83%A9%E3%82%B9%E7%B5%90%E3%81%B3%E7%9B%AE
+// https://iquilezles.org/articles/distfunctions2d/
diff --git a/src/index.html b/src/index.html
@@ -14,6 +14,7 @@
         <a class="tmp" href="template/">uv</a>
         <a class="tmp" href="template_postprocessing/">post-processing</a>
         <!-- sketches -->
+        <a href="20240308/">torusknot star</a>
         <a href="20240306_2/">Lissajous curve</a>
         <a href="20240306/">Fake fluid</a>
         <a href="20240304/">pattern shading</a>

diff --git a/vite.config.ts b/vite.config.ts
@@ -44,6 +44,7 @@ export default defineConfig(() => {
           '20240304',
           '20240306',
           '20240306_2',
+          '20240308',
         ].map((str) => resolvedPath(str)),
       },
     },