feat(LFO): realize frequence effect

Author: codeacme17

example/src/components/visualizaion/EchoLFO.tsx

@@ -2,17 +2,34 @@ import React from 'react'
 import { LFO, Knob } from '@echo-ui'
 
 export const EchoLFO = () => {
-  const [speed, setSpeed] = React.useState(5)
+  const [speed, setSpeed] = React.useState(0.1)
+  const [frequency, setFrequency] = React.useState(0.1)
 
   return (
-    <section className="h-32 w-2/3">
-      <LFO speed={speed} />
+    <section className="h-32 w-2/3 mb-20">
+      <LFO speed={speed} frequency={frequency} />
 
-      <div>
-        <Knob value={speed} onChange={setSpeed} min={0} max={10} step={0.1} sensitivity={2} />
+      <Knob.Group size={50} trackWidth={3}>
+        <Knob
+          value={frequency}
+          onChange={setFrequency}
+          min={0}
+          max={1}
+          step={0.1}
+          topLabel="Frequency"
+          bottomLabel={frequency * 100 + '%'}
+        />
 
-        {speed}
-      </div>
+        <Knob
+          value={speed}
+          onChange={setSpeed}
+          min={0.1}
+          max={1}
+          step={0.1}
+          topLabel="Speed"
+          bottomLabel={speed * 100 + '%'}
+        />
+      </Knob.Group>
     </section>
   )
 }

packages/components/visualization/LFO/LFO.tsx

@@ -1,7 +1,7 @@
 import * as d3 from 'd3'
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useResizeObserver } from '../../../lib/hooks/useResizeObserver'
-import { cn } from '../../../lib/utils'
+import { cn, validValue } from '../../../lib/utils'
 import { LFOProps, LFORef } from './types'
 import { useStyle } from './styles'
 import {
@@ -14,24 +14,25 @@ import {
   LINE_COLOR,
   MIN,
   MAX,
-  AMPLITUDE,
   FREQUENCY,
 } from './constants'
 
 export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   const {
     type = TYPE,
+    frequency: _frequency = FREQUENCY,
     delay = DELAY,
-    speed = SPEED,
-    amplitude = AMPLITUDE,
-    frequency = FREQUENCY,
+    speed: _speed = SPEED,
     min = MIN,
     max = MAX,
     lineWidth = LINE_WIDTH,
     lineColor = LINE_COLOR,
     ...restProps
   } = props
 
+  const speed = validValue(_speed, 0.1, 1)
+  const frequency = validValue(_frequency, 0, 1)
+
   const LFORef = useRef<LFORef | null>(null)
   const xScale = useRef<d3.ScaleLinear<number, number> | null>(null)
   const yScale = useRef<d3.ScaleLinear<number, number> | null>(null)
@@ -48,15 +49,15 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
 
     xScale.current = d3
       .scaleLinear()
-      .domain([0, 4 * Math.PI * speed])
+      .domain([0, 4 * Math.PI * (speed * 10)])
       .range([0, width])
     yScale.current = d3.scaleLinear().domain([min, max]).range([height, 0])
   }
 
   useEffect(() => {
     generateScales()
     generateWave()
-  }, [speed])
+  }, [speed, frequency])
 
   const generateWave = () => {
     generateSineWave()
@@ -70,9 +71,9 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
     const svg = d3.select(LFORef.current).select('svg').attr('width', width).attr('height', height)
     svg.selectAll('*').remove()
 
-    const data = d3.range(0, 4 * Math.PI * speed, 0.01).map((x) => ({
+    const data = d3.range(0, 4 * Math.PI * (speed * 10), 0.01).map((x) => ({
       x,
-      y: Math.sin(x),
+      y: Math.sin(x) * frequency * (max - min) * 0.5 + (max + min) / 2,
     }))
 
     const line = d3