StrangeAttractor

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// Aizawa attractor coefficients — a classic set that traces a spindle wrapped
17// in orbiting loops.
18const A = 0.95
19const B = 0.7
20const C = 0.6
21const D = 3.5
22const E = 0.25
23const F = 0.1
24 
25/** Integrate the attractor into a centered, ~4-unit point path (run once). */
26function traceAttractor(points: number) {
27  const path = new Float32Array(points * 3)
28  let x = 0.1
29  let y = 0
30  let z = 0
31  const dt = 0.006
32  let minX = Infinity
33  let maxX = -Infinity
34  let minY = Infinity
35  let maxY = -Infinity
36  let minZ = Infinity
37  let maxZ = -Infinity
38 
39  for (let i = 0; i < points; i++) {
40    const dx = (z - B) * x - D * y
41    const dy = D * x + (z - B) * y
42    const dz =
43      C + A * z - (z * z * z) / 3 - (x * x + y * y) * (1 + E * z) + F * z * x * x * x
44    x += dx * dt
45    y += dy * dt
46    z += dz * dt
47    path[i * 3] = x
48    path[i * 3 + 1] = y
49    path[i * 3 + 2] = z
50    if (x < minX) minX = x
51    if (x > maxX) maxX = x
52    if (y < minY) minY = y
53    if (y > maxY) maxY = y
54    if (z < minZ) minZ = z
55    if (z > maxZ) maxZ = z
56  }
57 
58  const cx = (minX + maxX) / 2
59  const cy = (minY + maxY) / 2
60  const cz = (minZ + maxZ) / 2
61  const span = Math.max(maxX - minX, maxY - minY, maxZ - minZ) || 1
62  const scale = 4 / span
63  for (let i = 0; i < points; i++) {
64    path[i * 3] = (path[i * 3] - cx) * scale
65    path[i * 3 + 1] = (path[i * 3 + 1] - cy) * scale
66    path[i * 3 + 2] = (path[i * 3 + 2] - cz) * scale
67  }
68  return path
69}
70 
71/** Expand the point path into consecutive line segments for <lineSegments>. */
72function toSegments(path: Float32Array) {
73  const n = path.length / 3
74  const seg = new Float32Array((n - 1) * 2 * 3)
75  let o = 0
76  for (let i = 0; i < n - 1; i++) {
77    seg[o++] = path[i * 3]
78    seg[o++] = path[i * 3 + 1]
79    seg[o++] = path[i * 3 + 2]
80    seg[o++] = path[(i + 1) * 3]
81    seg[o++] = path[(i + 1) * 3 + 1]
82    seg[o++] = path[(i + 1) * 3 + 2]
83  }
84  return seg
85}
86 
87function Attractor({
88  points,
89  speed,
90  theme,
91}: {
92  points: number
93  speed: number
94  theme: ThemeMode
95}) {
96  const { primaryColor, accentColor, isDark } = useShadcnTheme(theme)
97  const geoRef = React.useRef<THREE.BufferGeometry>(null)
98// … truncated