feat(lab/09): adds shadow handles, and a shadow curve

it's now a complete wave form

src/lab/09-bezier/entry.ts

@@ -1,5 +1,5 @@
 import { el, rAF, on } from '../../lib/core/dom';
-import { min, ππ, hypot, lerp } from '../../lib/core/math';
+import { min, ππ, hypot, lerp, max, abs } from '../../lib/core/math';
 
 import { resize, shouldResize } from './resize';
 
@@ -27,6 +27,8 @@ interface Handle {
   oy: number;
   x: number;
   y: number;
+  sx: number;
+  sy: number;
   isDragging: boolean;
 }
 
@@ -36,13 +38,17 @@ const handles: Handle[] = [
     oy: 0,
     x: 0,
     y: 0,
+    sx: 0,
+    sy: 0,
     isDragging: false,
   },
   {
     ox: 0,
     oy: 0,
     x: 0,
     y: 0,
+    sx: 0,
+    sy: 0,
     isDragging: false,
   },
 ];
@@ -105,6 +111,64 @@ on<TouchEvent>('touchstart', onTouchStart);
 on<TouchEvent>('touchend', onTouchEnd);
 on<TouchEvent>('touchmove', onTouchMove);
 
+function drawShadow() {
+  ctx.strokeStyle = 'hsl(0,0%,40%)';
+  ctx.strokeRect(hw, hh - hs, graphSize, graphSize);
+
+  handles.forEach(handle => {
+    ctx.beginPath();
+    ctx.arc(handle.sx, handle.sy, handleRadius, 0, ππ);
+    ctx.moveTo(hw + abs(hw - handle.ox), handle.oy);
+    ctx.lineTo(handle.sx, handle.sy);
+    ctx.stroke();
+  });
+
+  ctx.beginPath();
+  ctx.moveTo(hw + abs(hw - handles[0].ox), handles[0].oy);
+  ctx.bezierCurveTo(
+    handles[0].sx,
+    handles[0].sy,
+    handles[1].sx,
+    handles[1].sy,
+    handles[1].ox,
+    handles[1].oy,
+  );
+  ctx.stroke();
+}
+
+function drawGraph() {
+  ctx.strokeStyle = 'hsl(0,0%,90%)';
+  ctx.strokeRect(hw - graphSize, hh - hs, graphSize, graphSize);
+
+  handles.forEach(handle => {
+    if (handle.isDragging) {
+      handle.x = min(max(hw - graphSize, lerp(handle.x, pointerX, 0.5)), hw);
+      handle.y = lerp(handle.y, pointerY, 0.5);
+
+      handle.sx = hw + abs(hw - handle.x);
+      handle.sy = handle.oy + handle.oy - handle.y;
+    }
+
+    ctx.beginPath();
+    ctx.arc(handle.x, handle.y, handleRadius, 0, ππ);
+    ctx.moveTo(handle.ox, handle.oy);
+    ctx.lineTo(handle.x, handle.y);
+    ctx.stroke();
+  });
+
+  ctx.beginPath();
+  ctx.moveTo(handles[0].ox, handles[0].oy);
+  ctx.bezierCurveTo(
+    handles[0].x,
+    handles[0].y,
+    handles[1].x,
+    handles[1].y,
+    handles[1].ox,
+    handles[1].oy,
+  );
+  ctx.stroke();
+}
+
 function draw(/* ts: number */) {
   rAF(draw);
 
@@ -120,49 +184,28 @@ function draw(/* ts: number */) {
     graphSize = min(c.width, c.height) * 0.4;
     hs = graphSize / 2;
 
-    const spacer = graphSize / (handles.length + 1);
     handles.forEach((handle, i) => {
       handle.x = hw - hs;
-      handle.y = hh + hs - spacer * (i + 1);
+      handle.y = hh + hs - graphSize * i;
     });
 
     handles[0].ox = hw - graphSize;
     handles[0].oy = hh + hs;
 
     handles[1].ox = hw;
     handles[1].oy = hh - hs;
+
+    handles.forEach(handle => {
+      handle.sx = hw + abs(hw - handle.x);
+      handle.sy = handle.oy + handle.oy - handle.y;
+    });
   }
 
   ctx.clearRect(0, 0, c.width, c.height);
 
   ctx.lineWidth = 3;
-  ctx.strokeStyle = '#e7e7e7';
-  ctx.strokeRect(hw - graphSize, hh - hs, graphSize, graphSize);
-
-  handles.forEach(handle => {
-    if (handle.isDragging) {
-      handle.x = lerp(handle.x, pointerX, 0.5);
-      handle.y = lerp(handle.y, pointerY, 0.5);
-    }
-
-    ctx.beginPath();
-    ctx.arc(handle.x, handle.y, handleRadius, 0, ππ);
-    ctx.moveTo(handle.ox, handle.oy);
-    ctx.lineTo(handle.x, handle.y);
-    ctx.stroke();
-  });
-
-  ctx.beginPath();
-  ctx.moveTo(handles[0].ox, handles[0].oy);
-  ctx.bezierCurveTo(
-    handles[0].x,
-    handles[0].y,
-    handles[1].x,
-    handles[1].y,
-    handles[1].ox,
-    handles[1].oy,
-  );
-  ctx.stroke();
+  drawShadow();
+  drawGraph();
 }
 
 rAF(draw);