2.5.5

home/index.css

@@ -318,10 +318,6 @@ a {
 	width: 450px;
 }
 
-#md10-3 code {
-	font-size: 14px;
-}
-
 .minis md {
 	max-width: 45vw;
 }

home/main.js

@@ -8,6 +8,11 @@
 	mie.ready = () => {
 		mie.theme = pref;
 	};
+	mie.autoLoad = false;
+	(async () => {
+		await Q5.initWebGPU();
+		mie.load();
+	})();
 }
 
 function toggleDarkMode() {

home/mie.js

@@ -24,6 +24,7 @@ class MiniEditor {
 		for (let prop of attrs) {
 			props[prop] = script.getAttribute(prop) || true;
 		}
+		Object.assign(this, props);
 
 		let lines = props.lines || 0;
 		if (!lines) {
@@ -227,7 +228,7 @@ mie.load = () => {
 		console.log('mie will run without the ace editor, which was not loaded.');
 		mie.editorDisabled = true;
 	}
-	if (mie.autoLoad !== false) mie.loadMinis();
+	mie.loadMinis();
 	if (mie.ready) mie.ready();
 };
 
@@ -262,7 +263,7 @@ mie.lang.p5.play = function (code) {
 		with (p) eval(code);
 	}
 	this.previewElem.innerHTML = ''; // avoid duplicate canvases
-	return new p5(s, this.previewElem);
+	return new p5(s, this.previewElem, this.renderer);
 };
 
 mie.lang.p5.remove = function () {

lang/en/home/index.md

@@ -2,55 +2,47 @@
 
 ## A sequel to p5.js! 🎉
 
-q5.js is a new implementation of the [p5](https://p5js.org) API that's performance optimized and packed with additional features to make creative coding even more fun and accessible.
+**q5.js** is a spiritual successor to the [p5.js](https://p5js.org) and [Processing Java](https://processing.org/) graphics libraries.
 
-q5 works out of the box with your existing p5 2D sketches. It even supports popular libraries like [p5.sound](https://p5js.org/reference/#/libraries/p5.sound) and [p5play](https://p5play.org).
+The q5 team aims to make creative coding even more fun and accessible for a new generation of artists, designers, educators, and beginners!
 
-# 2-0
-
-## More vibrant colors! 🎨
+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](https://p5js.org/reference/#/libraries/p5.sound) and [p5play](https://p5play.org).
 
-# 2-1
+# 2-0
 
-In p5, bright colors can look dull on modern devices 😕
+## Blazing fast! 🚀
 
-# 2-2
+q5 is performance optimized for the modern web. Create interactive art that runs in real-time on more devices than ever before. 🏎️
 
-q5 empowers artists with [HDR color support](https://github.com/quinton-ashley/q5.js?tab=readme-ov-file#hdr-color-support) 🤩
+[Draw 16x more](https://github.com/q5js/q5.js/wiki/Developer-Log#q5js-webgpu-is-16x-faster-than-p5js-webgl--july-25-2024) per frame with [q5 WebGPU](https://developer.mozilla.org/docs/Web/API/WebGPU_API), compared to the limit of p5 WebGL. Or save battery by getting the same results with less power consumption. 🌱
 
 # 3-0
 
-## More interactive 🧑‍💻
+## More vibrant colors! 🎨
 
 # 3-1
 
-In p5, making interactive sketches can be tough for beginners. 😩
+In p5, bright colors can look dull 😕
 
 # 3-2
 
-With q5, use `inFill` to check if the mouse is hovering on the most recently drawn shape. 🎯
+q5 empowers artists with [HDR color support](https://github.com/quinton-ashley/q5.js?tab=readme-ov-file#hdr-color-support) 🤩
 
 # 4-0
 
-## More flexible 💪
-
-With the `flexibleCanvas` function you can scale your art to any canvas size. A game changer for generative artists! 🌱
-
-# 5-0
-
 ## More help for beginners ✨
 
 Why doesn't this code work? `text('Hello!')` 🤔
 
-# 5-1
+# 4-1
 
 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.
 ```
 
-# 5-2
+# 4-2
 
 Run q5's `askAI()` before code that isn't working as expected. 🤖
 
@@ -64,7 +56,7 @@ text('Hello!', 50, 50);
 
 ## Dynamic 🐙
 
-Q5 instances can be created manually, which makes the `setup` function optional. Use q5 functions anywhere! 👀
+Q5 instances can be created manually, which makes the `setup` function optional. Use q5 functions anywhere with [top-level global mode](https://github.com/q5js/q5.js/wiki/Top%E2%80%90Level-Global-Mode)! 👀
 
 ```js
 new Q5();
@@ -76,7 +68,7 @@ createCanvas(400, 400);
 
 ## Sound On 🔊
 
-[p5.sound](https://p5js.org/reference/#/libraries/p5.sound) is a great library but typical use doesn't require its extensive sound generation and filtering features. 🎛️
+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. 🎚️
 
@@ -86,56 +78,39 @@ q5.js includes sound loading, playback, and basic mixing by default. 🎚️
 
 p5.js and p5.sound.js have a combined size of 5.6MB! ⚠️
 
-q5.js is only 84kb, that's 98% smaller. 🌳
-
-# 10-3
+q5.js is only 111kb, that's 98% smaller. 🌳
 
-## Modular 🧩
+For extremely lightweight use, load only the features you need from the [q5 source folder](https://github.com/q5js/q5.js/tree/main/src). 📦
 
-For extremely lightweight use, load only the features you need from q5's [source folder](https://github.com/q5js/q5.js/tree/main/src). 📦
-
-```html
-<script src="https://q5js.org/src/q5-core.js">
-<script src="https://q5js.org/src/q5-input.js">
-```
-
-# 10-4
+# 10-3
 
 ## Frame your Art 🖼️
 
-The `displayMode` function lets you customize how your canvas is presented. 📽️
+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. 👾
 
-# 10-5
-
-## WebGPU 🚀
-
-We're working on [q5-webgpu rendering modules](https://github.com/q5js/q5.js/tree/main/src#webgpu-canvas) for blazing fast drawing, up to [16x faster](https://github.com/q5js/q5.js/wiki/Developer-Log#q5js-webgpu-is-16x-faster-than-p5js-webgl--july-25-2024) than p5! 🏎️
-
-Check out the [rainbow loops](https://aijs.io/editor?user=quinton-ashley&project=rainbowLoops) and [butterfly](https://aijs.io/editor?user=quinton-ashley&project=q5-webgpu_transformations) demos. 🌈
-
 # 11-0
 
-## Get started! 💻
+## No Installation Required! 💻
 
-Start coding with the [q5.js template](https://aijs.io/editor?user=AIJS&project=q5.js-Template) for the [Aijs](https://aijs.io) online code editor. 🖌️
+Start coding with the [q5.js template](https://aijs.io/editor?user=quinton-ashley&project=logoSpin) for the [Aijs](https://aijs.io) online code editor. 🖌️
 
-Full documentation is coming soon, for now see q5's [GitHub README](https://github.com/q5js/q5.js).
+Use q5.js in your own project by adding this line to your HTML file:
 
 ```html
 <script src="https://q5js.org/q5.js"></script>
 ```
 
-q5 is also available on [npm](https://www.npmjs.com/package/q5). 📦
+Full documentation is coming soon, for now see q5's [GitHub README](https://github.com/q5js/q5.js).
 
 # 11-1
 
 ## Join our community 🤝
 
 The future of creative coding is here! Join us on the [q5 community Discord](https://discord.gg/QuxQYwGWuB). 🗺️
 
-If you'd like to work on q5.js, check out our [Contributor Code of Conduct](https://github.com/quinton-ashley/q5.js/?tab=readme-ov-file#contributor-code-of-conduct) and [Project Planning Board](https://github.com/orgs/q5js/projects/1/views/1).
+If you'd like to work on q5.js, check out our [Project Planning Board](https://github.com/orgs/q5js/projects/1/views/1).
 
 # 20-0
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.5.4",
+	"version": "2.5.5",
 	"description": "A sequel to p5.js that's smaller and faster",
 	"author": "quinton-ashley",
 	"contributors": [

q5.d.ts

@@ -127,12 +127,15 @@ declare global {
 
 	/** ⭐️
 	 * The desired frame rate of the sketch.
-	 * @returns target frame rate.
+	 * @returns target frame rate
 	 */
 	function getTargetFrameRate(): number;
 
 	/** ⭐️
-	 * @returns frames per second.
+	 * Gets the current FPS, in terms of how many frames could be generated
+	 * in one second, which can be higher than the target frame rate. Useful
+	 * for analyzing performance.
+	 * @returns frames per second
 	 */
 	function getFPS(): number;
 
@@ -144,7 +147,7 @@ declare global {
 
 	/** ⭐️
 	 * Prints a message to the JavaScript console.
-	 * @param message The message to print.
+	 * @param message The message to print
 	 */
 	function print(message: any): void;
 
@@ -184,8 +187,8 @@ declare global {
 	function createCanvas(w: number, h: number, options?: CanvasRenderingContext2DSettings): HTMLCanvasElement;
 
 	/** ⬜️
-	 * Any position coordinates or dimensions you use will be scaled based on the unit
-	 * provided to this function.
+	 * Any position coordinates or dimensions you use will be scaled based 
+	 * on the unit provided to this function.
 	 * @param unit
 	 * @example
 	 * new Q5();
@@ -377,6 +380,54 @@ declare global {
 
 	// 🧑‍🎨 drawing
 
+	/** 🧑‍🎨
+	 * Sets the global composite operation for the canvas context.
+	 * @param x - The composite operation to set.
+	 */
+	function blendMode(x: string): void;
+
+	/** 🧑‍🎨
+	 * Ses the line cap style for the canvas context.
+	 * @param x - The line cap style to set ('butt', 'round', 'square').
+	 */
+	function strokeCap(x: CanvasLineCap): void;
+
+	/** 🧑‍🎨
+	 * Sets the line join style for the canvas context.
+	 * @param x - The line join style to set ('round', 'bevel', 'miter').
+	 */
+	function strokeJoin(x: CanvasLineJoin): void;
+
+	/** 🧑‍🎨
+	 * Sets the ellipse mode.
+	 * @param x - The ellipse mode to set.
+	 */
+	function ellipseMode(x: string): void;
+
+	/** 🧑‍🎨
+	 * Sets the rectangle mode.
+	 * @param x - The rectangle mode to set.
+	 */
+	function rectMode(x: string): void;
+
+	/** 🧑‍🎨
+	 * Sets the curve detail level.
+	 * @param x - The curve detail level to set.
+	 */
+	function curveDetail(x: number): void;
+
+	/** 🧑‍🎨
+	 * Sets the curve alpha value.
+	 * @param x - The curve alpha value to set.
+	 */
+	function curveAlpha(x: number): void;
+
+	/** 🧑‍🎨
+	 * Sets the curve tightness value.
+	 * @param x - The curve tightness value to set.
+	 */
+	function curveTightness(x: number): void;
+
 	/** 🧑‍🎨
 	 * Draws over the entire canvas with a color or image.
 	 * @param color
@@ -605,9 +656,9 @@ declare global {
 
 	/** 🌆
 	 * Displays a region of the image on another region of the image.
-	 * 
+	 *
 	 * Can be used to create a detail inset, aka a magnifying glass effect.
-	 * 
+	 *
 	 * @param srcX - x-coordinate of the source region
 	 * @param srcY - y-coordinate of the source region
 	 * @param srcW - width of the source region
@@ -630,8 +681,8 @@ declare global {
 	 *
 	 * Or if width and height are both 1, returns the color of the pixel at
 	 * the given coordinates in `[R, G, B, A]` array format.
-	 * 
-	 * To edit the color value of multiple pixels, it's faster to use 
+	 *
+	 * To edit the color value of multiple pixels, it's faster to use
 	 * `loadPixels` and `updatePixels`.
 	 * @param x
 	 * @param y
@@ -643,8 +694,8 @@ declare global {
 
 	/** 🌆
 	 * Sets a pixel's color in the image or canvas.
-	 * 
-	 * Or if a canvas or image is provided, it's drawn on top of the 
+	 *
+	 * Or if a canvas or image is provided, it's drawn on top of the
 	 * destination image or canvas ignoring its tint setting.
 	 * @param x
 	 * @param y
@@ -939,13 +990,14 @@ declare global {
 
 	/** ✨
 	 * Run this function before a line of code that isn't working as expected.
+	 * @param question - optional question to ask the AI
 	 * @example
 	 * function draw() {
 	 * 	askAI();
 	 * 	text('Hello!');
 	 * }
 	 */
-	function askAI(): void;
+	function askAI(question?: string): void;
 
 	// 🎨 color
 
@@ -1259,18 +1311,27 @@ declare global {
 	// 🛠️ utilities
 
 	/** 🛠️
-	 * Loads a text file from the specified path and returns an array of strings.
-	 * @param path - The path to the text file.
-	 * @param cb - A callback function that is called when the file is loaded.
+	 * Loads a text file from the specified path. Result is one string.
+	 * @param path - the path to the text file
+	 * @param cb - a callback function that is run when the file is loaded
+	 */
+	function loadText(path: string, cb: (result: string) => void): void;
+
+	/** 🛠️
+	 * Loads a JSON file from the specified path. Result depends on the
+	 * JSON file's contents, but is typically an object or array.
+	 * @param path - the path to the JSON file
+	 * @param cb - a callback function that is run when the file is loaded
 	 */
-	function loadStrings(path: string, cb: (result: string[]) => void): void;
+	function loadJSON(path: string, cb: (result: any) => void): void;
 
 	/** 🛠️
-	 * Loads a JSON file from the specified path.
-	 * @param path - The path to the JSON file.
-	 * @param cb - A callback function that is called when the file is loaded.
+	 * Loads a CSV file from the specified path. Result is an array
+	 * of objects.
+	 * @param path - the path to the CSV file
+	 * @param cb - a callback function that is run when the file is loaded
 	 */
-	function loadJSON(path: string, cb: (result: object) => void): void;
+	function loadCSV(path: string, cb: (result: object[]) => void): void;
 
 	/** 🛠️
 	 * Stores an item in localStorage.