I’ve coded a command line utility that remotely grabs the “q5.js” library file and creates a “q5.mjs” ECMAScript Module (ESM) version of it, allowing us to use JS keyword import to load it directly in our sketch files w/o polluting the global namespace:
import Q5 from "./q5.mjs";
q5*js is a lighter alternative for the p5*js
Download & detailed instructions are found in this “GitHub Gist” link below:
README.md
`q5js_to_esm.mjs`
---
🚀 Convert the `q5.js` library into an ECMAScript Module (ESM) with ease!
This script reads the local q5.js file from subfolder `q5` or fetches it from a remote source,
applies customizable string replacement patterns, and generates the resulting `q5.mjs` file
in subfolder `q5`.
## 📜 Features
- **Local or Remote Input**: Automatically handles local files or fetches from a remote URL.show original
q5.loader.js
void function () {
import('./q5.mjs').then(module => {
globalThis.Q5 ||= module.default;
globalThis.p5 ||= module.p5;
globalThis.createCanvas ||= module.createCanvas;
if ('document' in globalThis && !Q5._hasGlobal) new Q5('auto');
}, console.error)
}();q5js_to_esm.mjs
#!/usr/bin/env node
// @ts-check
/**
* q5js to ESM q5mjs [Node.js] (v1.0.3)
* GoToLoop (2025/Mar/31)
*
* https://Gist.GitHub.com/GoToLoop/f3787d5ceab12ad5e1d26cca083f40df
* https://Discourse.Processing.org/t/q5-js-esm-converter/46131show original
And btW, this is the GitHub discussion that’s led me to create this command line converter utility:
opened 04:02AM - 28 Mar 25 UTC
closed 10:16AM - 28 Mar 25 UTC
I usually use p5 and Vite to make music visualizer for my music.
I heard about a… nd q5.js, and I tried to use that, but `Q5` does not have method such as `createCanvas`, while global namespace does.
It would be good if there is an another entrypoint that does not set anything on global namespace, but export the Q5 class, which works like this:
```ts
import { Q5 } from "q5/esm";
const q = new Q5("instance");
q.setup = () => {
q.createCanvas(...);
};
// and so on...
```
So that it would be easier to integrate q5 on normal page.
Reddit Cross-posts: