From 1286468d5a98c346b4bd650f37853e0196c188b2 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 1 Jan 2023 12:11:39 +0100
Subject: [PATCH 1/2] animation options + do not sync by default

---
 packages/core/animate.mjs | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/core/animate.mjs b/packages/core/animate.mjs
index 78e6b290..115b3cd2 100644
--- a/packages/core/animate.mjs
+++ b/packages/core/animate.mjs
@@ -1,17 +1,18 @@
 import { controls, Pattern, getDrawContext, silence, scheduler } from './index.mjs';
 const { createParams } = controls;
 
-let clearColor = '#20001010';
-let currentSmear = 0.5;
-export let syncAnimationWithScheduler = true;
+let clearColor = '#22222210';
 
-Pattern.prototype.animate = function (callback) {
+Pattern.prototype.animate = function ({ callback, sync = false, smear = 0.5 } = {}) {
   window.frame && cancelAnimationFrame(window.frame);
   const ctx = getDrawContext();
   const { clientWidth: ww, clientHeight: wh } = ctx.canvas;
+  let smearPart = Number((1 - smear) * 100).toFixed(0);
+  smearPart = smearPart.length === 1 ? `0${smearPart}` : smearPart;
+  clearColor = `#200010${smearPart}`;
   const render = (t) => {
     let frame;
-    if (syncAnimationWithScheduler) {
+    if (sync) {
       t = scheduler.now();
       frame = this.queryArc(t, t);
     } else {
@@ -21,13 +22,7 @@ Pattern.prototype.animate = function (callback) {
     ctx.fillStyle = clearColor;
     ctx.fillRect(0, 0, ww, wh);
     frame.forEach((f) => {
-      let { x, y, w, h, s, r, a = 0, fill = 'darkseagreen', smear } = f.value;
-      if (smear && smear !== currentSmear) {
-        currentSmear = smear;
-        let smearPart = Number((1 - smear) * 100).toFixed(0);
-        smearPart = smearPart.length === 1 ? `0${smearPart}` : smearPart;
-        clearColor = `#200010${smearPart}`;
-      }
+      let { x, y, w, h, s, r, a = 0, fill = 'darkseagreen' } = f.value;
       w *= ww;
       h *= wh;
       if (r !== undefined && a !== undefined) {

From 0abd062e5cf98b782823319a0b3ab5d131c49889 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 1 Jan 2023 12:18:46 +0100
Subject: [PATCH 2/2] fix: smear 0 special case

---
 packages/core/animate.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/animate.mjs b/packages/core/animate.mjs
index 115b3cd2..6da97f08 100644
--- a/packages/core/animate.mjs
+++ b/packages/core/animate.mjs
@@ -7,7 +7,7 @@ Pattern.prototype.animate = function ({ callback, sync = false, smear = 0.5 } =
   window.frame && cancelAnimationFrame(window.frame);
   const ctx = getDrawContext();
   const { clientWidth: ww, clientHeight: wh } = ctx.canvas;
-  let smearPart = Number((1 - smear) * 100).toFixed(0);
+  let smearPart = smear === 0 ? '99' : Number((1 - smear) * 100).toFixed(0);
   smearPart = smearPart.length === 1 ? `0${smearPart}` : smearPart;
   clearColor = `#200010${smearPart}`;
   const render = (t) => {