A sequel to p5.js! πŸŽ‰

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.

More vibrant colors! 🎨

In p5, bright colors can look dull on modern devices πŸ˜•

q5 empowers artists with HDR color support 🀩

More interactive πŸ§‘β€πŸ’»

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. 🎯

More flexible πŸ’ͺ

With the flexibleCanvas function you can scale your art to any canvas size. A game changer for generative artists! 🌱

More help for beginners ✨

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);

Dynamic πŸ™

Q5 instances can be created manually, which makes the setup function optional. Use q5 functions anywhere! πŸ‘€

new Q5();

createCanvas(400, 400);

Sound On πŸ”Š

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 sounds loading, playback, and basic mixing by default. 🎚️

Lightweight πŸͺΆ

p5.js and p5.sound.js have a combined size of 5.6MB! ⚠️

q5.js is only 74kb, that's 70x smaller. 🌳

Modular 🧩

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">

Frame your Art πŸ–ΌοΈ

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. πŸ‘Ύ

WebGPU πŸš€

We're working on next-gen rendering modules for q5 that use WebGPU for blazing fast drawing. Stay tuned! 🏎️

Get started! πŸ’»

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. πŸ“¦

Join our community 🀝

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.

Credits 🌟

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.