create-definedmotion 0.1.3 → 0.2.0

package/template/package.json

@@ -27,6 +27,7 @@
     "@tailwindcss/vite": "^4.1.3",
     "@types/three": "^0.175.0",
     "alea": "^1.0.1",
+    "electron-store": "^8.2.0",
     "flubber": "^0.4.2",
     "mathjax": "^3.2.2",
     "mathjax-full": "^3.2.2",

package/template/src/entry.ts

@@ -11,9 +11,8 @@ import { tutorial_easy2 } from './example_scenes/tutorials/easy2'
 import { tutorial_medium1 } from './example_scenes/tutorials/medium1'
 import { tutorial_easy3 } from './example_scenes/tutorials/easy3'
 
-export const screenFps = 120 //Your screen fps
-export const renderSkip = 2 //Will divide your screenFps with this for render output fps
-export const animationFPSThrottle = 1 // Use to change preview fps, will divide your fps with this value
 
-export const renderOutputFps = () => screenFps / renderSkip
+export const renderSkip = 1 // Must be an integer. Will only render only N:th frame
+export const animationFPSDivider = 1 //Must be an integer. Will change the fundamental animation FPS, how many ticks/frames that are played in a certain time
+
 export const entryScene: () => AnimatedScene = () => tutorial_easy1()

package/template/src/example_scenes/alternativesScene.ts

@@ -82,7 +82,7 @@ export const alternativesScene = (): AnimatedScene => {
         }
       })
 
-      scene.addAnim(switchAnimation)
+      scene.addAnims(switchAnimation)
     }
   )
 }

package/template/src/example_scenes/fourierSeriesScene.ts

@@ -369,7 +369,7 @@ export const fourierSeriesScene = (): AnimatedScene => {
 
             if (mode2 === 2) {
               for (let i = 0; i < relationGroups.length; i++) {
-                scene.insertAnimAt(tick, zoomOut(relationGroups[i].latexText, 200))
+                scene.insertAnimsAt(tick, zoomOut(relationGroups[i].latexText, 200))
               }
             }
           }
@@ -378,13 +378,13 @@ export const fourierSeriesScene = (): AnimatedScene => {
 
           for (let i = 0; i < relationGroups.length; i++) {
             if (i !== Number(mode)) {
-              scene.insertAnimAt(
+              scene.insertAnimsAt(
                 tick,
                 fade(relationGroups[i].group, 200, relationGroups[i].opacity, 0.1)
               )
               relationGroups[i].opacity = 0.1
             } else {
-              scene.insertAnimAt(
+              scene.insertAnimsAt(
                 tick,
                 fade(relationGroups[i].group, 200, relationGroups[i].opacity, 1)
               )

package/template/src/example_scenes/keyboardScene.ts

@@ -329,7 +329,7 @@ export const keyboardScene = (): AnimatedScene => {
       )
       const targetRot = new THREE.Quaternion(-0.6683053, -0.001480137, -0.001329754, 0.7438844)
 
-      scene.addAnim(
+      scene.addAnims(
         moveRotateCameraAnimation3D(
           scene.camera,
           scene.camera.position,
@@ -395,42 +395,42 @@ export const keyboardScene = (): AnimatedScene => {
       const deleteSpeed = 30
 
       const line1 = 'Hello Instagram!'
-      scene.addAnim(typeAnimation(scene, line1, text, typeSpeed))
+      scene.addAnims(typeAnimation(scene, line1, text, typeSpeed))
       scene.addWait(1000)
-      scene.addAnim(
+      scene.addAnims(
         typeAnimation(scene, [...line1].map(() => backCharacter).join(''), text, deleteSpeed)
       )
 
       scene.addWait(300)
       const line2 = 'I am just testing my programmatic animation library!'
-      scene.addAnim(typeAnimation(scene, line2, text, typeSpeed))
+      scene.addAnims(typeAnimation(scene, line2, text, typeSpeed))
       scene.addWait(1000)
-      scene.addAnim(
+      scene.addAnims(
         typeAnimation(scene, [...line2].map(() => backCharacter).join(''), text, deleteSpeed)
       )
 
       scene.addWait(300)
       const line3 = `It is inspired by 3Blue1Brown's Manim and Motion Canvas. It is meant for technical and mathematical animations!`
-      scene.addAnim(typeAnimation(scene, line3, text, typeSpeed))
+      scene.addAnims(typeAnimation(scene, line3, text, typeSpeed))
       scene.addWait(1000)
-      scene.addAnim(
+      scene.addAnims(
         typeAnimation(scene, [...line3].map(() => backCharacter).join(''), text, deleteSpeed)
       )
 
       scene.addWait(300)
       const line4 =
         'One of its features is that when you save your code, the animation updates immediately in the viewport. No need to render the video, open the file and then see the result!'
-      scene.addAnim(typeAnimation(scene, line4, text, typeSpeed))
+      scene.addAnims(typeAnimation(scene, line4, text, typeSpeed))
       scene.addWait(1000)
-      scene.addAnim(
+      scene.addAnims(
         typeAnimation(scene, [...line4].map(() => backCharacter).join(''), text, deleteSpeed)
       )
 
       scene.addWait(300)
       const line5 = `Use the project by visiting "DefinedMotion" by Hugo Olsson on GitHub, thanks!`
-      scene.addAnim(typeAnimation(scene, line5, text, typeSpeed))
+      scene.addAnims(typeAnimation(scene, line5, text, typeSpeed))
       scene.addWait(1000)
-      scene.addAnim(
+      scene.addAnims(
         typeAnimation(scene, [...line5].map(() => backCharacter).join(''), text, deleteSpeed)
       )
 

package/template/src/example_scenes/tests/animations/test_updater.ts

@@ -0,0 +1,24 @@
+import { easeInOutQuad } from "$renderer/lib/animation/interpolations";
+import { createAnim } from "$renderer/lib/animation/protocols";
+import { createRectangle } from "$renderer/lib/rendering/objects2d";
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+
+
+// Spec: The updater should overwrite the animation, so the square should not move.
+
+export const test_updater1 = (): AnimatedScene => {
+    return new AnimatedScene(1000, 1000, SpaceSetting.TwoDim, HotReloadSetting.TraceFromStart, async (dm) => {
+        const square = createRectangle(4, 4)
+        dm.add(square)
+
+        const moveAnimation = createAnim(easeInOutQuad(0,5, 500), (value) => {
+            square.position.x = value
+        })
+
+        moveAnimation.updater = () => {}
+
+
+        dm.addAnims(moveAnimation)
+        dm.addAnims(moveAnimation.copy().reverse())
+    })
+}

package/template/src/example_scenes/tests/deferred_anims/testing_deferredAnims.ts

@@ -0,0 +1,71 @@
+// tutorial_deferred_closure_test.ts
+import * as THREE from 'three'
+
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { createRectangle } from '$renderer/lib/rendering/objects2d'
+import { moveRotateCameraAnimation3D } from '$renderer/lib/animation/animations'
+import { easeInOutQuad } from '$renderer/lib/animation/interpolations'
+import { createAnim } from '$renderer/lib/animation/protocols'
+
+/**
+ * Demo: proves that addDeferredAnims (closure-based) captures runtime state.
+ * - You can drag/orbit before pressing Play.
+ * - When playback reaches the deferred blocks, the move starts from the *live* camera pose.
+ * - Also shows an eager animation (card rocking) that’s precomputed with addAnims.
+ */
+export function test_deferred_anims(): AnimatedScene {
+  return new AnimatedScene(
+    1080,
+    1920,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (scene) => {
+      // Visual anchors
+      scene.add(new THREE.GridHelper(30, 30))
+      const card = createRectangle(6, 4)
+      card.position.set(0, 2, 0)
+      scene.add(card)
+
+      // Initial camera (user can move it freely before Play)
+      scene.camera.position.set(10, 6, 12)
+      scene.camera.lookAt(new THREE.Vector3(0, 1, 0))
+
+      // Eager anim (pure, precomputable) — keeps the scene alive regardless of camera
+      const rock = createAnim(easeInOutQuad(-0.3, 0.3, 180), (v) => (card.rotation.z = v))
+      scene.addAnims(rock)
+      scene.addAnims(rock.copy().reverse()) // 360 ticks total
+      scene.addWait(800)
+
+      // -------- Deferred camera move #1 (uses your addDeferredAnims signature) --------
+      // NOTE: Builders have no args; they close over `scene` to access live camera state.
+      scene.addDeferredAnims(() =>
+        moveRotateCameraAnimation3D(
+          scene.camera,
+          scene.camera.position,   // captured at runtime
+          scene.camera.quaternion, // captured at runtime
+          new THREE.Vector3(8, 8, 8),
+          new THREE.Quaternion().setFromEuler(new THREE.Euler(-0.6, 0.6, 0)),
+          2000
+        )
+      )
+
+      scene.addWait(600)
+
+      // -------- Deferred camera move #2 (chained) --------
+      // Starts from the end pose of move #1, because it’s captured at that runtime tick.
+      scene.addDeferredAnims(() =>
+        moveRotateCameraAnimation3D(
+          scene.camera,
+          scene.camera.position,
+          scene.camera.quaternion,
+          new THREE.Vector3(0, 3, 16),
+          new THREE.Quaternion().setFromEuler(new THREE.Euler(0.02, 0, 0)),
+          2000
+        )
+      )
+
+      // Tail for export
+      scene.addWait(1200)
+    }
+  )
+}

package/template/src/example_scenes/tests/deferred_anims/testing_deferredAnims2.ts

@@ -0,0 +1,65 @@
+// tutorial_deferred_minimal.ts
+import * as THREE from 'three'
+
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { createRectangle } from '$renderer/lib/rendering/objects2d'
+import { easeInOutQuad } from '$renderer/lib/animation/interpolations'
+import { createAnim } from '$renderer/lib/animation/protocols'
+
+/**
+ * Minimal proof of deferred usefulness:
+ * 1) Eager move: x: -3 → 0 (precomputed)
+ * 2) Deferred move: from whatever x is *at runtime* → x + 4
+ * 3) Deferred move: from the new live x → 0 (return)
+ *
+ * If you hot-reload or change earlier timing, the deferred steps still start from
+ * the correct, current position because they capture runtime state via closure.
+ */
+export function test_deferred_anims2(): AnimatedScene {
+  return new AnimatedScene(
+    1000,
+    1000,
+    SpaceSetting.TwoDim,
+    HotReloadSetting.TraceFromStart,
+    async (scene) => {
+      // A simple square (centered), easy to see
+      const box = createRectangle(4, 4) as THREE.Mesh
+      scene.add(box)
+
+      // Start a bit left so we can see the eager move clearly
+      box.position.set(-3, 0, 0)
+
+      // --- 1) Eager (precomputed) move: -3 → 0 over 600 ticks ---
+      const moveToCenter = createAnim(
+        easeInOutQuad(-3, 0, 600),
+        (x) => (box.position.x = x)
+      )
+      scene.addAnims(moveToCenter)
+
+      // Give a short beat
+      scene.addWait(300)
+
+      // --- 2) Deferred move: from *current* x → x + 4 over 400 ticks ---
+      // Captures box.position.x at runtime, not planning time.
+      scene.addDeferredAnims(() =>
+        createAnim(
+          easeInOutQuad(box.position.x, box.position.x + 4, 400),
+          (x) => (box.position.x = x)
+        )
+      )
+
+      scene.addWait(200)
+
+      // --- 3) Deferred move back: from *current* x → 0 over 400 ticks ---
+      scene.addDeferredAnims(() =>
+        createAnim(
+          easeInOutQuad(box.position.x, 0, 400),
+          (x) => (box.position.x = x)
+        )
+      )
+
+      // Tail for renders
+      scene.addWait(600)
+    }
+  )
+}

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

@@ -37,18 +37,18 @@ export function tutorial_easy1(): AnimatedScene {
       // And give a function that is called for each frame with the current interpolation value
       const anim = createAnim(easeInOutQuad(-5, 5, 500), (value) => (circle.position.x = value))
 
-      // We use "addAnim" to schedule an animation, it will run from the frame (tick) it was added at
+      // We use "addAnims" to schedule an animation, it will run from the frame (tick) it was added at
       // Since this is our first added animation in this scene, we are currently at tick 0, So it will just add to the start.
       // But say that we are in a complex animation and our previous buildings would mean that we are at frame 49878 for example (we wouldn't know this)
       // Then it just adds the animation with that offset
-      scene.addAnim(anim)
+      scene.addAnims(anim)
 
       // To make the circle also go back, we can reverse the entire animation and add it again
       // Notice that we are copying it, this is so that the reverse() doesn't affect the original variable "anim"
-      scene.addAnim(anim.copy().reverse())
+      scene.addAnims(anim.copy().reverse())
 
       // We now finally add a function that will be called at each frame (tick) in our animation
-      // This doesn't push the tick forward like the "addAnim" does.
+      // This doesn't push the tick forward like the "addAnims" does.
       // It just declares a function that should be run at each frame
       // For this animation, we want to set a color to the circle at each frame.
       scene.onEachTick((tick) => {

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

@@ -124,7 +124,7 @@ export function tutorial_easy3(): AnimatedScene {
       })
 
       // Start the slide show
-      scene.addAnim(switcher)
+      scene.addAnims(switcher)
 
       // Let it run a bit after the last change (nice tail for render/export)
       scene.addWait(1_000)

package/template/src/example_scenes/visulizingFunctions.ts

@@ -157,11 +157,11 @@ export const functionsAnimation = (): AnimatedScene => {
         scene.addSequentialBackgroundAnims(
           morphAnimation(plotLine, vecFuncs[i], vecFuncs[i + 1], 300)
         )
-        scene.addAnim(fadeOut(textNode, 150))
+        scene.addAnims(fadeOut(textNode, 150))
         scene.do(async () => {
           await updateText(textNode, functions[i + 1][0])
         })
-        scene.addAnim(fadeIn(textNode, 150))
+        scene.addAnims(fadeIn(textNode, 150))
         scene.addWait(800)
       }
 

package/template/src/main/index.ts

@@ -1,18 +1,41 @@
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, nativeTheme, screen } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import { renderVideo } from './rendering'
 import { deleteRenderedContent } from './storage'
+import ElectronStore from 'electron-store'
+
+const store = new ElectronStore()
+
+// Force light mode
+nativeTheme.themeSource = 'light'
 
 let mainWindow: BrowserWindow
 
+function getHzForWebContents(wc: Electron.WebContents): number {
+  const win = BrowserWindow.fromWebContents(wc)
+  if (win) {
+    const b = win.getBounds()
+    const nearest = screen.getDisplayNearestPoint({ x: b.x, y: b.y })
+    return nearest.displayFrequency || 60
+  }
+  // Fallback to primary display
+  return screen.getPrimaryDisplay().displayFrequency || 60
+}
+
 function createWindow(): void {
   // Create the browser window.
+
+  const defaultBounds = { width: 1000, height: 1300 }
+  const savedBounds: any = store.get('windowBounds', defaultBounds)
   mainWindow = new BrowserWindow({
-    width: 1000,
-    height: 1300,
+    width: savedBounds.width,
+    height: savedBounds.height,
+    x: savedBounds.x,
+    y: savedBounds.y,
     show: false,
+    title: "DefinedMotion",
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
@@ -26,6 +49,14 @@ function createWindow(): void {
     }
   })
 
+  mainWindow.on('resize', () => {
+    store.set('windowBounds', mainWindow.getBounds())
+  })
+
+  mainWindow.on('move', () => {
+    store.set('windowBounds', mainWindow.getBounds())
+  })
+
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
   })
@@ -75,6 +106,31 @@ app.whenReady().then(() => {
     // dock icon is clicked and there are no other windows open.
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })
+
+  // RPC: renderer asks main for the current display refresh rate (Hz)
+  ipcMain.handle('get-display-hz', (event) => {
+    return getHzForWebContents(event.sender)
+  })
+
+    function broadcastHzToAllWindows() {
+    for (const w of BrowserWindow.getAllWindows()) {
+      const hz = getHzForWebContents(w.webContents)
+      w.webContents.send('display-hz-changed', hz)
+    }
+  }
+
+  // Display geometry / metrics changed (resolution/scale/mode changes, some moves)
+  screen.on('display-metrics-changed', () => {
+    broadcastHzToAllWindows()
+  })
+
+  // Displays added/removed (dock/undock, hot-plug)
+  screen.on('display-added', () => {
+    broadcastHzToAllWindows()
+  })
+  screen.on('display-removed', () => {
+    broadcastHzToAllWindows()
+  })
 })
 
 ipcMain.handle('start-video-render', async (event, options) => {

package/template/src/preload/index.ts

@@ -2,8 +2,22 @@ import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 import { RenderOptions } from '../main/rendering'
 
+
+// ---- NEW helpers for event subscription
+function onDisplayHzChanged(cb: (hz: number) => void) {
+  const channel = 'display-hz-changed'
+  const listener = (_: unknown, hz: number) => cb(hz)
+  ipcRenderer.on(channel, listener)
+  // return an unsubscribe fn
+  return () => ipcRenderer.removeListener(channel, listener)
+}
+
 const customAPI = {
-  startVideoRender: (options: RenderOptions) => ipcRenderer.invoke('start-video-render', options)
+  startVideoRender: (options: RenderOptions) => ipcRenderer.invoke('start-video-render', options),
+
+  getDisplayHz: (): Promise<number> => ipcRenderer.invoke('get-display-hz'),
+
+  onDisplayHzChanged
 }
 
 // Custom APIs for renderer

package/template/src/renderer/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Electron</title>
+    <title>DefinedMotion</title>
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!--  <meta
       http-equiv="Content-Security-Policy"