From 81885648a61f1f93fa0cbc26b497901735362e75 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Thu, 5 Oct 2023 18:24:11 -0400 Subject: [PATCH 01/11] adding a runtime-generated favicon, just because I can --- index.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 06ea0df..ebac7ec 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,9 @@ + - 🎊 + canvas confetti @@ -973,6 +974,21 @@

Custom Canvas }; + + From 2c94fa54f453348457351f044ae73cce04cffe95 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Thu, 5 Oct 2023 18:32:14 -0400 Subject: [PATCH 02/11] putting stars after fireworks, I think it tells a better story --- index.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index ebac7ec..84f9ad2 100644 --- a/index.html +++ b/index.html @@ -418,10 +418,10 @@

Realistic Look

-
+
-

Stars

+

Fireworks

- You can combine multiple calls to confetti with any settings in order to create - a more complex effect. Go ahead, combine different shapes, sizes, etc. Stagger them - for an extra boost of excitement. + Why click a button repeatedly when you can have code do it for you? Shoot some firework + of confetti from the sides of page so you can still read the content in the center.

-

✨ Celebrate with a burst of stars! ✨

@@ -443,10 +441,10 @@

Stars

-
+
-

Fireworks

+

Stars

- Why click a button repeatedly when you can have code do it for you? Shoot some firework - of confetti from the sides of page so you can still read the content in the center. + You can combine multiple calls to confetti with any settings in order to create + a more complex effect. Go ahead, combine different shapes, sizes, etc. Stagger them + for an extra boost of excitement.

+

✨ Celebrate with a burst of stars! ✨

From 40d79fab01134a9890f32db81fcddbaa9240d555 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Thu, 5 Oct 2023 18:33:29 -0400 Subject: [PATCH 03/11] using a bit more of a compelling paths demo --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 84f9ad2..adda244 100644 --- a/index.html +++ b/index.html @@ -860,10 +860,10 @@

Custom Canvas var defaults = { scalar: 2, - spread: 270, - particleCount: 25, - origin: { y: 0.4 }, - startVelocity: 35 + spread: 180, + particleCount: 30, + origin: { y: -0.1 }, + startVelocity: -35 }; confetti({ From 799a9f2779ed51f6e50e51dbd63aeea9a8a15c2a Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Fri, 6 Oct 2023 11:38:49 -0400 Subject: [PATCH 04/11] logging all network interfaces, for convenience --- build/serve.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/build/serve.js b/build/serve.js index 65be6af..8dd302d 100644 --- a/build/serve.js +++ b/build/serve.js @@ -2,6 +2,7 @@ const path = require('path'); const http = require('http'); const send = require('send'); const root = require('rootrequire'); +const { networkInterfaces } = require('os'); const PORT = 9001; @@ -25,7 +26,13 @@ http.createServer(function (req, res) { send(req, file).pipe(res); }).listen(PORT, () => { - console.log(`listening at http://localhost:${PORT}`); + console.log('listening at:'); + console.log(` http://localhost:${PORT}`); + + Object.values(networkInterfaces()) + .reduce((memo, value) => [...memo, ...value], []) + .filter(value => value.family === 'IPv4') + .forEach(({ address }) => console.log(` http://${address}:${PORT}`)); }); From ec6c0f5c2408bfb79f19c2509b794f67a7670737 Mon Sep 17 00:00:00 2001 From: Muzakir Shah Date: Sun, 8 Oct 2023 14:46:14 +0500 Subject: [PATCH 05/11] Smooth Scroll Added smooth scroll transition --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index adda244..60b68a9 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,10 @@ [data-theme="light"][auto-theme] { --theme-switch: var(--switch-auto-black); } + + html { + scroll-behavior: smooth; + } html, body { margin: 0; From 344f86f6eb94862cb7231620792b4a3cbd53be59 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Mon, 16 Oct 2023 00:58:32 -0400 Subject: [PATCH 06/11] Update index.html fixing whitespace issue --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 60b68a9..e2941f9 100644 --- a/index.html +++ b/index.html @@ -52,8 +52,8 @@ } html { - scroll-behavior: smooth; - } + scroll-behavior: smooth; + } html, body { margin: 0; From 37ce50e7f21c07547df0433ac1da1b37c500530c Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Thu, 5 Oct 2023 18:15:02 -0400 Subject: [PATCH 07/11] upload artifacts on failed builds... that's really when we need them --- .github/workflows/ci.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index afe41f9..93a851d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -26,6 +26,7 @@ jobs: env: NODE_AUTH_TOKEN: ${{secrets.npm_token}} - uses: actions/upload-artifact@v3 + if: ${{ failure() }} with: name: test-screenshots path: shots/ From 8f51f9117da24925a5f24b24ffe97e059049d3a1 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Tue, 14 Nov 2023 01:07:54 -0500 Subject: [PATCH 08/11] on safari, draw the bitmap to a canvas, since it cannot create a pattern from an ImageBitmap bonus points... it will automatically get the fast implementation once safari gets their act together --- src/confetti.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/src/confetti.js b/src/confetti.js index 8228400..6b310ee 100644 --- a/src/confetti.js +++ b/src/confetti.js @@ -11,6 +11,20 @@ global.URL.createObjectURL); var canUsePaths = typeof Path2D === 'function' && typeof DOMMatrix === 'function'; + var canDrawBitmap = (function () { + var canvas = new OffscreenCanvas(1, 1); + var ctx = canvas.getContext('2d'); + ctx.fillRect(0, 0, 1, 1); + var bitmap = canvas.transferToImageBitmap(); + + try { + ctx.createPattern(bitmap, 'no-repeat'); + } catch (e) { + return false; + } + + return true; + })(); function noop() {} @@ -29,6 +43,36 @@ return null; } + var bitmapMapper = (function (skipTransform, map) { + // see https://github.com/catdad/canvas-confetti/issues/209 + // creating canvases is actually pretty expensive, so we should create a + // 1:1 map for bitmap:canvas, so that we can animate the confetti in + // a performant manner, but also not store them forever so that we don't + // have a memory leak + return { + transform: function(bitmap) { + if (skipTransform) { + return bitmap; + } + + if (map.has(bitmap)) { + return map.get(bitmap); + } + + var canvas = new OffscreenCanvas(bitmap.width, bitmap.height); + var ctx = canvas.getContext('2d'); + ctx.drawImage(bitmap, 0, 0); + + map.set(bitmap, canvas); + + return canvas; + }, + clear: function () { + map.clear(); + } + }; + })(canDrawBitmap, new Map()); + var raf = (function () { var TIME = Math.floor(1000 / 60); var frame, cancel; @@ -101,6 +145,9 @@ worker.removeEventListener('message', workerDone); prom = null; + + bitmapMapper.clear(); + done(); resolve(); } @@ -375,7 +422,7 @@ // apply the transform matrix from the confetti shape matrix.multiplySelf(new DOMMatrix(fetti.shape.matrix)); - var pattern = context.createPattern(fetti.shape.bitmap, 'no-repeat'); + var pattern = context.createPattern(bitmapMapper.transform(fetti.shape.bitmap), 'no-repeat'); pattern.setTransform(matrix); context.globalAlpha = (1 - progress); @@ -435,6 +482,7 @@ animationFrame = destroy = null; context.clearRect(0, 0, size.width, size.height); + bitmapMapper.clear(); done(); resolve(); From 015c91a8bd99d5255e2055952aaf55dc4e5c1045 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Wed, 15 Nov 2023 00:52:19 -0500 Subject: [PATCH 09/11] fixing lint issue --- src/confetti.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/confetti.js b/src/confetti.js index 6b310ee..4597483 100644 --- a/src/confetti.js +++ b/src/confetti.js @@ -1,3 +1,5 @@ +/* globals Map */ + (function main(global, module, isWorker, workerSize) { var canUseWorker = !!( global.Worker && From 2077941c29da3762903522240679be05b6b11444 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Wed, 15 Nov 2023 00:59:42 -0500 Subject: [PATCH 10/11] fixing ssr support --- src/confetti.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/confetti.js b/src/confetti.js index 4597483..a67a345 100644 --- a/src/confetti.js +++ b/src/confetti.js @@ -14,6 +14,11 @@ var canUsePaths = typeof Path2D === 'function' && typeof DOMMatrix === 'function'; var canDrawBitmap = (function () { + // this mostly supports ssr + if (!global.OffscreenCanvas) { + return false; + } + var canvas = new OffscreenCanvas(1, 1); var ctx = canvas.getContext('2d'); ctx.fillRect(0, 0, 1, 1); From 7b22513efa7991d55be3c608fab2f350ad717465 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Thu, 16 Nov 2023 00:33:46 -0500 Subject: [PATCH 11/11] bumping version to 1.9.1 --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 69ba290..bc6dc4b 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ You can then `require('canvas-confetti');` to use it in your project build. _Not You can also include this library in your HTML page directly from a CDN: ```html - + ``` _Note: you should use the latest version at the time that you include your project. You can see all versions [on the releases page](https://github.com/catdad/canvas-confetti/releases)._ diff --git a/package.json b/package.json index 07a2a3a..df632ed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "canvas-confetti", - "version": "1.9.0", + "version": "1.9.1", "description": "performant confetti animation in the browser", "main": "src/confetti.js", "module": "dist/confetti.module.mjs",