create-definedmotion 0.1.0

package/template/src/renderer/src/lib/rendering/objects3d.ts

@@ -0,0 +1,89 @@
+import * as THREE from 'three'
+
+export function createFunctionSurface(
+  func: (a: number, b: number) => number,
+  xMin: number,
+  xMax: number,
+  yMin: number,
+  yMax: number,
+  xSegments: number = 200,
+  ySegments: number = 200
+) {
+  // Create a plane geometry
+  const width = xMax - xMin
+  const height = yMax - yMin
+  const geometry = new THREE.PlaneGeometry(width, height, xSegments, ySegments)
+
+  // Get the vertices and update z values based on the function
+  const vertices = geometry.attributes.position
+
+  for (let i = 0; i <= xSegments; i++) {
+    for (let j = 0; j <= ySegments; j++) {
+      const index = i * (ySegments + 1) + j
+
+      // Map indices to actual x,y coordinates in our desired range
+      const x = xMin + (i / xSegments) * width
+      const z = yMin + (j / ySegments) * height
+
+      // Set vertex X and Y
+      vertices.setX(index, x)
+      const y = func(x, z)
+      vertices.setY(index, y)
+
+      // Calculate Z using the provided function
+
+      vertices.setZ(index, z)
+    }
+  }
+
+  // Ensure normals are computed for proper lighting
+  geometry.computeVertexNormals()
+
+  // Create mesh with the geometry
+  const material = new THREE.MeshPhongMaterial({
+    color: 0x156289,
+    emissive: 0x072534,
+    side: THREE.DoubleSide,
+    flatShading: false,
+    wireframe: false
+  })
+
+  const mesh = new THREE.Mesh(geometry, material)
+  return mesh
+}
+
+// Function to update an existing function surface with a new time value
+export function updateFunctionSurface(
+  mesh: THREE.Mesh,
+  func: (a: number, b: number) => number,
+  xMin: number,
+  xMax: number,
+  yMin: number,
+  yMax: number,
+  xSegments: number = 200,
+  ySegments: number = 200
+) {
+  const width = xMax - xMin
+  const height = yMax - yMin
+  const vertices = mesh.geometry.attributes.position
+
+  for (let i = 0; i <= xSegments; i++) {
+    for (let j = 0; j <= ySegments; j++) {
+      const index = i * (ySegments + 1) + j
+
+      // Map indices to actual x,y coordinates
+      const x = xMin + (i / xSegments) * width
+      const z = yMin + (j / ySegments) * height
+
+      // Update Y position based on the function with time
+      const y = func(x, z)
+      vertices.setY(index, y)
+    }
+  }
+
+  // Mark vertices for update
+  vertices.needsUpdate = true
+
+  // Recompute normals for proper lighting
+  mesh.geometry.computeVertexNormals()
+}

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

@@ -0,0 +1,21 @@
+import * as THREE from 'three'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+
+export interface SceneComponents {
+  camera: THREE.PerspectiveCamera | THREE.OrthographicCamera
+  renderer: THREE.WebGLRenderer
+  scene: THREE.Scene
+  controls: OrbitControls
+}
+
+export const RERENDER = (state: SceneComponents) => {
+  state.renderer.render(state.scene, state.camera)
+}
+
+export const ADD = (state: SceneComponents, element: THREE.Mesh) => {
+  state.scene.add(element)
+}
+
+export const REMOVE = (state: SceneComponents, element: THREE.Mesh) => {
+  state.scene.remove(element)
+}

package/template/src/renderer/src/lib/rendering/setup.ts

@@ -0,0 +1,71 @@
+import * as THREE from 'three'
+import type { SceneComponents } from './protocols'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+
+export const createScene = (
+  container: HTMLElement,
+  pixelsWidth: number,
+  pixelsHeight: number,
+  threeDim: boolean,
+  zoom: number,
+  farLimit: number
+): SceneComponents => {
+  // Create the scene
+  const scene: THREE.Scene = new THREE.Scene()
+
+  // Get the container dimensions
+  const width: number = container.clientWidth
+  const height: number = container.clientHeight
+  // Use the provided dimensions for aspect ratio calculation
+  const aspect: number = pixelsWidth / pixelsHeight
+
+  // Camera setup
+  let camera: THREE.PerspectiveCamera | THREE.OrthographicCamera
+  let controls: OrbitControls | null = null
+
+  if (threeDim) {
+    // 3D configuration
+    camera = new THREE.PerspectiveCamera(75, aspect, 0.1, farLimit)
+    camera.position.set(0, 0, zoom)
+  } else {
+    // 2D configuration
+    camera = new THREE.OrthographicCamera(-zoom * aspect, zoom * aspect, zoom, -zoom, 1, farLimit)
+    camera.position.set(0, 0, zoom)
+  }
+
+  // Add orbit controls
+  controls = new OrbitControls(camera, container)
+  controls.enableDamping = true
+  controls.dampingFactor = 0.3
+
+  if (!threeDim) {
+    // Custom 2D controls behavior
+    controls.enableRotate = false // Disable rotation for 2D
+    controls.mouseButtons = {
+      LEFT: THREE.MOUSE.PAN, // Only allow panning with left mouse
+      MIDDLE: THREE.MOUSE.DOLLY,
+      RIGHT: THREE.MOUSE.PAN
+    }
+    controls.touches = {
+      ONE: THREE.TOUCH.PAN,
+      TWO: THREE.TOUCH.DOLLY_PAN
+    }
+    controls.maxZoom = 10 // Limit zoom for 2D view
+    controls.minZoom = 0.1
+  }
+
+  // Create the renderer with antialiasing enabled and set its internal resolution
+  const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setSize(width, height)
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setViewport(0, 0, pixelsWidth, pixelsHeight)
+  renderer.setClearColor(0x000000)
+
+  // Append the renderer's canvas element to the provided container
+  container.appendChild(renderer.domElement)
+
+  renderer.render(scene, camera)
+
+  // Return the created objects for further manipulation if needed
+  return { scene, camera, renderer, controls }
+}

package/template/src/renderer/src/lib/rendering/svg/drawing.ts

@@ -0,0 +1,213 @@
+import { COLORS } from '../helpers'
+import { isApproximatelyEqual2D, isApproximatelyEqual2d3d, VectorizedElementNode } from './parsing'
+import * as THREE from 'three'
+
+export const drawVectorizedNodes = (
+  vectorizedNodes: VectorizedElementNode[],
+  width: number,
+  options?: {
+    defaultFillColor?: number
+    defaultStrokeColor?: number
+  }
+): THREE.Group => {
+  const { defaultFillColor = 0xff9900, defaultStrokeColor = 0x0099ff } = options ?? {}
+
+  const rootGroup = new THREE.Group()
+
+  const drawNode = (node: VectorizedElementNode): THREE.Object3D => {
+    const nodeGroup = new THREE.Group()
+
+    const props = node.properties ?? {}
+    const hasFill = 'fill' in props && props.fill !== 'none'
+    const hasStroke = 'stroke' in props && props.stroke !== 'none'
+
+    if (node.points.length >= 2 && node.tagName !== 'path' && (hasFill || hasStroke)) {
+      // ✅ Fill if applicable
+      if (node.isClosed && node.points.length >= 3 && hasFill) {
+        const shape = new THREE.Shape(node.points.map(([x, y]) => new THREE.Vector2(x, y)))
+        const fillColor = new THREE.Color()
+
+        const mesh = new THREE.Mesh(
+          new THREE.ShapeGeometry(shape),
+          new THREE.MeshBasicMaterial({ color: fillColor, side: THREE.DoubleSide })
+        )
+        nodeGroup.add(mesh)
+      }
+
+      // ✅ Stroke if applicable
+      if (hasStroke) {
+        const vertices: [number, number, number][] = node.points.map(([x, y]) => [x, y, 0])
+        const geometry = pointsToStroke(vertices, props['stroke-width'] || 1)
+
+        const strokeColor = new THREE.Color(
+          typeof props.stroke === 'string' ? props.stroke : defaultStrokeColor
+        )
+
+        const material = new THREE.MeshBasicMaterial({
+          color: strokeColor,
+          side: THREE.DoubleSide,
+          depthWrite: false,
+          depthTest: false
+        })
+        const strokeMesh = new THREE.Mesh(geometry, material)
+        nodeGroup.add(strokeMesh)
+      }
+    }
+
+    if (node.tagName === 'path') {
+      const vertices: [number, number, number][] = node.points.map(([x, y]) => [x, y, 0])
+      let previousStart = 0
+      node.subpathIndices.forEach((index) => {
+        if (previousStart !== index) {
+          const subpathIsClosed = isApproximatelyEqual2d3d(
+            vertices[previousStart],
+            vertices[index - 1]
+          )
+
+          if (subpathIsClosed && hasFill) {
+            const shape = new THREE.Shape(
+              node.points.slice(previousStart, index).map(([x, y]) => new THREE.Vector2(x, y))
+            )
+            const fillColor = COLORS.black
+
+            const mesh = new THREE.Mesh(
+              new THREE.ShapeGeometry(shape),
+              new THREE.MeshBasicMaterial({ color: fillColor, side: THREE.DoubleSide })
+            )
+
+            nodeGroup.add(mesh)
+          } else {
+            const geometry = pointsToStroke(
+              vertices.slice(previousStart, index),
+              (props['stroke-width'] as number) || 1
+            )
+
+            const strokeColor = COLORS.black
+
+            const material = new THREE.MeshBasicMaterial({
+              color: strokeColor,
+              side: THREE.DoubleSide,
+              depthWrite: false,
+              depthTest: false
+            })
+            const strokeMesh = new THREE.Mesh(geometry, material)
+            nodeGroup.add(strokeMesh)
+          }
+
+          previousStart = index
+        }
+      })
+    }
+
+    for (const child of node.children) {
+      if (typeof child === 'string') continue
+      const childGroup = drawNode(child)
+      nodeGroup.add(childGroup)
+    }
+
+    return nodeGroup
+  }
+
+  for (const node of vectorizedNodes) {
+    const group = drawNode(node)
+    rootGroup.add(group)
+  }
+
+  const originalBox = new THREE.Box3().setFromObject(rootGroup)
+  const originalWidth = originalBox.max.x - originalBox.min.x
+  if (originalWidth <= 0) return rootGroup
+
+  const scaleFactor = width / originalWidth
+  rootGroup.scale.set(scaleFactor, -scaleFactor, 1) // Single Y flip here
+
+  // Center the scaled group
+  const scaledBox = new THREE.Box3().setFromObject(rootGroup)
+  const center = scaledBox.getCenter(new THREE.Vector3())
+  rootGroup.position.sub(center)
+
+  return rootGroup
+}
+
+function pointsToStroke(points: [number, number, number][], width: number): THREE.BufferGeometry {
+  const halfWidth = width / 2
+  const leftOffsets: [number, number][] = []
+  const rightOffsets: [number, number][] = []
+
+  // Helper: compute a unit normal (perpendicular) from point A to B.
+  function computeNormal(
+    A: [number, number, number],
+    B: [number, number, number]
+  ): [number, number, number] {
+    const dx = B[0] - A[0]
+    const dy = B[1] - A[1]
+    const len = Math.sqrt(dx * dx + dy * dy)
+    if (len === 0) return [0, 0, 0]
+    // Rotate by 90° counterclockwise: (-dy, dx)
+    return [-dy / len, dx / len, 0]
+  }
+
+  // Use the normal of the first segment for the first point.
+  const nStart = computeNormal(points[0], points[1])
+  leftOffsets.push([points[0][0] + nStart[0] * halfWidth, points[0][1] + nStart[1] * halfWidth])
+  rightOffsets.push([points[0][0] - nStart[0] * halfWidth, points[0][1] - nStart[1] * halfWidth])
+
+  // For internal points, average the normals of adjacent segments.
+  for (let i = 1; i < points.length - 1; i++) {
+    const n1 = computeNormal(points[i - 1], points[i])
+    const n2 = computeNormal(points[i], points[i + 1])
+    // Average the two normals.
+    const avg: [number, number, number] = [n1[0] + n2[0], n1[1] + n2[1], 0]
+    const len = Math.sqrt(avg[0] * avg[0] + avg[1] * avg[1])
+    const normal: [number, number, number] = len === 0 ? n2 : [avg[0] / len, avg[1] / len, 0]
+    leftOffsets.push([points[i][0] + normal[0] * halfWidth, points[i][1] + normal[1] * halfWidth])
+    rightOffsets.push([points[i][0] - normal[0] * halfWidth, points[i][1] - normal[1] * halfWidth])
+  }
+
+  // Use the normal of the last segment for the last point.
+  const nEnd = computeNormal(points[points.length - 2], points[points.length - 1])
+  leftOffsets.push([
+    points[points.length - 1][0] + nEnd[0] * halfWidth,
+    points[points.length - 1][1] + nEnd[1] * halfWidth
+  ])
+  rightOffsets.push([
+    points[points.length - 1][0] - nEnd[0] * halfWidth,
+    points[points.length - 1][1] - nEnd[1] * halfWidth
+  ])
+
+  // Build triangles for each segment between consecutive points.
+  const positions: number[] = []
+  const normals: number[] = []
+  // All normals face +Z for a flat XY-plane.
+  const nz = [0, 0, 1]
+
+  for (let i = 0; i < points.length - 1; i++) {
+    // Create vertices for the quad:
+    // leftOffsets[i], rightOffsets[i], rightOffsets[i+1], leftOffsets[i+1]
+    const v0 = leftOffsets[i]
+    const v1 = rightOffsets[i]
+    const v2 = rightOffsets[i + 1]
+    const v3 = leftOffsets[i + 1]
+
+    // Triangle 1: v0, v1, v2
+    positions.push(v0[0], v0[1], 0)
+    positions.push(v1[0], v1[1], 0)
+    positions.push(v2[0], v2[1], 0)
+
+    // Triangle 2: v0, v2, v3
+    positions.push(v0[0], v0[1], 0)
+    positions.push(v2[0], v2[1], 0)
+    positions.push(v3[0], v3[1], 0)
+
+    // Each triangle has 3 vertices, add normals for each (pointing up)
+    for (let j = 0; j < 6; j++) {
+      normals.push(...nz)
+    }
+  }
+
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
+  geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3))
+  geometry.computeBoundingSphere()
+
+  return geometry
+}