create-definedmotion 0.1.3 → 0.2.0

package/template/src/renderer/src/App.svelte

@@ -2,16 +2,42 @@
   import './app.css'
   import { generateID, setStateInScene, updateStateInUrl } from './lib/general/helpers'
   import { onDestroy, onMount } from 'svelte'
-  import { setGlobalContainerRef, type AnimatedScene } from './lib/scene/sceneClass'
+  import { hotreloadNameLookup, screenFPS, setGlobalContainerRef, type AnimatedScene } from './lib/scene/sceneClass'
   import { loadFonts } from './lib/rendering/objects2d'
-  import { entryScene } from '../../entry'
+  import { animationFPSDivider, entryScene, renderSkip } from '../../entry'
   import { callAllDestroyFunctions } from './lib/general/onDestory'
+  import rotateIcon from "./application_assets/360.svg"
+  import moveIcon from "./application_assets/move.svg"
+  
+
+  let frameValueElement: HTMLParagraphElement
+  let timeValueElement: HTMLParagraphElement
+  let sliderElement: HTMLInputElement
+
+  const TEXT_FRAME_MS_LIMIT = 0.90*1000 / 30;  // A little lower to avoid skipping frames when timing is unfourtunate
+  const SLIDER_FRAME_MS_LIMIT = 0.90*1000 / 60; // A little lower to avoid skipping frames when timing is unfourtunate
+
+  let lastTextUpdate  = 0;
+  let lastSliderUpdate = 0;
+
+  let screenRefreshRate = $state(0) 
+  let isRendering = $state(false) 
+
+
+  function formatMs(ms: number) {
+    const sign = ms < 0 ? '-' : ''
+    ms = Math.abs(ms)
+    const minutes = Math.floor(ms / 60000)
+    const seconds = Math.floor((ms % 60000) / 1000)
+    const millis  = Math.floor(ms % 1000)
+    return `${sign}${String(minutes).padStart(2,'0')}:${String(seconds).padStart(2,'0')}.${String(millis).padStart(3,'0')}`
+  }
 
-  //const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')
 
   const animationWindowID = generateID()
 
   let scene: AnimatedScene
+  let hasInitScene = $state(false)
 
   let isPlayingStateVar = $state(false)
 
@@ -25,25 +51,63 @@
       const frame = Math.round((sliderValue / maxSliderValue) * (scene.totalSceneTicks - 1))
       if (frame !== lastSetFrame) {
         await scene.jumpToFrameAtIndex(frame)
+        updateUIImmediate();
         lastSetFrame = frame
       }
     }
   }
 
+function updateSliderOnly() {
+  if (!scene || !sliderElement) return;
+  const denom = Math.max(1, (scene.totalSceneTicks - 1));
+  (sliderElement as any).value = (scene.sceneRenderTick / denom) * maxSliderValue;
+}
+
+function updateTextsOnly() {
+  if (!scene) return;
+  if (frameValueElement) frameValueElement.textContent = `Frame: ${scene.sceneRenderTick}`;
+  if (timeValueElement)  timeValueElement.textContent  = `Time: ${formatMs(scene.getCurrentTimeMs())}`;
+}
+
+function updateUIImmediate() {
+  updateSliderOnly();
+  updateTextsOnly();
+}
+
+
+  function maybeUpdateUI() {
+  const now = performance.now();
+
+  // ~60 Hz slider
+  if (now - lastSliderUpdate >= SLIDER_FRAME_MS_LIMIT) {
+    lastSliderUpdate = now;
+    updateSliderOnly();
+  }
+
+  // ~30 Hz texts
+  if (now - lastTextUpdate >= TEXT_FRAME_MS_LIMIT) {
+    lastTextUpdate = now;
+    updateTextsOnly();
+  }
+}
+
   onMount(async () => {
     if (!entryScene) return
     await loadFonts()
     const animationWindow = document.getElementById(animationWindowID)
-    const sliderElement = document.getElementById('playerSliderID')
+    
     if (!animationWindow || !sliderElement) return
 
     setGlobalContainerRef(animationWindow)
 
     scene = entryScene()
+    hasInitScene = true
 
     scene.playEffectFunction = () => {
-      ;(sliderElement as any).value =
-        (scene.sceneRenderTick / (scene.totalSceneTicks - 1)) * maxSliderValue
+     maybeUpdateUI();
+    }
+    scene.renderingEventFunction = (isStart) => {
+      isRendering = isStart
     }
     const currentWidth = animationWindow.clientWidth
     animationWindow.style.height = `${currentWidth / scene.getAspectRatio()}px`
@@ -61,6 +125,8 @@
       animationWindow.style.height = `${currentWidth / scene.getAspectRatio()}px`
     })
 
+   screenRefreshRate = screenFPS
+
     // ipcRenderer.send('resize-window', { width: 1000, height: 1000 })
   })
 
@@ -68,23 +134,67 @@
     clearInterval(urlUpdaterInterval)
     callAllDestroyFunctions()
   })
+
+  function fmt(n: number) {
+  return Number(n).toPrecision(7);
+}
+
+function cameraPositionCode() {
+  const p = scene.camera.position;
+  return `scene.camera.position.set(
+  ${fmt(p.x)}, 
+  ${fmt(p.y)}, 
+  ${fmt(p.z)}
+);`;
+}
+
+function cameraRotationCode() {
+  const q = scene.camera.quaternion;
+  return `scene.camera.quaternion.set(
+  ${fmt(q.x)}, 
+  ${fmt(q.y)}, 
+  ${fmt(q.z)}, 
+  ${fmt(q.w)}
+);`;
+}
+
+export async function copyToClipboard(text: string): Promise<void> {
+  await navigator.clipboard.writeText(text);
+}
 </script>
 
-<div class=" flex flex-col p-4">
-  <div id={animationWindowID} class="w-full"></div>
-  <div class="flex justify-between mt-2 font-bold text-sm">
+<div class=" flex flex-col p-2">
+  <div id={animationWindowID} class="w-full rounded-sm overflow-clip"></div>
+  {#if isRendering}
+ <p class="text-[17px] self-center p-6 pb-1">Do <strong>not save</strong> code during rendering</p>
+   <p class="text-xs self-center pt-0 p-2">The viewer might hot reload and affect the result</p>
+  {/if}
+  
+  <div class="flex justify-between mt-2 font-bold text-sm items-center">
+
+ 
+
     <button
-      onclick={() => {
-        if (scene.isPlaying) {
-          scene.pause()
-          isPlayingStateVar = false
-        } else {
-          scene.playSequenceOfAnimation(scene.sceneRenderTick, scene.totalSceneTicks - 1)
-          isPlayingStateVar = true
-        }
-      }}>{isPlayingStateVar ? 'Pause' : 'Play'}</button
-    >
+    class="w-[70px] text-xs cursor-pointer bg-black/5 rounded-full p-1 hover:bg-black/10 transition"
+          onclick={() => {
+            if (scene.isPlaying) {
+              scene.pause()
+              updateUIImmediate();
+              isPlayingStateVar = false
+            } else {
+              scene.playSequenceOfAnimation(scene.sceneRenderTick, scene.totalSceneTicks - 1)
+              isPlayingStateVar = true
+            }
+          }}>{isPlayingStateVar ? 'Pause' : 'Play'}</button
+        >
+    
+
+    <div class="flex ">
+    <p bind:this={frameValueElement} class="font-normal text-[0.7rem] leading-none mr-2 w-[83px]">Frame:</p>
+      <p bind:this={timeValueElement} class="font-normal text-[0.7rem] leading-none w-[93px] ">Time:</p>
+      </div>
     <button
+    class="w-[70px] text-xs cursor-pointer bg-black/5 rounded-full  p-1 hover:bg-black/10 transition"
       onclick={() => {
         scene.render()
       }}>Render</button
@@ -92,16 +202,51 @@
   </div>
   <div class="w-full px-0 mx-0">
     <input
+      bind:this={sliderElement}
       type="range"
       min="0"
       max={maxSliderValue}
       oninput={(e: any) => handleSliderChange(Number(e.target.value))}
       class="w-full focus:outline-none"
-      id="playerSliderID"
     />
   </div>
+
+  <div class="h-4"></div>
+  {#if hasInitScene && scene}
+ 
+  <p class="font-bold text-sm">Helpers</p>
+  <div class="h-2"></div>
+  <div class="flex flex-wrap gap-2">
+    <button onclick={() => copyToClipboard(cameraPositionCode())} class="text-[0.65rem] font-medium cursor-pointer  bg-black/5 rounded-full p-1 pl-4 pr-4 hover:bg-black/10 transition active:bg-blue-200 active:border-blue-200" >
+        <div class="flex gap-1 items-center">
+
+        <p>Copy camera <strong>position</strong></p>
+      <img src={moveIcon} alt="Rotation icon" class="w-[15px]"/></div>
+    </button>
+    <button onclick={() => copyToClipboard(cameraRotationCode())} class="text-[0.65rem] font-medium cursor-pointer  bg-black/5 rounded-full p-1 pl-4 pr-4 hover:bg-black/10 transition active:bg-blue-200 active:border-blue-200" >
+        <div class="flex gap-1 items-center">
+
+        <p>Copy camera <strong>rotation</strong></p>
+      <img src={rotateIcon} alt="Rotation icon" class="w-[15px]"/></div>
+    </button>
+  </div>
+
+   <div class="h-6"></div>
+  <p class="font-bold text-sm">Details</p>
+  <div class="h-2"></div>
+  <p class="text-xs">Animation playback FPS: <strong>{(screenRefreshRate/animationFPSDivider).toFixed(2)}</strong> Hz, rendered video FPS: <strong>{(screenRefreshRate/animationFPSDivider/renderSkip).toFixed(2)}</strong> Hz</p>
+<div class="h-2"></div>
+ <p class="text-[0.7rem] opacity-50">Hot reload mode: <strong>{hotreloadNameLookup(scene.hotReloadSetting)}</strong></p>
+  <p class="text-[0.7rem] opacity-50">Screen refresh rate: <strong>{screenRefreshRate.toFixed(2)}</strong> Hz</p>
+  <p class="text-[0.7rem] opacity-50">Animation FPS divider <strong>{animationFPSDivider}</strong></p>
+  <p class="text-[0.7rem] opacity-50">Render skip constant <strong>{renderSkip}</strong></p>
+  {/if}
+
+ 
+  <!--
   <p id="cameraPositionTextID" class="mt-2 text-xs"></p>
   <p id="cameraRotationTextID" class="mt-2 text-xs"></p>
+  -->
 </div>
 
 <style>
@@ -121,10 +266,20 @@
   /* Thumb style for Chrome */
   input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
-    width: 16px;
+    width: 10px;
     height: 16px;
-    border-radius: 50%;
-    background: #3b82f6;
+    border-radius: 5px;
+    background: #c2c2c2;
+    border: 2px solid #616161;
     margin-top: -6px; /* Center the thumb on the track */
+    cursor: pointer;
+     transition: all 0.1s ease;
+
+    /* Larger hitbox using box-shadow trick */
+    box-shadow: 0 0 0 8px transparent;
+  }
+
+  input[type='range']::-webkit-slider-thumb:hover {
+    background: #616161;
   }
 </style>

package/template/src/renderer/src/application_assets/360.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2455 5107 c-370 -95 -662 -590 -820 -1392 -21 -104 -39 -192 -41
+-193 -1 -2 -62 -15 -136 -28 -679 -125 -1176 -363 -1363 -654 -70 -109 -89
+-169 -89 -290 0 -90 4 -115 27 -173 89 -229 331 -423 714 -576 302 -120 714
+-212 1141 -257 94 -10 172 -21 172 -25 0 -4 -20 -23 -44 -42 -56 -46 -80 -96
+-73 -153 11 -105 124 -166 214 -116 18 9 99 81 181 160 l150 142 149 0 c144 0
+407 13 527 26 l59 6 -7 -38 c-103 -575 -330 -1064 -545 -1173 -68 -35 -120
+-37 -185 -8 -106 49 -198 155 -303 352 -53 100 -63 112 -106 133 -63 32 -118
+24 -168 -27 -53 -53 -59 -101 -23 -183 130 -292 329 -508 531 -574 86 -28 238
+-26 318 6 261 101 470 384 631 854 51 150 123 432 150 589 16 93 21 108 39
+112 11 2 72 14 135 25 323 59 642 161 878 279 272 137 445 299 519 488 23 58
+27 83 27 173 -1 87 -5 116 -25 170 -99 262 -398 477 -889 640 -100 33 -134 40
+-167 35 -84 -12 -145 -105 -123 -186 17 -60 63 -93 190 -134 282 -93 488 -202
+611 -325 74 -74 103 -129 103 -200 1 -178 -261 -375 -689 -518 -186 -62 -527
+-143 -542 -129 -3 3 0 70 6 149 50 611 2 1310 -125 1838 -31 129 -66 257 -81
+296 -3 9 16 5 59 -12 80 -32 148 -35 186 -7 87 64 96 170 20 240 -12 11 -112
+55 -222 96 -109 42 -199 77 -201 79 -1 2 -21 37 -45 78 -124 217 -280 368
+-445 430 -73 27 -207 35 -280 17z m216 -317 c81 -42 194 -172 257 -296 l21
+-42 -75 -173 c-41 -96 -79 -190 -85 -209 -24 -80 35 -170 120 -185 33 -5 51
+-2 89 17 40 19 52 33 78 87 17 35 34 60 36 55 12 -19 78 -296 102 -424 30
+-157 60 -384 77 -590 24 -272 15 -846 -18 -1127 l-6 -51 -46 -6 c-119 -16
+-295 -27 -501 -32 l-225 -5 -139 161 c-143 167 -172 190 -238 190 -34 0 -93
+-30 -115 -59 -7 -9 -17 -33 -23 -53 -16 -55 2 -107 56 -167 53 -59 59 -56 -97
+-41 -804 81 -1465 332 -1610 611 -31 60 -31 138 0 198 76 147 315 297 658 415
+132 45 360 104 496 129 l79 15 -6 -47 c-14 -107 -26 -360 -26 -552 0 -197 1
+-207 23 -239 36 -54 71 -74 127 -74 54 0 87 18 124 68 20 26 21 46 27 294 7
+268 26 561 39 581 15 26 509 56 787 49 161 -5 187 -3 222 13 53 23 81 70 81
+132 0 85 -42 131 -137 149 -69 13 -606 5 -787 -12 -65 -6 -120 -9 -122 -7 -6
+6 53 282 87 399 131 466 310 766 504 845 40 17 114 9 166 -17z"/>
+</g>
+</svg>

package/template/src/renderer/src/application_assets/move.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2485 4781 c-16 -10 -166 -155 -332 -322 -254 -257 -303 -310 -312
+-344 -35 -134 112 -245 234 -177 11 6 88 79 170 161 l150 151 5 -554 c5 -540
+6 -555 26 -582 39 -53 71 -69 134 -69 63 0 95 16 134 69 20 27 21 42 26 582
+l5 554 150 -151 c83 -82 159 -155 170 -161 64 -36 140 -25 191 26 30 30 57 94
+49 119 -2 7 -6 26 -10 42 -5 22 -89 113 -313 338 -169 170 -319 315 -334 323
+-38 20 -107 18 -143 -5z"/>
+<path d="M1035 3285 c-5 -2 -23 -6 -40 -10 -22 -5 -113 -89 -338 -313 -170
+-169 -315 -319 -323 -334 -18 -35 -18 -101 0 -136 8 -15 153 -165 323 -334
+225 -224 316 -308 338 -313 17 -4 35 -8 42 -10 25 -8 89 19 119 49 51 51 62
+127 26 191 -6 11 -79 88 -161 170 l-151 150 554 5 c540 5 555 6 582 26 53 39
+69 71 69 134 0 63 -16 95 -69 134 -27 20 -42 21 -582 26 l-554 5 151 150 c82
+83 155 159 161 170 55 98 0 213 -112 238 -14 3 -29 4 -35 2z"/>
+<path d="M4030 3278 c-96 -27 -142 -143 -92 -233 6 -11 79 -87 161 -170 l151
+-150 -554 -5 c-540 -5 -555 -6 -582 -26 -53 -39 -69 -71 -69 -134 0 -63 16
+-95 69 -134 27 -21 40 -21 584 -24 l556 -2 -161 -163 c-130 -131 -163 -170
+-172 -202 -14 -54 2 -110 43 -151 30 -30 94 -57 119 -49 7 2 26 6 42 10 22 5
+113 89 338 313 170 169 315 319 323 334 8 15 14 45 14 68 0 23 -6 53 -14 68
+-8 15 -153 165 -323 334 -224 223 -316 308 -338 313 -16 4 -37 8 -45 10 -8 2
+-31 -1 -50 -7z"/>
+<path d="M2495 2066 c-37 -17 -70 -52 -84 -89 -7 -19 -11 -211 -11 -570 l0
+-541 -162 161 c-114 112 -172 163 -193 168 -16 4 -35 8 -41 10 -26 8 -94 -19
+-122 -48 -29 -31 -55 -96 -47 -120 2 -7 6 -25 10 -42 5 -22 89 -113 313 -338
+169 -170 319 -315 334 -323 35 -18 101 -18 136 0 15 8 165 153 334 323 224
+225 308 316 313 338 4 17 8 35 10 42 8 25 -19 89 -49 119 -51 51 -127 62 -191
+26 -11 -6 -87 -79 -170 -161 l-150 -151 -5 554 c-5 540 -6 555 -26 582 -11 15
+-32 37 -46 47 -34 25 -113 32 -153 13z"/>
+</g>
+</svg>

package/template/src/renderer/src/lib/animation/captureCanvas.ts

@@ -1,6 +1,6 @@
-import { renderOutputFps } from '../../../../entry'
+
 import * as THREE from 'three'
-import { AnimatedScene } from '../scene/sceneClass'
+import { AnimatedScene, renderOutputFps } from '../scene/sceneClass'
 import { AudioInScene } from '../audio/loader'
 
 const fs = require('fs')

package/template/src/renderer/src/lib/animation/interpolations.ts

@@ -1,4 +1,5 @@
-import { millisToTicks } from './helpers'
+import { millisToTicks } from "../scene/sceneClass"
+
 
 export const concatInterpols = (...interpolations: number[][]) => {
   return interpolations.reduce((acc, curr) => acc.concat(curr), [])

package/template/src/renderer/src/lib/general/helpers.ts

@@ -1,4 +1,4 @@
-import type { AnimatedScene } from '../scene/sceneClass'
+import { HotReloadSetting, type AnimatedScene } from '../scene/sceneClass'
 import * as THREE from 'three'
 
 const frameValueString = 'frameValueIndex'
@@ -12,7 +12,22 @@ export const updateStateInUrl = (stateValue: number) => {
   window.history.replaceState(null, '', url.toString())
 }
 
+export const clearStateInUrl = () => {
+  const url = new URL(window.location.href)
+  url.searchParams.delete(frameValueString)
+  window.history.replaceState(null, '', url.toString())
+}
+
+
 export const setStateInScene = async (scene: AnimatedScene) => {
+
+   // If the user wants a completely fresh start on each rebuild, ignore URL state.
+  if (scene.hotReloadSetting === HotReloadSetting.BeginFreshOnSave) {
+    clearStateInUrl()                 // optional, but keeps URL tidy
+    await scene.jumpToFrameAtIndex(0) // fully fresh
+    return
+  }
+
   const url = new URL(window.location.href)
   const stateParam = url.searchParams.get(frameValueString)
 
@@ -29,49 +44,3 @@ export const setStateInScene = async (scene: AnimatedScene) => {
   }
   await scene.jumpToFrameAtIndex(0)
 }
-
-let lastStateText = ''
-
-export const logCameraState = (
-  camera: THREE.PerspectiveCamera | THREE.OrthographicCamera
-): void => {
-  // Clone all values to prevent reference-related issues
-  const position = camera.position.clone()
-  const rotation = camera.rotation.clone()
-  const quaternion = camera.quaternion.clone()
-
-  // Format numbers to 7 significant digits and create code-ready string
-  const stateCode = `
-scene.camera.position.set(
-  ${position.x.toPrecision(7)}, 
-  ${position.y.toPrecision(7)}, 
-  ${position.z.toPrecision(7)}
-);
-
-scene.camera.rotation.set(
-  ${rotation.x.toPrecision(7)}, 
-  ${rotation.y.toPrecision(7)}, 
-  ${rotation.z.toPrecision(7)}
-);
-
-scene.camera.quaternion.set(
-  ${quaternion.x.toPrecision(7)}, 
-  ${quaternion.y.toPrecision(7)}, 
-  ${quaternion.z.toPrecision(7)}, 
-  ${quaternion.w.toPrecision(7)}
-);
-
-scene.camera.rotation.order = '${rotation.order}'; 
-`
-
-  // Only update DOM if state changed
-  if (stateCode !== lastStateText) {
-    lastStateText = stateCode
-    const output = document.getElementById('cameraPositionTextID')
-    if (output) {
-      output.textContent = stateCode
-      // Add CSS to preserve whitespace and line breaks
-      output.style.whiteSpace = 'pre'
-    }
-  }
-}