Make q5 modular! v2.0 release

[quinton-ashley]

I've broken q5 up into the smallest useful modules which are in the src folder. This is great for organizational purposes and also for extremely lightweight use in which users only need to load the modules necessary for a particular sketch to run.

Modules will load via side effects to keep things simple for students.

[quinton-ashley]

@Tezumie to make modular use more viable I've figured out some ways to avoid modules from being as dependent on other modules.

Some drawing operations in q5-2d-drawing require TAU (two PI) so I moved it from q5-math to q5-core.

fill, stroke, and background can now be used without q5-color, users would just need to use css color format strings as input to these functions.

[quinton-ashley]

q5.js v2.0 released!

[quinton-ashley]

Today I'm inviting contributors to p5.js to take a look at q5.js v2.0 😄 @Qianqianye @limzykenneth @davepagurek @nickmcintyre @mattdesl @GregStanton @curran @mvicky2592 @lee2sman @multimonos @hiddenenigma @bojidar-bg @RandomGamingDev @ceilTempest @dhowe @kaitabuchi314 @hellonearthis @Vishal2002 @kjhollen @SableRaf @lindapaiste @shiffman @msawired @monolithMktg

https://q5js.org 👀

Many of the features planned for p5 2.0 that you've requested have already been implemented in q5! 🎉

• modular design with a functional core that additional modules can attach to https://github.com/processing/p5.js/issues/7014

• a rewritten color module that has support for HDR colors and enables users to change color components via property editing which is idiomatic to JavaScript. functions like fill and stroke support css color strings. For more info see: #24 https://github.com/processing/p5.js/issues/7018 https://github.com/processing/p5.js/issues/6190

• q5's createCanvas has canvas context attribute support (enabling users to choose the canvas' colorSpace) https://github.com/processing/p5.js/issues/6781

• q5's bundle size is already 70x smaller than p5 unminified and q5.min is 20x smaller than p5.min https://github.com/processing/p5.js/issues/6776 https://github.com/processing/p5.js/issues/5740

• async/await is supported in setup and can already be used with fetch. I also like the idea of a simple load function which I'll implement soon. #45 https://github.com/processing/p5.js/issues/6767

• q5 has already pruned the suggested items, many of which made sense in Java Processing but were not idiomatic to JavaScript from the start. the http functions were pruned in q5 because users can now use fetch instead. Color functions like red, green, and blue were made obsolete in q5 by color instance property editing, for example colorInst.r = 50 to change the amount of red. https://github.com/processing/p5.js/issues/7090

• q5's askAI() provides improved debugging support compared to the FES https://github.com/processing/p5.js/issues/6888

Other p5 issues not planned for p5 2.0:

• My implementation of hit detection for 2D shapes inFill and inStroke is much simpler than the way this issue poster suggested but to credit them I'd never heard of those canvas2d methods before so thank you! https://github.com/q5js/q5.js/blob/8692fa40eee1f3f4943e2b944128ef9d430ee28e/src/q5-2d-drawing.js#L508 https://github.com/processing/p5.js/issues/7081

• Added noiseMode and simplex noise. Also the existing p5 noise is not actually perlin noise, if you view it at one octave it looks nothing like perlin noise, the implementation is incorrect, I renamed in "blocky" noise. It's still nice to use for generating noise with only one or two iterative inputs. @Tezumie correctly implemented Q5.PerlinNoise which is the default noise algorithm in q5. He also made simplex noise. https://github.com/q5js/q5.js/blob/main/src/q5-math.js https://github.com/q5js/q5.js/blob/main/src/q5-noisier.js https://github.com/processing/p5.js/issues/6152

• q5 supports cached rendering of rotated text and a user facing function createTextImage and textImage for displaying them. This is my own issue, which is admittedly a bit niche. Real world case is if p5play users make a game in which a lot of rotated gamer tags are displayed. Although I've found some more widely appealing use cases for creating text images in creating emoji images for p5play sprites. Students are loving it! https://p5play.org/learn/sprite.html?page=2 https://github.com/processing/p5.js/issues/6427

• q5 has opacity(globalAlpha) https://github.com/processing/p5.js/issues/6756

• issue does not occur in q5 https://github.com/processing/p5.js/issues/6593

I'm excited to see some of these features that I felt were long overdue come to p5.js in the future.

[quinton-ashley]

Is q5js hoping to replace p5js, or be another (better) version of it that will be developed along p5?

@kaitabuchi314 I don't think that q5 will replace p5. I would say that our goals in developing q5 (performance, brevity, and simplicity) are just better aligned with what game devs and generative artists want out of a p5 style framework.

I started q5 in part because I was frustrated that it took five months for a simple bug fix that I made (literally just moving two lines of code) to make it into a mainline release of p5.

PR submitted Feb 12, 2023: https://github.com/processing/p5.js/pull/6015 PR merged Feb 25, 2023: https://github.com/processing/p5.js/pull/6015#pullrequestreview-1314596469 Released July 10, 2023: https://github.com/processing/p5.js/releases/tag/v1.7.0

Same problem this year fixing deltaTime:

PR submitted Feb 1, 2024: https://github.com/processing/p5.js/pull/6785 PR merged May 28, 2024 and still not released after 5 months

Obviously p5play wouldn't exist without p5 but I also began to see relying solely on p5 as a liability after my bad experience as a contributor.

I think as a smaller team Tezumie and I were able to implement all these 2.0 features quicker than a large bureaucratic organization like TPF can.

[RandomGamingDev]

I don't think that q5 will replace p5. I would say that our goals in developing q5 (performance, brevity, and simplicity) are just better aligned with what game devs and generative artists want out of a p5 style framework. I started q5 in part because I was frustrated that it took five months for a simple bug fix that I made (literally just moving two lines of code) to make it into a mainline release of p5.

I second this as my experiences with p5.js have gone similarly, although maybe not as badly as yours.

[quinton-ashley]

maybe not as badly as yours.

I'd hope not! haha

[kjhollen]

hi @quinton-ashley, I'm not affiliated with this project and ask that you please stop tagging me in issues. Thanks!

[quinton-ashley]

@kjhollen no problem, just letting everyone know the features they've requested to be implemented in p5 have already been implemented in q5 so they don't have to wait. ☺️