support multiple animationFrames

+ break out spiral draw logic

packages/draw/spiral.mjs

@@ -49,7 +49,7 @@ function spiralSegment(options) {
   ctx.stroke();
 }
 
-Pattern.prototype.spiral = function (options = {}) {
+function drawSpiral(options) {
   const {
     stretch = 1,
     size = 80,
@@ -65,54 +65,58 @@ Pattern.prototype.spiral = function (options = {}) {
     colorizeInactive = 0,
     fade = true,
     // logSpiral = true,
+    ctx,
+    time,
+    haps,
+    drawTime,
   } = options;
 
-  function spiral({ ctx, time, haps, drawTime }) {
-    const [w, h] = [ctx.canvas.width, ctx.canvas.height];
-    ctx.clearRect(0, 0, w * 2, h * 2);
-    const [cx, cy] = [w / 2, h / 2];
-    const settings = {
-      margin: size / stretch,
-      cx,
-      cy,
-      stretch,
-      cap,
-      thickness,
-    };
+  const [w, h] = [ctx.canvas.width, ctx.canvas.height];
+  ctx.clearRect(0, 0, w * 2, h * 2);
+  const [cx, cy] = [w / 2, h / 2];
+  const settings = {
+    margin: size / stretch,
+    cx,
+    cy,
+    stretch,
+    cap,
+    thickness,
+  };
 
-    const playhead = {
-      ...settings,
-      thickness: playheadThickness,
-      from: inset - playheadLength,
-      to: inset,
-      color: playheadColor,
-    };
+  const playhead = {
+    ...settings,
+    thickness: playheadThickness,
+    from: inset - playheadLength,
+    to: inset,
+    color: playheadColor,
+  };
 
-    const [min] = drawTime;
-    const rotate = steady * time;
-    haps.forEach((hap) => {
-      const isActive = hap.whole.begin <= time && hap.endClipped > time;
-      const from = hap.whole.begin - time + inset;
-      const to = hap.endClipped - time + inset - padding;
-      const { color } = hap.context;
-      const opacity = fade ? 1 - Math.abs((hap.whole.begin - time) / min) : 1;
-      spiralSegment({
-        ctx,
-        ...settings,
-        from,
-        to,
-        rotate,
-        color: colorizeInactive || isActive ? color : inactiveColor,
-        fromOpacity: opacity,
-        toOpacity: opacity,
-      });
-    });
+  const [min] = drawTime;
+  const rotate = steady * time;
+  haps.forEach((hap) => {
+    const isActive = hap.whole.begin <= time && hap.endClipped > time;
+    const from = hap.whole.begin - time + inset;
+    const to = hap.endClipped - time + inset - padding;
+    const { color } = hap.context;
+    const opacity = fade ? 1 - Math.abs((hap.whole.begin - time) / min) : 1;
     spiralSegment({
       ctx,
-      ...playhead,
+      ...settings,
+      from,
+      to,
       rotate,
+      color: colorizeInactive || isActive ? color : inactiveColor,
+      fromOpacity: opacity,
+      toOpacity: opacity,
     });
-  }
+  });
+  spiralSegment({
+    ctx,
+    ...playhead,
+    rotate,
+  });
+}
 
-  return this.onPaint((ctx, time, haps, drawTime) => spiral({ ctx, time, haps, drawTime }));
+Pattern.prototype.spiral = function (options = {}) {
+  return this.onPaint((ctx, time, haps, drawTime) => drawSpiral({ ctx, time, haps, drawTime, ...options }));
 };