WIP: Faux 3D lattice with a vanishing point in SVG

ref #732

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "harmonic-entropy": "^0.2.0",
     "isomorphic-qwerty": "^0.0.2",
-    "ji-lattice": "^0.0.3",
+    "ji-lattice": "github:xenharmonic-devs/ji-lattice#3d",
     "jszip": "^3.10.1",
     "moment-of-symmetry": "^0.8.0",
     "pinia": "^2.1.7",

src/components/EdoCycles.vue

@@ -108,7 +108,6 @@ const viewBox = computed(
           :y="v.y + store.size * store.labelOffset * labelY(j, v.indices.length)"
           :font-size="`${1.1 * store.size}px`"
           :stroke-width="store.size * 0.01"
-          dominant-baseline="middle"
         >
           {{ labels[idx] }}
         </text>

src/components/Faux3DLattice.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+/**
+ * Just intonation lattice visualization with a 3D look.
+ * Not as convincing as OpenGL, but much less bloated than three.js.
+ */
+import { useJiLatticeStore } from '@/stores/ji-lattice'
+import { spanLattice3D } from 'ji-lattice'
+import { TimeMonzo, type Interval } from 'sonic-weave'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
+import { dot } from 'xen-dev-utils'
+
+const EPSILON = 1e-6
+
+/** Near field z-index cutoff */
+const NEAR_PLANE = 0.5
+
+const store = useJiLatticeStore()
+
+const props = defineProps<{
+  relativeIntervals: Interval[]
+  labels: string[]
+  colors: string[]
+  heldNotes: Set<number>
+}>()
+
+const svgElement = ref<SVGSVGElement | null>(null)
+
+const viewBox = reactive([-1, -1, 2, 2])
+
+const monzos = computed(() => {
+  const numComponents = store.horizontalCoordinates.length
+  const result: number[][] = []
+  for (const interval of props.relativeIntervals) {
+    const value = interval.value.clone()
+    if (value instanceof TimeMonzo) {
+      value.numberOfComponents = numComponents
+      const monzo = value.primeExponents.map((pe) => pe.valueOf())
+      result.push(monzo)
+    } else {
+      result.push(Array(numComponents).fill(0))
+    }
+  }
+  return result
+})
+
+const lattice = computed(() => {
+  const result = spanLattice3D(monzos.value, store.latticeOptions3D)
+  // Center everything so that the vanishing point is at the center of the view box
+  const inorm = 1 / result.vertices.length
+  const offsetX = -result.vertices.reduce((s, v) => s + v.x, 0) * inorm
+  const offsetY = -result.vertices.reduce((s, v) => s + v.y, 0) * inorm
+  const offsetZ = store.depth - result.vertices.reduce((s, v) => s + v.z, 0) * inorm
+  result.vertices = result.vertices.map(v => ({...v, x: v.x + offsetX, y: v.y + offsetY, z: v.z + offsetZ }))
+  result.edges = result.edges.map(e => ({...e, x1: e.x1 + offsetX, y1: e.y1 + offsetY, z1: e.z1 + offsetZ, x2: e.x2 + offsetX, y2: e.y2 + offsetY, z2: e.z2 + offsetZ }))
+  return result
+})
+
+watch(
+  () => [
+    svgElement.value,
+    lattice.value,
+    props.labels,
+    store.labelOffset,
+    store.size,
+    store.showLabels
+  ],
+  (dependencies) => {
+    const element = dependencies[0] as unknown as SVGSVGElement
+    if (!element) {
+      return
+    }
+    // Must wait for Vue to render elements before calculating bounding boxes
+    nextTick(() => {
+      viewBox[0] = Infinity
+      viewBox[1] = Infinity
+      let maxX = -Infinity
+      let maxY = -Infinity
+      for (const el of element.children as unknown as SVGCircleElement[]) {
+        const { x, y, width, height } = el.getBBox({
+          stroke: true,
+          fill: true
+        })
+        viewBox[0] = Math.min(viewBox[0], x)
+        viewBox[1] = Math.min(viewBox[1], y)
+        maxX = Math.max(maxX, x + width)
+        maxY = Math.max(maxY, y + height)
+      }
+      viewBox[2] = maxX - viewBox[0]
+      viewBox[3] = maxY - viewBox[1]
+      viewBox[0] -= store.size * 0.5
+      viewBox[1] -= store.size * 0.5
+      viewBox[2] += store.size
+      viewBox[3] += store.size
+    })
+  }
+)
+
+const elements = computed(() => {
+  const result = []
+  for (const vertex of lattice.value.vertices) {
+    if (vertex.z < NEAR_PLANE) {
+      continue
+    }
+    const s = store.depth / vertex.z
+    const cx = vertex.x * s
+    const cy = vertex.y * s
+    const r = store.size * s
+    result.push({
+      tag: 'circle',
+      cx,
+      cy,
+      r,
+      fill: props.colors[vertex.index!],
+      'stroke-width': 0.1 * r,
+      class: {node: true, held: props.heldNotes.has(vertex.index!)},
+      z: vertex.z,
+    })
+    result.push({
+      tag: 'text',
+      x: cx,
+      y: cy - store.labelOffset * r,
+      'font-size': `${3 * r}px`,
+      'stroke-width': 0.08 * r,
+      class: {'node-label': true},
+      body: props.labels[vertex.index!],
+      z: vertex.z - EPSILON,
+    })
+  }
+  for (const edge of lattice.value.edges) {
+    if (edge.z1 < NEAR_PLANE || edge.z2 < NEAR_PLANE) {
+      continue
+    }
+    const s1 = store.depth / edge.z1;
+    const x1 = edge.x1 * s1;
+    const y1 = edge.y1 * s1;
+    const s2 = store.depth / edge.z2;
+    const x2 = edge.x2 * s2;
+    const y2 = edge.y2 * s2;
+    let u = x2 - x1;
+    let v = y2 - y1;
+    const r = Math.hypot(u, v)
+    if (r < EPSILON) {
+      continue
+    }
+    u /= r
+    v /= r
+    u *= 0.5
+    v *= 0.5
+    const points = `${x1 + v * s1},${y1 + u * s1} ${x1 - v * s1},${y1 - u * s1} ${x2 - v * s2},${y2 - u * s2} ${x2 + v * s2},${y2 + u * s2}`
+    result.push({
+      tag: 'polygon',
+      points,
+      class: {edge: true, primary: true},
+      z: Math.max(edge.z1, edge.z2) + EPSILON,
+    })
+  }
+  result.sort((a, b) => (b.z - a.z))
+  return result
+})
+
+</script>
+
+<template>
+  <svg
+    ref="svgElement"
+    class="lattice"
+    xmlns="http://www.w3.org/2000/svg"
+    :viewBox="viewBox.join(' ')"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <template v-for="element, i of elements" :key="i">
+      <circle v-if="element.tag === 'circle'" v-bind="element" />
+      <polygon v-if="element.tag === 'polygon'" v-bind="element" />
+      <text v-if="element.tag === 'text'" v-bind="element">{{ element.body }} </text>
+    </template>
+  </svg>
+</template>

src/components/GridLattice.vue

@@ -126,7 +126,6 @@ watch(
           :y="v.y + store.size * store.labelOffset * labelY(j, v.indices.length)"
           :font-size="`${2.5 * store.size}px`"
           :stroke-width="store.size * 0.05"
-          dominant-baseline="middle"
         >
           {{ labels[idx] }}
         </text>

src/components/JustIntonationLattice.vue

@@ -192,7 +192,6 @@ watch(
         v-for="(v, i) of lattice.vertices"
         :key="i"
         class="node-label"
-        dominant-baseline="middle"
         :x="v.x"
         :y="v.y - store.labelOffset * store.size"
         :font-size="`${3 * store.size}px`"

src/stores/ji-lattice.ts

@@ -1,6 +1,6 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { defineStore } from 'pinia'
-import { kraigGrady9, type LatticeOptions, scottDakota24, primeRing72, align } from 'ji-lattice'
+import { kraigGrady9, type LatticeOptions, scottDakota24, primeRing72, align, type LatticeOptions3D, WGP9 } from 'ji-lattice'
 import { LOG_PRIMES, mmod } from 'xen-dev-utils'
 import { computedAndError } from '@/utils'
 import { TimeMonzo, parseChord } from 'sonic-weave'
@@ -79,6 +79,23 @@ export const useJiLatticeStore = defineStore('ji-lattice', () => {
     }
   })
 
+  const opts3D = WGP9(0);
+  const xCoords = reactive(opts3D.horizontalCoordinates);
+  const yCoords = reactive(opts3D.verticalCoordinates);
+  const zCoords = reactive(opts3D.depthwiseCoordinates);
+  const depth = ref(100)
+
+  const latticeOptions3D = computed<LatticeOptions3D>(() => {
+    return {
+      horizontalCoordinates: xCoords,
+      verticalCoordinates: yCoords,
+      depthwiseCoordinates: zCoords,
+      maxDistance: maxDistance.value,
+      edgeMonzos: edgeMonzos.value,
+      mergeEdges: true
+    }
+  })
+
   watch(rotation, (newValue) => {
     if (newValue < 0 || newValue >= 360) {
       rotation.value = mmod(newValue, 360)
@@ -150,12 +167,17 @@ export const useJiLatticeStore = defineStore('ji-lattice', () => {
     rotation,
     drawArrows,
     grayExtras,
+    xCoords,
+    yCoords,
+    zCoords,
+    depth,
     // Computed state
     edgeMonzos,
     edgesError,
     horizontals,
     verticals,
     latticeOptions,
+    latticeOptions3D,
     // Methods
     kraigGrady,
     scott24,

src/views/LatticeView.vue

@@ -11,6 +11,7 @@ import { useJiLatticeStore } from '@/stores/ji-lattice'
 import { useGridStore } from '@/stores/grid'
 import { useCyclesStore } from '@/stores/edo-cycles'
 import { setAndReportValidity } from '@/utils'
+import Faux3DLattice from '@/components/Faux3DLattice.vue'
 
 const state = useStateStore()
 const scale = useScaleStore()
@@ -201,6 +202,14 @@ onMounted(() => {
 
 <template>
   <main class="lattice-container">
+    <Faux3DLattice 
+      :labels="scale.latticeLabels"
+      :colors="scale.latticeColors"
+      :relativeIntervals="scale.latticeIntervals"
+      :heldNotes="heldNotes"
+    />
+  </main>
+  <main class="lattice-container" v-if=false>
     <h2>Lattice visualization</h2>
     <JustIntonationLattice
       v-if="state.latticeType === 'ji'"
@@ -486,6 +495,10 @@ line.edge.auxiliary {
   stroke-dasharray: 3 1;
 }
 
+polygon.edge.primary {
+  fill: var(--color-accent);
+}
+
 marker#arrow {
   fill: var(--color-indicator);
 }
@@ -512,5 +525,6 @@ text.node-label {
   fill: var(--color-text);
   text-anchor: middle;
   stroke: var(--color-background);
+  dominant-baseline: middle;
 }
 </style>