A sequel to p5.js! πŸŽ‰

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.

Blazing fast! πŸš€

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

More vibrant colors! 🎨

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

q5 empowers artists with HDR color support 🀩

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 with top-level global mode! πŸ‘€

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. πŸŽ›οΈ

q5.js includes sound 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 111kb, that's 98% smaller. 🌳

For extremely lightweight use, load only the features you need from the q5 source folder. πŸ“¦

Frame your Art πŸ–ΌοΈ

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

No Installation Required! πŸ’»

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.

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