From 6479c603876fce72c51885a7069dacac3a1b62e0 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Mon, 1 Apr 2024 23:21:32 +0200
Subject: [PATCH] tweaks

---
 packages/codemirror/widget.mjs |  2 +-
 packages/draw/pitchwheel.mjs   | 31 ++++++++++++++++++-------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/codemirror/widget.mjs b/packages/codemirror/widget.mjs
index ae62b842..72b4ec65 100644
--- a/packages/codemirror/widget.mjs
+++ b/packages/codemirror/widget.mjs
@@ -131,5 +131,5 @@ registerWidget('_pitchwheel', (id, options = {}, pat) => {
   let _size = options.size || 200;
   options = { width: _size, height: _size, ...options, size: _size / 5 };
   const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.tag(id).pitchwheel({ ...options, ctx, id });
+  return pat.pitchwheel({ ...options, ctx, id });
 });
diff --git a/packages/draw/pitchwheel.mjs b/packages/draw/pitchwheel.mjs
index 76978d08..8d3cfe61 100644
--- a/packages/draw/pitchwheel.mjs
+++ b/packages/draw/pitchwheel.mjs
@@ -15,20 +15,20 @@ const freq2angle = (freq, root) => {
 };
 
 export function pitchwheel({
-  time,
   haps,
   ctx,
   id,
-  connectdots = 0,
-  centerlines = 1,
   hapcircles = 1,
   circle = 0,
   edo = 12,
   root = c,
-  thickness = 4,
-  hapRadius = 4,
+  thickness = 3,
+  hapRadius = 6,
+  mode = 'flake',
   margin = 10,
 } = {}) {
+  const connectdots = mode === 'polygon';
+  const centerlines = mode === 'flake';
   const w = ctx.canvas.width;
   const h = ctx.canvas.height;
   ctx.clearRect(0, 0, w, h);
@@ -55,15 +55,17 @@ export function pitchwheel({
 
   if (edo) {
     Array.from({ length: edo }, (_, i) => {
-      ctx.beginPath();
       const angle = freq2angle(root * Math.pow(2, i / edo), root);
       const [x, y] = circlePos(centerX, centerY, radius, angle);
+      ctx.beginPath();
       ctx.arc(x, y, hapRadius, 0, 2 * Math.PI);
-      ctx.stroke();
+      ctx.fill();
     });
+    ctx.stroke();
   }
 
   let shape = [];
+  ctx.lineWidth = hapRadius;
   haps.forEach((hap) => {
     let freq;
     try {
@@ -74,11 +76,12 @@ export function pitchwheel({
     const angle = freq2angle(freq, root);
     const [x, y] = circlePos(centerX, centerY, radius, angle);
     const hapColor = hap.value.color || color;
-    shape.push([x, y]);
     ctx.strokeStyle = hapColor;
     ctx.fillStyle = hapColor;
     const { velocity = 1, gain = 1 } = hap.value || {};
-    ctx.globalAlpha = velocity * gain;
+    const alpha = velocity * gain;
+    ctx.globalAlpha = alpha;
+    shape.push([x, y, angle, hapColor, alpha]);
     ctx.beginPath();
     if (hapcircles) {
       ctx.moveTo(x + hapRadius, y);
@@ -94,10 +97,13 @@ export function pitchwheel({
 
   ctx.strokeStyle = color;
   ctx.globalAlpha = 1;
-  if (shape.length && connectdots) {
+  if (connectdots && shape.length) {
+    shape = shape.sort((a, b) => a[2] - b[2]);
     ctx.beginPath();
     ctx.moveTo(shape[0][0], shape[0][1]);
-    shape.forEach(([x, y]) => {
+    shape.forEach(([x, y, _, color, alpha]) => {
+      ctx.strokeStyle = color;
+      ctx.globalAlpha = alpha;
       ctx.lineTo(x, y);
     });
     ctx.lineTo(shape[0][0], shape[0][1]);
@@ -109,7 +115,7 @@ export function pitchwheel({
 
 Pattern.prototype.pitchwheel = function (options = {}) {
   let { ctx = getDrawContext(), id = 1 } = options;
-  this.onPaint((_, time, haps) =>
+  return this.tag(id).onPaint((_, time, haps) =>
     pitchwheel({
       ...options,
       time,
@@ -118,5 +124,4 @@ Pattern.prototype.pitchwheel = function (options = {}) {
       id,
     }),
   );
-  return this;
 };