cellular-noise-first-neighbor-distance: SketchFrgで書き換え

src/canvas/cellular-noise-first-neighbor-distance/index.frag

@@ -5,7 +5,6 @@ precision highp float;
 out vec4 fragColor;
 
 uniform vec2 uResolution;
-uniform vec2 uMouse;
 uniform float uTime;
 
 // 符号なし整数の最大値

src/canvas/cellular-noise-first-neighbor-distance/render.ts

@@ -1,63 +1,40 @@
-import { Space } from "@/lib/canvas/index"
-import { Program } from "@/lib/webgl/program"
-import { Timer } from "@/lib/control/timer"
-import { Clock } from "@/lib/event/clock"
-import { UniformLoader } from "@/lib/webgl/uniform-loader"
-import { MouseCoords } from "@/lib/control/mouse-coords"
-
-import vert from "./index.vert?raw"
-import frag from "./index.frag?raw"
-
-export const onload = () => {
-  const space = new Space("gl-canvas")
-  const canvas = space.canvas
-  const gl = space.gl
-  if (!canvas || !gl) return
-
-  let timer: Timer
-  let clock: Clock
-  let mouse: MouseCoords
-
-  const uniforms = new UniformLoader(gl, ["uResolution", "uTime", "uMouse"])
-
-  const onResize = () => {
-    space.fitScreen()
-    render()
-  }
+import { SketchFrg, type FragmentSketchConfig, type FragmentSketchFn } from "sketchgl"
+import { Uniforms } from "sketchgl/program"
+import { Timer } from "sketchgl/interactive"
 
-  const configure = () => {
-    space.fitScreen()
-
-    gl.clearColor(0.0, 0.0, 0.0, 1.0)
-    gl.clearDepth(1.0)
-
-    const program = new Program(gl, vert, frag)
+import frag from "./index.frag?raw"
 
-    clock = new Clock()
-    timer = new Timer()
-    mouse = new MouseCoords(canvas)
+const sketch: FragmentSketchFn = ({ gl, canvas, program, renderToCanvas }) => {
+  const uniforms = new Uniforms(gl, ["uResolution", "uTime"])
+  uniforms.init(program)
 
-    uniforms.init(program)
+  const timer = new Timer()
+  timer.start()
 
-    timer.start()
-    space.onResize = onResize
-  }
+  gl.clearColor(0.0, 0.0, 0.0, 1.0)
+  gl.clearDepth(1.0)
 
-  const render = () => {
-    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
+  return {
+    drawOnFrame() {
+      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
 
-    uniforms.float("uTime", timer.elapsed * 0.001)
-    uniforms.fvector2("uResolution", [canvas.width, canvas.height])
-    uniforms.fvector2("uMouse", mouse.xy)
+      uniforms.float("uTime", timer.elapsed * 0.001)
+      uniforms.fvector2("uResolution", [canvas.width, canvas.height])
 
-    gl.drawArrays(gl.TRIANGLE_FAN, 0, 3)
+      renderToCanvas()
+    }
   }
+}
 
-  const init = () => {
-    configure()
-    clock.on("tick", render)
+export const onload = () => {
+  const config: FragmentSketchConfig = {
+    frag,
+    canvas: {
+      el: "gl-canvas",
+      fitScreen: true,
+      autoResize: true
+    }
   }
-
-  init()
+  SketchFrg.init(config, sketch)
 }