2.1.0

.gitignore

@@ -1,6 +1,7 @@
 dev/assets
 dev/tests
 dev/test.js
+dev/test-p5.js
 node_modules
 package-lock.json
 jsconfig.json

.npmignore

@@ -5,6 +5,7 @@ home
 lang
 learn
 node_modules
+tests
 package-lock.json
 index.html
 jsconfig.json

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"liveServer.settings.port": 5501
+}

CODE_OF_CONDUCT.md

@@ -1,7 +1,7 @@
 ## Code of Conduct
 
-We aim to make contributing to the q5 project more approachable for non-experts by using modern JavaScript without any complicated build tools or frameworks.
+We aim to make contributing to the q5 project more approachable for non-experts by using modern JavaScript, without any complicated build tools or frameworks.
 
 All contributors are required to check their ego at the door and be open to feedback. Critique of code is not a critique of the person who wrote it. We're all here to learn and work with others to collectively write the best code possible.
 
-Code is a language art that can be subjectively judged by its effectiveness at communicating its functionality to humans. Code can also be objectively measured by its performance. Since JavaScript is served over a network, size is a factor as well. Therefore, the q5 team strives to balance code readability with brevity and performance.
+The q5 team would like to foster a pleasant, diverse community built upon a mutual desire to create art. Yet, we also welcome those with strong opinions to share them, without fear of being censored or banned.

README.md

@@ -314,7 +314,7 @@ Features added by @quinton-ashley:
 - `opacity(globalAlpha)`: set the opacity multiplier for anything subsequently drawn to the canvas in a range between 0 (transparent) and 1 (opaque).
 - `textCache(enabled)`: Text image caching is enabled by default. Rotated text is only rendered once, and then cached as an image. This can result in ridiculously high 90x performance boosts for text-heavy sketches. Users don't need to change their code, the `text` function can be used as normal, q5 takes care of everything behind the scenes.
 - `createImage`, `loadImage`, and `createGraphics`: as a last parameter to these functions, `opt` (options) object, users can specify canvas context attributes for an image or graphic. `opt.alpha` is set to true by default.
-- `loadSound(file)`: Returns a Web Audio object with `setVolume()` and `setLoop()` functions added to it. Not as powerful as p5.sound, but it's good enough in some cases.
+- `loadSound(file)`: Returns a Web Audio object with some basic functions added for changing the volume, setting the panning, and checking if the sound is loaded. Good enough in most cases.
 - `ctx`: an instance level alias for `drawingContext`
 
 Features added by @LingDong-:
@@ -325,12 +325,13 @@ Features added by @LingDong-:
 
 ## Porting from p5.js
 
-- `createCanvas` must be run before any rendering functions are called. It can be run in `preload`. If it's not run before the draw loop starts, then q5 will run `createCanvas(100, 100)` automatically.
-- `colorMode` supports 'rgb', 'srgb', and 'oklch'. Color modes like hsv are outdated, OKLCH is superior.
+- `createCanvas` must be run before any rendering functions are called. Unlike in p5, it can be run anytime after a `Q5` instance is created, even in `preload`. If `noCanvas` isn't run before the draw loop starts, then q5 will run `createCanvas(100, 100)` automatically.
+- `loadImage` and other loading functions don't support a failure callback. If the image fails to load, q5 will throw an error.
+- `colorMode` supports 'rgb', 'srgb', and 'oklch'. Other color modes, like hsv, are so outdated they're obsolete.
 - `color` function only accepts numeric input, hex, and common named colors. It doesn't parse strings like `color('hsl(160, 100%, 50%)')`.
 - `fill`, `stroke`, and `background` can accept any CSS color string.
-- `colorMode` function only accepts "rgb", "srgb", or "oklch" because other formats that p5 still supports like hsv are obsolete.
 - `noise` function's default noise algorithm is perlin noise. p5's default noise is called "blocky" noise in q5 and using it requires loading the src/q5-noisier.js module.
+- `tint` doesn't change the opacity of an image, instead the tint's alpha value specifies how strong the tint should be using the "multiply" blend mode. To dynamically change the opacity of anything drawn to the canvas, use `opacity(globalAlpha)`.
 
 ## Size Comparison
 
@@ -385,11 +386,13 @@ Higher FPS (frames per second) is better.
 
 ## Contributing
 
+Please comment on issues before attempting to implement them!
+
 Check out the [q5 planning board](https://github.com/orgs/q5js/projects/1/views/1).
 
 If the q5 project is successful, all contributing developers will be paid for their work. The project will be run as a [worker co-op](https://en.wikipedia.org/wiki/Worker_cooperative).
 
-Contributors must agree to the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).
+Contributors must agree to the [code of conduct](CODE_OF_CONDUCT.md) and follow the [q5 code style guide](https://github.com/q5js/q5.js/wiki/q5-Code-Style-Guide).
 
 ## Licensing
 

dev/index.html

@@ -19,6 +19,7 @@
 <body>
 	<main></main>
 	<script src="/src/q5-core.js"></script>
+	<script src="/src/q5-canvas.js"></script>
 	<script src="/src/q5-2d-canvas.js"></script>
 	<script src="/src/q5-2d-drawing.js"></script>
 	<script src="/src/q5-2d-image.js"></script>
@@ -32,11 +33,18 @@
 	<script src="/src/q5-util.js"></script>
 	<script src="/src/q5-vector.js"></script>
 
+	<script src="/src/q5-webgpu-canvas.js"></script>
+	<script src="/src/q5-webgpu-drawing.js"></script>
+	<script src="/src/q5-webgpu-image.js"></script>
+	<script src="/src/q5-webgpu-text.js"></script>
+
 	<!-- <script src="/src/q5-dom.js"></script> -->
-	<script src="/src/q5-noisier.js"></script>
+	<!-- <script src="/src/q5-2d-soft-filters.js"></script> -->
+	<!-- <script src="/src/q5-noisier.js"></script> -->
 	<!-- <script src="/src/q5-sensors.js"></script> -->
 
-	<script src="test.js"></script>
+	<!-- <script src="test.js"></script> -->
+	<script type="module" src="test.js"></script>
 </body>
 
 </html>

home/index.html

@@ -281,8 +281,7 @@ <h2 id="modular-🧩">Modular 🧩</h2>
 				<p>For extremely lightweight use, load only the features you need from q5's <a
 						href="https://github.com/q5js/q5.js/tree/main/src" target="_blank">source folder</a>. 📦</p>
 				<pre><code class="language-html">&lt;script src="https://q5js.org/src/q5-core.js"&gt;
-&lt;script src="https://q5js.org/src/q5-2d-canvas.js"&gt;
-&lt;script src="https://q5js.org/src/q5-2d-drawing.js"&gt;
+&lt;script src="https://q5js.org/src/q5-input.js"&gt;
 </code></pre>
 			</md>
 			<md id="md10-4">

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.0.17",
+	"version": "2.1.0",
 	"description": "A sequel to p5.js that's smaller and faster",
 	"author": "quinton-ashley",
 	"contributors": [
@@ -11,9 +11,10 @@
 	"homepage": "https://q5js.org/home",
 	"main": "q5-server.js",
 	"scripts": {
-		"bundle": "cat src/q5-core.js src/q5-2d-canvas.js src/q5-2d-drawing.js src/q5-2d-image.js src/q5-2d-soft-filters.js src/q5-2d-text.js src/q5-ai.js src/q5-color.js src/q5-display.js src/q5-input.js src/q5-math.js src/q5-sound.js src/q5-util.js src/q5-vector.js > q5.js",
-		"min": "terser q5.js --compress ecma=2024 --mangle > q5.min.js",
-		"dist": "bun bundle && cp q5.js ../../web/p5play-web/v3/q5.js && bun min && cp q5.min.js ../../web/p5play-web/v3/q5.min.js",
+		"bundle": "cat src/q5-core.js src/q5-canvas.js src/q5-2d-canvas.js src/q5-2d-drawing.js src/q5-2d-image.js src/q5-2d-soft-filters.js src/q5-2d-text.js src/q5-ai.js src/q5-color.js src/q5-display.js src/q5-input.js src/q5-math.js src/q5-sound.js src/q5-util.js src/q5-vector.js > q5.js",
+		"bundle-webgpu": "cat src/q5-core.js src/q5-canvas.js src/q5-2d-canvas.js src/q5-2d-drawing.js src/q5-2d-image.js src/q5-2d-text.js src/q5-ai.js src/q5-color.js src/q5-display.js src/q5-input.js src/q5-math.js src/q5-sound.js src/q5-util.js src/q5-vector.js src/q5-webgpu-canvas.js src/q5-webgpu-drawing.js src/q5-webgpu-image.js src/q5-webgpu-text.js > q5-webgpu.js",
+		"min": "terser q5.js --compress ecma=2024 --mangle > q5.min.js && terser q5-webgpu.js --compress ecma=2024 --mangle > q5-webgpu.min.js",
+		"dist": "bun bundle && bun bundle-webgpu && cp q5.js ../../web/p5play-web/v3/q5.js && bun min && cp q5.min.js ../../web/p5play-web/v3/q5.min.js",
 		"v": "npm version patch --force",
 		"V": "npm version minor --force",
 		"version": "git add -A",