create-definedmotion 0.1.0

package/template/src/example_scenes/visulizingFunctions.ts

@@ -0,0 +1,246 @@
+import { COLORS } from '../renderer/src/lib/rendering/helpers'
+import {
+  addBackgroundGradient,
+  addHDRI,
+  addSceneLighting,
+  HDRIs,
+  loadHDRIData
+} from '../renderer/src/lib/rendering/lighting3d'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '../renderer/src/lib/scene/sceneClass'
+import * as THREE from 'three'
+import { MeshLine, MeshLineMaterial } from 'three.meshline'
+import { linspace } from '../renderer/src/lib/mathHelpers/vectors'
+import { createAnim, UserAnimation } from '../renderer/src/lib/animation/protocols'
+import { easeInOutQuad } from '../renderer/src/lib/animation/interpolations'
+import {
+  fadeIn,
+  fadeOut,
+  moveCameraAnimation3D,
+  setOpacity
+} from '../renderer/src/lib/animation/animations'
+import { createFastText, updateText } from '../renderer/src/lib/rendering/objects2d'
+
+const functions: [string, (x: number) => number][] = [
+  // ──────────── Start Simple & Recognizable ────────────
+  ['Constant', (_) => 0],
+  ['Linear', (x) => x],
+  ['Exponential', (x) => Math.exp(x / 3.3)],
+  ['Cubic', (x) => Math.pow(x / 10, 3) * 10],
+  ['Absolute Value', (x) => Math.abs(x)],
+  ['Square Root of |x|', (x) => Math.sqrt(Math.abs(x))],
+
+  // ──────────── Introduce Waves & Periodicity ────────────
+  ['Sine', (x) => Math.sin(x) * 5],
+  ['Cosine', (x) => Math.cos(x) * 5],
+  ['Chirp', (x) => Math.sin(0.5 * x * x) * 5],
+  ['Sawtooth Wave', (x) => 2 * (x / Math.PI - Math.floor(x / Math.PI + 0.5)) * 5],
+  [
+    'Triangle Wave',
+    (x) => (2 * Math.abs(2 * (x / Math.PI - Math.floor(x / Math.PI + 0.5))) - 1) * 5
+  ],
+  ['Square Wave', (x) => Math.sign(Math.sin(x)) * 10],
+
+  // ──────────── Smooth Curves & Transitions ────────────
+  ['Gaussian Curve', (x) => Math.exp(-0.5 * x * x) * 10],
+  ['ReLU', (x) => Math.max(0, x)],
+  ['Sigmoid', (x) => (1 / (1 + Math.exp(-x))) * 10],
+  ['Damped Sine Wave', (x) => Math.sin(x) * Math.exp(-0.05 * x * x) * 10],
+
+  // ──────────── Chaotic/Unpredictable Climax ────────────
+  ['Chaotic Oscillator', (x) => Math.sin(10 * x) * Math.sin(0.3 * x * x) * 5]
+]
+const vectorizeFunctions = (
+  functions: [string, (x: number) => number][],
+  threshold: number = Infinity
+): [number, number][][] => {
+  return functions.map(([label, fn]) => {
+    const xs = linspace(-10, 10, 200)
+    return xs.map((x) => {
+      const raw = fn(x)
+      // zero out anything non‐finite or exceeding threshold
+      const y = Number.isFinite(raw) && Math.abs(raw) <= threshold ? raw : 0
+      return [x, y] as [number, number]
+    })
+  })
+}
+
+const interpolate = (
+  vectorFunc1: [number, number][],
+  vectorFunc2: [number, number][],
+  progress: number
+): [number, number][] => {
+  if (vectorFunc1.length !== vectorFunc2.length) {
+    throw new Error('Both point‑lists must have the same length for interpolation.')
+  }
+
+  // clamp progress into [0,1]
+  const t = Math.max(0, Math.min(1, progress))
+
+  return vectorFunc1.map(([x1, y1], i) => {
+    const [x2, y2] = vectorFunc2[i]
+    // interpolate x and y
+    const x = x1 + (x2 - x1) * t
+    const y = y1 + (y2 - y1) * t
+    return [x, y] as [number, number]
+  })
+}
+
+const morphAnimation = (
+  line: PlotLine,
+  vecFunc1: [number, number][],
+  vecFunc2: [number, number][],
+  duration: number = 500
+) => {
+  return createAnim(easeInOutQuad(0, 1, duration), (value) => {
+    line.setPoints(interpolate(vecFunc1, vecFunc2, value))
+  })
+}
+const hdriData = await loadHDRIData(HDRIs.outdoor1, 1, 1)
+
+export const functionsAnimation = (): AnimatedScene => {
+  return new AnimatedScene(
+    1080,
+    2160,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (scene) => {
+      // scene.registerAudio(fadeSound)
+      scene.add(
+        create2DAxis({ xmin: -10, xmax: 10, ymin: -10, ymax: 10, ticks: 10, tickSize: 0.5 })
+      )
+      addSceneLighting(scene.scene)
+
+      await addHDRI(scene, hdriData, 1)
+      addBackgroundGradient({
+        scene,
+        topColor: '#00639d',
+        bottomColor: COLORS.black,
+        backgroundOpacity: 0.5
+      })
+      scene.camera.position.set(0, 0, 10)
+      const informationTextNode = await createFastText('Some of the functions are scaled.', 0.6)
+      informationTextNode.position.y = 13.5
+      setOpacity(informationTextNode, 0.4)
+      scene.add(informationTextNode)
+      const textNode = await createFastText('', 1.5)
+      textNode.position.y = 12
+      scene.add(textNode)
+
+      const plotLine = new PlotLine(scene.scene, 0xffffff)
+
+      const vecFuncs = vectorizeFunctions(functions)
+
+      scene.camera.position.set(9.82015, 4.347805, 29.81918)
+      scene.camera.quaternion.set(-0.07633829, 0.3762715, 0.03112576, 0.9228345)
+      scene.camera.zoom = 0.8
+
+      const moveAnimation = moveCameraAnimation3D(
+        scene.camera,
+        scene.camera.position.clone(),
+        new THREE.Vector3(-9.625222, 4.32878, 29.57185),
+        2500
+      )
+
+      scene.onEachTick(() => {
+        scene.camera.lookAt(0, 0, -2)
+      })
+
+      scene.addSequentialBackgroundAnims(
+        ...Array(20)
+          .fill(0)
+          .flatMap(() => [moveAnimation, moveAnimation.copy().reverse()])
+      )
+
+      for (let i = 0; i < vecFuncs.length - 1; i++) {
+        // scene.playAudio(fadeSound, 0.03)
+
+        scene.addSequentialBackgroundAnims(
+          morphAnimation(plotLine, vecFuncs[i], vecFuncs[i + 1], 300)
+        )
+        scene.addAnim(fadeOut(textNode, 150))
+        scene.do(async () => {
+          await updateText(textNode, functions[i + 1][0])
+        })
+        scene.addAnim(fadeIn(textNode, 150))
+        scene.addWait(800)
+      }
+
+      scene.addWait(1600)
+    }
+  )
+}
+
+class PlotLine {
+  private meshLine: MeshLine
+  private mesh: THREE.Mesh
+
+  constructor(scene: THREE.Scene, color: THREE.ColorRepresentation) {
+    // create MeshLine + material + mesh
+    this.meshLine = new MeshLine()
+    const material = new MeshLineMaterial({
+      lineWidth: 0.1,
+      color,
+      transparent: false
+    })
+    this.mesh = new THREE.Mesh(this.meshLine.geometry, material)
+    scene.add(this.mesh)
+  }
+
+  setPoints(points: [number, number][]) {
+    // flatten into [x0, y0, z0, x1, y1, z1, …]
+    const flatPoints: number[] = []
+    for (const [x, y] of points) {
+      flatPoints.push(x, y, 0)
+    }
+    // false = don't close the loop
+    this.meshLine.setPoints(flatPoints, false)
+  }
+}
+
+export function create2DAxis({
+  xmin = -10,
+  xmax = 10,
+  ymin = -10,
+  ymax = 10,
+  ticks = 10,
+  tickSize = 0.2
+} = {}) {
+  const group = new THREE.Group()
+  const mat = new THREE.LineBasicMaterial({ color: 0xffffff })
+
+  // main X axis
+  let geo = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(xmin, 0, 0),
+    new THREE.Vector3(xmax, 0, 0)
+  ])
+  group.add(new THREE.Line(geo, mat))
+
+  // main Y axis
+  geo = new THREE.BufferGeometry().setFromPoints([
+    new THREE.Vector3(0, ymin, 0),
+    new THREE.Vector3(0, ymax, 0)
+  ])
+  group.add(new THREE.Line(geo, mat))
+
+  // tick marks
+  const dx = (xmax - xmin) / ticks
+  for (let i = 0; i <= ticks; i++) {
+    const x = xmin + i * dx
+    const tgeo = new THREE.BufferGeometry().setFromPoints([
+      new THREE.Vector3(x, -tickSize / 2, 0),
+      new THREE.Vector3(x, tickSize / 2, 0)
+    ])
+    group.add(new THREE.Line(tgeo, mat))
+  }
+  const dy = (ymax - ymin) / ticks
+  for (let j = 0; j <= ticks; j++) {
+    const y = ymin + j * dy
+    const tgeo = new THREE.BufferGeometry().setFromPoints([
+      new THREE.Vector3(-tickSize / 2, y, 0),
+      new THREE.Vector3(tickSize / 2, y, 0)
+    ])
+    group.add(new THREE.Line(tgeo, mat))
+  }
+
+  return group
+}

package/template/src/main/index.ts

@@ -0,0 +1,101 @@
+import { app, shell, BrowserWindow, ipcMain } 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'
+
+let mainWindow: BrowserWindow
+
+function createWindow(): void {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 1000,
+    height: 1300,
+    show: false,
+    autoHideMenuBar: true,
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+      nodeIntegrationInWorker: true,
+      webSecurity: true,
+      allowRunningInsecureContent: false,
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+  // Set app user model id for windows
+  electronApp.setAppUserModelId('com.electron')
+
+  // Default open or close DevTools by F12 in development
+  // and ignore CommandOrControl + R in production.
+  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  // IPC test
+  ipcMain.on('ping', () => console.log('pong'))
+
+  // Listen for resize requests from the renderer
+  ipcMain.on('resize-window', (event, { width, height }) => {
+    if (mainWindow) {
+      mainWindow.setSize(width, height)
+    }
+  })
+
+  createWindow()
+
+  app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+ipcMain.handle('start-video-render', async (event, options) => {
+  try {
+    const outputFile = await renderVideo(options)
+    return { success: true, outputFile }
+  } catch (error: any) {
+    return { success: false, error: error.message }
+  }
+})
+
+deleteRenderedContent()
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

package/template/src/main/rendering.ts

@@ -0,0 +1,219 @@
+import fs from 'fs'
+import path from 'path'
+import { spawnSync } from 'child_process'
+
+export interface AudioInScene {
+  audioPath: string
+  volume: number
+  atFrame: number
+}
+
+export interface RenderOptions {
+  fps: number
+  width: number
+  height: number
+  renderingAudioGather: AudioInScene[]
+}
+
+export const generateID = (numCharacters: number = 10) =>
+  Math.random().toString(numCharacters).substr(2, 9)
+
+/**
+ * Renders a video from image frames found in the latest "render" directory.
+ * @param options - Configuration options for rendering.
+ * @param options.fps - Frames per second to use (default is 30).
+ * @returns A promise that resolves to the output file path.
+ */
+export function renderVideo(options: RenderOptions): Promise<string> {
+  return new Promise((resolve, reject) => {
+    try {
+      console.log(`Converting frames to video at ${options.fps} fps`)
+
+      //  console.log('THE AUDIO DATA IS', options.renderingAudioGather)
+
+      // Define directories
+      const rootDir = './image_renders'
+      const audioRendersDir = './audio_renders'
+      const outputDir = './rendered_videos'
+
+      // Ensure output directory exists.
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true })
+      }
+
+      // Ensure output directory exists.
+      if (!fs.existsSync(audioRendersDir)) {
+        fs.mkdirSync(audioRendersDir, { recursive: true })
+      }
+      const audioID = generateID(10)
+      const includeAudio = options.renderingAudioGather.length > 0
+      if (includeAudio) {
+        const audioCommand = buildAudioMixCommand(options, audioRendersDir, audioID)
+
+        console.log(`Building audio...`)
+        const audioResult = spawnSync(audioCommand, { stdio: 'inherit', shell: true })
+        if (audioResult.status !== 0) {
+          return reject(new Error('FFmpeg command failed'))
+        }
+      }
+
+      // Find the latest render directory.
+      const latestDir = findLatestDir(rootDir)
+      const dirName = path.basename(latestDir)
+      console.log(`Processing directory: ${dirName}`)
+
+      // Define the frame pattern and output file path.
+      const framePattern = path.join(latestDir, 'frame_%05d.jpeg')
+      const outputFile = path.join(outputDir, `${dirName}.mp4`)
+
+      // Start building the ffmpeg arguments array.
+      const ffmpegArgs = [
+        '-y', // Overwrite output if it exists.
+        '-framerate',
+        options.fps.toString(), // Frame rate for the video.
+        '-i',
+        framePattern // Input frames pattern.
+      ]
+
+      // Conditionally add the audio input if needed.
+      if (includeAudio) {
+        ffmpegArgs.push(
+          '-i',
+          `${audioRendersDir}/${audioID}.mp3` // Input audio file.
+        )
+      }
+
+      // Common encoding parameters for video.
+      ffmpegArgs.push(
+        '-c:v',
+        'libx264', // Video codec.
+        '-pix_fmt',
+        'yuv420p' // Pixel format.
+      )
+
+      // Conditionally add audio codec settings only if audio is included.
+      if (includeAudio) {
+        ffmpegArgs.push(
+          '-c:a',
+          'aac', // Audio codec.
+          '-af',
+          'apad', // <-- pad audio with silence
+          '-shortest' // <-- cut output to shortest input (i.e. video)
+        )
+      }
+
+      // Additional encoding options for both scenarios.
+      ffmpegArgs.push(
+        '-preset',
+        'fast', // Preset for encoding speed/quality.
+        '-crf',
+        '23', // Quality/size balance.
+        outputFile // Output file.
+      )
+
+      console.log('Executing FFmpeg command:')
+      console.log(`ffmpeg ${ffmpegArgs.join(' ')}`)
+
+      // Execute FFmpeg synchronously.
+      const result = spawnSync('ffmpeg', ffmpegArgs, { stdio: 'inherit' })
+      if (result.status !== 0) {
+        return reject(new Error('FFmpeg command failed'))
+      }
+
+      console.log(`Video created successfully: ${outputFile}`)
+
+      // Delete the render directory with all its images.
+      fs.rmSync(latestDir, { recursive: true, force: true })
+      fs.readdirSync(audioRendersDir).forEach((item) => {
+        const itemPath = path.join(audioRendersDir, item)
+        fs.rmSync(itemPath, { recursive: true, force: true })
+      })
+      console.log(`Deleted render folder: ${latestDir}`)
+
+      resolve(outputFile)
+    } catch (err) {
+      reject(err)
+    }
+  })
+}
+/*
+function generateFFmpegAudioCommand(
+  options: RenderOptions,
+  outputFolder: string,
+  id: string
+): string {
+  const inputs: string[] = []
+  const filterChains: string[] = []
+  const amixInputs: string[] = []
+
+  options.renderingAudioGather.forEach((audio, index) => {
+    const startTime = audio.atFrame / options.fps
+    inputs.push(`-i ./src/renderer${audio.audioPath}`)
+    filterChains.push(`[${index}:a]asetpts=PTS+${startTime}/TB,volume=${audio.volume}[a${index}]`)
+    amixInputs.push(`[a${index}]`)
+  })
+
+  const amixFilter = `${amixInputs.join('')}amix=inputs=${amixInputs.length}:duration=longest[aout]`
+  const filterComplex = [...filterChains, amixFilter].join('; ')
+
+  return `ffmpeg ${inputs.join(' ')} -filter_complex "${filterComplex}" -map "[aout]" -c:a libmp3lame -q:a 2 ${outputFolder}/${id}.mp3`
+}*/
+
+function buildAudioMixCommand(renderOptions: RenderOptions, outputFolder: string, id: string) {
+  const { fps, renderingAudioGather } = renderOptions
+  let inputs: string[] = []
+  let filters: string[] = []
+  let inputIndexes: string[] = []
+
+  renderingAudioGather.forEach((audio, index) => {
+    inputs.push(`-i ./src/renderer${audio.audioPath}`)
+    const delayMs = Math.floor((audio.atFrame / fps) * 1000)
+    // adelay syntax: "adelay=delay_in_ms|delay_in_ms"
+    filters.push(`[${index}:a]adelay=${delayMs}|${delayMs},volume=${audio.volume}[a${index}]`)
+    inputIndexes.push(`[a${index}]`)
+  })
+
+  const filterComplex =
+    filters.join('; ') +
+    '; ' +
+    inputIndexes.join('') +
+    `amix=inputs=${renderingAudioGather.length}:duration=longest:normalize=0[out]`
+
+  // Adding -hide_banner and -loglevel error to reduce terminal output.
+  const command = `ffmpeg -hide_banner -loglevel error ${inputs.join(' ')} -filter_complex "${filterComplex}" -map "[out]" ${outputFolder}/${id}.mp3`
+  return command
+}
+
+/**
+ * Finds the most recent directory in the given path that starts with "render".
+ * @param dirPath - The root directory to search.
+ * @returns The full path of the latest render directory.
+ * @throws If the directory does not exist or no render directories are found.
+ */
+function findLatestDir(dirPath: string): string {
+  if (!fs.existsSync(dirPath)) {
+    throw new Error(`Directory not found: ${dirPath}`)
+  }
+
+  const entries = fs.readdirSync(dirPath)
+  let newestDir: string | null = null
+  let newestTime = 0 // milliseconds
+
+  entries.forEach((entry) => {
+    const fullPath = path.join(dirPath, entry)
+    const stat = fs.statSync(fullPath)
+    if (stat.isDirectory() && entry.startsWith('render')) {
+      // Prefer creation time if available; fallback to modified time.
+      const time = stat.birthtimeMs || stat.mtimeMs
+      if (time > newestTime) {
+        newestTime = time
+        newestDir = fullPath
+      }
+    }
+  })
+
+  if (!newestDir) {
+    throw new Error('No render directories found')
+  }
+  return newestDir
+}

package/template/src/main/storage.ts

@@ -0,0 +1,35 @@
+import path from 'path'
+import fs from 'fs/promises'
+import fsSync from 'fs'
+
+export async function deleteRenderedContent() {
+  const folderPath = './image_renders'
+  const audioRendersDir = './audio_renders'
+
+  try {
+    // Read all entries in the folder.
+    const entries = await fs.readdir(folderPath, { withFileTypes: true })
+
+    // Filter for directories starting with "render_".
+    const renderDirs = entries.filter(
+      (entry) => entry.isDirectory() && entry.name.startsWith('render_')
+    )
+
+    // Loop over the filtered directories and remove each.
+    await Promise.all(
+      renderDirs.map(async (entry) => {
+        const fullPath = path.join(folderPath, entry.name)
+        await fs.rm(fullPath, { recursive: true, force: true })
+      })
+    )
+
+    fsSync.readdirSync(audioRendersDir).forEach((item) => {
+      const itemPath = path.join(audioRendersDir, item)
+      fsSync.rmSync(itemPath, { recursive: true, force: true })
+    })
+
+    console.log('All render cache have been deleted.')
+  } catch (error) {
+    console.error(`Error while deleting render folders: ${(error as any).message}`)
+  }
+}

package/template/src/preload/index.d.ts

@@ -0,0 +1,8 @@
+import { ElectronAPI } from '@electron-toolkit/preload'
+
+declare global {
+  interface Window {
+    electron: ElectronAPI
+    api: unknown
+  }
+}

package/template/src/preload/index.ts

@@ -0,0 +1,36 @@
+import { contextBridge, ipcRenderer } from 'electron'
+import { electronAPI } from '@electron-toolkit/preload'
+import { RenderOptions } from '../main/rendering'
+
+const customAPI = {
+  startVideoRender: (options: RenderOptions) => ipcRenderer.invoke('start-video-render', options)
+}
+
+// Custom APIs for renderer
+const api = {
+  ...customAPI
+}
+
+// Use `contextBridge` APIs to expose Electron APIs to
+// renderer only if context isolation is enabled, otherwise
+// just add to the DOM global.
+if (process.contextIsolated) {
+  try {
+    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('api', api)
+  } catch (error) {
+    console.error(error)
+  }
+} else {
+  // @ts-ignore (define in dts)
+  window.electron = electronAPI
+  // @ts-ignore (define in dts)
+  window.api = api
+}
+
+/*
+contextBridge.exposeInMainWorld('api', {
+  // Expose a method to start the video render
+  startVideoRender: (options: RenderOptions) => ipcRenderer.invoke('start-video-render', options)
+})
+*/

package/template/src/renderer/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Electron</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+   <!--  <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />-->
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>