modularity

src/utils/bytebeatFormulas.ts

@@ -40,23 +40,10 @@ const TEMPLATES: Template[] = [
   { pattern: "((t>>S1)|(t>>S2))&((t>>S3)|(t>>S4))", weight: 6 }
 ]
 
-const TOTAL_WEIGHT = TEMPLATES.reduce((sum, t) => sum + t.weight, 0)
-
 function randomElement<T>(arr: T[]): T {
   return arr[Math.floor(Math.random() * arr.length)]
 }
 
-function pickTemplate(): Template {
-  let random = Math.random() * TOTAL_WEIGHT
-  for (const template of TEMPLATES) {
-    random -= template.weight
-    if (random <= 0) {
-      return template
-    }
-  }
-  return TEMPLATES[0]
-}
-
 function fillTemplate(pattern: string): string {
   let formula = pattern
 

src/utils/formatters.ts

@@ -0,0 +1,20 @@
+import { SAMPLE_RATES } from '../config/effects'
+
+export function getComplexityLabel(index: number): string {
+  const labels = ['Simple', 'Medium', 'Complex']
+  return labels[index] || 'Medium'
+}
+
+export function getBitDepthLabel(index: number): string {
+  const labels = ['8bit', '16bit', '24bit']
+  return labels[index] || '8bit'
+}
+
+export function getClipModeLabel(index: number): string {
+  const labels = ['Wrap', 'Clamp', 'Fold']
+  return labels[index] || 'Wrap'
+}
+
+export function getSampleRateLabel(index: number): string {
+  return `${SAMPLE_RATES[index]}Hz`
+}

src/utils/waveformGenerator.ts

@@ -0,0 +1,58 @@
+export function generateWaveformData(formula: string, width: number, sampleRate: number = 8000, duration: number = 0.5): number[] {
+  try {
+    const compiledFormula = new Function('t', `return ${formula}`) as (t: number) => number
+    const samplesPerPixel = Math.floor((sampleRate * duration) / width)
+    const waveform: number[] = []
+
+    for (let x = 0; x < width; x++) {
+      let min = Infinity
+      let max = -Infinity
+
+      for (let s = 0; s < samplesPerPixel; s++) {
+        const t = x * samplesPerPixel + s
+        try {
+          const value = compiledFormula(t)
+          const byteValue = value & 0xFF
+          const normalized = (byteValue - 128) / 128
+          min = Math.min(min, normalized)
+          max = Math.max(max, normalized)
+        } catch {
+          min = Math.min(min, 0)
+          max = Math.max(max, 0)
+        }
+      }
+
+      waveform.push(min, max)
+    }
+
+    return waveform
+  } catch {
+    return new Array(width * 2).fill(0)
+  }
+}
+
+export function drawWaveform(
+  canvas: HTMLCanvasElement,
+  waveformData: number[],
+  color: string = 'rgba(255, 255, 255, 0.15)'
+): void {
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const width = canvas.width
+  const height = canvas.height
+  const centerY = height / 2
+
+  ctx.clearRect(0, 0, width, height)
+  ctx.fillStyle = color
+  ctx.beginPath()
+
+  for (let x = 0; x < width; x++) {
+    const min = waveformData[x * 2] || 0
+    const max = waveformData[x * 2 + 1] || 0
+    const y1 = centerY + min * centerY
+    const y2 = centerY + max * centerY
+
+    ctx.fillRect(x, y1, 1, Math.max(1, y2 - y1))
+  }
+}