create-definedmotion 0.1.0

package/template/src/example_scenes/keyboardScene.ts

@@ -0,0 +1,447 @@
+import {
+  addBackgroundGradient,
+  addHDRI,
+  addSceneLighting,
+  HDRIs,
+  loadHDRIData
+} from '../renderer/src/lib/rendering/lighting3d'
+import { loadGLB } from '../renderer/src/lib/rendering/objects/import'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '../renderer/src/lib/scene/sceneClass'
+import * as THREE from 'three'
+import ibmKeyboard from '$assets/objects/keyboardScene/ibm-keyboard.glb?url'
+import { createBumpMap } from '../renderer/src/lib/rendering/bumpMaps/noise'
+import { moveRotateCameraAnimation3D } from '../renderer/src/lib/animation/animations'
+import { createAnim } from '../renderer/src/lib/animation/protocols'
+import { easeLinear } from '../renderer/src/lib/animation/interpolations'
+import { createFastText, createLine, updateText } from '../renderer/src/lib/rendering/objects2d'
+import { COLORS } from '../renderer/src/lib/rendering/helpers'
+import tickSound from '$assets/audio/tick_sound.mp3'
+import keyboard1 from '$assets/audio/keyboard1.mp3'
+
+const strokeColor = '#ff0000'
+const backCharacter = 'Ď'
+
+const keyPositions: { [key: string]: () => [[number, number, number], [number, number]] } = {
+  //Number row
+  '1': () => [
+    [-3.95, 0.95, -0.07],
+    [0.35, 0.35]
+  ],
+  '2': () => nextKeyX(keyPositions['1']()),
+  '3': () => nextKeyX(keyPositions['2']()),
+  '4': () => nextKeyX(keyPositions['3']()),
+  '5': () => nextKeyX(keyPositions['4']()),
+  '6': () => nextKeyX(keyPositions['5']()),
+  '7': () => nextKeyX(keyPositions['6']()),
+  '8': () => nextKeyX(keyPositions['7']()),
+  '9': () => nextKeyX(keyPositions['8']()),
+  '0': () => nextKeyX(keyPositions['9']()),
+  '-': () => nextKeyX(keyPositions['0']()),
+  '=': () => nextKeyX(keyPositions['-']()),
+
+  // First Row (QWERTYUIOP{})
+  Q: () => [
+    [-3.75, 0.85, 0.3],
+    [0.35, 0.35]
+  ],
+  W: () => nextKeyX(keyPositions['Q']()),
+  E: () => nextKeyX(keyPositions['W']()),
+  R: () => nextKeyX(keyPositions['E']()),
+  T: () => nextKeyX(keyPositions['R']()),
+  Y: () => nextKeyX(keyPositions['T']()),
+  U: () => nextKeyX(keyPositions['Y']()),
+  I: () => nextKeyX(keyPositions['U']()),
+  O: () => nextKeyX(keyPositions['I']()),
+  P: () => nextKeyX(keyPositions['O']()),
+  '{': () => nextKeyX(keyPositions['P']()),
+  '}': () => nextKeyX(keyPositions['{']()),
+
+  // Second Row (ASDFGHJKL;')
+  A: () => [
+    [-3.65, 0.78, 0.7],
+    [0.35, 0.35]
+  ], // Slightly offset right and lower than Q
+  S: () => nextKeyX(keyPositions['A']()),
+  D: () => nextKeyX(keyPositions['S']()),
+  F: () => nextKeyX(keyPositions['D']()),
+  G: () => nextKeyX(keyPositions['F']()),
+  H: () => nextKeyX(keyPositions['G']()),
+  J: () => nextKeyX(keyPositions['H']()),
+  K: () => nextKeyX(keyPositions['J']()),
+  L: () => nextKeyX(keyPositions['K']()),
+  ';': () => nextKeyX(keyPositions['L']()),
+  "'": () => nextKeyX(keyPositions[';']()),
+
+  // Third Row (ZXCVBNM,./)
+  Z: () => [
+    [-3.45, 0.71, 1.05],
+    [0.35, 0.35]
+  ], // Further offset right and lower than A
+  X: () => nextKeyX(keyPositions['Z']()),
+  C: () => nextKeyX(keyPositions['X']()),
+  V: () => nextKeyX(keyPositions['C']()),
+  B: () => nextKeyX(keyPositions['V']()),
+  N: () => nextKeyX(keyPositions['B']()),
+  M: () => nextKeyX(keyPositions['N']()),
+  ',': () => nextKeyX(keyPositions['M']()),
+  '.': () => nextKeyX(keyPositions[',']()),
+  '/': () => nextKeyX(keyPositions['.']()), // Last key, no trailing comma
+
+  Space: () => [
+    [-1.64, 0.7, 1.4],
+    [2.65, 0.35]
+  ],
+
+  [backCharacter]: () => [
+    [0.9, 0.93, -0.07],
+    [0.7, 0.35]
+  ]
+}
+
+const translateToKey = (char: string): string => {
+  const symbolToKey: { [key: string]: string } = {
+    '!': '1',
+    '@': '2',
+    '#': '3',
+    $: '4',
+    '%': '5',
+    '^': '6',
+    '&': '7',
+    '*': '8',
+    '(': '9',
+    ')': '0',
+    _: '-',
+    '+': '=',
+    '{': '[',
+    '}': ']',
+    '|': '\\',
+    ':': ';',
+    '"': "'",
+    '<': ',',
+    '>': '.',
+    '?': '/',
+    '~': '`',
+    ' ': 'Space' // Add "Space" to keyPositions if needed
+  }
+
+  if (char === backCharacter) return backCharacter
+
+  // Handle letters (convert to uppercase)
+  if (/^[a-z]$/i.test(char)) return char.toUpperCase()
+  // Handle symbols
+  return symbolToKey[char] || char // Fallback to the original char if no mapping
+}
+
+const nextKeyX = (
+  current: [[number, number, number], [number, number]]
+): [[number, number, number], [number, number]] => {
+  const newPos: [number, number, number] = [...current[0]]
+  newPos[0] += 0.385
+  return [newPos, current[1]]
+}
+
+let lastStroke: undefined | THREE.Mesh
+let pointLight: undefined | THREE.PointLight
+
+const setPosition = (scene: THREE.Scene, letter: string) => {
+  if (lastStroke !== undefined) {
+    scene.remove(lastStroke)
+  }
+  const position = keyPositions[letter]()[0]
+  const keyStroke = keyStrokePlane(...keyPositions[letter]()[1])
+  keyStroke.position.set(...position)
+
+  if (pointLight === undefined || !scene.children.includes(pointLight)) {
+    pointLight = new THREE.PointLight(strokeColor, 10)
+    pointLight.castShadow = true
+    scene.add(pointLight)
+  }
+  position[1] += 1.5
+  pointLight.position.set(...position)
+
+  scene.add(keyStroke)
+  lastStroke = keyStroke
+  return { keyStroke, pointLight }
+}
+
+const bumpMap = createBumpMap({
+  width: 5000,
+  height: 5000,
+  noiseAlgorithm: 'random',
+  intensity: 0.1
+})
+
+const keyboard = await loadGLB(ibmKeyboard)
+
+const createPlane = (width: number, height: number, bumpMap?: THREE.CanvasTexture) => {
+  // Create the plane geometry
+  const geometry = new THREE.PlaneGeometry(width, height)
+
+  // Create a basic material
+  // Use MeshBasicMaterial if you do not need lighting or effects – this is ideal for 2D shapes
+  const material = new THREE.MeshStandardMaterial({
+    color: '#ffffff', // Green color
+    side: THREE.DoubleSide, // Render both sides
+    bumpMap,
+    metalness: 0.8,
+    roughness: 0.1
+  })
+
+  // Combine the geometry and material into a mesh
+  const plane = new THREE.Mesh(geometry, material)
+  plane.receiveShadow = true
+  plane.rotateX(Math.PI / 2)
+
+  return plane
+}
+
+const keyStrokePlane = (width: number, height: number, bumpMap?: THREE.CanvasTexture) => {
+  // Create the plane geometry
+  const geometry = new THREE.PlaneGeometry(width, height)
+
+  // Create a basic material
+  // Use MeshBasicMaterial if you do not need lighting or effects – this is ideal for 2D shapes
+  const material = new THREE.MeshBasicMaterial({
+    color: strokeColor, // Green color
+    side: THREE.DoubleSide, // Render both sides
+    transparent: true,
+    opacity: 0.5
+  })
+
+  // Combine the geometry and material into a mesh
+  const plane = new THREE.Mesh(geometry, material)
+  plane.receiveShadow = true
+  plane.rotateX(Math.PI / 2)
+
+  return plane
+}
+
+const setText = async (textNode: any, addedCharacter: string) => {
+  // Ensure historyTextStore is initialized
+  if (!textNode.historyTextStore) {
+    textNode.historyTextStore = ''
+  }
+
+  const numberVisible = 28
+
+  // Get visible text (without ellipsis if present)
+  const visibleText = textNode.text.startsWith('...') ? textNode.text.slice(3) : textNode.text
+
+  // Reconstruct full text from history and visible portion
+  let fullText = textNode.historyTextStore + visibleText
+
+  // Process the input character
+  if (addedCharacter === backCharacter) {
+    // Handle backspace: remove last character if exists
+    if (fullText.length > 0) {
+      fullText = fullText.slice(0, -1)
+    }
+  } else {
+    // Append new character normally
+    fullText += addedCharacter
+  }
+
+  // Update text storage and visible text
+  if (fullText.length > numberVisible) {
+    // Split into new history and visible portions
+    const newVisible = fullText.slice(-numberVisible)
+    textNode.historyTextStore = fullText.slice(0, fullText.length - numberVisible)
+    textNode.text = '...' + newVisible
+  } else {
+    // Show full text without ellipsis
+    textNode.text = fullText
+    textNode.historyTextStore = ''
+  }
+
+  // Update the text node
+  await updateText(textNode, textNode.text)
+}
+const typeAnimation = (scene: AnimatedScene, characters: string, textNode: any, speed: number) => {
+  let lastIndex = -1
+  let keyStroke: THREE.Mesh | undefined
+  let pointLight: THREE.PointLight | undefined
+  let lastCharacter
+  const animation = createAnim(
+    easeLinear(0, 1, characters.length * speed),
+    async (value, _, isLast) => {
+      const index = Math.round(value * (characters.length - 1))
+      const character = characters[index]
+
+      if (index !== lastIndex) {
+        lastIndex = index
+        ;({ keyStroke, pointLight } = setPosition(scene.scene, translateToKey(character)))
+        await setText(textNode, character)
+        if (lastCharacter === backCharacter && character === backCharacter) {
+        } else {
+          scene.playAudio(keyboard1, character === backCharacter || character === ' ' ? 0.5 : 0.2)
+          scene.playAudio(tickSound, character === ' ' ? 0.2 : 0.05)
+        }
+        lastCharacter = character
+      }
+
+      if (isLast) {
+        setTimeout(() => {
+          if (keyStroke) {
+            scene.scene.remove(keyStroke)
+          }
+          if (pointLight) {
+            scene.scene.remove(pointLight)
+          }
+        }, 500)
+      }
+    }
+  )
+
+  return animation
+}
+
+const hdriData = await loadHDRIData(HDRIs.photoStudio1, 2, 0.5)
+
+export const keyboardScene = (): AnimatedScene => {
+  return new AnimatedScene(
+    1080,
+    2160,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (scene) => {
+      scene.registerAudio(tickSound)
+      scene.registerAudio(keyboard1)
+      addSceneLighting(scene.scene, { intensity: 1, colorScheme: 'cool' })
+
+      scene.renderer.shadowMap.enabled = true
+      await addHDRI(scene, hdriData, 0.65)
+      addBackgroundGradient({
+        scene,
+        topColor: COLORS.blue,
+        bottomColor: COLORS.black,
+        lightingIntensity: 10
+      })
+      keyboard.scale.set(20, 20, 20)
+      scene.add(keyboard)
+
+      scene.do(() => {
+        scene.camera.position.set(-2.264274, 2.223899, 25.48552)
+        scene.camera.quaternion.set(-0.0590337, -0.005013175, -0.0002964671, 0.9982434)
+      })
+
+      const targetPos = new THREE.Vector3(-2.151799 - 1, 22.90854, 1.769867 + 1).multiplyScalar(
+        0.65
+      )
+      const targetRot = new THREE.Quaternion(-0.6683053, -0.001480137, -0.001329754, 0.7438844)
+
+      scene.addAnim(
+        moveRotateCameraAnimation3D(
+          scene.camera,
+          scene.camera.position,
+          scene.camera.quaternion,
+          targetPos,
+          targetRot,
+          1000
+        )
+      )
+
+      const rotateAnim = moveRotateCameraAnimation3D(
+        scene.camera,
+        targetPos,
+        targetRot,
+        new THREE.Vector3(-2.196693 - 1, 20.67784, 9.621079 + 1).multiplyScalar(0.65),
+        new THREE.Quaternion(-0.5668163, -0.003930429, -0.002704235, 0.8238304),
+        4000
+      )
+
+      scene.addSequentialBackgroundAnims(
+        ...Array(10)
+          .fill(0)
+          .flatMap(() => [rotateAnim, rotateAnim.copy().reverse()])
+      )
+
+      const lightY = 5
+      const lightX = -2
+      const pointLight = new THREE.PointLight('#ffffff', 40) // color, intensity, distance
+      pointLight.position.y = lightY
+      pointLight.position.x = lightX
+      pointLight.position.z = -0.5
+      //pointLight.castShadow = true
+
+      // scene.add(pointLight)
+
+      const texturePlane = createPlane(80, 80, bumpMap)
+      const largePlane = createPlane(1000, 1000)
+      largePlane.position.y = -0.1
+      // Add the plane to the scene
+      scene.add(texturePlane)
+      scene.add(largePlane)
+      ;(scene.camera as THREE.PerspectiveCamera).setFocalLength(25)
+
+      //setPosition(scene.scene, translateToKey(' '))
+
+      const text = await createFastText('', 0.4)
+      text.rotateX(-Math.PI / 2)
+      text.position.y = 0.02
+
+      text.position.z = -3.5
+      text.position.x = -5
+
+      text.anchorX = 'left'
+      text.anchorY = 'bottom'
+      text.material.opacity = 0.8
+      scene.add(text)
+
+      const point1 = new THREE.Vector3(-5, 0.05, -3.4)
+      const line = createLine({ point1, point2: point1.clone().add(new THREE.Vector3(6, 0, 0)) })
+      scene.add(line)
+
+      const typeSpeed = 70
+      const deleteSpeed = 30
+
+      const line1 = 'Hello Instagram!'
+      scene.addAnim(typeAnimation(scene, line1, text, typeSpeed))
+      scene.addWait(1000)
+      scene.addAnim(
+        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.addWait(1000)
+      scene.addAnim(
+        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.addWait(1000)
+      scene.addAnim(
+        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.addWait(1000)
+      scene.addAnim(
+        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.addWait(1000)
+      scene.addAnim(
+        typeAnimation(scene, [...line5].map(() => backCharacter).join(''), text, deleteSpeed)
+      )
+
+      const initialZoom = scene.camera.zoom
+      scene.onEachTick(async (tick, time) => {
+        pointLight.position.y = lightY * (1 + Math.sin(time / 500) / 10)
+        pointLight.position.x = lightX * (1 + Math.sin(time / 500) / 10)
+        scene.camera.zoom = initialZoom * (1.3 + Math.sin(time / 1000) / 20)
+        //await barChart.updateData(frequencyMap)
+      })
+      scene.addWait(3000)
+    }
+  )
+}

package/template/src/example_scenes/surfaceScene.ts

@@ -0,0 +1,88 @@
+import { COLORS } from '../renderer/src/lib/rendering/helpers'
+import { addBackgroundGradient } from '../renderer/src/lib/rendering/lighting3d'
+import {
+  createFunctionSurface,
+  updateFunctionSurface
+} from '../renderer/src/lib/rendering/objects3d'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '../renderer/src/lib/scene/sceneClass'
+import * as THREE from 'three'
+
+const surfaceMaterial = new THREE.MeshStandardMaterial({
+  color: 0xffffff,
+  metalness: 0.8,
+  roughness: 0.1,
+  side: THREE.DoubleSide
+}) as any
+
+const sphereMaterial = new THREE.MeshStandardMaterial({
+  color: 0x000000,
+  emissive: 0xffffff,
+  emissiveIntensity: 200.0
+})
+
+const sineTimeFunction = (time: number): ((a: number, b: number) => number) => {
+  return (a: number, b: number) =>
+    (5 * (Math.sin(a * 2 + time) * Math.cos(b * 2 + time))) /
+      (Math.pow(Math.abs(a) + Math.abs(b), 2) + 5) +
+    3
+}
+
+export const surfaceScene = (): AnimatedScene => {
+  return new AnimatedScene(
+    1500,
+    1500,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.BeginFromCurrent,
+    async (scene) => {
+      const funcMinMaxes: [number, number, number, number] = [-7, 7, -7, 7]
+
+      addBackgroundGradient({
+        scene,
+        topColor: COLORS.blue,
+        bottomColor: COLORS.black,
+        lightingIntensity: 10
+      })
+
+      const gridHelper = new THREE.GridHelper(20, 20)
+      const axesHelper = new THREE.AxesHelper(20)
+
+      const sineSurface = createFunctionSurface(sineTimeFunction(0), ...funcMinMaxes)
+      sineSurface.material = surfaceMaterial
+
+      const geometry = new THREE.SphereGeometry(1, 32, 32)
+      const material = sphereMaterial
+
+      const sphere = new THREE.Mesh(geometry, material)
+      const pointLight = new THREE.PointLight(0xffffff, 50) // color, intensity, distance
+      pointLight.position.copy(sphere.position)
+      const group = new THREE.Group()
+      group.add(sphere, pointLight)
+
+      scene.add(gridHelper, axesHelper, sineSurface, group)
+
+      scene.camera.position.set(3.889329, 7.895859, 10.51772)
+      scene.camera.rotation.set(-0.6027059, 0.3079325, 0.2056132)
+      const centerPoint = new THREE.Vector3(0, 0, 0)
+      const distance = scene.camera.position.distanceTo(centerPoint)
+      let angle = 0
+
+      scene.onEachTick((tick) => {
+        const func = sineTimeFunction(tick / 20)
+        updateFunctionSurface(sineSurface, func, ...funcMinMaxes)
+
+        group.position.y = 6
+
+        angle += 0.005
+
+        // Set camera position in circular orbit
+        scene.camera.position.x = (Math.sin(angle) * distance * (Math.sin(tick / 50) + 2)) / 2
+        scene.camera.position.z = (Math.cos(angle) * distance * (Math.sin(tick / 50) + 2)) / 2
+
+        // Make camera look at center
+        scene.camera.lookAt(centerPoint)
+      })
+
+      scene.addWait(10_000)
+    }
+  )
+}

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

@@ -0,0 +1,59 @@
+import { concatInterpols, easeInOutQuad, posXSigmoid } from '$renderer/lib/animation/interpolations'
+import { createAnim } from '$renderer/lib/animation/protocols'
+import { createCircle } from '$renderer/lib/rendering/objects2d'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+
+import * as THREE from 'three'
+
+// Goal for this animation:
+// Move a circle back and forth and continually change its color
+
+// Step 1: Create function that returns AnimatedScene
+export function tutorial_easy1(): AnimatedScene {
+  // We return an animated scene that has some settings and lastly has a callback function
+  // The first two parameters are resolution, this will be a vertical clip
+  // The third argument sets if we want 3D or 2D
+  // The forth allows us to say how hot reload should be handled,
+  // With trace from start, at hot reload, the actions of all frames before the current, will be accounted for.
+  // If you don't have accumulative changes (or if its fine without for debug), then it's much faster to use "HotReloadSetting.BeginFromCurrent" since it will only have to calculate the current frames actions.
+
+  return new AnimatedScene(
+    1080,
+    1920,
+    SpaceSetting.TwoDim,
+    HotReloadSetting.TraceFromStart,
+    (scene) => {
+      // Helper function to create a "THREE.CircleGeometry"
+      // You can just use any Three.js code if you want
+      const circle = createCircle(5)
+
+      // Add our circle to the scene
+      scene.add(circle)
+
+      // Create an animation that makes it move from left to right
+      // This is very modular and easy to build on
+      // createAnim takes two argument, an interpolation (just calculated number[]), and a call back function where you can use each value
+      // So here we are creating the interpolation with easeInOutQuad: number[]
+      // 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
+      // 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)
+
+      // 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())
+
+      // 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.
+      // 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) => {
+        circle.material.color = new THREE.Color().setRGB(posXSigmoid(circle.position.x / 4), 1, 1)
+      })
+    }
+  )
+}