CurlFlow

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import * as THREE from "three"
6 
7import {
8  SceneContainer,
9  type SceneContainerProps,
10} from "@/components/threecn/scene-container"
11import {
12  useShadcnTheme,
13  type ThemeMode,
14} from "@/components/hooks/use-shadcn-theme"
15 
16const BOUND = 3.4
17 
18/** A smooth scalar potential; three seeded copies form a vector potential. */
19function potential(x: number, y: number, z: number, t: number, seed: number) {
20  return (
21    Math.sin(x * 0.7 + seed + t * 0.3) +
22    Math.cos(y * 0.9 - seed * 1.3 + t * 0.2) +
23    Math.sin(z * 0.8 + seed * 0.7 - t * 0.25)
24  )
25}
26 
27function seedSphere(count: number, radius: number) {
28  const arr = new Float32Array(count * 3)
29  for (let i = 0; i < count; i++) {
30    const r = Math.cbrt(Math.random()) * radius
31    const theta = Math.random() * Math.PI * 2
32    const phi = Math.acos(2 * Math.random() - 1)
33    arr[i * 3] = r * Math.sin(phi) * Math.cos(theta)
34    arr[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta)
35    arr[i * 3 + 2] = r * Math.cos(phi)
36  }
37  return arr
38}
39 
40function Filaments({
41  count,
42  speed,
43  size,
44  theme,
45}: {
46  count: number
47  speed: number
48  size: number
49  theme: ThemeMode
50}) {
51  const { primaryColor, accentColor, isDark } = useShadcnTheme(theme)
52  const geoRef = React.useRef<THREE.BufferGeometry>(null)
53 
54  const positions = React.useMemo(
55    () => seedSphere(count, BOUND * 0.9),
56    [count]
57  )
58  const colors = React.useMemo(() => new Float32Array(count * 3), [count])
59 
60  useFrame((state, delta) => {
61    const geo = geoRef.current
62    if (!geo) return
63    const posAttr = geo.getAttribute("position") as THREE.BufferAttribute
64    const colAttr = geo.getAttribute("color") as THREE.BufferAttribute
65    const pos = posAttr.array as Float32Array
66    const cols = colAttr.array as Float32Array
67    const t = state.clock.getElapsedTime()
68    const dt = Math.min(delta, 0.05) * speed
69    const e = 0.1
70    const inv2e = 1 / (2 * e)
71    const col = new THREE.Color()
72 
73    for (let i = 0; i < count; i++) {
74      const o = i * 3
75      const x = pos[o]
76      const y = pos[o + 1]
77      const z = pos[o + 2]
78 
79      // curl of the vector potential (pa, pb, pc) → divergence-free flow.
80      const dPc_dy =
81        (potential(x, y + e, z, t, 9.7) - potential(x, y - e, z, t, 9.7)) * inv2e
82      const dPb_dz =
83        (potential(x, y, z + e, t, 5.2) - potential(x, y, z - e, t, 5.2)) * inv2e
84      const dPa_dz =
85// … truncated