Merge pull request #1 from tidalcycles/main

pull from upstream

my-patterns/README.md

@@ -1,16 +1,20 @@
 # my-patterns
 
-This directory can be used to save your own patterns.
+This directory can be used to save your own patterns, which then get
+made into a pattern swatch.
 
-0. fork the strudel repo
-1. Save one or more .txt files here.
-2. and run `npm run repl`
-3. open `http://localhost:3000/my-patterns` !
+0. fork and clone the strudel repository
+1. run `npm run setup` in the strudel folder
+1. Save one or more .txt files in this folder
+2. run `npm run repl` in the top-level strudel folder
+3. open `http://localhost:3000/swatch/` !
 
 ## deploy
 
 1. in your fork, go to settings -> pages and select "Github Actions" as source
 2. edit `website/public/CNAME` to contain `<your-username>.github.io/strudel`
 3. edit `website/astro.config.mjs` to use site: `<your-username>.github.io/strudel` and base `/strudel`
-4. go to Actions -> "Build and Deploy" and click "Run workflow"
-5. view your patterns at `<your-username>.github.io/strudel/my-patterns`
+4. go to Actions -> `Build and Deploy` and click `Run workflow`
+5. view your patterns at `<your-username>.github.io/strudel/swatch/`
+
+Alternatively, github pages allows you to use a custom domain, like https://mycooldomain.org/swatch/. [See their documentation for details](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site).

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 = smear === 0 ? '99' : 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) {