feat(LFO): update props and realize speed effects

Author: codeacme17

example/src/components/visualizaion/EchoLFO.tsx

@@ -1,9 +1,18 @@
-import { LFO } from '@echo-ui'
+import React from 'react'
+import { LFO, Knob } from '@echo-ui'
 
 export const EchoLFO = () => {
+  const [speed, setSpeed] = React.useState(5)
+
   return (
     <section className="h-32 w-2/3">
-      <LFO />
+      <LFO speed={speed} />
+
+      <div>
+        <Knob value={speed} onChange={setSpeed} min={0} max={10} step={0.1} sensitivity={2} />
+
+        {speed}
+      </div>
     </section>
   )
 }

packages/components/visualization/LFO/LFO.tsx

@@ -1,13 +1,36 @@
 import * as d3 from 'd3'
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useResizeObserver } from '../../../lib/hooks/useResizeObserver'
 import { cn } from '../../../lib/utils'
 import { LFOProps, LFORef } from './types'
 import { useStyle } from './styles'
-import { WIDTH, HEIGHT, LINE_WIDTH, LINE_COLOR } from './constants'
+import {
+  TYPE,
+  DELAY,
+  SPEED,
+  WIDTH,
+  HEIGHT,
+  LINE_WIDTH,
+  LINE_COLOR,
+  MIN,
+  MAX,
+  AMPLITUDE,
+  FREQUENCY,
+} from './constants'
 
 export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
-  const { lineWidth = LINE_WIDTH, lineColor = LINE_COLOR, ...restProps } = props
+  const {
+    type = TYPE,
+    delay = DELAY,
+    speed = SPEED,
+    amplitude = AMPLITUDE,
+    frequency = FREQUENCY,
+    min = MIN,
+    max = MAX,
+    lineWidth = LINE_WIDTH,
+    lineColor = LINE_COLOR,
+    ...restProps
+  } = props
 
   const LFORef = useRef<LFORef | null>(null)
   const xScale = useRef<d3.ScaleLinear<number, number> | null>(null)
@@ -17,46 +40,45 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
 
   const dimensions = useResizeObserver(LFORef, WIDTH, HEIGHT, () => {
     generateScales()
-    generateLine()
+    generateWave()
   })
 
   const generateScales = () => {
     const { width, height } = dimensions.current
 
     xScale.current = d3
       .scaleLinear()
-      .domain([0, 4 * Math.PI])
+      .domain([0, 4 * Math.PI * speed])
       .range([0, width])
+    yScale.current = d3.scaleLinear().domain([min, max]).range([height, 0])
+  }
+
+  useEffect(() => {
+    generateScales()
+    generateWave()
+  }, [speed])
 
-    yScale.current = d3.scaleLinear().domain([-1, 1]).range([height, 0])
+  const generateWave = () => {
+    generateSineWave()
   }
 
-  const generateLine = () => {
+  const generateSineWave = () => {
+    if (type !== 'sine') return
+
     const { width, height } = dimensions.current
 
     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, 0.01).map((x) => ({
+    const data = d3.range(0, 4 * Math.PI * speed, 0.01).map((x) => ({
       x,
       y: Math.sin(x),
     }))
 
     const line = d3
       .line<{ x: number; y: number }>()
-      .x((d) => xScale(d.x))
-      .y((d) => yScale(d.y))
-
-    const xScale = d3
-      .scaleLinear()
-      .domain([0, 4 * Math.PI])
-      .range([0, width])
-
-    const yScale = d3
-      .scaleLinear()
-      .domain([-1, 1])
-      .range([height - 4, 4])
+      .x((d) => xScale.current!(d.x))
+      .y((d) => yScale.current!(d.y))
 
     svg
       .append('path')

packages/components/visualization/LFO/constants.ts

@@ -1,5 +1,13 @@
 export const WIDTH = 360
 export const HEIGHT = 100
 
+export const TYPE = 'sine'
+export const FREQUENCY = 0.5
+export const AMPLITUDE = 0.5
+export const DELAY = 0
+export const SPEED = 10
+export const MIN = -10
+export const MAX = 10
+
 export const LINE_COLOR = 'var(--echo-primary)'
 export const LINE_WIDTH = 3

packages/components/visualization/LFO/types.ts

@@ -1,6 +1,10 @@
 export interface LFOProps extends React.HTMLAttributes<HTMLDivElement> {
   frequency?: number
   amplitude?: number
+  min?: number
+  max?: number
+  delay?: number
+  speed?: number
   type?: 'sine' | 'square' | 'triangle'
   lineColor?: string
   lineWidth?: number