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
  [p5.js 2.0 RFC Proposal]: Functional core and modular build processing/p5.js#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: Refactor color and add support for oklch #24
  [p5.js 2.0 RFC Proposal]: Color module rewrite processing/p5.js#7018
  Support for new high definition color spaces.  processing/p5.js#6190

• q5's createCanvas has canvas context attribute support (enabling users to choose the canvas' colorSpace)
  [p5.js 2.0 RFC Proposal]: Allow access to context attributes in renderers processing/p5.js#6781

• q5's bundle size is already 70x smaller than p5 unminified and q5.min is 20x smaller than p5.min
  [p5.js 2.0 RFC Proposal]: Minimize bundle sizes processing/p5.js#6776
  Minimising p5.min.js further for production processing/p5.js#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. async load function #45
  [p5.js 2.0 RFC Proposal]: Async/Await setup() processing/p5.js#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.
  [p5.js 2.0 RFC Proposal]: Pruning processing/p5.js#7090

• q5's askAI() provides improved debugging support compared to the FES
  [p5.js 2.0 RFC Proposal] : AI-powered Assistance for a More Accessible P5.js processing/p5.js#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!
  

  q5.js/src/q5-2d-drawing.js

  Line 508 in 8692fa4

  $.inFill = (x, y) => {

  
  Hit detection on 2D Shapes processing/p5.js#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
  noiseMode(SIMPLEX)? processing/p5.js#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
  Rotated text rendering has huge performance cost processing/p5.js#6427

• q5 has opacity(globalAlpha)
  Ability to change global opacity (similar to tint(255, alpha) for images, but for all shapes) processing/p5.js#6756

• issue does not occur in q5
  textAlign(CENTER, CENTER) does not vertically center user-loaded fonts processing/p5.js#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: processing/p5.js#6015
PR merged Feb 25, 2023: processing/p5.js#6015 (review)
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: processing/p5.js#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. ☺️