q5 1.9.46 → 1.9.67

package/README.md

@@ -4,7 +4,7 @@ The sequel to p5.js is here!
 
 **q5.js** implements all of [p5][]'s 2D drawing, math, and user input functionality.
 
-It's a drop-in replacement that's performance optimized and ~20x smaller than p5, while packing exclusive new features: HDR color support, modular use, top-level global mode, namespace mode, and text image caching.
+It's a drop-in replacement that's performance optimized and ~70x smaller than p5, while packing exclusive new features: HDR color support, modular use, top-level global mode, namespace mode, and text image caching.
 
 ## Typical Use
 
@@ -59,6 +59,8 @@ p5's error messages are friendlier but often too vague, leaving beginners search
 🌸 p5.js says: [test.js, line 19] text() was expecting at least 3 arguments, but received only 1.
 ```
 
+Why not ask ChatGPT 4o? It excels at identifying the most common errors that beginners make: typos, missing syntax, incorrect arguments, and more.
+
 q5 creates error reports that can be sent to an AI just by clicking a link! Users can also run the `askAI()` function before a line of code that isn't working as expected. 🤖
 
 ```js
@@ -83,7 +85,7 @@ In **p5**, functions like `rect` can't be used on the file level. They must be c
 In **q5**, existing p5 2D sketches don't require any modification. But if you initialize Q5 at the top of your sketch, the `preload` and `setup` functions become optional.
 
 ```js
-Q5();
+new Q5();
 
 noStroke();
 let c = color(0, 126, 255, 102);
@@ -94,7 +96,7 @@ rect(15, 15, 35, 70);
 This is great because you don't have to declare variables on the file level and then define them in `preload` or `setup`. You can declare and define them at the same time!
 
 ```js
-Q5();
+new Q5();
 
 let cow = loadImage('cow.png');
 
@@ -192,6 +194,46 @@ with (q) {
 }
 ```
 
+## Dimension Agnostic
+
+In **p5** the only way to do dimension agnostic sketches is to set variables to percentages of the canvas' width and height but this is cumbersome and makes code look messy.
+
+In **q5**, @Tezumie added a new feature called `flexibleCanvas`. It takes a unit as input, then any position coordinates or dimensions you use will be scaled based on that unit.
+
+In this example, the rect will appear in the middle of the canvas, regardless of its size.
+
+```js
+new Q5();
+createCanvas(1000, 1000);
+
+flexibleCanvas(400);
+rect(100, 100, 200, 200);
+```
+
+## Frame your Art
+
+The `displayMode` function lets you customize how your canvas is presented.
+
+```js
+displayMode(mode, renderQuality, displayScale);
+```
+
+Display modes:
+
+"normal": no styling to canvas or its parent element
+"centered": canvas will be centered horizontally and vertically within its parent and if it's display size is bigger than its parent it will not clip
+"maxed": canvas will fill the parent element, same as fullscreen for a global mode canvas inside a `main` element
+"fullscreen": canvas will fill the screen with letterboxing to persevere its aspect ratio, like css object-fit contain
+
+Render qualities:
+
+"default": pixelDensity set to displayDensity
+"pixelated": pixelDensity set to 1 and various css styles are applied to the canvas to make it render without image smoothing
+
+displayScale:
+
+Can be given as a string "x2" or a number. This can be used to make small canvases appear larger.
+
 ## Node.js Usage
 
 > Node.js support was recently added, please [make an issue report][] if you encounter any problems.
@@ -212,7 +254,7 @@ In node.js, q5's automatic global mode is disabled. To use global mode you need
 
 **p5.js** is nearly 5MB in size. This is mainly [due to the inclusion of the webgl render and the dependencies corejs and opentype](https://github.com/processing/p5.js/issues/6776#issuecomment-1918238317). If 2d rendering is all a sketch needs, p5 wastes user bandwidth and is slower to load, parse, and run.
 
-**q5.js** (the default bundle) is 20x smaller than p5, which is already great for typical use. For extremely lightweight use you can load a subset of scripts from the `src` folder, just be sure to load `src/q5-core.js` first.
+**q5.js** (the default bundle) is 70x smaller than p5, which is already great for typical use. For extremely lightweight use you can load a subset of scripts from the `src` folder, just be sure to load `src/q5-core.js` first.
 
 ## Motivation: Part 1
 
@@ -246,10 +288,6 @@ Thanks in large part to @LingDong-'s design, q5 is well organized, concise, and
 
 ## More exclusive features
 
-Features added by @Tezumie:
-
-- `point()`: more efficient point drawing.
-
 Features added by @quinton-ashley:
 
 - `image.trim()`: removes transparent pixels from the edges of an image.
@@ -273,15 +311,15 @@ Features added by @LingDong-:
 
 Unminified:
 
-- p5.js **4958kb** ⚠️
+- p5.js **5112kb** ⚠️
 - p5.sound.js 488kb
-- q5.js 71kb
+- q5.js 74kb
 
 Minified:
 
-- p5.min.js 1033kb ⚠️
+- p5.min.js 1034kb ⚠️
 - p5.sound.min.js 200kb
-- q5.min.js **45kb** 🎉
+- q5.min.js **48kb** 🎉
 
 ## Benchmarks
 
@@ -328,9 +366,7 @@ All contributors are required to check their ego at the door and be open to feed
 
 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.
 
-Check out the q5 project planning board:
-
-https://github.com/users/quinton-ashley/projects/4/views/1
+Check out the [q5 planning board](https://github.com/orgs/q5js/projects/1/views/1).
 
 ## Organization
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "1.9.46",
+	"version": "1.9.67",
 	"description": "The sequel to p5.js that's smaller and faster",
 	"author": "quinton-ashley",
 	"contributors": [
@@ -11,7 +11,7 @@
 	"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-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": "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",
 		"v": "npm version patch --force",