feat(LFO): realize delay effect

Author: codeacme17

example/src/components/visualizaion/EchoLFO.tsx

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

packages/components/visualization/LFO/LFO.tsx

@@ -1,5 +1,5 @@
 import * as d3 from 'd3'
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import { useResizeObserver } from '../../../lib/hooks/useResizeObserver'
 import { cn, validValue } from '../../../lib/utils'
 import { LFOProps, LFORef } from './types'
@@ -21,7 +21,7 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   const {
     type = TYPE,
     frequency: _frequency = FREQUENCY,
-    delay = DELAY,
+    delay: _delay = DELAY,
     speed: _speed = SPEED,
     min = MIN,
     max = MAX,
@@ -30,15 +30,21 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
     ...restProps
   } = props
 
-  const speed = validValue(_speed, 0.1, 1)
   const frequency = validValue(_frequency, 0, 1)
+  const speed = validValue(_speed, 0.1, 1)
+  const delay = validValue(_delay, 1, 100)
 
   const LFORef = useRef<LFORef | null>(null)
   const xScale = useRef<d3.ScaleLinear<number, number> | null>(null)
   const yScale = useRef<d3.ScaleLinear<number, number> | null>(null)
 
   useImperativeHandle(ref, () => LFORef.current as LFORef)
 
+  useEffect(() => {
+    generateScales()
+    generateWave()
+  }, [speed, frequency, delay])
+
   const dimensions = useResizeObserver(LFORef, WIDTH, HEIGHT, () => {
     generateScales()
     generateWave()
@@ -54,11 +60,6 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
     yScale.current = d3.scaleLinear().domain([min, max]).range([height, 0])
   }
 
-  useEffect(() => {
-    generateScales()
-    generateWave()
-  }, [speed, frequency])
-
   const generateWave = () => {
     generateSineWave()
   }
@@ -67,19 +68,32 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
     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 * (speed * 10), 0.01).map((x) => ({
-      x,
-      y: Math.sin(x) * frequency * (max - min) * 0.5 + (max + min) / 2,
-    }))
+    if (delay > 0) {
+      svg
+        .append('line')
+        .attr('x1', 0)
+        .attr('y1', height / 2)
+        .attr('x2', delay)
+        .attr('y2', height / 2)
+        .attr('stroke', lineColor)
+        .attr('stroke-width', lineWidth)
+    }
+
+    const data = d3.range(0, 4 * Math.PI * (speed * 10), 0.01).map((x) => {
+      return {
+        x,
+        y: Math.sin(x) * frequency * (max - min) * 0.5 + (max + min) / 2,
+      }
+    })
 
     const line = d3
       .line<{ x: number; y: number }>()
       .x((d) => xScale.current!(d.x))
       .y((d) => yScale.current!(d.y))
+      .curve(d3.curveBasis)
 
     svg
       .append('path')
@@ -88,6 +102,8 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
       .attr('stroke', lineColor)
       .attr('stroke-width', lineWidth)
       .attr('d', line)
+      // -1 to fix the gap between the line and the delay line
+      .attr('transform', `translate(${delay - 0.8}, 0)`)
   }
 
   const { base, svg } = useStyle()