opt(LFO): optimize the gap of delay line and sine wave

Author: codeacme17

example/src/components/visualizaion/EchoLFO.tsx

@@ -8,7 +8,7 @@ export const EchoLFO = () => {
 
   return (
     <section className="h-32 w-2/3 mb-20">
-      <LFO speed={speed} frequency={frequency} delay={delay} lineWidth={5} />
+      <LFO speed={speed} frequency={frequency} delay={delay} />
 
       <Knob.Group size={50} trackWidth={3} min={0} max={1} step={0.1}>
         <Knob

packages/components/visualization/LFO/LFO.tsx

@@ -71,29 +71,35 @@ 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 * 10), 0.01).map((x) => {
+      return {
+        x,
+        y: Math.sin(x) * frequency * (max - min) * 0.5 + (max + min) / 2,
+      }
+    })
+
     if (delay > 0) {
+      svg
+        .append('circle')
+        .attr('cx', delay)
+        .attr('cy', height / 2)
+        .attr('r', lineWidth / 2)
+        .attr('fill', lineColor)
+
       svg
         .append('line')
         .attr('x1', 0)
         .attr('y1', height / 2)
-        .attr('x2', delay)
+        .attr('x2', delay + 1)
         .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')
@@ -102,8 +108,7 @@ 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)`)
+      .attr('transform', `translate(${delay}, 0)`)
   }
 
   const { base, svg } = useStyle()