feat(LFO): rewrite props

Author: codeacme17

example/src/components/visualizaion/EchoLFO.tsx

@@ -1,12 +1,19 @@
 import React from 'react'
+import * as Tone from 'tone'
 import { LFO, Knob, Button, LFOProps, SineIcon, SquareIcon, TriangleIcon } from '@echo-ui'
 
 export const EchoLFO = () => {
   const [type, setType] = React.useState<LFOProps['type']>('sine')
   const [frequency, setFrequency] = React.useState(0)
-  const [speed, setSpeed] = React.useState(0)
+  const [amplitude, setAmplitude] = React.useState(0)
   const [delay, setDelay] = React.useState(0)
 
+  const lfo = React.useRef<Tone.LFO | null>(null)
+
+  React.useEffect(() => {
+    lfo.current = new Tone.LFO('4n', 400, 4000)
+  }, [])
+
   return (
     <section className="h-32 w-2/3 mb-32">
       <Button.Group className="mb-2" radius="sm">
@@ -21,7 +28,7 @@ export const EchoLFO = () => {
         </Button>
       </Button.Group>
 
-      <LFO speed={speed} frequency={frequency} delay={delay} type={type} />
+      <LFO amplitude={amplitude} frequency={frequency} delay={delay} type={type} />
 
       <Knob.Group
         className="mt-2"
@@ -41,10 +48,10 @@ export const EchoLFO = () => {
 
         <Knob
           className="mr-3"
-          value={speed}
-          onChange={setSpeed}
-          topLabel="Speed"
-          bottomLabel={speed * 100 + '%'}
+          value={amplitude}
+          onChange={setAmplitude}
+          topLabel="Amplitude"
+          bottomLabel={amplitude * 100 + '%'}
         />
 
         <Knob

packages/components/visualization/LFO/LFO.tsx

@@ -7,32 +7,28 @@ import { useStyle } from './styles'
 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 {
     type = TYPE,
     frequency: _frequency = FREQUENCY,
+    amplitude: _anplitude = AMPLITUDE,
     delay: _delay = DELAY,
-    speed: _speed = SPEED,
-    min = MIN,
-    max = MAX,
     lineWidth = LINE_WIDTH,
     lineColor = LINE_COLOR,
     ...restProps
   } = props
 
   const frequency = validValue(_frequency, 0, 1)
-  const speed = validValue(_speed, 0.1, 1)
-  const delay = validValue(_delay, 1, 100)
+  const amplitude = validValue(_anplitude, 0, 1)
+  const delay = validValue(_delay, 0, 100)
 
   const LFORef = useRef<LFORef | null>(null)
   const xScale = useRef<d3.ScaleLinear<number, number> | null>(null)
@@ -43,7 +39,7 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   useEffect(() => {
     generateScales()
     generateWave()
-  }, [speed, frequency, delay, type, lineWidth, lineColor])
+  }, [frequency, amplitude, delay, type, lineWidth, lineColor])
 
   const dimensions = useResizeObserver(
     LFORef,
@@ -56,7 +52,7 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
     true,
     {
       frequency,
-      speed,
+      amplitude,
       delay,
     },
   )
@@ -66,9 +62,9 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
 
     xScale.current = d3
       .scaleLinear()
-      .domain([0, 4 * Math.PI * (speed * 10)])
+      .domain([0, 4 * Math.PI * (frequency * 10)])
       .range([0, width])
-    yScale.current = d3.scaleLinear().domain([min, max]).range([height, 0])
+    yScale.current = d3.scaleLinear().domain([0, 1]).range([height, 0])
   }
 
   const generateWave = () => {
@@ -79,6 +75,17 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
 
     svg.selectAll('*').remove()
 
+    if (frequency === 0) {
+      svg
+        .append('line')
+        .attr('x1', 0)
+        .attr('y1', height / 2)
+        .attr('x2', width)
+        .attr('y2', height / 2)
+        .attr('stroke', lineColor)
+        .attr('stroke-width', lineWidth)
+    }
+
     if (delay > 0) {
       svg
         .append('circle')
@@ -104,8 +111,8 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   const generateSineWave = (svg: d3.Selection<d3.BaseType, unknown, null, undefined>) => {
     if (type !== 'sine' || !svg) return
 
-    const data = d3.range(0, 4 * Math.PI * (speed * 10), 0.01).map((x) => {
-      const y = Math.sin(x) * frequency * (max - min) * 0.5 + (max + min) / 2
+    const data = d3.range(0, 4 * Math.PI * (frequency * 10), 0.01).map((x) => {
+      const y = Math.sin(x) * amplitude * 0.5 + 0.5
       return { x, y }
     })
 
@@ -127,12 +134,10 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   const generateSquareWave = (svg: d3.Selection<d3.BaseType, unknown, null, undefined>) => {
     if (type !== 'square' || !svg) return
 
-    const center = (max + min) / 2
-    const halfHeight = ((max - min) * frequency) / 2
-
-    const data = [{ x: 0, y: center }].concat(
-      d3.range(0, 4 * Math.PI * (speed * 10), 0.01).map((x) => {
-        const y = Math.floor(x / Math.PI) % 2 === 0 ? center + halfHeight : center - halfHeight
+    const halfHeight = 0.5 * amplitude
+    const data = [{ x: 0, y: 0.5 }].concat(
+      d3.range(0, 4 * Math.PI * (frequency * 10), 0.01).map((x) => {
+        const y = Math.floor(x / Math.PI) % 2 === 0 ? 0.5 + halfHeight : 0.5 - halfHeight
         return { x, y }
       }),
     )

packages/components/visualization/LFO/constants.ts

@@ -1,12 +1,11 @@
-export const WIDTH = 360
-export const HEIGHT = 100
-
 export const TYPE = 'sine'
+export const MIN = 1
+export const MAX = 15
 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
+export const WIDTH = 360
+export const HEIGHT = 100

packages/components/visualization/LFO/types.ts

@@ -1,9 +1,9 @@
 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