create-definedmotion 0.1.0

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

@@ -0,0 +1,130 @@
+<script lang="ts">
+  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 { loadFonts } from './lib/rendering/objects2d'
+  import { entryScene } from '../../entry'
+  import { callAllDestroyFunctions } from './lib/general/onDestory'
+
+  //const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')
+
+  const animationWindowID = generateID()
+
+  let scene: AnimatedScene
+
+  let isPlayingStateVar = $state(false)
+
+  let lastSetFrame = 0
+
+  const maxSliderValue = 10_000
+  let urlUpdaterInterval: ReturnType<typeof setInterval>
+
+  async function handleSliderChange(sliderValue: number) {
+    if (scene) {
+      const frame = Math.round((sliderValue / maxSliderValue) * (scene.totalSceneTicks - 1))
+      if (frame !== lastSetFrame) {
+        await scene.jumpToFrameAtIndex(frame)
+        lastSetFrame = frame
+      }
+    }
+  }
+
+  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()
+
+    scene.playEffectFunction = () => {
+      ;(sliderElement as any).value =
+        (scene.sceneRenderTick / (scene.totalSceneTicks - 1)) * maxSliderValue
+    }
+    const currentWidth = animationWindow.clientWidth
+    animationWindow.style.height = `${currentWidth / scene.getAspectRatio()}px`
+
+    setStateInScene(scene)
+    lastSetFrame = scene.sceneRenderTick
+
+    urlUpdaterInterval = setInterval(() => {
+      updateStateInUrl(scene.sceneRenderTick)
+    }, 500)
+
+    // Add listener to handle window resize events
+    window.addEventListener('resize', () => {
+      const currentWidth = animationWindow.clientWidth
+      animationWindow.style.height = `${currentWidth / scene.getAspectRatio()}px`
+    })
+
+    // ipcRenderer.send('resize-window', { width: 1000, height: 1000 })
+  })
+
+  onDestroy(() => {
+    clearInterval(urlUpdaterInterval)
+    callAllDestroyFunctions()
+  })
+</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">
+    <button
+      onclick={() => {
+        if (scene.isPlaying) {
+          scene.pause()
+          isPlayingStateVar = false
+        } else {
+          scene.playSequenceOfAnimation(scene.sceneRenderTick, scene.totalSceneTicks - 1)
+          isPlayingStateVar = true
+        }
+      }}>{isPlayingStateVar ? 'Pause' : 'Play'}</button
+    >
+    <button
+      onclick={() => {
+        scene.render()
+      }}>Render</button
+    >
+  </div>
+  <div class="w-full px-0 mx-0">
+    <input
+      type="range"
+      min="0"
+      max={maxSliderValue}
+      oninput={(e: any) => handleSliderChange(Number(e.target.value))}
+      class="w-full focus:outline-none"
+      id="playerSliderID"
+    />
+  </div>
+  <p id="cameraPositionTextID" class="mt-2 text-xs"></p>
+  <p id="cameraRotationTextID" class="mt-2 text-xs"></p>
+</div>
+
+<style>
+  /* Chrome-only styling for range input */
+  input[type='range'] {
+    -webkit-appearance: none;
+    background: transparent;
+  }
+
+  /* Track style for Chrome */
+  input[type='range']::-webkit-slider-runnable-track {
+    height: 4px;
+    background: #e5e7eb;
+    border-radius: 2px;
+  }
+
+  /* Thumb style for Chrome */
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #3b82f6;
+    margin-top: -6px; /* Center the thumb on the track */
+  }
+</style>

package/template/src/renderer/src/app.css

@@ -0,0 +1,24 @@
+@import "tailwindcss";
+
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: normal;
+    font-weight: 100 900; /* Variable font with a range of weights */
+    src: url("./assets/fonts/Montserrat-VariableFont_wght.woff2") format("woff2");
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: "Montserrat";
+    font-style: italic;
+    font-weight: 100 900; /* Variable font with a range of weights for italic style */
+    src: url("./assets/fonts/Montserrat-Italic-VariableFont_wght.woff2") format("woff2");
+    font-display: swap;
+  }
+  
+  html {
+    background: #fff;
+    font-family: "Montserrat", sans-serif;
+    color: #000;
+  }

package/template/src/renderer/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

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

@@ -0,0 +1,214 @@
+import * as THREE from 'three'
+import { UserAnimation } from './protocols'
+import { easeConstant, easeInOutQuad } from './interpolations'
+
+export const setOpacity = <T extends THREE.Object3D>(
+  object: T,
+  opacity: number,
+  enableTransparency: boolean = true
+) => {
+  // Apply opacity to the object and all its children recursively
+  object.traverse((child: any) => {
+    if (child.material) {
+      const materials = child.material instanceof Array ? child.material : [child.material]
+
+      materials.forEach((mat) => {
+        if (enableTransparency && !mat.transparent) {
+          mat.transparent = true
+        }
+        mat.opacity = opacity
+      })
+    }
+  })
+
+  return object
+}
+
+export const setScale = <T extends THREE.Object3D>(
+  object: T,
+  scale: number | { x?: number; y?: number; z?: number },
+  relative: boolean = false
+): THREE.Object3D => {
+  if (typeof scale === 'number') {
+    // Uniform scaling with a single number
+    if (relative) {
+      object.scale.multiplyScalar(scale)
+    } else {
+      object.scale.set(scale, scale, scale)
+    }
+  } else {
+    // Non-uniform scaling with an object containing x, y, z properties
+    const scaleX = scale.x !== undefined ? scale.x : relative ? 1 : object.scale.x
+    const scaleY = scale.y !== undefined ? scale.y : relative ? 1 : object.scale.y
+    const scaleZ = scale.z !== undefined ? scale.z : relative ? 1 : object.scale.z
+
+    if (relative) {
+      object.scale.x *= scaleX
+      object.scale.y *= scaleY
+      object.scale.z *= scaleZ
+    } else {
+      object.scale.set(scaleX, scaleY, scaleZ)
+    }
+  }
+
+  return object
+}
+
+export const fade = (
+  object: THREE.Object3D,
+  duration: number = 800,
+  fromValue: number = 0,
+  toValue: number = 1
+): UserAnimation => {
+  return new UserAnimation(easeInOutQuad(fromValue, toValue, duration), (value) => {
+    setOpacity(object, value)
+  })
+}
+
+export const fadeInTowardsEnd = (object: THREE.Object3D, duration: number = 800): UserAnimation => {
+  return new UserAnimation(
+    easeConstant(0, duration / 3).concat(easeInOutQuad(0, 1, (2 * duration) / 3)),
+    (value) => {
+      setOpacity(object, value)
+    }
+  )
+}
+
+export const fadeIn = (object: THREE.Object3D, duration: number = 800) => fade(object, duration)
+
+export const fadeOut = (object: THREE.Object3D, duration: number = 800) =>
+  fade(object, duration).reverse()
+
+export const zoomIn = (
+  object: THREE.Object3D,
+  duration: number = 800,
+  endpoint: number = 1
+): UserAnimation => {
+  return new UserAnimation(easeInOutQuad(0, endpoint, duration), (value) => {
+    setScale(object, value)
+  })
+}
+
+export const zoomOut = (object: THREE.Object3D, duration: number = 800, endpoint: number = 1) =>
+  zoomIn(object, duration, endpoint).reverse()
+
+export const moveToAnimation = (
+  current: THREE.Object3D,
+  target: THREE.Vector3,
+  duration: number = 800
+): UserAnimation => {
+  // Store initial position and calculate target position
+  const startPosition = current.position.clone()
+  const targetWorldPosition = target
+
+  // Convert to current object's parent space if needed
+  const targetLocalPosition = new THREE.Vector3()
+  if (current.parent) {
+    current.parent.worldToLocal(targetLocalPosition.copy(targetWorldPosition))
+  } else {
+    targetLocalPosition.copy(targetWorldPosition)
+  }
+
+  // Calculate movement delta
+  const delta = new THREE.Vector3().subVectors(targetLocalPosition, startPosition)
+
+  // Create animation with eased interpolation
+  return new UserAnimation(easeInOutQuad(0, 1, duration), (progress) => {
+    current.position.copy(startPosition.clone().add(delta.clone().multiplyScalar(progress)))
+    current.updateMatrixWorld()
+  })
+}
+
+export const moveCameraAnimation = (
+  camera: THREE.OrthographicCamera | THREE.PerspectiveCamera,
+  target: THREE.Vector3,
+  duration: number = 800
+): UserAnimation => {
+  // Store the target position (we'll capture the start position when animation begins)
+  const targetPosition = new THREE.Vector3(
+    target.x,
+    target.y,
+    camera.position.z // Keep the same z position
+  )
+
+  // We'll capture these values when the animation starts
+  let startPosition: THREE.Vector3
+  let delta: THREE.Vector3
+
+  // Create animation with eased interpolation
+  return new UserAnimation(easeInOutQuad(0, 1, duration), (progress) => {
+    // On first frame, capture the current camera position
+    if (progress === 0) {
+      startPosition = camera.position.clone()
+
+      // Calculate movement delta (only for x and y)
+      delta = new THREE.Vector3(
+        targetPosition.x - startPosition.x,
+        targetPosition.y - startPosition.y,
+        0 // No change in z
+      )
+    }
+
+    camera.position.x = startPosition.x + delta.x * progress
+    camera.position.y = startPosition.y + delta.y * progress
+    camera.updateMatrixWorld()
+  })
+}
+
+export const moveRotateCameraAnimation3D = (
+  camera: THREE.OrthographicCamera | THREE.PerspectiveCamera,
+  startPosition: THREE.Vector3,
+  startRotation: THREE.Quaternion,
+  positionTarget: THREE.Vector3,
+  rotationTarget: THREE.Quaternion,
+  duration: number = 800
+): UserAnimation => {
+  const startPosCopy = startPosition.clone()
+  const startRotCopy = startRotation.clone()
+
+  // Store the target position (we'll capture the start position when animation begins)
+  const targetPosition = positionTarget.clone()
+
+  const posDelta = targetPosition.clone().sub(startPosCopy)
+
+  // Create animation with eased interpolation
+  return new UserAnimation(easeInOutQuad(0, 1, duration), (progress) => {
+    camera.position.copy(startPosCopy.clone().add(posDelta.clone().multiplyScalar(progress)))
+    camera.quaternion.copy(startRotCopy).slerp(rotationTarget, progress)
+  })
+}
+
+export const moveCameraAnimation3D = (
+  camera: THREE.OrthographicCamera | THREE.PerspectiveCamera,
+  startPosition: THREE.Vector3,
+  positionTarget: THREE.Vector3,
+  duration: number = 800
+): UserAnimation => {
+  // Store the target position (we'll capture the start position when animation begins)
+  const targetPosition = positionTarget.clone()
+
+  const posDelta = targetPosition.clone().sub(startPosition)
+
+  // Create animation with eased interpolation
+  return new UserAnimation(easeInOutQuad(0, 1, duration), (progress) => {
+    camera.position.copy(startPosition.clone().add(posDelta.clone().multiplyScalar(progress)))
+  })
+}
+
+export const rotateCamera3D = (
+  camera: THREE.OrthographicCamera | THREE.PerspectiveCamera,
+  rotationTarget: THREE.Quaternion,
+  duration: number = 800
+): UserAnimation => {
+  let startRotation: THREE.Quaternion
+
+  // Create animation with eased interpolation
+  return new UserAnimation(easeInOutQuad(0, 1, duration), (progress) => {
+    // On first frame, capture the current camera position
+    if (progress === 0) {
+      startRotation = camera.quaternion.clone()
+      // Calculate movement delta (only for x and y)
+    }
+    camera.quaternion.copy(startRotation).slerp(rotationTarget, progress)
+  })
+}

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

@@ -0,0 +1,85 @@
+import { renderOutputFps } from '../../../../entry'
+import * as THREE from 'three'
+import { AnimatedScene } from '../scene/sceneClass'
+import { AudioInScene } from '../audio/loader'
+
+const fs = require('fs')
+const path = require('path')
+
+export const captureCanvasFrame = async (
+  currentFrameIndex: number,
+  renderName: string,
+  threeRenderer: THREE.WebGLRenderer
+) => {
+  try {
+    const dirPath = path.join('image_renders', `render_${renderName}`)
+
+    // Create directory if needed
+    if (!fs.existsSync(dirPath)) {
+      fs.mkdirSync(dirPath, { recursive: true })
+    }
+
+    // Generate filename with .rgb extension
+    const paddedIndex = currentFrameIndex.toString().padStart(5, '0')
+    const filename = `frame_${paddedIndex}.jpeg`
+    const filePath = path.join(dirPath, filename)
+
+    // Get WebGL context and pixel data
+    const canvas = threeRenderer.domElement
+
+    // Use the canvas.toBlob method to capture a JPEG image.
+    // Note: The quality parameter is between 0 and 1.
+    const blob = await new Promise((resolve) => {
+      canvas.toBlob(resolve, 'image/jpeg', 0.85)
+    })
+
+    // Convert the blob to an ArrayBuffer then to a Node.js Buffer.
+    const arrayBuffer = await (blob as any).arrayBuffer()
+    const buffer = Buffer.from(arrayBuffer)
+
+    await fs.promises.writeFile(filePath, buffer)
+
+    console.log(`Saved RAW frame ${currentFrameIndex} to ${filePath}`)
+    return filePath
+  } catch (error) {
+    console.error('Error saving canvas frame:', error)
+    throw error
+  }
+}
+export const triggerEncoder = async (
+  width: number,
+  height: number,
+  renderingAudioGather: AudioInScene[]
+) => {
+  try {
+    // Call the exposed function via the 'api' object.
+    const response = await (window as any).api.startVideoRender({
+      fps: renderOutputFps(),
+      width,
+      height,
+      renderingAudioGather
+    })
+    if (response.success) {
+      console.log('Video rendered successfully at:', response.outputFile)
+      // You can update the UI to show the output file path or provide a link to view it
+    } else {
+      console.error('Video render failed:', response.error)
+    }
+  } catch (error) {
+    console.error('Error calling render:', error)
+  }
+  /*
+  
+  exec(
+    './rust-media/target/release/rust-media ' + Math.round(renderOutputFps()).toString(),
+    (error, stdout, stderr) => {
+      if (error) {
+        console.error(`Error executing command: ${error}`)
+        return
+      }
+      console.log(`stdout: ${stdout}`)
+      console.error(`stderr: ${stderr}`)
+    }
+  )
+    */
+}

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

@@ -0,0 +1,7 @@
+import { screenFps } from '../../../../entry'
+
+// Convert ticks (frames) to milliseconds
+export const ticksToMillis = (ticks: number) => (ticks / screenFps) * 1000
+
+// Convert milliseconds to the closest whole number of ticks
+export const millisToTicks = (ms: number) => Math.ceil((ms / 1000) * screenFps)

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

@@ -0,0 +1,155 @@
+import { millisToTicks } from './helpers'
+
+export const concatInterpols = (...interpolations: number[][]) => {
+  return interpolations.reduce((acc, curr) => acc.concat(curr), [])
+}
+
+export const easeConstant = (start: number, duration: number): number[] => {
+  const numFrames = millisToTicks(duration)
+  return new Array(numFrames).fill(start)
+}
+
+export const easeLinear = (start: number, end: number, duration: number): number[] => {
+  const numFrames = millisToTicks(duration)
+  const values: number[] = []
+  for (let i = 0; i < numFrames; i++) {
+    const t = i / (numFrames - 1)
+    values.push(start + (end - start) * t)
+  }
+  return values
+}
+
+export const easeInOutQuad = (start: number, end: number, duration: number): number[] => {
+  const numFrames = millisToTicks(duration)
+  const values: number[] = []
+  for (let i = 0; i < numFrames; i++) {
+    // Normalize current step to a value between 0 and 1.
+    const t = i / (numFrames - 1)
+    // Apply the quadratic easeInOut formula.
+    let eased: number
+    if (t < 0.5) {
+      eased = 2 * t * t
+    } else {
+      eased = -1 + (4 - 2 * t) * t
+    }
+    // Interpolate between start and end.
+    const value = start + (end - start) * eased
+    values.push(value)
+  }
+  return values
+}
+
+export const rubberband = (start: number, end: number, duration: number): number[] => {
+  const numFrames = millisToTicks(duration)
+  const values: number[] = []
+  const overshoot = 1.70158 // Controls overshoot amount (1.70158 = 10% overshoot)
+
+  for (let i = 0; i < numFrames; i++) {
+    const t = i / (numFrames - 1)
+    let eased: number
+
+    if (t === 0) {
+      eased = 0
+    } else if (t === 1) {
+      eased = 1
+    } else {
+      eased = 1 + (overshoot + 1) * Math.pow(t - 1, 3) + overshoot * Math.pow(t - 1, 2)
+    }
+
+    const value = start + (end - start) * eased
+    values.push(value)
+  }
+  return values
+}
+
+/**
+ * Interpolates a vector to a new size using linear interpolation.
+ *
+ * @param vector - The original array of numbers.
+ * @param newSize - The desired size of the new vector (should be >= original size).
+ * @returns A new array of numbers with the interpolated values.
+ */
+export const interpolateVector = (vector: number[], newSize: number): number[] => {
+  const originalSize = vector.length
+  if (newSize < originalSize) {
+    throw new Error('New size must be greater than or equal to the original size.')
+  }
+
+  const result: number[] = []
+  // Calculate the step in the original vector for each new element.
+  const step = (originalSize - 1) / (newSize - 1)
+
+  for (let i = 0; i < newSize; i++) {
+    // Determine the position in the original array
+    const pos = i * step
+    const index = Math.floor(pos)
+    const remainder = pos - index
+
+    // If pos falls exactly on an original index, just use it.
+    if (remainder === 0 || index === originalSize - 1) {
+      result.push(vector[index])
+    } else {
+      // Linear interpolation between vector[index] and vector[index + 1]
+      const interpolatedValue = vector[index] * (1 - remainder) + vector[index + 1] * remainder
+      result.push(interpolatedValue)
+    }
+  }
+
+  return result
+}
+
+export const compressVector = (vector: number[], newSize: number): number[] => {
+  const originalSize = vector.length
+  if (newSize > originalSize) {
+    throw new Error('New size must be smaller than or equal to the original size.')
+  }
+  if (newSize === originalSize) return [...vector]
+
+  const result: number[] = []
+  const blockSize = originalSize / newSize
+
+  for (let i = 0; i < newSize; i++) {
+    const start = i * blockSize
+    const end = start + blockSize
+
+    // Collect all values overlapping with the current block
+    let sum = 0
+    let count = 0
+    for (let j = Math.floor(start); j < Math.ceil(end); j++) {
+      // Weight by overlap fraction (handles partial overlaps)
+      const overlapStart = Math.max(start, j)
+      const overlapEnd = Math.min(end, j + 1)
+      const weight = overlapEnd - overlapStart
+
+      sum += vector[j] * weight
+      count += weight
+    }
+    result.push(sum / count)
+  }
+
+  return result
+}
+
+/**
+ * Applies random noise in place to each element of a number vector.
+ *
+ * @param vector - The array of numbers to be modified.
+ * @param noiseLevel - The maximum absolute noise to add to each element.
+ */
+export const noiseOnInterpolation = (vector: number[], noiseLevel: number): void => {
+  for (let i = 0; i < vector.length; i++) {
+    // Generate noise in the range [-noiseLevel, noiseLevel]
+    const noise = (Math.random() * 2 - 1) * noiseLevel
+    vector[i] += noise
+  }
+}
+
+export const posXSigmoid = (x: number): number => {
+  x = Math.abs(x)
+  if (x < 0) return 0
+
+  // Standard sigmoid is 1/(1+e^(-x))
+  // At x=0, sigmoid(0) = 0.5
+  // Shifting down by 0.5 and scaling by 2 gives us 0 at x=0
+  return 2 * (1 / (1 + Math.exp(-x)) - 0.5)
+}

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

@@ -0,0 +1,79 @@
+import { compressVector, interpolateVector, noiseOnInterpolation } from './interpolations'
+
+export interface DefinedAnimation {
+  interpolation: number[]
+  updater: UpdaterFunction
+}
+
+export class UserAnimation implements DefinedAnimation {
+  interpolation: number[]
+  updater: UpdaterFunction
+
+  constructor(interpolation: number[], updater: UpdaterFunction) {
+    this.interpolation = interpolation
+    this.updater = updater
+  }
+
+  addNoise(scale: number = 1): this {
+    noiseOnInterpolation(this.interpolation, scale)
+    return this
+  }
+
+  scaleLength(scale: number): this {
+    if (scale === 1) return this
+    else if (scale > 1) {
+      this.interpolation = interpolateVector(
+        this.interpolation,
+        Math.round(this.interpolation.length * scale)
+      )
+    } else {
+      this.interpolation = compressVector(
+        this.interpolation,
+        Math.round(this.interpolation.length * scale)
+      )
+    }
+    return this
+  }
+
+  sum(add: number[]): this {
+    const maxLength = Math.max(this.interpolation.length, add.length)
+    const newInterpolation: number[] = []
+
+    for (let i = 0; i < maxLength; i++) {
+      const a = this.interpolation[i] ?? 0 // Use 0 if undefined
+      const b = add[i] ?? 0 // Use 0 if undefined
+      newInterpolation[i] = a + b
+    }
+
+    this.interpolation = newInterpolation
+    return this
+  }
+
+  reverse(): this {
+    this.interpolation.reverse()
+    return this
+  }
+
+  copy(): UserAnimation {
+    return new UserAnimation([...this.interpolation], this.updater)
+  }
+}
+
+export const createAnimNamed = (animation: DefinedAnimation): UserAnimation => {
+  return new UserAnimation(animation.interpolation, animation.updater)
+}
+
+export const createAnim = (interpolation: number[], updater: UpdaterFunction): UserAnimation => {
+  return new UserAnimation(interpolation, updater)
+}
+
+export interface InternalAnimation {
+  startTick: number
+  endTick: number
+  interpolation: number[]
+  updater: UpdaterFunction
+}
+
+export type DependencyUpdater = (sceneTick: number, time: number) => any
+
+export type UpdaterFunction = (interpolation: number, sceneTick: number, isLast: boolean) => any