create-definedmotion 0.1.0

package/template/src/example_scenes/tutorials/easy2.ts

@@ -0,0 +1,141 @@
+// Tutorial 2 (easy2.ts)
+// Goal for this animation:
+// 1) Render a time-varying mathematical surface (z = f(x, y, t))
+// 2) Add a glowing orb with a point light
+// 3) Animate the camera on a smooth orbit while the surface deforms
+
+import * as THREE from 'three'
+
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+
+// If your helpers live elsewhere, tweak these paths:'
+import { createFunctionSurface, updateFunctionSurface } from '$renderer/lib/rendering/objects3d'
+import { addBackgroundGradient } from '$renderer/lib/rendering/lighting3d'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 0: Materials used by our surface and our glowing sphere
+// MeshStandardMaterial gives us physically-based shading that reacts to lights.
+// For the sphere, we use a strong emissive color so it "glows" even without light.
+// ─────────────────────────────────────────────────────────────────────────────
+const surfaceMaterial = new THREE.MeshStandardMaterial({
+  color: 0xffffff,
+  metalness: 0.8,
+  roughness: 0.1,
+  side: THREE.DoubleSide
+}) as any // cast to any to satisfy TS if createFunctionSurface has a stricter type
+
+const sphereMaterial = new THREE.MeshStandardMaterial({
+  color: 0x000000, // base color (almost irrelevant since emissive dominates)
+  emissive: 0xffffff, // self-illumination color
+  emissiveIntensity: 200 // strong glow
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 1: A time-dependent function that returns a surface height function.
+// We return a function (x, y) => z that changes smoothly over time.
+// Try tweaking constants to see different wave behaviors.
+// ─────────────────────────────────────────────────────────────────────────────
+const sineTimeFunction = (time: number): ((x: number, y: number) => number) => {
+  return (x: number, y: number) =>
+    (5 * (Math.sin(x * 2 + time) * Math.cos(y * 2 + time))) /
+      (Math.pow(Math.abs(x) + Math.abs(y), 2) + 5) +
+    3
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 2: Export an AnimatedScene just like in tutorial 1, but in 3D.
+// We use HotReloadSetting.BeginFromCurrent since it will be much faster during debug.
+// Since this has accumulative effects (angle += 0.005) notice that the angle is not correct at hot reload.
+// Regardless of our HotReloadSetting, the renders will always be correct
+// ─────────────────────────────────────────────────────────────────────────────
+export function tutorial_easy2(): AnimatedScene {
+  return new AnimatedScene(
+    1500, // width  (square clip)
+    1500, // height
+    SpaceSetting.ThreeDim, // 3D scene
+    HotReloadSetting.BeginFromCurrent,
+    async (scene) => {
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 3: Basic environment (background gradient)
+      // ───────────────────────────────────────────────────────────────────────
+      addBackgroundGradient({
+        scene,
+        topColor: 0x0c8ccd, // blue-ish
+        bottomColor: 0x000000, // black
+        lightingIntensity: 10
+      })
+
+      // We use three.js directly to create a grid and axes
+      const gridHelper = new THREE.GridHelper(20, 20)
+      const axesHelper = new THREE.AxesHelper(20)
+      scene.add(gridHelper, axesHelper)
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 4: Create a function surface over a domain.
+      // We start with t = 0, then update it every frame in onEachTick.
+      // The returned object is a THREE.Mesh we can style like any other mesh.
+      // ───────────────────────────────────────────────────────────────────────
+      const DOMAIN: [number, number, number, number] = [-7, 7, -7, 7] // [xMin, xMax, yMin, yMax]
+      const surface = createFunctionSurface(sineTimeFunction(0), ...DOMAIN)
+      surface.material = surfaceMaterial
+      scene.add(surface)
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 5: Add a glowing sphere with a point light.
+      // We put them in a Group so they move together if we want.
+      // The light’s position is kept in sync with the sphere.
+      // ───────────────────────────────────────────────────────────────────────
+      const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), sphereMaterial)
+      const pointLight = new THREE.PointLight(0xffffff, 50) // (color, intensity)
+      pointLight.position.copy(sphere.position)
+
+      const orbGroup = new THREE.Group()
+      orbGroup.add(sphere, pointLight)
+      orbGroup.position.y = 6 // float above the surface a bit
+      scene.add(orbGroup)
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 6: Camera setup + gentle orbit animation.
+      // We place the camera, measure its distance to the origin, and then
+      // slowly orbit around (0,0,0). The wobble changes radius over time.
+      // Thees numbers for the position is difficult to guess,
+      // the workflow is therefore to navigate the scene to where you want it and then copy the positions it prints.
+      // This avoids awkward value guessing for position and rotation
+      // ───────────────────────────────────────────────────────────────────────
+      scene.camera.position.set(3.889329, 7.895859, 10.51772)
+      scene.camera.rotation.set(-0.6027059, 0.3079325, 0.2056132)
+
+      const LOOK_AT = new THREE.Vector3(0, 0, 0)
+      const baseRadius = scene.camera.position.distanceTo(LOOK_AT)
+      let angle = 0
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 7: Per-frame updates.
+      // - Update the surface with the current time (tick)
+      // - Keep the orb group floating
+      // - Orbit the camera and keep it looking at the center
+      // ───────────────────────────────────────────────────────────────────────
+      scene.onEachTick((tick) => {
+        const t = tick / 20
+        const f = sineTimeFunction(t)
+        updateFunctionSurface(surface, f, ...DOMAIN)
+
+        // Keep the orb hovering above the surface
+        orbGroup.position.y = 6
+
+        // Camera orbit with a subtle radius wobble
+        angle += 0.005
+        const wobble = (Math.sin(tick / 50) + 2) / 2 // ranges roughly [0.5, 1.5]
+        scene.camera.position.x = Math.sin(angle) * baseRadius * wobble
+        scene.camera.position.z = Math.cos(angle) * baseRadius * wobble
+        scene.camera.lookAt(LOOK_AT)
+      })
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 8: Let the animation run for a while before finishing.
+      // This adds 10 seconds of "play time" to the scene’s schedule.
+      // ───────────────────────────────────────────────────────────────────────
+      scene.addWait(10_000)
+    }
+  )
+}

package/template/src/example_scenes/tutorials/easy3.ts

@@ -0,0 +1,133 @@
+// Tutorial 3 (easy3.ts)
+// Goal for this animation:
+// 1) Show a fullscreen-ish color card
+// 2) Swap the headline text every few beats
+// 3) Play a short tick sound on each swap
+
+import * as THREE from 'three'
+
+import { easeLinear } from '$renderer/lib/animation/interpolations'
+import { createAnim } from '$renderer/lib/animation/protocols'
+import { createFastText, createRectangle, updateText } from '$renderer/lib/rendering/objects2d'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+
+// Adjust this path if your assets are elsewhere:
+import tickSound from '$assets/audio/tick_sound.mp3'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 0: Slides = headline alternatives (translated to English)
+// ─────────────────────────────────────────────────────────────────────────────
+const ALTERNATIVES = [
+  'Introductory Mathematical Analysis',
+  'Linear Algebra',
+  'The Physicist’s Toolkit',
+  'Mathematical Analysis, Continued',
+  'Mechanics 1',
+  'Programming Techniques and Numerical Analysis',
+  'Multivariable Calculus',
+  'Probability and Statistics',
+  'Mechanics 2',
+  'Complex Analysis',
+  'Experimental Physics 1',
+  'Electrical Circuits and Systems',
+  'Vector Fields and Electromagnetic Field Theory',
+  'Control Engineering (F)',
+  'Bayesian Inference and Machine Learning',
+  'Fourier Analysis',
+  'Optics',
+  'Continuum Mechanics',
+  'Thermodynamics and Statistical Mechanics',
+  'Quantum Physics',
+  'Data Structures and Algorithms',
+  'Experimental Physics 2',
+  'Solid State Physics',
+  'Subatomic Physics',
+  'Environmental Physics',
+  'Algorithms',
+  'Logic for Computer Science',
+  'Introduction to Data Science and AI',
+  'Programming Languages',
+  'Design of AI Systems',
+  'Algorithms for Machine Learning and Inference',
+  'Computational Methods for Large-Scale Data',
+  'Compiler Construction'
+]
+
+// Pleasant, varied card colors
+const SLIDE_COLORS = [
+  '#3D6680',
+  '#2F6666',
+  '#2F3D66',
+  '#592659',
+  '#3D2F66',
+  '#2F665C',
+  '#5C662F',
+  '#66332F',
+  '#3D2F66',
+  '#2F4D66'
+]
+
+// How long each slide stays on screen, measured in ticks/frames
+const TICKS_PER_SLIDE = 300
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 1: Export an AnimatedScene (2D, begin from current = fast hot reload)
+// ─────────────────────────────────────────────────────────────────────────────
+export function tutorial_easy3(): AnimatedScene {
+  return new AnimatedScene(
+    1000,
+    1000,
+    SpaceSetting.TwoDim,
+    HotReloadSetting.BeginFromCurrent,
+    async (scene) => {
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 2: Create a background card and a headline text
+      // The rectangle acts like a slide background; we’ll change its color.
+      // ───────────────────────────────────────────────────────────────────────
+      const card = createRectangle(200, 200) // simple square card
+      const title = await createFastText('', 1.5) // scale = 1.5 ⇒ nice big headline
+      scene.add(card, title)
+
+      // Optional: center them if your renderer doesn’t already
+      card.position.set(0, 0, 0)
+      title.position.set(0, 0, 0)
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 3: Load the tick SFX and register it once
+      // ───────────────────────────────────────────────────────────────────────
+      scene.registerAudio(tickSound)
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 4: Build a simple “switcher” animation
+      // We map a linear 0→1 over (ALTERNATIVES.length * TICKS_PER_SLIDE) ticks.
+      // On each whole-index step we:
+      //   - update the background color
+      //   - update the headline text
+      //   - play a tick sound
+      // ───────────────────────────────────────────────────────────────────────
+      let lastIndex = -1
+      const totalTicks = ALTERNATIVES.length * TICKS_PER_SLIDE
+
+      const switcher = createAnim(easeLinear(0, 1, totalTicks), (value) => {
+        // Convert 0..1 into a slide index. Modulo makes the final frame safe.
+        const i = Math.floor(value * ALTERNATIVES.length) % ALTERNATIVES.length
+        if (i === lastIndex) return
+        lastIndex = i
+
+        // Update color + text
+        const color = SLIDE_COLORS[i % SLIDE_COLORS.length]
+        ;(card.material as THREE.MeshBasicMaterial).color = new THREE.Color(color)
+        updateText(title, ALTERNATIVES[i])
+
+        // Click!
+        scene.playAudio(tickSound)
+      })
+
+      // Start the slide show
+      scene.addAnim(switcher)
+
+      // Let it run a bit after the last change (nice tail for render/export)
+      scene.addWait(1_000)
+    }
+  )
+}

package/template/src/example_scenes/tutorials/medium1.ts

@@ -0,0 +1,154 @@
+// Tutorial 3 (medium1.ts)
+// Goal for this animation:
+// 1) Light the scene with an HDRI (image-based lighting) + soft gradient background
+// 2) Spawn a flock of spheres that wander smoothly with damped random acceleration
+// 3) Draw dependency lines between neighbors to form a living chain
+// 4) Orbit the camera around the action
+
+import * as THREE from 'three'
+
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+
+// If your helpers live elsewhere, tweak these paths:
+import {
+  addBackgroundGradient,
+  addHDRI,
+  loadHDRIData,
+  HDRIs
+} from '$renderer/lib/rendering/lighting3d'
+import { setOpacity } from '$renderer/lib/animation/animations'
+import { createLine } from '$renderer/lib/rendering/objects2d'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 0: Scene constants and materials
+// ─────────────────────────────────────────────────────────────────────────────
+const NODE_COUNT = 200
+const BOUNDARY_RADIUS = 10
+const ORBIT_SPEED = 0.01
+
+const sphereMaterial = new THREE.MeshStandardMaterial({
+  color: 0xffffff,
+  roughness: 0.3,
+  metalness: 1.0
+})
+
+type Node = {
+  mesh: THREE.Mesh
+  velocity: THREE.Vector3
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 1: Helper to make a moving node (sphere + velocity)
+// ─────────────────────────────────────────────────────────────────────────────
+function createNode(): Node {
+  const geometry = new THREE.SphereGeometry(0.15, 32, 32)
+  const mesh = new THREE.Mesh(geometry, sphereMaterial.clone())
+  // Start near the origin with a tiny random offset so lines aren’t degenerate
+  mesh.position.set(
+    THREE.MathUtils.randFloatSpread(1),
+    THREE.MathUtils.randFloatSpread(1),
+    THREE.MathUtils.randFloatSpread(1)
+  )
+  return { mesh, velocity: new THREE.Vector3() }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 2: Export an AnimatedScene (3D, hot-reload from current frame)
+// We don’t need to replay long histories, so BeginFromCurrent makes iteration fast.
+// ─────────────────────────────────────────────────────────────────────────────
+export function tutorial_medium1(): AnimatedScene {
+  return new AnimatedScene(
+    1080, // width  (vertical clip like easy1)
+    1920, // height
+    SpaceSetting.ThreeDim, // 3D scene
+    HotReloadSetting.BeginFromCurrent,
+    async (scene) => {
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 3: Lighting & background
+      // HDRI gives nice reflections/IBL; gradient provides a subtle backdrop.
+      // ───────────────────────────────────────────────────────────────────────
+      const hdriData = await loadHDRIData(HDRIs.photoStudio1, 2, 0.5) // (lods, intensity normalization)
+      await addHDRI(scene, hdriData, 0.3) // envMap intensity
+
+      addBackgroundGradient({
+        scene,
+        topColor: 0xaa9775, // warm top
+        bottomColor: 0x483924, // rich brown base
+        backgroundOpacity: 0.7
+      })
+
+      // Optional helpers if you like visual anchors:
+      //scene.add(new THREE.GridHelper(30, 30))
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 4: Create moving nodes and dependency lines (neighbor chain)
+      // We connect each node i to node (i+1) to visualize a simple dependency.
+      // ───────────────────────────────────────────────────────────────────────
+      const nodes: Node[] = Array.from({ length: NODE_COUNT }, createNode)
+      const lines = nodes.map(() => setOpacity(createLine(), 0.12)) // faint lines
+
+      scene.add(...nodes.map((n) => n.mesh), ...lines)
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 5: Camera setup — start out on the +X axis and orbit around origin
+      // ───────────────────────────────────────────────────────────────────────
+      scene.camera.position.set(30, 20, 0)
+      const center = new THREE.Vector3(0, 0, 0)
+      const orbitRadius = scene.camera.position.distanceTo(center)
+      let angle = 0
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 6: Per-frame simulation
+      // - Each node gets a tiny random acceleration (smooth wander)
+      // - Velocity is damped for stability
+      // - Soft boundary: gentle pull toward center if too far
+      // - Lines update to connect neighbors (i -> i+1)
+      // - Camera orbits and keeps looking at the center
+      // ───────────────────────────────────────────────────────────────────────
+      scene.onEachTick((tick) => {
+        // Physics update
+        for (const n of nodes) {
+          // Small random acceleration
+          const ax = (Math.random() - 0.5) * 0.05
+          const ay = (Math.random() - 0.5) * 0.05
+          const az = (Math.random() - 0.5) * 0.05
+          n.velocity.x += ax
+          n.velocity.y += ay
+          n.velocity.z += az
+
+          // Damping (retain ~95% of previous velocity)
+          n.velocity.multiplyScalar(0.95)
+
+          // Integrate
+          n.mesh.position.add(n.velocity)
+
+          // Soft boundary: if outside radius, nudge back toward origin
+          const len = n.mesh.position.length()
+          if (len > BOUNDARY_RADIUS) {
+            const pull = n.mesh.position.clone().negate().normalize().multiplyScalar(0.02)
+            n.velocity.add(pull)
+          }
+        }
+
+        // Update dependency lines (chain)
+        for (let i = 0; i < nodes.length; i++) {
+          const a = nodes[i].mesh.position
+          const b = nodes[(i + 1) % nodes.length].mesh.position // wrap to form a loop
+          // createLine() returns a handle with updatePositions(start, end)
+          lines[i].updatePositions(a, b)
+        }
+
+        // Camera orbit
+        angle += ORBIT_SPEED
+        scene.camera.position.x = Math.sin(angle) * orbitRadius
+        scene.camera.position.z = Math.cos(angle) * orbitRadius
+        scene.camera.lookAt(center)
+      })
+
+      // ───────────────────────────────────────────────────────────────────────
+      // Step 7: Let it play for 20 seconds before finishing
+      // ───────────────────────────────────────────────────────────────────────
+      scene.addWait(20_000)
+    }
+  )
+}

package/template/src/example_scenes/vectorField.ts

@@ -0,0 +1,209 @@
+import { linspace } from '../renderer/src/lib/mathHelpers/vectors'
+import { COLORS } from '../renderer/src/lib/rendering/helpers'
+import {
+  addBackgroundGradient,
+  addHDRI,
+  addSceneLighting,
+  HDRIs,
+  loadHDRIData
+} from '../renderer/src/lib/rendering/lighting3d'
+import { createFastText } from '../renderer/src/lib/rendering/objects2d'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '../renderer/src/lib/scene/sceneClass'
+import * as THREE from 'three'
+
+// 1. Define a Vector3 type
+export interface Vector3 {
+  x: number
+  y: number
+  z: number
+}
+
+// 2. Define a type alias for any 3D vector field: a function that
+//    takes a point (x, y, z) and returns a vector at that point.
+export type VectorField3D = (x: number, y: number, z: number, time: number) => Vector3
+
+// 3. Example: a simple swirling field around the z‑axis
+export const field: VectorField3D = (x, y, z, time) => {
+  const scale = 10
+  const target = new THREE.Vector3(
+    Math.sin(time),
+    Math.cos(time),
+    Math.sin(time) * Math.cos(time)
+  ).multiplyScalar(scale) // the center point to attract objects to
+  const position = new THREE.Vector3(x, y, z)
+  const direction = target.sub(position).normalize() // calculate the direction towards the target
+  const strength = 0.1 // adjust the strength of the attraction
+
+  return {
+    x: direction.x * strength,
+    y: direction.y * strength,
+    z: direction.z * strength
+  }
+}
+
+const hdriData = await loadHDRIData(HDRIs.outdoor1, 2, 1)
+
+export const vectorFieldScene = (): AnimatedScene => {
+  return new AnimatedScene(
+    1080,
+    2160,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.BeginFromCurrent,
+    async (scene) => {
+      addSceneLighting(scene.scene)
+      await addHDRI(scene, hdriData, 1)
+      addBackgroundGradient({
+        scene,
+        topColor: '#00639d',
+        bottomColor: COLORS.black,
+        backgroundOpacity: 0.5
+      })
+      const max = 25
+      const xs = linspace(-max, max, 6)
+      const ys = [...xs]
+      const zs = [...xs]
+
+      const length = 2 // arrow length units
+      const color = 0xffffff // red
+
+      const arrows: (THREE.ArrowHelper | null)[][][] = Array.from({ length: xs.length }, () =>
+        Array.from({ length: ys.length }, () => Array.from({ length: zs.length }, () => null))
+      )
+
+      for (let i = 0; i < xs.length; i++) {
+        for (let j = 0; j < ys.length; j++) {
+          for (let k = 0; k < zs.length; k++) {
+            const x = xs[i],
+              y = ys[j],
+              z = zs[k]
+            const value = field(x, y, z, 0)
+            // 1. define direction, origin, length and color
+            const dir = new THREE.Vector3(value.x, value.y, value.z).normalize() // arrow points along +X
+            const origin = new THREE.Vector3(x, y, z) // from world‑origin
+
+            // 2. create helper
+            const arrowHelper = new THREE.ArrowHelper(dir, origin, length, color, 6, 1)
+
+            // remove the low‑res cone
+            arrowHelper.cone.geometry.dispose()
+
+            // create a new high‑res cone: (radiusTop, height, radialSegments, heightSegments)
+            const highResSegments = 32
+            const highResConeGeo = new THREE.ConeGeometry(0.15, 1, highResSegments, 1)
+
+            arrowHelper.cone.geometry = highResConeGeo
+
+            const coneMaterial = new THREE.MeshStandardMaterial({
+              color: 0xffffff,
+              metalness: 0.5,
+              roughness: 0.7,
+              transparent: true
+            })
+
+            const lineMaterial = new THREE.MeshStandardMaterial({
+              color: 0xffffff,
+              metalness: 0.5,
+              roughness: 0.7,
+              transparent: true
+            })
+
+            arrowHelper.line.material = lineMaterial
+            arrowHelper.cone.material = coneMaterial
+
+            arrowHelper.cone.castShadow
+
+            arrows[i][j][k] = arrowHelper
+
+            // 3. add to scene
+            scene.add(arrowHelper)
+          }
+        }
+      }
+
+      const textNode = await createFastText('Vector Field', 5)
+      textNode.position.y = max * 1.5
+      scene.add(textNode)
+
+      // const axesHelper = new THREE.AxesHelper(20)
+      // scene.add(axesHelper)
+
+      scene.camera.position.set(-116.443, 35.10142, 68.73468)
+      scene.camera.quaternion.set(-0.109989, -0.491824, -0.06279674, 0.8614338)
+
+      const geometry = new THREE.SphereGeometry(0.3, 32, 32)
+      const material = new THREE.MeshStandardMaterial({
+        color: 0x000000,
+        emissive: 0xffffff,
+        emissiveIntensity: 20.0
+      })
+
+      interface GroupData {
+        group: THREE.Group
+        acceleration: THREE.Vector3
+        velocity: THREE.Vector3
+      }
+
+      const groups: GroupData[] = []
+
+      Array(30)
+        .fill(0)
+        .forEach(() => {
+          const sphere = new THREE.Mesh(geometry, material)
+          const pointLight = new THREE.PointLight(0xffffff, 2000) // color, intensity, distance
+          pointLight.position.copy(sphere.position)
+          const group = new THREE.Group()
+          group.add(sphere, pointLight)
+
+          group.position.y = 8 * (Math.random() - 0.5)
+          group.position.z = 8 * (Math.random() - 0.5)
+
+          let velocity = new THREE.Vector3(0, 0, 0) // Initial velocity
+          let acceleration = new THREE.Vector3(0, 0, 0) // Initialize acceleration
+
+          groups.push({
+            group,
+            acceleration,
+            velocity
+          })
+
+          scene.add(group)
+        })
+
+      scene.onEachTick((tick, time) => {
+        textNode.lookAt(scene.camera.position)
+        const editedTime = time / 500
+
+        for (const groupData of groups) {
+          const fieldValue = field(
+            groupData.group.position.x,
+            groupData.group.position.y,
+            groupData.group.position.z,
+            editedTime
+          )
+          groupData.acceleration.set(fieldValue.x, fieldValue.y, fieldValue.z)
+
+          // Update velocity with acceleration (basic kinematic equation)
+          groupData.velocity.add(groupData.acceleration.clone().multiplyScalar(2)) // Adjust time factor for smoothness
+
+          // Update position of point light based on velocity
+          groupData.group.position.add(groupData.velocity)
+        }
+
+        for (let i = 0; i < xs.length; i++) {
+          for (let j = 0; j < ys.length; j++) {
+            for (let k = 0; k < zs.length; k++) {
+              const x = xs[i],
+                y = ys[j],
+                z = zs[k]
+              const v = field(x, y, z, editedTime)
+              const dir = new THREE.Vector3(v.x, v.y, v.z).normalize()
+              arrows[i][j][k]?.setDirection(dir)
+            }
+          }
+        }
+      })
+
+      scene.addWait(20000)
+    }
+  )
+}