feat(LFO): changing the units of frequency and related effects

Author: codeacme17

example/src/components/visualizaion/EchoLFO.tsx

@@ -5,7 +5,7 @@ import { Play, StopCircle } from 'lucide-react'
 
 export const EchoLFO = () => {
   const [type, setType] = React.useState<LFOProps['type']>('sine')
-  const [frequency, setFrequency] = React.useState(0)
+  const [frequency, setFrequency] = React.useState(1)
   const [amplitude, setAmplitude] = React.useState(0)
   const [delay, setDelay] = React.useState(0)
   const [isPlaying, setIsPlaying] = React.useState(false)
@@ -69,25 +69,23 @@ export const EchoLFO = () => {
 
       <LFO amplitude={amplitude} frequency={frequency} delay={delay} type={type} />
 
-      <Knob.Group
-        className="mt-2"
-        size={40}
-        trackWidth={3}
-        min={0}
-        max={1}
-        step={0.1}
-        pointerHeight={6}
-      >
+      <Knob.Group className="mt-2" size={40} trackWidth={3} pointerHeight={6}>
         <Knob
           value={frequency}
           onChange={setFrequency}
           topLabel="Frequency"
-          bottomLabel={frequency * 100 + '%'}
+          min={1}
+          max={15}
+          step={1}
+          bottomLabel={frequency + 'Hz'}
         />
 
         <Knob
           className="mr-3"
           value={amplitude}
+          min={0}
+          max={1}
+          step={0.1}
           onChange={setAmplitude}
           topLabel="Amplitude"
           bottomLabel={amplitude * 100 + '%'}

packages/components/visualization/LFO/LFO.tsx

@@ -20,15 +20,14 @@ type DataItem = { x: number; y: number }
 export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   const {
     type = TYPE,
-    frequency: _frequency = FREQUENCY,
+    frequency = FREQUENCY,
     amplitude: _anplitude = AMPLITUDE,
     delay: _delay = DELAY,
     lineWidth = LINE_WIDTH,
     lineColor = LINE_COLOR,
     ...restProps
   } = props
 
-  const frequency = validValue(_frequency, 0, 1)
   const amplitude = validValue(_anplitude, 0, 1)
   const delay = validValue(_delay, 0, 100)
 
@@ -62,10 +61,7 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   const generateScales = () => {
     const { width, height } = dimensions.current
 
-    xScale.current = d3
-      .scaleLinear()
-      .domain([0, 4 * Math.PI * (frequency * 10)])
-      .range([0, width])
+    xScale.current = d3.scaleLinear().domain([0, 1]).range([0, width])
     yScale.current = d3.scaleLinear().domain([0, 1]).range([height, 0])
   }
 
@@ -142,8 +138,9 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   ): { x: number; y: number }[] => {
     if (type !== 'sine' || !svg) return []
 
-    const data = d3.range(0, 4 * Math.PI * (frequency * 10), 0.01).map((x) => {
-      const y = Math.sin(x) * amplitude * 0.5 + 0.5
+    const data = d3.range(0, 1, 0.001).map((x) => {
+      const adjustedX = x * 2 * Math.PI * frequency
+      const y = Math.sin(adjustedX) * amplitude * 0.5 + 0.5
       return { x, y }
     })
 
@@ -158,8 +155,10 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
     const centerY = 0.5
     const halfHeight = centerY * amplitude
     const data = [{ x: 0, y: centerY }].concat(
-      d3.range(0, 4 * Math.PI * (frequency * 10), 0.01).map((x) => {
-        const y = Math.floor(x / Math.PI) % 2 === 0 ? centerY + halfHeight : centerY - halfHeight
+      d3.range(0, 1, 0.001).map((x) => {
+        const adjustedX = x * 2 * Math.PI * frequency
+        const y =
+          Math.floor(adjustedX / Math.PI) % 2 === 0 ? centerY + halfHeight : centerY - halfHeight
         return { x, y }
       }),
     )
@@ -173,12 +172,13 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
     if (type !== 'triangle' || !svg) return []
 
     const centerY = 0.5
-    const data = d3.range(0, 4 * Math.PI * (frequency * 10), 0.01).map((x) => {
+    const data = d3.range(0, 1, 0.001).map((x) => {
       // Adjust the phase so that the waveform starts in the middle of the rising segment
       // and ensure that the starting point is at the center of the Y-axis
       // By mapping the x value to the corresponding position in a cycle,
       // the waveform is in the middle of the rising segment when it starts
-      const phase = ((x + Math.PI / 2) % (2 * Math.PI)) / Math.PI
+      const adjustedX = x * 2 * Math.PI * frequency
+      const phase = ((adjustedX + Math.PI / 2) % (2 * Math.PI)) / Math.PI
 
       let y
       if (phase < 1) y = phase * amplitude

packages/components/visualization/LFO/constants.ts

@@ -1,7 +1,9 @@
 export const TYPE = 'sine'
 export const MIN = 1
 export const MAX = 15
-export const FREQUENCY = 0.5
+export const MIN_FREQUENCY = 1
+export const MAX_FREQUENCY = 15
+export const FREQUENCY = 1
 export const AMPLITUDE = 0.5
 export const DELAY = 0
 

packages/components/visualization/LFO/types.ts

@@ -1,6 +1,8 @@
 export interface LFOProps extends React.HTMLAttributes<HTMLDivElement> {
   frequency?: number
   amplitude?: number
+  minFrequency?: number
+  maxFrequency?: number
   min?: number
   max?: number
   delay?: number