Add MOS indicators on Circle tab of Rank 2 Temperament

package.json

@@ -17,15 +17,15 @@
   "dependencies": {
     "isomorphic-qwerty": "^0.0.2",
     "jszip": "^3.10.1",
-    "moment-of-symmetry": "^0.4.0",
+    "moment-of-symmetry": "^0.4.1",
     "pinia": "^2.1.7",
     "qs": "^6.11.2",
     "scale-workshop-core": "github:xenharmonic-devs/scale-workshop-core#v0.1.2",
     "temperaments": "^0.5.2",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "webmidi": "^3.1.7",
-    "xen-dev-utils": "^0.2.6",
+    "xen-dev-utils": "^0.2.7",
     "xen-midi": "^0.1.2"
   },
   "devDependencies": {

src/components/PeriodCircle.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { LEFT_MOUSE_BTN } from '@/constants'
+import { generatorRanges } from 'moment-of-symmetry'
 import type { Scale } from 'scale-workshop-core'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { mmod } from 'xen-dev-utils'
 
+const TAU = 2 * Math.PI
 const CIRCLE_RADIUS = 40
+const MOS_RANGE_RADIUS = 41
 const SCALE_TICK_HEIGHT = 4
 const GENERATOR_TICK_HEIGHT = 5
 
@@ -13,10 +17,41 @@ const props = defineProps<{
   periodCents: number | null
   size: number
   up: number
+  numPeriods: number
 }>()
 
 const emit = defineEmits(['update:generatorCents'])
 
+const ranges = computed(() =>
+  generatorRanges(props.size).map((r) => ({
+    ...r,
+    lowerBound: r.lowerBound.valueOf(),
+    upperBound: r.upperBound.valueOf()
+  }))
+)
+
+const paths = computed(() => {
+  let bright = ''
+  let dark = ''
+  for (const range of ranges.value) {
+    const theta1 = TAU * range.lowerBound
+    const theta2 = TAU * range.upperBound
+    const x1 = 50 + MOS_RANGE_RADIUS * Math.sin(theta1)
+    const y1 = 50 - MOS_RANGE_RADIUS * Math.cos(theta1)
+    const x2 = 50 + MOS_RANGE_RADIUS * Math.sin(theta2)
+    const y2 = 50 - MOS_RANGE_RADIUS * Math.cos(theta2)
+    const largeArcFlag = theta2 - theta1 > Math.PI ? 1 : 0
+    const arc = `M ${x1} ${y1} A ${MOS_RANGE_RADIUS} ${MOS_RANGE_RADIUS} 0 ${largeArcFlag} 1 ${x2} ${y2}`
+    if (range.bright) {
+      bright += arc
+    } else {
+      dark += arc
+    }
+  }
+
+  return { bright, dark }
+})
+
 const periodCents = computed(() => {
   if (props.periodCents !== null) {
     return props.periodCents
@@ -27,6 +62,19 @@ const periodCents = computed(() => {
   return 1200
 })
 
+const mosLabel = computed(() => {
+  if (props.generatorCents === null) {
+    return ''
+  }
+  const g = mmod(props.generatorCents / periodCents.value, 1)
+  for (const range of ranges.value) {
+    if (g >= range.lowerBound && g <= range.upperBound) {
+      return `${range.numberOfLargeSteps * props.numPeriods}L ${range.numberOfSmallSteps * props.numPeriods}s`
+    }
+  }
+  return ''
+})
+
 const scaleTickDirections = computed(() => {
   if (props.scale === null) {
     return []
@@ -216,6 +264,13 @@ onUnmounted(() => {
     @touchmove="onTouchMove"
     ref="container"
   >
+    <path :d="paths.dark" stroke-width="0.5%" class="dark" fill="none" />
+    <path :d="paths.bright" stroke-width="0.5%" class="bright" fill="none" />
+
+    <text x="50%" y="50%" font-size="4" text-anchor="middle" dominant-baseline="middle">
+      {{ mosLabel }}
+    </text>
+
     <line
       v-for="(attrs, index) of generatorTrajectory"
       :key="index"
@@ -291,4 +346,11 @@ svg text {
 svg text.generator {
   fill: var(--color-accent-text-btn);
 }
+
+path.bright {
+  stroke: #23ff23;
+}
+path.dark {
+  stroke: #007200;
+}
 </style>

src/components/modals/generation/RankTwo.vue

@@ -312,6 +312,7 @@ function generate() {
               :periodCents="rank2.circlePeriodCents"
               :size="rank2.generatorsPerPeriod"
               :up="rank2.safeUp / rank2.safeNumPeriods"
+              :numPeriods="rank2.safeNumPeriods"
               @update:generatorCents="updateCircleGenerator"
             />
           </div>