From 4c27c663a5959b0a57ebc06983ed780a41dabcf2 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Thu, 6 Jun 2024 15:24:45 +0300
Subject: [PATCH] (Edo) cycle option on Lattice tab

ref #678
---
 package-lock.json              |  32 +++++++-
 package.json                   |   2 +-
 src/components/EdoCycles.vue   | 139 +++++++++++++++++++++++++++++++++
 src/components/GridLattice.vue |  29 +------
 src/stores/edo-cycles.ts       |  39 +++++++++
 src/stores/grid.ts             |  26 +-----
 src/stores/state.ts            |   2 +-
 src/utils.ts                   |  50 +++++++++++-
 src/views/LatticeView.vue      |  39 +++++++++
 9 files changed, 302 insertions(+), 56 deletions(-)
 create mode 100644 src/components/EdoCycles.vue
 create mode 100644 src/stores/edo-cycles.ts

diff --git a/package-lock.json b/package-lock.json
index 9dad91e8..89cc2fc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "vue": "^3.3.4",
         "vue-router": "^4.3.0",
         "webmidi": "^3.1.8",
-        "xen-dev-utils": "^0.8.0",
+        "xen-dev-utils": "^0.9.0",
         "xen-midi": "^0.2.0"
       },
       "devDependencies": {
@@ -4427,6 +4427,18 @@
         "url": "https://github.com/sponsors/frostburn"
       }
     },
+    "node_modules/moment-of-symmetry/node_modules/xen-dev-utils": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/xen-dev-utils/-/xen-dev-utils-0.8.0.tgz",
+      "integrity": "sha512-na9WWF1JlFhGjzvQDk/VHYWmTTvR1TD6nKHHy7GXC4f41u9CsLKxB7jphwioz1pR/5dBsbiSKBKTkWR4Uyactg==",
+      "engines": {
+        "node": ">=10.6.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/frostburn"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5520,6 +5532,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/sonic-weave/node_modules/xen-dev-utils": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/xen-dev-utils/-/xen-dev-utils-0.8.0.tgz",
+      "integrity": "sha512-na9WWF1JlFhGjzvQDk/VHYWmTTvR1TD6nKHHy7GXC4f41u9CsLKxB7jphwioz1pR/5dBsbiSKBKTkWR4Uyactg==",
+      "engines": {
+        "node": ">=10.6.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/frostburn"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -6639,9 +6663,9 @@
       }
     },
     "node_modules/xen-dev-utils": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/xen-dev-utils/-/xen-dev-utils-0.8.0.tgz",
-      "integrity": "sha512-na9WWF1JlFhGjzvQDk/VHYWmTTvR1TD6nKHHy7GXC4f41u9CsLKxB7jphwioz1pR/5dBsbiSKBKTkWR4Uyactg==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/xen-dev-utils/-/xen-dev-utils-0.9.0.tgz",
+      "integrity": "sha512-JsbXSg1zXaBoiKI19p2jC8Ka22YADQsTBD7fc2FkVxLWSdCO5BCS5KcRquDP5vP6J9v8t3B14G/7GZ5DC73rzg==",
       "engines": {
         "node": ">=10.6.0"
       },
diff --git a/package.json b/package.json
index 6e0f847b..fb2259bc 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "vue": "^3.3.4",
     "vue-router": "^4.3.0",
     "webmidi": "^3.1.8",
-    "xen-dev-utils": "^0.8.0",
+    "xen-dev-utils": "^0.9.0",
     "xen-midi": "^0.2.0"
   },
   "devDependencies": {
diff --git a/src/components/EdoCycles.vue b/src/components/EdoCycles.vue
new file mode 100644
index 00000000..45132a1d
--- /dev/null
+++ b/src/components/EdoCycles.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { useCyclesStore } from '@/stores/edo-cycles'
+import { labelX, labelY } from '@/utils'
+import { type MultiVertex } from 'ji-lattice'
+import { type Interval } from 'sonic-weave'
+import { computed, ref } from 'vue'
+import { mmod } from 'xen-dev-utils'
+
+const RADIUS = 2
+
+const store = useCyclesStore()
+
+const props = defineProps<{
+  relativeIntervals: Interval[]
+  labels: string[]
+  colors: string[]
+  heldNotes: Set<number>
+}>()
+
+const svgElement = ref<SVGSVGElement | null>(null)
+
+const steps = computed(() => {
+  const result: number[] = []
+  for (const interval of props.relativeIntervals) {
+    result.push(interval.dot(store.val).valueOf())
+  }
+  return result
+})
+
+const vertices = computed(() => {
+  const m = store.modulus
+  const n = store.numCycles
+  const gpi = store.generatorPseudoInverse
+  const result = new Map<number, MultiVertex>()
+  const dt = (2 * Math.PI) / m
+  for (let i = 0; i < steps.value.length; ++i) {
+    const s = steps.value[i]
+    const c = mmod(s, n)
+    const j = mmod((s - c) * gpi, m) + c
+    const vertex = result.get(j) ?? {
+      x: RADIUS * Math.sin(dt * j),
+      y: -RADIUS * Math.cos(dt * j),
+      indices: []
+    }
+    vertex.indices.push(i)
+    result.set(j, vertex)
+  }
+  return Array.from(result.values())
+})
+
+const cycles = computed(() => {
+  const result: string[] = []
+  const dt = (2 * Math.PI) / store.modulus
+  for (let n = 0; n < store.numCycles; ++n) {
+    const xs: number[] = []
+    const ys: number[] = []
+    for (let i = 0; i <= store.cycleLength; ++i) {
+      const theta = dt * (n + store.numCycles * i)
+      xs.push(RADIUS * Math.sin(theta))
+      ys.push(-RADIUS * Math.cos(theta))
+    }
+    let d = `M ${xs[0]} ${ys[0]} `
+    for (let i = 0; i < store.cycleLength; ++i) {
+      d += `Q ${0.45 * (xs[i] + xs[i + 1])} ${0.45 * (ys[i] + ys[i + 1])} ${xs[i + 1]} ${ys[i + 1]} `
+    }
+    d += 'Z'
+    result.push(d)
+  }
+  return result
+})
+
+const viewScale = computed(() =>
+  Math.max(2.2, 2.2 + Math.abs(store.labelOffset * store.size) + 1.1 * store.size)
+)
+
+const viewBox = computed(
+  () => `${-viewScale.value} ${-viewScale.value} ${viewScale.value * 2} ${viewScale.value * 2}`
+)
+</script>
+
+<template>
+  <svg
+    ref="svgElement"
+    class="lattice"
+    xmlns="http://www.w3.org/2000/svg"
+    :viewBox="viewBox"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <path v-for="(d, i) of cycles" :key="i" :d="d" stroke-width="0.03" />
+    <circle
+      v-for="(v, i) of vertices"
+      :key="i"
+      :class="{ node: true, held: v.indices.some((idx) => heldNotes.has(idx)) }"
+      :cx="v.x"
+      :cy="v.y"
+      :r="0.7 * store.size"
+      :fill="colors[v.indices[0]] ?? 'none'"
+      :stroke="colors[v.indices[0]] ?? 'none'"
+      :stroke-width="store.size * 0.1"
+    />
+    <template v-if="store.showLabels">
+      <template v-for="(v, i) of vertices" :key="i">
+        <text
+          v-for="(idx, j) of v.indices"
+          :key="idx"
+          class="node-label"
+          :x="v.x + store.size * store.labelOffset * labelX(j, v.indices.length)"
+          :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>
+      </template>
+    </template>
+  </svg>
+</template>
+
+<style scoped>
+path {
+  fill: none;
+}
+path:nth-child(5n + 1) {
+  stroke: var(--color-bright-indicator);
+}
+path:nth-child(5n + 2) {
+  stroke: var(--color-accent);
+}
+path:nth-child(5n + 3) {
+  stroke: var(--color-dark-indicator);
+}
+path:nth-child(5n + 4) {
+  stroke: var(--color-accent-mute);
+}
+path:nth-child(5n) {
+  stroke: var(--color-border);
+}
+</style>
diff --git a/src/components/GridLattice.vue b/src/components/GridLattice.vue
index cc04cbd7..7f050b44 100644
--- a/src/components/GridLattice.vue
+++ b/src/components/GridLattice.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useGridStore } from '@/stores/grid'
-import { debounce } from '@/utils'
+import { debounce, labelX, labelY } from '@/utils'
 import { spanGrid } from 'ji-lattice'
 import { type Interval } from 'sonic-weave'
 import { computed, ref, watch } from 'vue'
@@ -24,29 +24,6 @@ const steps = computed(() => {
   return result
 })
 
-// Multi-label offsets
-function lx(n: number, num: number) {
-  if (num < 3) {
-    return 0
-  }
-  if (num & 1) {
-    // Odd counts exploit a different starting angle.
-    return store.labelOffset * store.size * Math.cos((2 * Math.PI * n) / num)
-  }
-  // Text tends to extend horizontally so we draw an ellipse.
-  return 1.5 * store.labelOffset * store.size * Math.sin((2 * Math.PI * n) / num)
-}
-function ly(n: number, num: number) {
-  if (num === 1) {
-    return -store.labelOffset * store.size
-  }
-  if (num & 1) {
-    // Odd counts exploit a different starting angle.
-    return store.labelOffset * store.size * Math.sin((2 * Math.PI * n) / num)
-  }
-  return -store.labelOffset * store.size * Math.cos((2 * Math.PI * n) / num)
-}
-
 const grid = computed(() => {
   const result = spanGrid(steps.value, store.gridOptions)
   return result
@@ -145,8 +122,8 @@ watch(
           v-for="(idx, j) of v.indices"
           :key="idx"
           class="node-label"
-          :x="v.x + lx(j, v.indices.length)"
-          :y="v.y + ly(j, v.indices.length)"
+          :x="v.x + store.size * store.labelOffset * labelX(j, v.indices.length)"
+          :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"
diff --git a/src/stores/edo-cycles.ts b/src/stores/edo-cycles.ts
new file mode 100644
index 00000000..5b65b643
--- /dev/null
+++ b/src/stores/edo-cycles.ts
@@ -0,0 +1,39 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+import { mmod, modInv } from 'xen-dev-utils'
+import { parseVal } from '@/utils'
+
+export const useCyclesStore = defineStore('edo-cycles', () => {
+  // View
+  const size = ref(0.15)
+  const labelOffset = ref(2)
+  const showLabels = ref(true)
+
+  // Elements
+  const valString = ref('12p')
+  const generator = ref(7)
+
+  const val = computed(() => parseVal(valString.value))
+
+  const modulus = computed(() => val.value.divisions.round().valueOf())
+  const generatorPseudoInverse = computed(() => modInv(generator.value, modulus.value, false))
+  const numCycles = computed(
+    () => mmod(generator.value * generatorPseudoInverse.value, modulus.value) || 1
+  )
+  const cycleLength = computed(() => modulus.value / numCycles.value)
+
+  return {
+    // State
+    size,
+    labelOffset,
+    showLabels,
+    valString,
+    generator,
+    // Computed state
+    val,
+    modulus,
+    generatorPseudoInverse,
+    numCycles,
+    cycleLength
+  }
+})
diff --git a/src/stores/grid.ts b/src/stores/grid.ts
index 1560b772..9b60dbea 100644
--- a/src/stores/grid.ts
+++ b/src/stores/grid.ts
@@ -2,12 +2,10 @@ import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { shortestEdge, type GridOptions } from 'ji-lattice'
 import { LOG_PRIMES, mmod } from 'xen-dev-utils'
-import { Val, evaluateExpression, parseChord } from 'sonic-weave'
-import { computedAndError } from '@/utils'
+import { parseChord } from 'sonic-weave'
+import { computedAndError, parseVal } from '@/utils'
 import { FIFTH, THIRD } from '@/constants'
 
-const TWELVE = evaluateExpression('12@', false) as Val
-
 export const useGridStore = defineStore('grid', () => {
   // View
   const size = ref(0.15)
@@ -36,25 +34,7 @@ export const useGridStore = defineStore('grid', () => {
   const diagonals1 = ref(false)
   const diagonals2 = ref(false)
 
-  const val = computed<Val>(() => {
-    try {
-      const val = evaluateExpression(valString.value)
-      if (val instanceof Val) {
-        return val
-      }
-    } catch {
-      /* empty */
-    }
-    try {
-      const val = evaluateExpression(valString.value.trim() + '@')
-      if (val instanceof Val) {
-        return val
-      }
-    } catch {
-      /* empty */
-    }
-    return TWELVE
-  })
+  const val = computed(() => parseVal(valString.value))
 
   const modulus = computed(() => val.value.divisions.round().valueOf())
 
diff --git a/src/stores/state.ts b/src/stores/state.ts
index 3c9fe9a4..45d2cb4b 100644
--- a/src/stores/state.ts
+++ b/src/stores/state.ts
@@ -8,7 +8,7 @@ export const useStateStore = defineStore('state', () => {
   const heldNotes = reactive(new Map<number, number>())
   const typingActive = ref(true)
 
-  const latticeType = ref<'ji' | 'et' | 'auto'>('auto')
+  const latticeType = ref<'ji' | 'et' | 'cycles' | 'auto'>('auto')
 
   // These user preferences are fetched from local storage.
   const storage = window.localStorage
diff --git a/src/utils.ts b/src/utils.ts
index 6503c49c..b967ccf2 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,9 +1,13 @@
 import { computed, watch, type ComputedRef, type Ref } from 'vue'
 import { gcd, mmod } from 'xen-dev-utils'
-import { evaluateExpression, getSourceVisitor, Interval, parseAST, repr } from 'sonic-weave'
+import { evaluateExpression, getSourceVisitor, Interval, parseAST, repr, Val } from 'sonic-weave'
 import { version } from '../package.json'
 import { Scale } from './scale'
 
+const TAU = 2 * Math.PI
+
+const TWELVE = evaluateExpression('12@', false) as Val
+
 /**
  * Calculate the smallest power of two greater or equal to the input value.
  * @param x Integer to compare to.
@@ -24,6 +28,26 @@ export function parseInterval(input: string) {
   throw new Error('Must evaluate to an interval')
 }
 
+export function parseVal(input: string) {
+  try {
+    const val = evaluateExpression(input)
+    if (val instanceof Val) {
+      return val
+    }
+  } catch {
+    /* empty */
+  }
+  try {
+    const val = evaluateExpression(input.trim() + '@')
+    if (val instanceof Val) {
+      return val
+    }
+  } catch {
+    /* empty */
+  }
+  return TWELVE
+}
+
 export function decimalString(amount: number) {
   const result = amount.toString()
   if (result.includes('e')) {
@@ -550,3 +574,27 @@ export function unpackPayload(body: string, id: string) {
   data.scale.id = id
   return data
 }
+
+// Multi-label offsets
+export function labelX(n: number, num: number) {
+  if (num < 3) {
+    return 0
+  }
+  if (num & 1) {
+    // Odd counts exploit a different starting angle.
+    return Math.cos((TAU * n) / num)
+  }
+  // Text tends to extend horizontally so we draw an ellipse.
+  return 1.5 * Math.sin((TAU * n) / num)
+}
+
+export function labelY(n: number, num: number) {
+  if (num === 1) {
+    return -1
+  }
+  if (num & 1) {
+    // Odd counts exploit a different starting angle.
+    return Math.sin((TAU * n) / num)
+  }
+  return -Math.cos((TAU * n) / num)
+}
diff --git a/src/views/LatticeView.vue b/src/views/LatticeView.vue
index ff1a79ba..f022b4ef 100644
--- a/src/views/LatticeView.vue
+++ b/src/views/LatticeView.vue
@@ -2,18 +2,21 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { Fraction, isPrime, mmod, nthPrime, primeLimit } from 'xen-dev-utils'
 import GridLattice from '@/components/GridLattice.vue'
+import EdoCycles from '@/components/EdoCycles.vue'
 import JustIntonationLattice from '@/components/JustIntonationLattice.vue'
 import Modal from '@/components/ModalDialog.vue'
 import { useStateStore } from '@/stores/state'
 import { useScaleStore } from '@/stores/scale'
 import { useJiLatticeStore } from '@/stores/ji-lattice'
 import { useGridStore } from '@/stores/grid'
+import { useCyclesStore } from '@/stores/edo-cycles'
 import { setAndReportValidity } from '@/utils'
 
 const state = useStateStore()
 const scale = useScaleStore()
 const jiLattice = useJiLatticeStore()
 const grid = useGridStore()
+const cycles = useCyclesStore()
 
 const showConfig = ref(false)
 const jiPreset = ref<'nothing' | 'grady' | 'grady3' | 'dakota' | 'pr72' | 'pe72'>('nothing')
@@ -178,6 +181,9 @@ function inferConfig() {
       grid.edgesString = edges
       grid.autoSquare()
       state.latticeType = 'et'
+
+      // Set config, but don't switch to
+      cycles.valString = grid.valString
     } catch {
       return
     }
@@ -210,6 +216,13 @@ onMounted(() => {
       :relativeIntervals="scale.latticeIntervals"
       :heldNotes="heldNotes"
     />
+    <EdoCycles
+      v-else-if="state.latticeType === 'cycles'"
+      :labels="scale.latticeLabels"
+      :colors="scale.latticeColors"
+      :relativeIntervals="scale.latticeIntervals"
+      :heldNotes="heldNotes"
+    />
     <template v-else>
       <h1>Selecting lattice...</h1>
     </template>
@@ -235,6 +248,10 @@ onMounted(() => {
               <input type="radio" id="et" value="et" v-model="state.latticeType" />
               <label for="et">Equal temperament</label>
             </span>
+            <span>
+              <input type="radio" id="cycles" value="cycles" v-model="state.latticeType" />
+              <label for="cycles">Cycles</label>
+            </span>
           </div>
           <template v-if="state.latticeType === 'ji'">
             <div class="control">
@@ -400,6 +417,28 @@ onMounted(() => {
               <input id="view-y" type="number" step="0.1" v-model="grid.viewCenterY" />
             </div>
           </template>
+          <template v-if="state.latticeType === 'cycles'">
+            <div class="control">
+              <label for="val">Val</label>
+              <input type="text" id="val" placeholder="17c" v-model="cycles.valString" />
+            </div>
+            <div class="control">
+              <label for="generator">Generator</label>
+              <input type="number" step="1" v-model="cycles.generator" />
+            </div>
+            <div class="control">
+              <label for="size">Text size</label>
+              <input id="size" type="number" min="0.01" step="0.01" v-model="cycles.size" />
+            </div>
+            <div class="control">
+              <label for="label-offset">Text offset</label>
+              <input id="label-offset" type="number" step="0.04" v-model="cycles.labelOffset" />
+            </div>
+            <div class="control checkbox-container">
+              <input type="checkbox" id="show-labels" v-model="cycles.showLabels" />
+              <label for="show-labels">Show labels</label>
+            </div>
+          </template>
           <template v-else>
             <h2>Selecting lattice...</h2>
           </template>