From 049aa352864cd783271ad4b9bc8f1342ca6457a1 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 18 Nov 2023 21:15:52 +0100
Subject: [PATCH 1/2] hsl + hsla functions

---
 packages/core/pattern.mjs | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs
index 5a9a3fe8..9a5c456a 100644
--- a/packages/core/pattern.mjs
+++ b/packages/core/pattern.mjs
@@ -2189,6 +2189,14 @@ export const duration = register('duration', function (value, pat) {
   return pat.withHapSpan((span) => new TimeSpan(span.begin, span.begin.add(value)));
 });
 
+export const hsla = register('hsla', (h, s, l, a, pat) => {
+  return pat.color(`hsla(${h}turn,${s * 100}%,${l * 100}%,${a})`);
+});
+
+export const hsl = register('hsl', (h, s, l, pat) => {
+  return pat.color(`hsl(${h}turn,${s * 100}%,${l * 100}%)`);
+});
+
 /**
  * Sets the color of the hap in visualizations like pianoroll or highlighting.
  * @name color

From f759999826526be12abf0cde8191cbddb0ac464e Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 18 Nov 2023 21:16:03 +0100
Subject: [PATCH 2/2] pianoroll smear as float

---
 packages/core/pianoroll.mjs | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/core/pianoroll.mjs b/packages/core/pianoroll.mjs
index 254dd94a..413807f0 100644
--- a/packages/core/pianoroll.mjs
+++ b/packages/core/pianoroll.mjs
@@ -165,10 +165,7 @@ export function pianoroll({
   barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
   ctx.fillStyle = background;
   ctx.globalAlpha = 1; // reset!
-  if (!smear) {
-    ctx.clearRect(0, 0, w, h);
-    ctx.fillRect(0, 0, w, h);
-  }
+  clearScreen(smear);
   haps.forEach((event) => {
     const isActive = event.whole.begin <= time && event.endClipped > time;
     let strokeCurrent = stroke ?? (strokeActive && isActive);
@@ -282,3 +279,13 @@ export function drawPianoroll(options) {
   const { drawTime, ...rest } = options;
   pianoroll({ ...getDrawOptions(drawTime), ...rest });
 }
+
+function clearScreen(smear = 0, smearRGB = `0,0,0`) {
+  const ctx = getDrawContext();
+  if (!smear) {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  } else {
+    ctx.fillStyle = `rgba(${smearRGB},${1 - smear})`;
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  }
+}