Refactor some code

Paul1365972 · Jan 13, 2025 · 0cb54be · 0cb54be
1 parent b868651
commit 0cb54be
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 75 deletions.
diff --git a/src/components/Spectrogram.svelte b/src/components/Spectrogram.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte'
+	import { onMount } from 'svelte'
 	import { get } from 'svelte/store'
 	import { AudioManager } from '../lib/audio'
 	import { Renderer } from '../lib/renderer'
@@ -49,7 +49,6 @@
 			await estimatorManager.initialize()
 			initialized = true
 			requestAnimationFrame(render)
-
 		}
 	}
 
@@ -73,7 +72,7 @@
 
 	function updateOscillatorFrequency() {
 		const percentage = 1.0 - mousePosition[1] / window.innerHeight
-		const freq = scale(percentage, settings.scala, settings.lowerFrequency, settings.upperFrequency)
+		const freq = scale(percentage, settings)
 		audioManager?.setOscillatorFrequency(freq)
 	}
 

diff --git a/src/lib/renderer.ts b/src/lib/renderer.ts
@@ -4,7 +4,6 @@ import { AudioManager } from './audio'
 import { getTextColor } from './color_maps'
 import { inverseScale, scale, NOTES, nearestNote } from './scales'
 import { MAX_ESTIMATOR_RESULTS, type EstimatorManager } from './estimator'
-import { trackPitch } from './pitch_tracker'
 
 export class Renderer {
 	private webglSpectrogram: SpectrogramRenderer
@@ -62,12 +61,7 @@ export class Renderer {
 		const [r, g, b] = getTextColor(settings.colorMap)
 		ctx.fillStyle = `rgb(${r},${g},${b})`
 
-		const percentage = inverseScale(
-			frequency,
-			settings.scala,
-			settings.lowerFrequency,
-			settings.upperFrequency,
-		)
+		const percentage = inverseScale(frequency, settings)
 		const y = Math.round((1.0 - percentage) * this.height)
 		ctx.fillRect(x, y - 1, 20, 2)
 		ctx.textAlign = 'right'
@@ -84,10 +78,7 @@ export class Renderer {
 		ctx.fillStyle = color
 
 		ctx.beginPath()
-		const y =
-			(1.0 -
-				inverseScale(frequency, settings.scala, settings.lowerFrequency, settings.upperFrequency)) *
-			this.height
+		const y = this.height - inverseScale(frequency, settings) * this.height
 		ctx.arc(this.width - 5, y, 5, 0, 2 * Math.PI, false)
 		ctx.fill()
 		ctx.lineWidth = 3
@@ -116,24 +107,8 @@ export class Renderer {
 
 			const prevX = this.width - (i - 1) * segmentWidth
 			const currX = this.width - i * segmentWidth
-			const currY =
-				(1.0 -
-					inverseScale(
-						curr.frequency,
-						settings.scala,
-						settings.lowerFrequency,
-						settings.upperFrequency,
-					)) *
-				this.height
-			const prevY =
-				(1.0 -
-					inverseScale(
-						prev.frequency,
-						settings.scala,
-						settings.lowerFrequency,
-						settings.upperFrequency,
-					)) *
-				this.height
+			const currY = (1.0 - inverseScale(curr.frequency, settings)) * this.height
+			const prevY = (1.0 - inverseScale(prev.frequency, settings)) * this.height
 
 			ctx.moveTo(prevX, prevY)
 			ctx.lineTo(currX, currY)
@@ -146,12 +121,7 @@ export class Renderer {
 		ctx.fillStyle = `rgba(${r},${g},${b},0.25)`
 		for (const { frequency } of NOTES) {
 			if (frequency > settings.lowerFrequency && frequency < settings.upperFrequency) {
-				const percentage = inverseScale(
-					frequency,
-					settings.scala,
-					settings.lowerFrequency,
-					settings.upperFrequency,
-				)
+				const percentage = inverseScale(frequency, settings)
 				const y = Math.round((1.0 - percentage) * this.height)
 				ctx.fillRect(0, y - 1, this.width, 2)
 			}
@@ -178,16 +148,16 @@ export class Renderer {
 			let grade: string
 			let gradeColor: string
 			const absCents = Math.abs(cents)
-			if (absCents < 10) {
+			if (absCents < 5) {
 				grade = 'Perfect!'
 				gradeColor = 'rgb(64, 224, 64)'
-			} else if (absCents < 20) {
+			} else if (absCents < 15) {
 				grade = 'Great'
 				gradeColor = 'rgb(150, 224, 64)'
-			} else if (absCents < 30) {
+			} else if (absCents < 25) {
 				grade = 'Good'
 				gradeColor = 'rgb(224, 224, 64)'
-			} else if (absCents < 40) {
+			} else if (absCents < 35) {
 				grade = 'Off'
 				gradeColor = 'rgb(224, 150, 64)'
 			} else {
@@ -246,7 +216,7 @@ export class Renderer {
 		ctx.fillStyle = `rgb(${r},${g},${b})`
 
 		const percentage = 1.0 - (1.0 * mousePosition[1]) / this.height
-		const freq = scale(percentage, settings.scala, settings.lowerFrequency, settings.upperFrequency)
+		const freq = scale(percentage, settings)
 
 		ctx.textAlign = 'left'
 		ctx.fillText(`${freq.toFixed(1)} Hz`, mousePosition[0] + 10, mousePosition[1] - 10)

diff --git a/src/lib/scales.ts b/src/lib/scales.ts
@@ -1,3 +1,5 @@
+import type { SpectrogramSettings } from './settings'
+
 const NOTE_NAMES = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#']
 const notes = []
 for (let i = 1; i < 8; i++) {
@@ -26,42 +28,32 @@ export function inverseLogScale(y: number, a: number, b: number) {
 	return (Math.log(y) - lower) / (upper - lower)
 }
 
-export function scale(
-	x: number,
-	scalaVariant: ScalaVariant,
-	lowerFrequency: number,
-	upperFrequency: number,
-) {
-	if (scalaVariant === 'log') {
-		return logScale(x, lowerFrequency, upperFrequency)
-	} else if (scalaVariant === 'linear') {
-		return lowerFrequency + x * (upperFrequency - lowerFrequency)
-	} else if (scalaVariant === 'mel') {
-		const lower = 1127 * Math.log(1 + lowerFrequency / 700)
-		const upper = 1127 * Math.log(1 + upperFrequency / 700)
-		const mel = lower + x * (upper - lower)
-		return 700 * (Math.exp(mel / 1127) - 1)
+export function scale(x: number, settings: SpectrogramSettings) {
+	switch (settings.scala) {
+		case 'log':
+			return logScale(x, settings.lowerFrequency, settings.upperFrequency)
+		case 'linear':
+			return settings.lowerFrequency + x * (settings.upperFrequency - settings.lowerFrequency)
+		case 'mel':
+			const lower = 1127 * Math.log(1 + settings.lowerFrequency / 700)
+			const upper = 1127 * Math.log(1 + settings.upperFrequency / 700)
+			const mel = lower + x * (upper - lower)
+			return 700 * (Math.exp(mel / 1127) - 1)
 	}
-	return 0
 }
 
-export function inverseScale(
-	y: number,
-	scalaVariant: ScalaVariant,
-	lowerFrequency: number,
-	upperFrequency: number,
-) {
-	if (scalaVariant === 'log') {
-		return inverseLogScale(y, lowerFrequency, upperFrequency)
-	} else if (scalaVariant === 'linear') {
-		return (y - lowerFrequency) / (upperFrequency - lowerFrequency)
-	} else if (scalaVariant === 'mel') {
-		const lower = 1127 * Math.log(1 + lowerFrequency / 700)
-		const upper = 1127 * Math.log(1 + upperFrequency / 700)
-		const mel = 1127 * Math.log(1 + y / 700)
-		return (mel - lower) / (upper - lower)
+export function inverseScale(y: number, settings: SpectrogramSettings) {
+	switch (settings.scala) {
+		case 'log':
+			return inverseLogScale(y, settings.lowerFrequency, settings.upperFrequency)
+		case 'linear':
+			return (y - settings.lowerFrequency) / (settings.upperFrequency - settings.lowerFrequency)
+		case 'mel':
+			const lower = 1127 * Math.log(1 + settings.lowerFrequency / 700)
+			const upper = 1127 * Math.log(1 + settings.upperFrequency / 700)
+			const mel = 1127 * Math.log(1 + y / 700)
+			return (mel - lower) / (upper - lower)
 	}
-	return 0
 }
 
 export type ScalaVariant = 'log' | 'linear' | 'mel'