q5.js is a spiritual successor to the p5.js and Processing Java graphics libraries.
The q5 team aims to make creative coding even more fun and accessible for a new generation of artists, designers, educators, and beginners!
If you're already familiar with p5, you'll find yourself right at home with q5. It's also compatible with popular addons, including p5.sound and p5play.
q5 is performance optimized for the modern web. Create interactive art that runs in real-time on more devices than ever before. 🏎️
Draw 16x more per frame with q5 WebGPU, compared to the limit of p5 WebGL. Or save battery by getting the same results with less power consumption. 🌱
In p5, bright colors can look dull 😕
q5 empowers artists with HDR color support 🤩
Why doesn't this code work? text('Hello!') 🤔
p5's error messages are often too vague, leaving users searching for help. 🙋
🌸 p5.js says: [test.js, line 19] text() was expecting at least 3 arguments, but received only 1.
Run q5's askAI() before code that isn't working as expected. 🤖
The `text` function requires the x and y coordinates where the text should be drawn to the canvas.
text('Hello!', 50, 50);
Q5 instances can be created manually, which makes the setup function optional. Use q5 functions anywhere with top-level global mode! 👀
new Q5();
createCanvas(400, 400);
p5.sound is a great library, but typical use doesn't require its extensive sound generation and filtering features. 🎛️
q5.js includes sound loading, playback, and basic mixing by default. 🎚️
p5.js and p5.sound.js have a combined size of 5.6MB! ⚠️
q5.js is only 111kb, that's 98% smaller. 🌳
For extremely lightweight use, load only the features you need from the q5 source folder. 📦
The displayMode function lets you frame your art within the browser window, no CSS skills required! 📽️
Make it "centered", "maxed", or "fullscreen" without clipping or changing the aspect ratio. Use the "pixelated" rendering preset to make pixel art. 👾
Start coding with the q5.js template for the Aijs online code editor. 🖌️
Use q5.js in your own project by adding this line to your HTML file:
<script src="https://q5js.org/q5.js"></script>
Full documentation is coming soon, for now see q5's GitHub README.
The future of creative coding is here! Join us on the q5 community Discord. 🗺️
If you'd like to work on q5.js, check out our Project Planning Board.
This project aims to be the spiritual successor to the invaluable work done by Ben Fry and Casey Reas on Java Processing, Lauren McCarthy's work on p5.js, and all contributors to these projects.
The original q5xjs (v0) was created by @LingDong~ and released under the public domain Unlicense license. We forked and significantly extended his brilliant codebase!
q5.js v2 is open source under the LGPLv3, created and actively maintained by the q5 team: @quinton-ashley and @Tezumie.