PendulumWave

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 
16/** Total width of the row of pendulums. */
17const WIDTH = 6
18/** Height of the support bar the pendulums hang from. */
19const TOP_Y = 1.7
20/** Seconds for the whole pattern to drift out of phase and realign. */
21const CYCLE = 26
22/** Oscillations the slowest (longest) pendulum completes per cycle. */
23const BASE_SWINGS = 7
24const UP = new THREE.Vector3(0, 1, 0)
25 
26function Pendulums({
27  count,
28  speed,
29  swing,
30  theme,
31}: {
32  count: number
33  speed: number
34  swing: number
35  theme: ThemeMode
36}) {
37  const { primaryColor, accentColor, mutedColor } = useShadcnTheme(theme)
38  const bobsRef = React.useRef<THREE.InstancedMesh>(null)
39  const stringsRef = React.useRef<THREE.InstancedMesh>(null)
40  const dummy = React.useMemo(() => new THREE.Object3D(), [])
41  const tmpColor = React.useMemo(() => new THREE.Color(), [])
42  const tmpDir = React.useMemo(() => new THREE.Vector3(), [])
43 
44  // Pendulum i completes (BASE_SWINGS + i) oscillations per CYCLE, so the row
45  // drifts through snakes and chaos before snapping back in phase. Lengths
46  // follow real pendulum physics (L ∝ 1/f²), giving the descending cascade.
47  const lengths = React.useMemo(
48    () =>
49      Array.from(
50        { length: count },
51        (_, i) => 3.1 * (BASE_SWINGS / (BASE_SWINGS + i)) ** 2
52      ),
53    [count]
54  )
55 
56  const spacing = count > 1 ? WIDTH / (count - 1) : 0
57  const bobRadius = Math.min(0.18, Math.max(0.09, spacing * 0.42))
58 
59  useFrame(({ clock }) => {
60    const bobs = bobsRef.current
61    const strings = stringsRef.current
62    if (!bobs || !strings) return
63    const t = clock.getElapsedTime() * speed
64    const swingRad = (swing * Math.PI) / 180
65 
66    for (let i = 0; i < count; i++) {
67      const f = (BASE_SWINGS + i) / CYCLE
68      // cos → every pendulum starts released from its full amplitude, so the
69      // row begins as one clean diagonal sweep.
70      const angle = swingRad * Math.cos(2 * Math.PI * f * t)
71      const x = -WIDTH / 2 + i * spacing
72      const len = lengths[i]
73 
74      // Swing happens in the Z plane, perpendicular to the row.
75      tmpDir.set(0, -Math.cos(angle), Math.sin(angle))
76      dummy.position.set(x, TOP_Y, 0).addScaledVector(tmpDir, len)
77// … truncated