From 9170269e06645651d9a4e3c1064c28b2c5b10489 Mon Sep 17 00:00:00 2001 From: Alex McLean Date: Sun, 1 Jan 2023 00:34:53 +0000 Subject: [PATCH 1/4] Update README.md --- my-patterns/README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/my-patterns/README.md b/my-patterns/README.md index f504d328..5e9b14c4 100644 --- a/my-patterns/README.md +++ b/my-patterns/README.md @@ -2,9 +2,10 @@ This directory can be used to save your own patterns. -0. fork the strudel repo -1. Save one or more .txt files here. -2. and run `npm run repl` +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/my-patterns` ! ## deploy From 1286468d5a98c346b4bd650f37853e0196c188b2 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 1 Jan 2023 12:11:39 +0100 Subject: [PATCH 2/4] 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 Date: Sun, 1 Jan 2023 12:18:46 +0100 Subject: [PATCH 3/4] 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) => { From 7a964360852ca107fd891f35f14032803df8f700 Mon Sep 17 00:00:00 2001 From: Alex McLean Date: Sun, 1 Jan 2023 11:34:11 +0000 Subject: [PATCH 4/4] move /my-patterns to /swatch (#338) --- my-patterns/README.md | 11 +++++++---- .../src/pages/{my-patterns => swatch}/[name].png.js | 0 website/src/pages/{my-patterns => swatch}/index.astro | 0 .../src/pages/{my-patterns => swatch}/list.json.js | 0 4 files changed, 7 insertions(+), 4 deletions(-) rename website/src/pages/{my-patterns => swatch}/[name].png.js (100%) rename website/src/pages/{my-patterns => swatch}/index.astro (100%) rename website/src/pages/{my-patterns => swatch}/list.json.js (100%) diff --git a/my-patterns/README.md b/my-patterns/README.md index 5e9b14c4..c2ad8d40 100644 --- a/my-patterns/README.md +++ b/my-patterns/README.md @@ -1,17 +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 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/my-patterns` ! +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 `.github.io/strudel` 3. edit `website/astro.config.mjs` to use site: `.github.io/strudel` and base `/strudel` -4. go to Actions -> "Build and Deploy" and click "Run workflow" -5. view your patterns at `.github.io/strudel/my-patterns` +4. go to Actions -> `Build and Deploy` and click `Run workflow` +5. view your patterns at `.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). diff --git a/website/src/pages/my-patterns/[name].png.js b/website/src/pages/swatch/[name].png.js similarity index 100% rename from website/src/pages/my-patterns/[name].png.js rename to website/src/pages/swatch/[name].png.js diff --git a/website/src/pages/my-patterns/index.astro b/website/src/pages/swatch/index.astro similarity index 100% rename from website/src/pages/my-patterns/index.astro rename to website/src/pages/swatch/index.astro diff --git a/website/src/pages/my-patterns/list.json.js b/website/src/pages/swatch/list.json.js similarity index 100% rename from website/src/pages/my-patterns/list.json.js rename to website/src/pages/swatch/list.json.js