A minimal toast notification addon for p5.js v2.
In your sketch's index.html, add three <script> tags inside <head>, in this order:
<script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@nbogie/p5.toast/dist/p5.toast.js"></script>
<script src="sketch.js"></script>The order matters: p5 itself has to load first, then p5.toast (which plugs itself into p5), then your own sketch.
Then in sketch.js you can call toast() like any other p5 function:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
function mousePressed() {
toast("hello");
}The URL above always resolves to the latest published version, which means a future release could change behaviour under your sketch. To pin to a specific version, append @<version> to the package name:
<script src="https://cdn.jsdelivr.net/npm/@nbogie/p5.toast@0.0.1/dist/p5.toast.js"></script>You can also pin by major or minor (e.g. @nbogie/p5.toast@0 or @nbogie/p5.toast@0.0), which lets you pick up bug-fix releases without unexpected breaking changes.
- No instance mode support. Only designed for p5 global mode. (Assumes one sketch on page (or, at least, one per iframe)).
- Currently positions toasts in top right of the document body, not the top right of the canvas.
- No user-specified colours/styles.
npm installThe example sketch under example/ loads the built bundle from dist/, so a build needs to exist before the example will work.
For iterative development, run two terminals:
npm run build:watch # rebuilds dist/ on changes to src/npm run dev # starts the Vite dev server for example/Edit src/p5.toast.js; the watcher rewrites dist/, and refreshing the browser picks up the new bundle.
For a one-off check, you can instead run npm run build once and then npm run dev.
example/index.html loads three scripts in this order:
p5.min.js(CDN) — defineswindow.p5.../dist/p5.toast.js— the IIFE bundle, which callsp5.registerAddon(toastAddon)at script-eval time../sketch.js— definessetup/draw/ etc. onwindow.
p5 v2 auto-starts on window.load, so by the time setup() runs the addon is registered and any methods attached to fn are available as globals.
npm run buildProduces, in dist/:
p5.toast.js— IIFE bundle, unminified, for<script>use.p5.toast.mjs— ESM bundle, forimportuse.
I've used AI to make the addon scaffold, vite config, readme, and package.json, and then done the actual toast functionality myself for practice. I might get tired of that and just use AI for maintenance, we'll see.
I'm not interested in AI-generated PRs. Nor in adding a whole lot of fancy functionality. However, you're welcome to fork the code and make your own addon which does what you want!