q5.js is a new implementation of the p5 API that's performance optimized and packed with additional features to make creative coding even more fun and accessible.
q5 works out of the box with your existing p5 2D sketches. It even supports popular libraries like p5.sound and p5play.
In p5, bright colors can look dull on modern devices 😕
q5 empowers artists with a wider range of colors 🤩
In p5, making interactive sketches can be tough for beginners. 😩
With q5, use inFill to check if the mouse is hovering on the most recently drawn shape. 🎯
With the flexibleCanvas function you can scale your art to any canvas size. A game changer for
generative artists! 🌱
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! 👀
new Q5();
createCanvas(400, 400);
p5.sound is a great library but typical use doesn't require its extensive sound generation and filtering features. 🎛️
That's why 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 74kb, that's 70x smaller. 🌳
For extremely lightweight use, load only the features you need from q5's source folder. 📦
<script src="https://q5js.org/src/q5-core.js">
<script src="https://q5js.org/src/q5-2d-canvas.js">
<script src="https://q5js.org/src/q5-2d-drawing.js">
The displayMode function lets you customize how your canvas is presented. 📽️
Make it "centered", "maxed", or "fullscreen" without clipping or changing the aspect ratio. Use the "pixelated" rendering preset to make pixel art. 👾
We're working on next-gen rendering modules for q5 that use WebGPU for blazing fast drawing. Stay tuned! 🏎️
Start coding with the q5.js template for the Aijs online code editor. 🖌️
Full documentation is coming soon, for now see q5's GitHub README.
<script src="https://q5js.org/q5.js"></script>
q5 is also available on npm. 📦
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 Contributor Code of Conduct and 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 and Lauren McCarthy's work on p5.js.
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.