q5.js is a spiritual successor to the p5.js and Processing Java graphics libraries.
It was designed to make creative coding 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 up to 32x more per frame with q5 WebGPU, compared to the limits of p5. Or save battery by getting the same results with less power consumption. ðą
No installation required! Use an online code editor with one of these q5.js template projects: OpenProcessing, Aijs, or CodePen. ðïļ
The future of creative coding is here! Join us on the q5 community Discord. ð
You can use q5 offline or add this to your HTML file to always load the latest version.
<script src="https://q5js.org/q5.js"></script>
Support the development of q5 on Patreon or GitHub Sponsors.
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. ðū
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 codebase.
q5.js v2 is open source under the LGPLv3, created and actively maintained by the q5 team: @quinton-ashley and @Tezumie.