q5 3.9.4 → 4.0.1

package/defs/q5-c2d.d.ts

@@ -1,3990 +0,0 @@
-declare global {
-
-	// ⭐ core
-
-	/**
-	 * Welcome to q5's documentation! 🤩
-	 * 
-	 * First time coding? Check out the [q5 Beginner's Brief](https://github.com/q5js/q5.js/wiki/q5-Beginner's-Brief).
-	 * 
-	 * On these Learn pages, you can experiment with editing the
-	 * interactive mini examples. Have fun! 😎
-	 * 
-	 * [![](/assets/Authored-By-Humans-Not-By-AI-Badge.png)](https://notbyai.fyi/)
-	 */
-
-	/** ⭐
-	 * Creates a canvas element, a section of the screen your program
-	 * can draw on.
-	 * 
-	 * Run this function to start using q5!
-	 * 
-	 * Note that in this example, the circle is located at position [0, 0], the origin of the canvas.
-	 * @param {number} [w] width or side lengths of the canvas
-	 * @param {number} [h] height of the canvas
-	 * @param {object} [opt] [options](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getContextAttributes)
-	 * @returns {Promise<HTMLCanvasElement>} created canvas element
-	 * @example
-	 * // Canvas2D
-	 * createCanvas(200, 100);
-	 * background('silver');
-	 * circle(0, 0, 80);
-	 */
-	function Canvas(w?: number, h?: number, options?: object): Promise<HTMLCanvasElement>;
-
-	/** ⭐
-	 * The q5 draw function is run 60 times per second by default.
-	 * @example
-	 * function draw() {
-	 * 	background('silver');
-	 * 	circle(mouseX, mouseY, 80);
-	 * }
-	 */
-	function draw(): void;
-
-	/** ⭐
-	 * Logs a message to the JavaScript console.
-	 * 
-	 * To view the console, open your browser's web developer tools
-	 * via the keyboard shortcut `Ctrl + Shift + i` or `command + option + i`,
-	 * then click the "Console" tab.
-	 * 
-	 * This is an alias for the standard
-	 * [`console.log`](https://developer.mozilla.org/docs/Web/API/console/log_static) function.
-	 * 
-	 * When you're curious about what your code is doing, use `log()`!
-	 * @param {*} message
-	 * @example
-	 * function draw() {
-	 * 	circle(mouseX, mouseY, 80);
-	 * 	log('The mouse is at:', mouseX, mouseY);
-	 * }
-	 */
-	function log(message: any): void;
-
-	// 🧑‍🎨 shapes
-
-	/** 🧑‍🎨
-	 * Draws a circle.
-	 * @param {number} x x-coordinate
-	 * @param {number} y y-coordinate
-	 * @param {number} diameter diameter of the circle
-	 * @example
-	 * createCanvas(200, 100);
-	 * circle(100, 50, 80);
-	 */
-	function circle(x: number, y: number, diameter: number): void;
-
-	/** 🧑‍🎨
-	 * Draws an ellipse.
-	 * @param {number} x x-coordinate
-	 * @param {number} y y-coordinate
-	 * @param {number} width width of the ellipse
-	 * @param {number} [height] height of the ellipse
-	 * @example
-	 * createCanvas(200, 100);
-	 * ellipse(100, 50, 160, 80);
-	 */
-	function ellipse(x: number, y: number, width: number, height?: number): void;
-
-	/** 🧑‍🎨
-	 * Draws a rectangle or a rounded rectangle.
-	 * @param {number} x x-coordinate
-	 * @param {number} y y-coordinate
-	 * @param {number} w width of the rectangle
-	 * @param {number} [h] height of the rectangle
-	 * @param {number} [rounded] radius for all corners
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * rect(30, 20, 40, 60);
-	 * rect(80, 70, 40, 60, 10);
-	 * rect(130, 120, 40, 60, 30, 2, 8, 20);
-	 */
-	function rect(x: number, y: number, w: number, h?: number, rounded?: number): void;
-
-	/** 🧑‍🎨
-	 * Draws a square or a rounded square.
-	 * @param {number} x x-coordinate
-	 * @param {number} y y-coordinate
-	 * @param {number} size size of the sides of the square
-	 * @param {number} [rounded] radius for all corners
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * square(30, 30, 40);
-	 * square(80, 80, 40, 10);
-	 * square(130, 130, 40, 30, 2, 8, 20);
-	 */
-	function square(x: number, y: number, size: number, rounded?: number): void;
-
-	/** 🧑‍🎨
-	 * Draws a point on the canvas.
-	 * @param {number} x x-coordinate
-	 * @param {number} y y-coordinate
-	 * @example
-	 * createCanvas(200, 100);
-	 * stroke('white');
-	 * point(75, 50);
-	 * 
-	 * strokeWeight(10);
-	 * point(125, 50);
-	 */
-	function point(x: number, y: number): void;
-
-	/** 🧑‍🎨
-	 * Draws a line on the canvas.
-	 * @param {number} x1 x-coordinate of the first point
-	 * @param {number} y1 y-coordinate of the first point
-	 * @param {number} x2 x-coordinate of the second point
-	 * @param {number} y2 y-coordinate of the second point
-	 * @example
-	 * createCanvas(200, 100);
-	 * stroke('lime');
-	 * line(20, 20, 180, 80);
-	 */
-	function line(x1: number, y1: number, x2: number, y2: number): void;
-
-	/** 🧑‍🎨
-	 * Draws a capsule.
-	 * @param {number} x1 x-coordinate of the first point
-	 * @param {number} y1 y-coordinate of the first point
-	 * @param {number} x2 x-coordinate of the second point
-	 * @param {number} y2 y-coordinate of the second point
-	 * @param {number} r radius of the capsule semi-circle ends
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * strokeWeight(5);
-	 * capsule(40, 40, 160, 60, 10);
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	fill('cyan');
-	 * 	strokeWeight(10);
-	 * 	capsule(100, 100, mouseX, mouseY, 20);
-	 * }
-	 */
-	function capsule(x1: number, y1: number, x2: number, y2: number, r: number): void;
-
-	/** 🧑‍🎨
-	 * Set to `CORNER` (default), `CENTER`, `RADIUS`, or `CORNERS`.
-	 * 
-	 * Changes how the first four inputs to
-	 * `rect` and `square` are interpreted.
-	 * @param {string} mode
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * rectMode(CORNER);
-	 * 
-	 * //  ( x,  y,   w,  h)
-	 * rect(50, 25, 100, 50);
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * rectMode(CENTER);
-	 * 
-	 * //  ( cX, cY,   w,  h)
-	 * rect(100, 50, 100, 50);
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * rectMode(RADIUS);
-	 * 
-	 * //  ( cX, cY, rX, rY)
-	 * rect(100, 50, 50, 25);
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * rectMode(CORNERS);
-	 * 
-	 * //  ( x1, y1, x2, y2)
-	 * rect(50, 25, 150, 75);
-	 */
-	function rectMode(mode: string): void;
-
-	/** 🧑‍🎨
-	 * Set to `CENTER` (default), `RADIUS`, `CORNER`, or `CORNERS`.
-	 * 
-	 * Changes how the first four inputs to
-	 * `ellipse`, `circle`, and `arc` are interpreted.
-	 * @param {string} mode
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * ellipseMode(CENTER);
-	 * 
-	 * //     (  x,  y,   w,  h)
-	 * ellipse(100, 50, 100, 50);
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * ellipseMode(RADIUS);
-	 * 
-	 * //     (  x,  y, rX, rY)
-	 * ellipse(100, 50, 50, 25);
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * ellipseMode(CORNER);
-	 * 
-	 * //     (lX, tY,   w,  h)
-	 * ellipse(50, 25, 100, 50);
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * ellipseMode(CORNERS);
-	 * 
-	 * //     ( x1, y1, x2, y2)
-	 * ellipse(50, 25, 150, 75);
-	 */
-	function ellipseMode(mode: string): void;
-
-	/** 🧑‍🎨
-	 * Shape alignment mode, for use in `rectMode` and `ellipseMode`.
-	 */
-	const CORNER: 'corner';
-
-	/** 🧑‍🎨
-	 * Shape alignment mode, for use in `rectMode` and `ellipseMode`.
-	 */
-	const RADIUS: 'radius';
-
-	/** 🧑‍🎨
-	 * Shape alignment mode, for use in `rectMode` and `ellipseMode`.
-	 */
-	const CORNERS: 'corners';
-
-	// 🌆 image
-
-	/** 🌆
-	 * Loads an image from a URL.
-	 * 
-	 * By default, assets are loaded in parallel before q5 runs `draw`. Use `await` to wait for an image to load.
-	 * @param {string} url url of the image to load
-	 * @returns {Q5.Image & PromiseLike<Q5.Image>} image
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function draw() {
-	 * 	background(logo);
-	 * }
-	 */
-	function loadImage(url: string): Q5.Image & PromiseLike<Q5.Image>;
-
-	/** 🌆
-	 * Draws an image or video frame to the canvas.
-	 * @param {Q5.Image | HTMLVideoElement} img image or video to draw
-	 * @param {number} dx x position to draw the image at
-	 * @param {number} dy y position to draw the image at
-	 * @param {number} [dw] width of the destination image
-	 * @param {number} [dh] height of the destination image
-	 * @param {number} [sx] x position in the source to start clipping a subsection from
-	 * @param {number} [sy] y position in the source to start clipping a subsection from
-	 * @param {number} [sw] width of the subsection of the source image
-	 * @param {number} [sh] height of the subsection of the source image
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function draw() {
-	 * 	image(logo, 0, 0, 200, 200);
-	 * }
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function draw() {
-	 * 	image(logo, 0, 0, 200, 200, 256, 256, 512, 512);
-	 * }
-	 */
-	function image(): void;
-
-	/** 🌆
-	 * Set to `CORNER` (default), `CORNERS`, or `CENTER`.
-	 * 
-	 * Changes how inputs to `image` are interpreted.
-	 * @param {string} mode
-	 * @example
-	 * createCanvas(200);
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function draw() {
-	 * 	imageMode(CORNER);
-	 * 
-	 * 	//   ( img,  x,  y,   w,   h)
-	 * 	image(logo, 50, 50, 100, 100);
-	 * }
-	 * @example
-	 * createCanvas(200);
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function draw() {
-	 * 	imageMode(CENTER);
-	 * 
-	 * 	//   ( img,  cX,  cY,   w,   h)
-	 * 	image(logo, 100, 100, 100, 100);
-	 * }
-	 * @example
-	 * createCanvas(200);
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function draw() {
-	 * 	imageMode(CORNERS);
-	 * 
-	 * 	//   ( img, x1, y1,  x2,  y2)
-	 * 	image(logo, 50, 50, 100, 100);
-	 * }
-	 */
-	function imageMode(mode: string): void;
-
-	/** 🌆
-	 * Sets the default image scale, which is applied to images when
-	 * they are drawn without a specified width or height.
-	 * 
-	 * By default it is 0.5 so images appear at their actual size
-	 * when pixel density is 2. Images will be drawn at a consistent
-	 * default size relative to the canvas regardless of pixel density.
-	 * 
-	 * This function must be called before images are loaded to
-	 * have an effect.
-	 * @param {number} scale
-	 * @returns {number} default image scale
-	 */
-	function defaultImageScale(scale: number): number;
-
-	/** 🌆
-	 * Resizes the image.
-	 * @param {number} w new width
-	 * @param {number} h new height
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function setup() {
-	 * 	logo.resize(128, 128);
-	 * 	image(logo, 0, 0, 200, 200);
-	 * }
-	 */
-	function resize(w: number, h: number): void;
-
-	/** 🌆
-	 * Returns a trimmed image, cropping out transparent pixels from the edges.
-	 * @returns {Q5.Image}
-	 */
-	function trim(): Q5.Image;
-
-	/** 🌆
-	 * Enables smooth rendering of images displayed larger than
-	 * their actual size. This is the default setting, so running this
-	 * function only has an effect if `noSmooth` has been called.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let icon = loadImage('/q5js_icon.png');
-	 * 
-	 * function setup() {
-	 * 	image(icon, 0, 0, 200, 200);
-	 * }
-	 */
-	function smooth(): void;
-
-	/** 🌆
-	 * Disables smooth image rendering for a pixelated look.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let icon = loadImage('/q5js_icon.png');
-	 * 
-	 * function setup() {
-	 * 	noSmooth();
-	 * 	image(icon, 0, 0, 200, 200);
-	 * }
-	 */
-	function noSmooth(): void;
-
-	/** 🌆
-	 * Applies a tint (color overlay) to the drawing.
-	 * 
-	 * The alpha value of the tint color determines the
-	 * strength of the tint. To change an image's opacity,
-	 * use the `opacity` function.
-	 * 
-	 * Tinting affects all subsequent images drawn. The tint
-	 * color is applied to images using the "multiply" blend mode.
-	 * 
-	 * Since the tinting process is performance intensive, each time
-	 * an image is tinted, q5 caches the result. `image` will draw the
-	 * cached tinted image unless the tint color has changed or the
-	 * image being tinted was edited.
-	 * 
-	 * If you need to draw an image multiple times each frame with
-	 * different tints, consider making copies of the image and tinting
-	 * each copy separately.
-	 * @param {string | number} color tint color
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function setup() {
-	 * 	tint(255, 0, 0, 128);
-	 * 	image(logo, 0, 0, 200, 200);
-	 * }
-	 */
-	function tint(color: string | number): void;
-
-	/** 🌆
-	 * Images drawn after this function is run will not be tinted.
-	 */
-	function noTint(): void;
-
-	/** 🌆
-	 * Masks the image with another image.
-	 * @param {Q5.Image} img image to use as a mask
-	 */
-	function mask(img: Q5.Image): void;
-
-	/** 🌆
-	 * Returns a copy of the image.
-	 * @returns {Q5.Image}
-	 */
-	function copy(): Q5.Image;
-
-	/** 🌆
-	 * 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 {number} sx x-coordinate of the source region
-	 * @param {number} sy y-coordinate of the source region
-	 * @param {number} sw width of the source region
-	 * @param {number} sh height of the source region
-	 * @param {number} dx x-coordinate of the destination region
-	 * @param {number} dy y-coordinate of the destination region
-	 * @param {number} dw width of the destination region
-	 * @param {number} dh height of the destination region
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function setup() {
-	 * 	logo.inset(256, 256, 512, 512, 0, 0, 256, 256);
-	 * 	image(logo, 0, 0, 200, 200);
-	 * }
-	 */
-	function inset(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
-
-	/** 🌆
-	 * Retrieves a subsection of an image or canvas as a new Q5 Image
-	 * or the color of a pixel in the image or canvas.
-	 * 
-	 * If only x and y are specified, this function returns the color of the pixel
-	 * at the given coordinate in `[R, G, B, A]` array format. If `loadPixels`
-	 * has never been run, it's run by this function.
-	 * 
-	 * If you make changes to the canvas or image, you must call `loadPixels`
-	 * before using this function to get current color data.
-	 * 
-	 * Not applicable to WebGPU canvases.
-	 * @param {number} x
-	 * @param {number} y
-	 * @param {number} [w] width of the area, default is 1
-	 * @param {number} [h] height of the area, default is 1
-	 * @returns {Q5.Image | number[]}
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	noStroke();
-	 * 	circle(100, 100, frameCount % 200);
-	 * 
-	 * 	loadPixels();
-	 * 	let col = get(mouseX, mouseY);
-	 * 	text(col, mouseX, mouseY);
-	 * }
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function setup() {
-	 * 	let cropped = logo.get(256, 256, 512, 512);
-	 * 	image(cropped, 0, 0, 200, 200);
-	 * }
-	 */
-	function get(x: number, y: number, w?: number, h?: number): Q5.Image | number[];
-
-	/** 🌆
-	 * Sets a pixel's color in the image or canvas. Color mode must be RGB.
-	 * 
-	 * Or if a canvas or image is provided, it's drawn on top of the
-	 * destination image or canvas, ignoring its tint setting.
-	 * 
-	 * Run `updatePixels` to apply the changes.
-	 * 
-	 * Not applicable to WebGPU canvases.
-	 * @param {number} x
-	 * @param {number} y
-	 * @param {any} val color, canvas, or image
-	 * @example
-	 * createCanvas(200);
-	 * let c = color('lime');
-	 * 
-	 * function draw() {
-	 * 	set(random(200), random(200), c);
-	 * 	updatePixels();
-	 * }
-	 */
-	function set(x: number, y: number, val: any): void;
-
-	/** 🌆
-	 * Array of pixel color data from a canvas or image.
-	 * 
-	 * Empty by default, get the data by running `loadPixels`.
-	 * 
-	 * Each pixel is represented by four consecutive values in the array,
-	 * corresponding to its red, green, blue, and alpha channels.
-	 * 
-	 * The top left pixel's data is at the beginning of the array
-	 * and the bottom right pixel's data is at the end, going from
-	 * left to right and top to bottom.
-	 */
-	var pixels: number[];
-
-	/** 🌆
-	 * Loads pixel data into `pixels` from the canvas or image.
-	 * 
-	 * The example below sets some pixels' green channel
-	 * to a random value.
-	 * 
-	 * Not applicable to WebGPU canvases.
-	 * @example
-	 * frameRate(5);
-	 * let icon = loadImage('/q5js_icon.png');
-	 * 
-	 * function draw() {
-	 * 	icon.loadPixels();
-	 * 	for (let i = 0; i < icon.pixels.length; i += 16) {
-	 * 		icon.pixels[i + 1] = random(255);
-	 * 	}
-	 * 	icon.updatePixels();
-	 * 	background(icon);
-	 * }
-	 */
-	function loadPixels(): void;
-
-	/** 🌆
-	 * Applies changes in the `pixels` array to the canvas or image.
-	 * 
-	 * Not applicable to WebGPU canvases.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * for (let x = 0; x < 200; x += 5) {
-	 * 	for (let y = 0; y < 200; y += 5) {
-	 * 		set(x, y, color('pink'));
-	 * 	}
-	 * }
-	 * updatePixels();
-	 */
-	function updatePixels(): void;
-
-	/** 🌆
-	 * Applies a filter to the image.
-	 * 
-	 * See the documentation for q5's filter constants below for more info.
-	 * 
-	 * A CSS filter string can also be used.
-	 * https://developer.mozilla.org/docs/Web/CSS/filter
-	 * 
-	 * Not applicable to WebGPU canvases.
-	 * @param {string} type filter type or a CSS filter string
-	 * @param {number} [value] optional value, depends on filter type
-	 * @example
-	 * createCanvas(200);
-	 * let logo = loadImage('/q5js_logo.avif');
-	 * 
-	 * function setup() {
-	 * 	logo.filter(INVERT);
-	 * 	image(logo, 0, 0, 200, 200);
-	 * }
-	 */
-	function filter(type: string, value?: number): void;
-
-	/** 🌆
-	 * Converts the image to black and white pixels depending if they are above or below a certain threshold.
-	 */
-	const THRESHOLD: 1;
-
-	/** 🌆
-	 * Converts the image to grayscale by setting each pixel to its luminance.
-	 */
-	const GRAY: 2;
-
-	/** 🌆
-	 * Sets the alpha channel to fully opaque.
-	 */
-	const OPAQUE: 3;
-
-	/** 🌆
-	 * Inverts the color of each pixel.
-	 */
-	const INVERT: 4;
-
-	/** 🌆
-	 * Limits each channel of the image to the number of colors specified as an argument.
-	 */
-	const POSTERIZE: 5;
-
-	/** 🌆
-	 * Increases the size of bright areas.
-	 */
-	const DILATE: 6;
-
-	/** 🌆
-	 * Increases the size of dark areas.
-	 */
-	const ERODE: 7;
-
-	/** 🌆
-	 * Applies a Gaussian blur to the image.
-	 */
-	const BLUR: 8;
-
-	/** 🌆
-	 * Creates a new image.
-	 * @param {number} w width
-	 * @param {number} h height
-	 * @param {any} [opt] optional settings for the image
-	 * @returns {Q5.Image}
-	 */
-	function createImage(w: number, h: number, opt?: any): Q5.Image;
-
-	/** 🌆
-	 * Creates a graphics buffer.
-	 * 
-	 * Disabled by default in q5 WebGPU.
-	 * See issue [#104](https://github.com/q5js/q5.js/issues/104) for details.
-	 * @param {number} w width
-	 * @param {number} h height
-	 * @param {object} [opt] options
-	 * @returns {Q5} a new Q5 graphics buffer
-	 */
-	function createGraphics(w: number, h: number, opt?: any): Q5;
-
-	// 📘 text
-
-	/** 📘
-	 * Renders text on the canvas.
-	 * 
-	 * Text can be positioned with the x and y
-	 * parameters and can optionally be constrained.
-	 * @param {string} str string of text to display
-	 * @param {number} x x-coordinate of the text's position
-	 * @param {number} y y-coordinate of the text's position
-	 * @param {number} [wrapWidth] maximum line width in characters
-	 * @param {number} [lineLimit] maximum number of lines
-	 * @example
-	 * createCanvas(200, 100);
-	 * background('silver');
-	 * 
-	 * textSize(32);
-	 * text('Hello, world!', 12, 60);
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * textSize(20);
-	 * 
-	 * let info =
-	 * 	'q5.js was designed to make creative coding fun and accessible for a new generation of artists, designers, educators, and beginners.';
-	 * 
-	 * text(info, 12, 30, 20, 6);
-	 * //
-	 * //
-	 */
-	function text(str: string, x: number, y: number, wrapWidth?: number, lineLimit?: number): void;
-
-	/** 📘
-	 * Loads a font from a URL.
-	 * 
-	 * The font file can be in any format accepted in CSS, such as
-	 * .ttf and .otf files. The first example below loads
-	 * [Robotica](https://www.dafont.com/robotica-courtney.font).
-	 * 
-	 * Also supports loading [Google fonts](https://fonts.google.com/).
-	 * The second example loads
-	 * [Pacifico](https://fonts.google.com/specimen/Pacifico).
-	 * 
-	 * If no fonts are loaded, the default sans-serif font is used.
-	 * 
-	 * By default, assets are loaded in parallel before q5 runs `draw`. Use `await` to wait for a font to load.
-	 * @param {string} url URL of the font to load
-	 * @returns {FontFace & PromiseLike<FontFace>} font
-	 * @example
-	 * createCanvas(200, 56);
-	 * 
-	 * loadFont('/assets/Robotica.ttf');
-	 * 
-	 * function setup() {
-	 * 	fill('skyblue');
-	 * 	textSize(64);
-	 * 	text('Hello!', 2, 54);
-	 * }
-	 * @example
-	 * createCanvas(200, 74);
-	 * 
-	 * loadFont('fonts.googleapis.com/css2?family=Pacifico');
-	 * 
-	 * function setup() {
-	 * 	fill('hotpink');
-	 * 	textSize(68);
-	 * 	text('Hello!', 2, 68);
-	 * }
-	 */
-	function loadFont(url: string): FontFace & PromiseLike<FontFace>;
-
-	/** 📘
-	 * Sets the current font to be used for rendering text.
-	 * 
-	 * By default, the font is set to the [CSS font family](https://developer.mozilla.org/docs/Web/CSS/font-family)
-	 * "sans-serif" or the last font loaded.
-	 * @param {string} fontName name of the font family or a FontFace object
-	 * @example
-	 * createCanvas(200, 160);
-	 * background(200);
-	 * 
-	 * textFont('serif');
-	 * 
-	 * textSize(32);
-	 * text('Hello, world!', 15, 90);
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * textFont('monospace');
-	 * 
-	 * textSize(24);
-	 * text('Hello, world!', 15, 90);
-	 */
-	function textFont(fontName: string): void;
-
-	/** 📘
-	 * Sets or gets the current font size. If no argument is provided, returns the current font size.
-	 * @param {number} [size] size of the font in pixels
-	 * @returns {number | void} current font size when no argument is provided
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	textSize(abs(mouseX));
-	 * 	text('A', 10, 190);
-	 * }
-	 */
-	function textSize(size?: number): number | void;
-
-	/** 📘
-	 * Sets or gets the current line height. If no argument is provided, returns the current line height.
-	 * @param {number} [leading] line height in pixels
-	 * @returns {number | void} current line height when no argument is provided
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	textSize(abs(mouseX));
-	 * 	text('A', 10, 190);
-	 * 	rect(10, 190, 5, -textLeading());
-	 * }
-	 */
-	function textLeading(leading?: number): number | void;
-
-	/** 📘
-	 * Sets the current text style.
-	 * 
-	 * Not applicable to WebGPU when using MSDF fonts.
-	 * @param {'normal' | 'italic' | 'bold' | 'bolditalic'} style font style
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * textStyle(ITALIC);
-	 * 
-	 * textSize(32);
-	 * text('Hello, world!', 12, 106);
-	 */
-	function textStyle(style: 'normal' | 'italic' | 'bold' | 'bolditalic'): void;
-
-	/** 📘
-	 * Sets the horizontal and vertical alignment of text.
-	 * @param {'left' | 'center' | 'right'} horiz horizontal alignment
-	 * @param {'top' | 'middle' | 'bottom' | 'alphabetic'} [vert] vertical alignment
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * textSize(32);
-	 * 
-	 * textAlign(CENTER, MIDDLE);
-	 * text('Hello, world!', 100, 100);
-	 */
-	function textAlign(horiz: 'left' | 'center' | 'right', vert?: 'top' | 'middle' | 'bottom' | 'alphabetic'): void;
-
-	/** 📘
-	 * Sets the text weight.
-	 * 
-	 * - 100: thin
-	 * - 200: extra-light
-	 * - 300: light
-	 * - 400: normal/regular
-	 * - 500: medium
-	 * - 600: semi-bold
-	 * - 700: bold
-	 * - 800: bolder/extra-bold
-	 * - 900: black/heavy
-	 * @param {number | string} weight font weight
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * textSize(32);
-	 * textAlign(CENTER, MIDDLE);
-	 * 
-	 * textWeight(100);
-	 * text('Hello, world!', 100, 100);
-	 */
-	function textWeight(weight: number | string): void;
-
-	/** 📘
-	 * Calculates and returns the width of a given string of text.
-	 * @param {string} str string to measure
-	 * @returns {number} width of the text in pixels
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	textSize(abs(mouseX));
-	 * 	rect(10, 190, textWidth('A'), -textLeading());
-	 * 	text('A', 10, 190);
-	 * }
-	 */
-	function textWidth(str: string): number;
-
-	/** 📘
-	 * Calculates and returns the ascent (the distance from the baseline to the top of the highest character) of the current font.
-	 * @param {string} str string to measure
-	 * @returns {number} ascent of the text in pixels
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	textSize(abs(mouseX));
-	 * 	rect(10, 190, textWidth('A'), -textAscent());
-	 * 	text('A', 10, 190);
-	 * }
-	 */
-	function textAscent(str: string): number;
-
-	/** 📘
-	 * Calculates and returns the descent (the distance from the baseline to the bottom of the lowest character) of the current font.
-	 * @param {string} str string to measure
-	 * @returns {number} descent of the text in pixels
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * textSize(64);
-	 * 
-	 * rect(0, 100, 200, textDescent('q5'));
-	 * text('q5', 10, 100);
-	 */
-	function textDescent(str: string): number;
-
-	/** 📘
-	 * Creates an image from a string of text.
-	 * @param {string} str string of text
-	 * @param {number} [wrapWidth] maximum line width in characters
-	 * @param {number} [lineLimit] maximum number of lines
-	 * @returns {Q5.Image} an image object representing the rendered text
-	 * @example
-	 * createCanvas(200);
-	 * textSize(96);
-	 * 
-	 * let img = createTextImage('🐶');
-	 * img.filter(INVERT);
-	 * 
-	 * function draw() {
-	 * 	image(img, 55, 10);
-	 * }
-	 */
-	function createTextImage(str: string, wrapWidth: number, lineLimit: number): Q5.Image;
-
-	/** 📘
-	 * Renders an image generated from text onto the canvas.
-	 * 
-	 * If the first parameter is a string, an image of the text will be
-	 * created and cached automatically.
-	 * 
-	 * The positioning of the image is affected by the current text
-	 * alignment and baseline settings.
-	 * 
-	 * In q5 WebGPU, this function is the only way to draw multi-colored
-	 * text, like emojis, and to use fonts that aren't in MSDF format.
-	 * Using this function to draw text that changes every frame has
-	 * a very high performance cost.
-	 * @param {Q5.Image | string} img image or text
-	 * @param {number} x x-coordinate where the image should be placed
-	 * @param {number} y y-coordinate where the image should be placed
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * textSize(96);
-	 * textAlign(CENTER, CENTER);
-	 * 
-	 * textImage('🐶', 100, 100);
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * loadFont('/assets/Robotica.ttf');
-	 * 
-	 * function setup() {
-	 * 	background(200);
-	 * 	textSize(66);
-	 * 	textImage('Hello!', 0, 0);
-	 * }
-	 */
-	function textImage(img: Q5.Image | String, x: number, y: number): void;
-
-	/** 📘
-	 * Number formatter, can be used to display a number as a string with
-	 * a specified number of digits before and after the decimal point,
-	 * optionally adding padding with zeros.
-	 * @param {number} n number to format
-	 * @param {number} l minimum number of digits to appear before the decimal point; the number is padded with zeros if necessary
-	 * @param {number} r number of digits to appear after the decimal point
-	 * @returns {string} a string representation of the number, formatted accordingly
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * 
-	 * textSize(32);
-	 * text(nf(PI, 4, 5), 10, 60);
-	 */
-	function nf(num: number, digits: number): string;
-
-	/** 📘
-	 * Normal font style.
-	 */
-	const NORMAL: 'normal';
-
-	/** 📘
-	 * Italic font style.
-	 */
-	const ITALIC: 'italic';
-
-	/** 📘
-	 * Bold font weight.
-	 */
-	const BOLD: 'bold';
-
-	/** 📘
-	 * Bold and italic font style.
-	 */
-	const BOLDITALIC: 'italic bold';
-
-	/** 📘
-	 * Align text to the left.
-	 */
-	const LEFT: 'left';
-
-	/** 📘
-	 * Align text to the center.
-	 */
-	const CENTER: 'center';
-
-	/** 📘
-	 * Align text to the right.
-	 */
-	const RIGHT: 'right';
-
-	/** 📘
-	 * Align text to the top.
-	 */
-	const TOP: 'top';
-
-	/** 📘
-	 * Align text to the bottom.
-	 */
-	const BOTTOM: 'bottom';
-
-	/** 📘
-	 * Align text to the baseline (alphabetic).
-	 */
-	const BASELINE: 'alphabetic';
-
-	// 🖲 input
-
-	/**
-	 * q5's input handling is very basic.
-	 * 
-	 * For better input handling, including game controller support, consider using the [p5play](https://p5play.org/) addon with q5.
-	 * 
-	 * Note that input responses inside `draw` can be delayed by
-	 * up to one frame cycle: from the exact moment an input event occurs
-	 * to the next time a frame is drawn.
-	 * 
-	 * Play sounds or trigger other non-visual feedback immediately
-	 * by responding to input events inside functions like
-	 * `mousePressed` and `keyPressed`.
-	 */
-
-	/** 🖲
-	 * Current X position of the mouse.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	textSize(64);
-	 * 	text(round(mouseX), 50, 120);
-	 * }
-	 */
-	let mouseX: number;
-
-	/** 🖲
-	 * Current Y position of the mouse.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	circle(100, mouseY, 100);
-	 * }
-	 */
-	let mouseY: number;
-
-	/** 🖲
-	 * Previous X position of the mouse.
-	 */
-	let pmouseX: number;
-
-	/** 🖲
-	 * Previous Y position of the mouse.
-	 */
-	let pmouseY: number;
-
-	/** 🖲
-	 * The current button being pressed: 'left', 'right', 'center').
-	 * 
-	 * The default value is an empty string.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	textSize(64);
-	 * 	text(mouseButton, 20, 120);
-	 * }
-	 */
-	let mouseButton: string;
-
-	/** 🖲
-	 * True if the mouse is currently pressed, false otherwise.
-	 * @example
-	 * function draw() {
-	 * 	if (mouseIsPressed) background(100);
-	 * 	else background(200);
-	 * }
-	 */
-	let mouseIsPressed: boolean;
-
-	/** 🖲
-	 * Define this function to respond to mouse down events.
-	 * @example
-	 * createCanvas(200);
-	 * let gray = 95;
-	 * 
-	 * function mousePressed() {
-	 * 	background(gray % 256);
-	 * 	gray += 40;
-	 * }
-	 */
-	function mousePressed(): void;
-
-	/** 🖲
-	 * Define this function to respond to mouse up events.
-	 * @example
-	 * createCanvas(200);
-	 * let gray = 95;
-	 * 
-	 * function mouseReleased() {
-	 * 	background(gray % 256);
-	 * 	gray += 40;
-	 * }
-	 */
-	function mouseReleased(): void;
-
-	/** 🖲
-	 * Define this function to respond to mouse move events.
-	 * 
-	 * On touchscreen devices this function is not called
-	 * when the user drags their finger on the screen.
-	 * @example
-	 * createCanvas(200);
-	 * let gray = 95;
-	 * 
-	 * function mouseMoved() {
-	 * 	background(gray % 256);
-	 * 	gray++;
-	 * }
-	 */
-	function mouseMoved(): void;
-
-	/** 🖲
-	 * Define this function to respond to mouse drag events.
-	 * 
-	 * Dragging the mouse is defined as moving the mouse
-	 * while a mouse button is pressed.
-	 * @example
-	 * createCanvas(200);
-	 * let gray = 95;
-	 * 
-	 * function mouseDragged() {
-	 * 	background(gray % 256);
-	 * 	gray++;
-	 * }
-	 */
-	function mouseDragged(): void;
-
-	/** 🖲
-	 * Define this function to respond to mouse double click events.
-	 * @example
-	 * createCanvas(200);
-	 * let gray = 95;
-	 * 
-	 * function doubleClicked() {
-	 * 	background(gray % 256);
-	 * 	gray += 40;
-	 * }
-	 */
-	function doubleClicked(): void;
-
-	/** 🖲
-	 * The name of the last key pressed.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	textSize(64);
-	 * 	text(key, 20, 120);
-	 * }
-	 */
-	let key: string;
-
-	/** 🖲
-	 * True if a key is currently pressed, false otherwise.
-	 * @example
-	 * function draw() {
-	 * 	if (keyIsPressed) background(100);
-	 * 	else background(200);
-	 * }
-	 */
-	let keyIsPressed: boolean;
-
-	/** 🖲
-	 * Returns true if the user is pressing the specified key, false
-	 * otherwise. Accepts case-insensitive key names.
-	 * @param {string} key key to check
-	 * @returns {boolean} true if the key is pressed, false otherwise
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	if (keyIsDown('f') && keyIsDown('j')) {
-	 * 		rect(50, 50, 100, 100);
-	 * 	}
-	 * }
-	 */
-	function keyIsDown(key: string): boolean;
-
-	/** 🖲
-	 * Define this function to respond to key down events.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let gray = 95;
-	 * function keyPressed() {
-	 * 	background(gray % 256);
-	 * 	gray += 40;
-	 * }
-	 */
-	function keyPressed(): void;
-
-	/** 🖲
-	 * Define this function to respond to key up events.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let gray = 95;
-	 * function keyReleased() {
-	 * 	background(gray % 256);
-	 * 	gray += 40;
-	 * }
-	 */
-	function keyReleased(): void;
-
-	/** 🖲
-	 * Array containing all current touch points within the
-	 * browser window. Each touch being an object with
-	 * `id`, `x`, and `y` properties.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	for (let touch of touches) {
-	 * 		circle(touch.x, touch.y, 100);
-	 * 	}
-	 * }
-	 */
-	let touches: any[];
-
-	/** 🖲
-	 * Define this function to respond to touch down events
-	 * on the canvas.
-	 * 
-	 * Return true to enable touch gestures like pinch-to-zoom
-	 * and scroll, which q5 disables on the canvas by default.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let gray = 95;
-	 * function touchStarted() {
-	 * 	background(gray % 256);
-	 * 	gray += 40;
-	 * }
-	 */
-	function touchStarted(): void;
-
-	/** 🖲
-	 * Define this function to respond to touch down events
-	 * on the canvas.
-	 * 
-	 * Return true to enable touch gestures like pinch-to-zoom
-	 * and scroll, which q5 disables on the canvas by default.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let gray = 95;
-	 * function touchEnded() {
-	 * 	background(gray % 256);
-	 * 	gray += 40;
-	 * }
-	 */
-	function touchEnded(): void;
-
-	/** 🖲
-	 * Define this function to respond to touch move events
-	 * on the canvas.
-	 * 
-	 * Return true to enable touch gestures like pinch-to-zoom
-	 * and scroll, which q5 disables on the canvas by default.
-	 * @example
-	 * createCanvas(200);
-	 * let gray = 95;
-	 * 
-	 * function touchMoved() {
-	 * 	background(gray % 256);
-	 * 	gray++;
-	 * }
-	 */
-	function touchMoved(): void;
-
-	/** 🖲
-	 * Object containing all current pointers within the
-	 * browser window.
-	 * 
-	 * This includes mouse, touch, and pen pointers.
-	 * 
-	 * Each pointer is an object with
-	 * `event`, `x`, and `y` properties.
-	 * The `event` property contains the original
-	 * [PointerEvent](https://developer.mozilla.org/docs/Web/API/PointerEvent).
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	for (let pointerID in pointers) {
-	 * 		let pointer = pointers[pointerID];
-	 * 		circle(pointer.x, pointer.y, 100);
-	 * 	}
-	 * }
-	 */
-	let pointers: {};
-
-	/** 🖲
-	 * Sets the cursor to a [CSS cursor type](https://developer.mozilla.org/docs/Web/CSS/cursor) or image.
-	 * If an image is provided, optional x and y coordinates can
-	 * specify the active point of the cursor.
-	 * @param {string} name name of the cursor or the url to an image
-	 * @param {number} [x] x-coordinate of the cursor's point
-	 * @param {number} [y] y-coordinate of the cursor's point
-	 * @example
-	 * createCanvas(200, 100);
-	 * cursor('pointer');
-	 */
-	function cursor(name: string, x?: number, y?: number): void;
-
-	/** 🖲
-	 * Hides the cursor within the bounds of the canvas.
-	 * @example
-	 * createCanvas(200, 100);
-	 * noCursor();
-	 */
-	function noCursor(): void;
-
-	/** 🖲
-	 * Define this function to respond to mouse wheel events.
-	 * 
-	 * `event.deltaX` and `event.deltaY` are the horizontal and vertical
-	 * scroll amounts, respectively.
-	 * 
-	 * Return true to allow the default behavior of scrolling the page.
-	 * @example
-	 * let x = (y = 100);
-	 * function draw() {
-	 * 	circle(x, y, 10);
-	 * }
-	 * function mouseWheel(e) {
-	 * 	x += e.deltaX;
-	 * 	y += e.deltaY;
-	 * 	return false;
-	 * }
-	 */
-	function mouseWheel(event: any): void;
-
-	/** 🖲
-	 * Requests that the pointer be locked to the document body, hiding
-	 * the cursor and allowing for unlimited movement.
-	 * 
-	 * Operating systems enable mouse acceleration by default, which is useful when you sometimes want slow precise movement (think about you might use a graphics package), but also want to move great distances with a faster mouse movement (think about scrolling, and selecting several files). For some games however, raw mouse input data is preferred for controlling camera rotation — where the same distance movement, fast or slow, results in the same rotation.
-	 * 
-	 * To exit pointer lock mode, call `document.exitPointerLock()`.
-	 * @param {boolean} unadjustedMovement set to true to disable OS-level mouse acceleration and access raw mouse input
-	 * @example
-	 * function draw() {
-	 * 	circle(mouseX / 10 + 100, mouseY / 10 + 100, 10);
-	 * }
-	 * 
-	 * function doubleClicked() {
-	 * 	if (!document.pointerLockElement) {
-	 * 		pointerLock();
-	 * 	} else {
-	 * 		document.exitPointerLock();
-	 * 	}
-	 * }
-	 */
-	function pointerLock(unadjustedMovement: boolean): void;
-
-	// 🎨 color
-
-	/** 🎨
-	 * Creates a new `Color` object, which is primarily useful for storing
-	 * a color that your sketch will reuse or modify later.
-	 * 
-	 * With the default color mode, RGB, colors have `r`/`red`, `g`/`green`,
-	 * `b`/`blue`, and `a`/`alpha` components.
-	 * 
-	 * The [`fill`](https://q5js.org/learn/#fill), [`stroke`](https://q5js.org/learn/#stroke), and [`background`](https://q5js.org/learn/#background)
-	 * functions accept the same wide range of color representations as this function.
-	 *
-	 * The default color format is "integer",
-	 * so set components to values between 0 and 255.
-	 * 
-	 * Here are some examples of valid use:
-	 * 
-	 * - `color(255)` (grayscale)
-	 * - `color(255, 200)` (grayscale, alpha)
-	 * - `color(255, 0, 0)` (r, g, b)
-	 * - `color(255, 0, 0, 10)` (r, g, b, a)
-	 * - `color('red')` (colorName)
-	 * - `color('#ff0000')` (hexColor)
-	 * - `color([255, 0, 0])` (colorComponents)
-	 * @param {string | number | Color | number[]} c0 color or first color component
-	 * @param {number} [c1] second color component
-	 * @param {number} [c2] third color component
-	 * @param {number} [c3] fourth color component (alpha)
-	 * @returns {Color} a new `Color` object
-	 * @example
-	 * createCanvas(200);
-	 * rect(0, 0, 100, 200);
-	 * 
-	 * //                ( r,   g,   b,   a)
-	 * let bottle = color(90, 100, 255, 100);
-	 * fill(bottle);
-	 * stroke(bottle);
-	 * strokeWeight(30);
-	 * circle(100, 100, 155);
-	 * @example
-	 * createCanvas(200);
-	 * //          (gray, alpha)
-	 * let c = color(200, 50);
-	 * 
-	 * function draw() {
-	 * 	background(c);
-	 * 	circle(mouseX, mouseY, 50);
-	 * 	c.g = (c.g + 1) % 256;
-	 * }
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * //           (r,   g,   b,  a)
-	 * let c = color(0, 255, 255, 50);
-	 * 
-	 * function draw() {
-	 * 	fill(c);
-	 * 	circle(mouseX, mouseY, 50);
-	 * }
-	 */
-	function color(c0: string | number | Color | number[], c1?: number, c2?: number, c3?: number): Color;
-
-	/** 🎨
-	 * Sets the color mode for the sketch, which changes how colors are
-	 * interpreted and displayed.
-	 * 
-	 * Color gamut is 'display-p3' by default, if the device supports HDR.
-	 *
-	 * The default color mode is RGB in legacy integer format.
-	 * @param {'rgb' | 'oklch' | 'hsl' | 'hsb'} mode color mode
-	 * @param {1 | 255} format color format (1 for float, 255 for integer)
-	 * @param {'srgb' | 'display-p3'} [gamut] color gamut
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * colorMode(RGB, 1);
-	 * fill(1, 0, 0);
-	 * rect(0, 0, 66, 200);
-	 * fill(0, 1, 0);
-	 * rect(66, 0, 67, 200);
-	 * fill(0, 0, 1);
-	 * rect(133, 0, 67, 200);
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * colorMode(OKLCH);
-	 * 
-	 * fill(0.25, 0.15, 0);
-	 * rect(0, 0, 100, 200);
-	 * 
-	 * fill(0.75, 0.15, 0);
-	 * rect(100, 0, 100, 200);
-	 */
-	function colorMode(mode: 'rgb' | 'oklch', format: 1 | 255, gamut: 'srgb' | 'display-p3'): void;
-
-	/** 🎨
-	 * RGB colors have components `r`/`red`, `g`/`green`, `b`/`blue`,
-	 * and `a`/`alpha`.
-	 * 
-	 * By default when a canvas is using the HDR "display-p3" color space,
-	 * rgb colors are mapped to the full P3 gamut, even when they use the
-	 * legacy integer 0-255 format.
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * colorMode(RGB);
-	 * 
-	 * background(255, 0, 0);
-	 */
-	const RGB: 'rgb';
-
-	/** 🎨
-	 * OKLCH colors have components `l`/`lightness`, `c`/`chroma`,
-	 * `h`/`hue`, and `a`/`alpha`. It's more intuitive for humans
-	 * to work with color in these terms than RGB.
-	 * 
-	 * OKLCH is perceptually uniform, meaning colors at the
-	 * same lightness and chroma (colorfulness) will appear to
-	 * have equal luminance, regardless of the hue.
-	 * 
-	 * OKLCH can accurately represent all colors visible to the
-	 * human eye, unlike many other color spaces that are bounded
-	 * to a gamut. The maximum lightness and chroma values that
-	 * correspond to sRGB or P3 gamut limits vary depending on
-	 * the hue. Colors that are out of gamut will be clipped to
-	 * the nearest in-gamut color.
-	 * 
-	 * Use the [OKLCH color picker](https://oklch.com) to find
-	 * in-gamut colors.
-	 * 
-	 * - `lightness`: 0 to 1
-	 * - `chroma`: 0 to ~0.4
-	 * - `hue`: 0 to 360
-	 * - `alpha`: 0 to 1
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * colorMode(OKLCH);
-	 * 
-	 * background(0.64, 0.3, 30);
-	 * @example
-	 * createCanvas(200);
-	 * colorMode(OKLCH);
-	 * 
-	 * function draw() {
-	 * 	background(0.7, 0.16, frameCount % 360);
-	 * }
-	 */
-	const OKLCH: 'oklch';
-
-	/** 🎨
-	 * HSL colors have components `h`/`hue`, `s`/`saturation`,
-	 * `l`/`lightness`, and `a`/`alpha`.
-	 * 
-	 * HSL was created in the 1970s to approximate human perception
-	 * of color, trading accuracy for simpler computations. It's
-	 * not perceptually uniform, so colors with the same lightness
-	 * can appear darker or lighter, depending on their hue
-	 * and saturation. Yet, the lightness and saturation values that
-	 * correspond to gamut limits are always 100, regardless of the
-	 * hue. This can make HSL easier to work with than OKLCH.
-	 * 
-	 * HSL colors are mapped to the full P3 gamut when
-	 * using the "display-p3" color space.
-	 * 
-	 * - `hue`: 0 to 360
-	 * - `saturation`: 0 to 100
-	 * - `lightness`: 0 to 100
-	 * - `alpha`: 0 to 1
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * colorMode(HSL);
-	 * 
-	 * background(0, 100, 50);
-	 * @example
-	 * createCanvas(200, 220);
-	 * noStroke();
-	 * 
-	 * colorMode(HSL);
-	 * for (let h = 0; h < 360; h += 10) {
-	 * 	for (let l = 0; l <= 100; l += 10) {
-	 * 		fill(h, 100, l);
-	 * 		rect(h * (11 / 20), l * 2, 6, 20);
-	 * 	}
-	 * }
-	 */
-	const HSL: 'hsl';
-
-	/** 🎨
-	 * HSB colors have components `h`/`hue`, `s`/`saturation`,
-	 * `b`/`brightness` (aka `v`/`value`), and `a`/`alpha`.
-	 * 
-	 * HSB is similar to HSL, but instead of lightness
-	 * (black to white), it uses brightness (black to
-	 * full color). To produce white, set brightness
-	 * to 100 and saturation to 0.
-	 * 
-	 * - `hue`: 0 to 360
-	 * - `saturation`: 0 to 100
-	 * - `brightness`: 0 to 100
-	 * - `alpha`: 0 to 1
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * colorMode(HSB);
-	 * 
-	 * background(0, 100, 100);
-	 * @example
-	 * createCanvas(200, 220);
-	 * noStroke();
-	 * 
-	 * colorMode(HSB);
-	 * for (let h = 0; h < 360; h += 10) {
-	 * 	for (let b = 0; b <= 100; b += 10) {
-	 * 		fill(h, 100, b);
-	 * 		rect(h * (11 / 20), b * 2, 6, 20);
-	 * 	}
-	 * }
-	 */
-	const HSB: 'hsb';
-
-	/** 🎨
-	 * Limits the color gamut to the sRGB color space.
-	 * 
-	 * If your display is HDR capable, note that full red appears
-	 * less saturated and darker in this example, as it would on
-	 * an SDR display.
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * colorMode(RGB, 255, SRGB);
-	 * 
-	 * background(255, 0, 0);
-	 */
-	const SRGB: 'srgb';
-
-	/** 🎨
-	 * Expands the color gamut to the P3 color space.
-	 * 
-	 * This is the default color gamut on devices that support HDR.
-	 * 
-	 * If your display is HDR capable, note that full red appears
-	 * fully saturated and bright in the following example.
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * colorMode(RGB, 255, DISPLAY_P3);
-	 * 
-	 * background(255, 0, 0);
-	 */
-	const DISPLAY_P3: 'display-p3';
-
-	/** 🎨
-	 * Draws over the entire canvas with a color or image.
-	 * 
-	 * Like the [`color`](https://q5js.org/learn/#color) function,
-	 * this function can accept colors in a wide range of formats:
-	 * CSS color string, grayscale value, and color component values.
-	 * @param {Color | Q5.Image} filler a color or image to draw
-	 * @example
-	 * createCanvas(200, 100);
-	 * background('crimson');
-	 * @example
-	 * function draw() {
-	 * 	background(128, 32);
-	 * 	circle(mouseX, mouseY, 20);
-	 * }
-	 */
-	function background(filler: Color | Q5.Image): void;
-
-	class Color {
-
-		/** 🎨
-		 * This constructor strictly accepts 4 numbers, which are the color
-		 * components.
-		 * 
-		 * Use the `color` function for greater flexibility, it runs
-		 * this constructor internally.
-		 * 
-		 * `Color` is not actually a class itself, it's a reference to a
-		 * Q5 color class based on the color mode, format, and gamut.
-		 */
-		constructor(c0: number, c1: number, c2: number, c3: number);
-
-		/** 🎨
-		 * Checks if this color is exactly equal to another color.
-		 */
-		equals(other: Color): boolean;
-
-		/** 🎨
-		 * Checks if the color is the same as another color,
-		 * disregarding their alpha values.
-		 */
-		isSameColor(other: Color): boolean;
-
-		/** 🎨
-		 * Produces a CSS color string representation.
-		 */
-		toString(): string;
-
-		/** 🎨
-		 * An array of the color's components.
-		 */
-		levels: number[];
-	}
-
-	// 💅 styles
-
-	/** 💅
-	 * Sets the fill color. The default is white.
-	 * 
-	 * Like the [`color`](https://q5js.org/learn/#color) function, this function
-	 * can accept colors in a wide range of formats: as a CSS color string,
-	 * a `Color` object, grayscale value, or color component values.
-	 * @param {Color} color fill color
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * fill('red');
-	 * circle(80, 80, 80);
-	 * 
-	 * fill('lime');
-	 * square(80, 80, 80);
-	 */
-	function fill(color: Color): void;
-
-	/** 💅
-	 * Sets the stroke (outline) color. The default is black.
-	 * 
-	 * Like the [`color`](https://q5js.org/learn/#color) function, this function
-	 * can accept colors in a wide range of formats: as a CSS color string,
-	 * a `Color` object, grayscale value, or color component values.
-	 * @param {Color} color stroke color
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * fill(36);
-	 * 
-	 * stroke('red');
-	 * circle(80, 80, 80);
-	 * 
-	 * stroke('lime');
-	 * square(80, 80, 80);
-	 */
-	function stroke(color: Color): void;
-
-	/** 💅
-	 * After calling this function, drawing will not be filled.
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * noFill();
-	 * 
-	 * stroke('red');
-	 * circle(80, 80, 80);
-	 * stroke('lime');
-	 * square(80, 80, 80);
-	 */
-	function noFill(): void;
-
-	/** 💅
-	 * After calling this function, drawing will not have a stroke (outline).
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * fill(36);
-	 * stroke('red');
-	 * circle(80, 80, 80);
-	 * 
-	 * noStroke();
-	 * square(80, 80, 80);
-	 */
-	function noStroke(): void;
-
-	/** 💅
-	 * Sets the size of the stroke used for lines and the border around drawings.
-	 * @param {number} weight size of the stroke in pixels
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * stroke('red');
-	 * circle(50, 100, 80);
-	 * 
-	 * strokeWeight(12);
-	 * circle(150, 100, 80);
-	 */
-	function strokeWeight(weight: number): void;
-
-	/** 💅
-	 * Sets the global opacity, which affects all subsequent drawing operations, except `background`. Default is 1, fully opaque.
-	 * 
-	 * In q5 WebGPU this function only affects images.
-	 * @param {number} alpha opacity level, ranging from 0 to 1
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * opacity(1);
-	 * circle(80, 80, 80);
-	 * 
-	 * opacity(0.2);
-	 * square(80, 80, 80);
-	 */
-	function opacity(alpha: number): void;
-
-	/** 💅
-	 * Sets the shadow color. The default is transparent (no shadow).
-	 * 
-	 * Shadows apply to anything drawn to the canvas, including filled
-	 * shapes, strokes, text, and images.
-	 * 
-	 * Like the [`color`](https://q5js.org/learn/#color) function, this function
-	 * can accept colors in a wide range of formats: as a CSS color string,
-	 * a `Color` object, grayscale value, or color component values.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @param {Color} color shadow color
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * noFill();
-	 * shadow('black');
-	 * rect(64, 60, 80, 80);
-	 * @example
-	 * createCanvas(200);
-	 * let logo = loadImage('/assets/p5play_logo.webp');
-	 * 
-	 * function setup() {
-	 * 	background(200);
-	 * 	shadow(0);
-	 * 	image(logo, 36, 36, 128, 128);
-	 * }
-	 */
-	function shadow(color: string | Color): void;
-
-	/** 💅
-	 * Disables the shadow effect.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * noStroke();
-	 * shadow('black');
-	 * rect(14, 14, 80, 80);
-	 * 
-	 * noShadow();
-	 * rect(104, 104, 80, 80);
-	 */
-	function noShadow(): void;
-
-	/** 💅
-	 * Sets the shadow offset and blur radius.
-	 * 
-	 * When q5 starts, shadow offset is (10, 10) with a blur of 10.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @param {number} offsetX horizontal offset of the shadow
-	 * @param {number} offsetY vertical offset of the shadow, defaults to be the same as offsetX
-	 * @param {number} blur blur radius of the shadow, defaults to 0
-	 * @example
-	 * createCanvas(200);
-	 * noStroke();
-	 * shadow(50);
-	 * 
-	 * function draw() {
-	 * 	background(200);
-	 * 	shadowBox(-20, mouseY, 10);
-	 * 	circle(100, 100, 80, 80);
-	 * }
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * noStroke();
-	 * 
-	 * shadow('aqua');
-	 * shadowBox(20);
-	 * rect(50, 50, 100, 100);
-	 * textSize(64);
-	 * text('q5', 60, 115);
-	 */
-	function shadowBox(offsetX: number, offsetY: number, blur: number): void;
-
-	/** 💅
-	 * Set the global composite operation for the canvas context.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @param {string} val composite operation
-	 */
-	function blendMode(val: string): void;
-
-	/** 💅
-	 * Set the line cap style to `ROUND`, `SQUARE`, or `PROJECT`.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @param {CanvasLineCap} val line cap style
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * strokeWeight(20);
-	 * 
-	 * strokeCap(ROUND);
-	 * line(50, 50, 150, 50);
-	 * 
-	 * strokeCap(SQUARE);
-	 * line(50, 100, 150, 100);
-	 * 
-	 * strokeCap(PROJECT);
-	 * line(50, 150, 150, 150);
-	 */
-	function strokeCap(val: CanvasLineCap): void;
-
-	/** 💅
-	 * Set the line join style to `ROUND`, `BEVEL`, or `MITER`.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @param {CanvasLineJoin} val line join style
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * strokeWeight(10);
-	 * 
-	 * strokeJoin(ROUND);
-	 * triangle(50, 20, 150, 20, 50, 70);
-	 * 
-	 * strokeJoin(BEVEL);
-	 * triangle(150, 50, 50, 100, 150, 150);
-	 * 
-	 * strokeJoin(MITER);
-	 * triangle(50, 130, 150, 180, 50, 180);
-	 */
-	function strokeJoin(val: CanvasLineJoin): void;
-
-	/** 💅
-	 * Sets the canvas to erase mode, where shapes will erase what's
-	 * underneath them instead of drawing over it.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @param {number} [fillAlpha] opacity level of the fill color
-	 * @param {number} [strokeAlpha] opacity level of the stroke color
-	 */
-	function erase(fillAlpha?: number, strokeAlpha?: number): void;
-
-	/** 💅
-	 * Resets the canvas from erase mode to normal drawing mode.
-	 * 
-	 * Not available in q5 WebGPU.
-	 */
-	function noErase(): void;
-
-	/** 💅
-	 * Saves the current drawing style settings.
-	 * 
-	 * This includes the fill, stroke, stroke weight, tint, image mode,
-	 * rect mode, ellipse mode, text size, text align, text baseline, and
-	 * shadow settings.
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * pushStyles();
-	 * fill('blue');
-	 * circle(50, 50, 80);
-	 * 
-	 * popStyles();
-	 * circle(150, 150, 80);
-	 */
-	function pushStyles(): void;
-
-	/** 💅
-	 * Restores the previously saved drawing style settings.
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * pushStyles();
-	 * fill('blue');
-	 * circle(50, 50, 80);
-	 * 
-	 * popStyles();
-	 * circle(150, 150, 80);
-	 */
-	function popStyles(): void;
-
-	/** 💅
-	 * Clears the canvas, making every pixel completely transparent.
-	 * 
-	 * Note that the canvas can only be seen through if it has an alpha channel.
-	 * @example
-	 * createCanvas(200, 200, { alpha: true });
-	 * 
-	 * function draw() {
-	 * 	clear();
-	 * 	circle(frameCount % 200, 100, 80);
-	 * }
-	 */
-	function clear(): void;
-
-	/** 💅
-	 * Checks if a given point is within the current path's fill area.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @param {number} x x-coordinate of the point
-	 * @param {number} y y-coordinate of the point
-	 * @returns {boolean} true if the point is within the fill area, false otherwise
-	 */
-	function inFill(x: number, y: number): boolean;
-
-	/** 💅
-	 * Checks if a given point is within the current path's stroke.
-	 * 
-	 * Not available in q5 WebGPU.
-	 * @param {number} x x-coordinate of the point
-	 * @param {number} y y-coordinate of the point
-	 * @returns {boolean} true if the point is within the stroke, false otherwise
-	 */
-	function inStroke(x: number, y: number): boolean;
-
-	// 🦋 transforms
-
-	/** 🦋
-	 * Translates the origin of the drawing context.
-	 * @param {number} x translation along the x-axis
-	 * @param {number} y translation along the y-axis
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	translate(150, 150);
-	 * 	circle(0, 0, 80);
-	 * }
-	 */
-	function translate(x: number, y: number): void;
-
-	/** 🦋
-	 * Rotates the drawing context.
-	 * @param {number} angle rotation angle in radians
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	translate(100, 100);
-	 * 	rotate(mouseX / 50);
-	 * 
-	 * 	rectMode(CENTER);
-	 * 	square(0, 0, 50);
-	 * }
-	 */
-	function rotate(angle: number): void;
-
-	/** 🦋
-	 * Scales the drawing context.
-	 * 
-	 * If only one input parameter is provided,
-	 * the drawing context will be scaled uniformly.
-	 * @param {number} x scaling factor along the x-axis
-	 * @param {number} [y] scaling factor along the y-axis
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	scale(mouseX / 10);
-	 * 	circle(0, 0, 20);
-	 * }
-	 */
-	function scale(x: number, y?: number): void;
-
-	/** 🦋
-	 * Shears the drawing context along the x-axis.
-	 * @param {number} angle shear angle in radians
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	translate(25, 60);
-	 * 	shearX(mouseX / 100);
-	 * 	square(0, 0, 80);
-	 * }
-	 */
-	function shearX(angle: number): void;
-
-	/** 🦋
-	 * Shears the drawing context along the y-axis.
-	 * @param {number} angle shear angle in radians
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	translate(25, 60);
-	 * 	shearY(mouseX / 100);
-	 * 	square(0, 0, 80);
-	 * }
-	 */
-	function shearY(angle: number): void;
-
-	/** 🦋
-	 * Applies a transformation matrix.
-	 * 
-	 * Accepts a 3x3 matrix as either an array or multiple arguments.
-	 * @param {number} a
-	 * @param {number} b
-	 * @param {number} c
-	 * @param {number} d
-	 * @param {number} e
-	 * @param {number} f
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	applyMatrix(2, 1, 1, 1, 100, 100);
-	 * 	circle(0, 0, 80);
-	 * }
-	 */
-	function applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number): void;
-
-	/** 🦋
-	 * Resets the transformation matrix.
-	 * 
-	 * q5 runs this function before every time the `draw` function is run,
-	 * so that transformations don't carry over to the next frame.
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * translate(100, 100);
-	 * circle(0, 0, 80);
-	 * 
-	 * resetMatrix();
-	 * square(0, 0, 50);
-	 */
-	function resetMatrix(): void;
-
-	/** 🦋
-	 * Saves the current transformation matrix.
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * translate(100, 100);
-	 * 
-	 * pushMatrix();
-	 * rotate(QUARTER_PI);
-	 * ellipse(0, 0, 120, 40);
-	 * popMatrix();
-	 * 
-	 * ellipse(0, 0, 120, 40);
-	 */
-	function pushMatrix(): void;
-
-	/** 🦋
-	 * Restores the previously saved transformation matrix.
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * translate(100, 100);
-	 * 
-	 * pushMatrix();
-	 * rotate(QUARTER_PI);
-	 * ellipse(0, 0, 120, 40);
-	 * popMatrix();
-	 * 
-	 * ellipse(0, 0, 120, 40);
-	 */
-	function popMatrix(): void;
-
-	/** 🦋
-	 * Saves the current drawing style settings and transformations.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * push();
-	 * fill('blue');
-	 * translate(100, 100);
-	 * circle(0, 0, 80);
-	 * pop();
-	 * 
-	 * square(0, 0, 50);
-	 */
-	function push(): void;
-
-	/** 🦋
-	 * Restores the previously saved drawing style settings and transformations.
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * push();
-	 * fill('blue');
-	 * translate(100, 100);
-	 * circle(0, 0, 80);
-	 * pop();
-	 * 
-	 * square(0, 0, 50);
-	 */
-	function pop(): void;
-
-	// 💻 display
-
-	/** 💻
-	 * Customize how your canvas is presented.
-	 * @param {string} mode NORMAL, CENTER, or MAXED
-	 * @param {string} renderQuality SMOOTH or PIXELATED
-	 * @param {number} scale can also be given as a string (for example "x2")
-	 * @example
-	 * createCanvas(50, 25);
-	 * 
-	 * displayMode(CENTER, PIXELATED, 4);
-	 * 
-	 * circle(25, 12.5, 16);
-	 */
-	function displayMode(mode: string, renderQuality: string, scale: string | number): void;
-
-	/** 💻
-	 * A `displayMode` setting.
-	 * 
-	 * The canvas will be scaled to fill the parent element,
-	 * with letterboxing if necessary to preserve its aspect ratio.
-	 */
-	const MAXED: 'maxed';
-
-	/** 💻
-	 * A `displayMode` render quality.
-	 * 
-	 * Smooth upscaling is used if the canvas is scaled.
-	 */
-	const SMOOTH: 'smooth';
-
-	/** 💻
-	 * A `displayMode` render quality.
-	 * 
-	 * Pixels are rendered as sharp squares if the canvas is scaled.
-	 */
-	const PIXELATED: 'pixelated';
-
-	/** 💻
-	 * Enables or disables fullscreen mode.
-	 * @param {boolean} [v] boolean indicating whether to enable or disable fullscreen mode
-	 */
-	function fullscreen(v?: boolean): void;
-
-	/** 💻
-	 * The width of the window.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	textSize(64);
-	 * 	textAlign(CENTER, CENTER);
-	 * 	text(windowWidth, 100, 100);
-	 * }
-	 */
-	var windowWidth: number;
-
-	/** 💻
-	 * The height of the window.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	textSize(64);
-	 * 	textAlign(CENTER, CENTER);
-	 * 	text(windowHeight, 100, 100);
-	 * }
-	 */
-	var windowHeight: number;
-
-	/** 💻
-	 * The width of the canvas.
-	 */
-	var width: number;
-
-	/** 💻
-	 * The height of the canvas.
-	 */
-	var height: number;
-
-	/** 💻
-	 * Half the width of the canvas.
-	 */
-	var halfWidth: number;
-
-	/** 💻
-	 * Half the height of the canvas.
-	 */
-	var halfHeight: number;
-
-	/** 💻
-	 * The canvas element associated with the Q5 instance.
-	 * 
-	 * If a canvas is not explicitly created with `createCanvas()`, but a q5 function like `draw` or `mousePressed` is defined, a default canvas of size 200x200 will be created automatically.
-	 */
-	var canvas: HTMLCanvasElement;
-
-	/** 💻
-	 * Resizes the canvas to the specified width and height.
-	 * @param {number} w width of the canvas
-	 * @param {number} h height of the canvas
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * function draw() {
-	 * 	background(200);
-	 * }
-	 * 
-	 * function mousePressed() {
-	 * 	resizeCanvas(200, 200);
-	 * }
-	 */
-	function resizeCanvas(w: number, h: number): void;
-
-	/** 💻
-	 * The number of frames that have been displayed since the program started.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	textSize(64);
-	 * 	text(frameCount, 8, 120);
-	 * }
-	 */
-	var frameCount: number;
-
-	/** 💻
-	 * Stops the draw loop.
-	 * @example
-	 * function draw() {
-	 * 	circle(frameCount * 5, 100, 80);
-	 * 	noLoop();
-	 * }
-	 */
-	function noLoop(): void;
-
-	/** 💻
-	 * Redraws the canvas n times. If no input parameter is provided,
-	 * it calls the draw function once.
-	 * 
-	 * This is an async function.
-	 * @param {number} [n] number of times to redraw the canvas, default is 1
-	 * @example
-	 * createCanvas(200);
-	 * noLoop();
-	 * 
-	 * function draw() {
-	 * 	circle(frameCount * 5, 100, 80);
-	 * }
-	 * function mousePressed() {
-	 * 	redraw(10);
-	 * }
-	 */
-	function redraw(n?: number): void;
-
-	/** 💻
-	 * Starts the draw loop again if it was stopped.
-	 * @example
-	 * createCanvas(200);
-	 * noLoop();
-	 * 
-	 * function draw() {
-	 * 	circle(frameCount * 5, 100, 80);
-	 * }
-	 * function mousePressed() {
-	 * 	loop();
-	 * }
-	 */
-	function loop(): void;
-
-	/** 💻
-	 * Sets the target frame rate or gets an approximation of the
-	 * sketch's current frame rate.
-	 * 
-	 * Even when the sketch is running at a consistent frame rate,
-	 * the current frame rate value will fluctuate. Use your web browser's
-	 * developer tools for more accurate performance analysis.
-	 * @param {number} [hertz] target frame rate, default is 60
-	 * @returns {number} current frame rate
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 
-	 * 	if (mouseIsPressed) frameRate(10);
-	 * 	else frameRate(60);
-	 * 
-	 * 	circle(frameCount % 200, 100, 80);
-	 * }
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	textSize(64);
-	 * 	text(round(frameRate()), 65, 120);
-	 * }
-	 */
-	function frameRate(hertz?: number): number;
-
-	/** 💻
-	 * The desired frame rate of the sketch.
-	 * @returns {number} target frame rate
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	textSize(64);
-	 * 
-	 * 	text(getTargetFrameRate(), 65, 120);
-	 * }
-	 */
-	function getTargetFrameRate(): number;
-
-	/** 💻
-	 * 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.
-	 * 
-	 * Use your web browser's developer tools for more in-depth
-	 * performance analysis.
-	 * @returns {number} frames per second
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	frameRate(1);
-	 * 	textSize(64);
-	 * 
-	 * 	text(getFPS(), 8, 120);
-	 * }
-	 */
-	function getFPS(): number;
-
-	/** 💻
-	 * Runs after each `draw` function call and post-draw q5 addon processes, if any.
-	 * 
-	 * Useful for adding post-processing effects when it's not possible
-	 * to do so at the end of the `draw` function, such as when using
-	 * addons like p5play that auto-draw to the canvas after the `draw`
-	 * function is run.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	circle(frameCount % 200, 100, 80);
-	 * }
-	 * 
-	 * function postProcess() {
-	 * 	filter(INVERT);
-	 * }
-	 */
-	function postProcess(): void;
-
-	/** 💻
-	 * Sets the pixel density of the canvas.
-	 * @param {number} v pixel density value
-	 * @returns {number} pixel density
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * pixelDensity(1);
-	 * circle(100, 50, 80);
-	 */
-	function pixelDensity(v: number): number;
-
-	/** 💻
-	 * Returns the current display density.
-	 * 
-	 * On most modern displays, this value will be 2 or 3.
-	 * @returns {number} display density
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * textSize(64);
-	 * text(displayDensity(), 10, 20);
-	 */
-	function displayDensity(): number;
-
-	/** 💻
-	 * The time passed since the last frame was drawn.
-	 * 
-	 * With the default frame rate of 60, delta time will be
-	 * approximately 16.6
-	 * 
-	 * Can be used to keep movements tied to real time if the sketch
-	 * is often dropping below the target frame rate. Although if frame
-	 * rates are consistently low, consider reducing the target frame
-	 * rate instead.
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	text(deltaTime, 60, 106);
-	 * }
-	 * @example
-	 * let x = 0;
-	 * function draw() {
-	 * 	background(200);
-	 * 	// simulate frame rate drops
-	 * 	frameRate(random(30, 60));
-	 * 
-	 * 	x += deltaTime * 0.2;
-	 * 	circle(x % 200, 100, 20);
-	 * }
-	 */
-	var deltaTime: number;
-
-	/** 💻
-	 * The 2D rendering context for the canvas, if using the Canvas2D
-	 * renderer.
-	 */
-	var ctx: CanvasRenderingContext2D;
-
-	var drawingContext: CanvasRenderingContext2D;
-
-	// 🧮 math
-
-	/** 🧮
-	 * Generates a random value.
-	 * 
-	 * - If no inputs are provided, returns a number between 0 and 1.
-	 * - If one numerical input is provided, returns a number between 0 and the provided value.
-	 * - If two numerical inputs are provided, returns a number between the two values.
-	 * - If an array is provided, returns a random element from the array.
-	 * @param {number | any[]} [low] lower bound (inclusive) or an array
-	 * @param {number} [high] upper bound (exclusive)
-	 * @returns {number | any} a random number or element
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * frameRate(5);
-	 * 
-	 * function draw() {
-	 * 	circle(100, 100, random(20, 200));
-	 * }
-	 * @example
-	 * function draw() {
-	 * 	circle(random(200), random(200), 10);
-	 * }
-	 */
-	function random(low?: number | any[], high?: number): number | any;
-
-	/** 🧮
-	 * Generates a random number within a symmetric range around zero.
-	 * 
-	 * Can be used to create a jitter effect (random displacement).
-	 * 
-	 * Equivalent to `random(-amount, amount)`.
-	 * @param {number} amount absolute maximum amount of jitter, default is 1
-	 * @returns {number} random number between -val and val
-	 * @example
-	 * function draw() {
-	 * 	circle(mouseX + jit(3), mouseY + jit(3), 5);
-	 * }
-	 * @example
-	 * let q = await Q5.WebGPU();
-	 * createCanvas(200, 100);
-	 * 
-	 * q.draw = () => {
-	 * 	circle(jit(50), 0, random(50));
-	 * };
-	 */
-	function jit(amount: number): number;
-
-	/** 🧮
-	 * Generates a noise value based on the x, y, and z inputs.
-	 * 
-	 * Uses [Perlin Noise](https://en.wikipedia.org/wiki/Perlin_noise) by default.
-	 * @param {number} [x] x-coordinate input
-	 * @param {number} [y] y-coordinate input
-	 * @param {number} [z] z-coordinate input
-	 * @returns {number} a noise value
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	let n = noise(frameCount * 0.01);
-	 * 	circle(100, 100, n * 200);
-	 * }
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	let t = (frameCount + mouseX) * 0.02;
-	 * 	for (let x = -5; x < 220; x += 10) {
-	 * 		let n = noise(t, x * 0.1);
-	 * 		circle(x, 100, n * 40);
-	 * 	}
-	 * }
-	 */
-	function noise(x?: number, y?: number, z?: number): number;
-
-	/** 🧮
-	 * Calculates the distance between two points.
-	 * 
-	 * This function also accepts two objects with `x` and `y` properties.
-	 * @param {number} x1 x-coordinate of the first point
-	 * @param {number} y1 y-coordinate of the first point
-	 * @param {number} x2 x-coordinate of the second point
-	 * @param {number} y2 y-coordinate of the second point
-	 * @returns {number} distance between the points
-	 * @example
-	 * function draw() {
-	 * 	background(200);
-	 * 	circle(100, 100, 20);
-	 * 	circle(mouseX, mouseY, 20);
-	 * 
-	 * 	let d = dist(100, 100, mouseX, mouseY);
-	 * 	text(round(d), 20, 20);
-	 * }
-	 */
-	function dist(x1: number, y1: number, x2: number, y2: number): number;
-
-	/** 🧮
-	 * Maps a number from one range to another.
-	 * @param {number} val incoming value to be converted
-	 * @param {number} start1 lower bound of the value's current range
-	 * @param {number} stop1 upper bound of the value's current range
-	 * @param {number} start2 lower bound of the value's target range
-	 * @param {number} stop2 upper bound of the value's target range
-	 * @returns {number} mapped value
-	 */
-	function map(val: number, start1: number, stop1: number, start2: number, stop2: number): number;
-
-	/** 🧮
-	 * Sets the mode for interpreting and drawing angles. Can be either 'degrees' or 'radians'.
-	 * @param {'degrees' | 'radians'} mode mode to set for angle interpretation
-	 */
-	function angleMode(mode: 'degrees' | 'radians'): void;
-
-	/** 🧮
-	 * Converts degrees to radians.
-	 * @param {number} degrees angle in degrees
-	 * @returns {number} angle in radians
-	 */
-	function radians(degrees: number): number;
-
-	/** 🧮
-	 * Converts radians to degrees.
-	 * @param {number} radians angle in radians
-	 * @returns {number} angle in degrees
-	 */
-	function degrees(radians: number): number;
-
-	/** 🧮
-	 * Calculates a number between two numbers at a specific increment.
-	 * @param {number} start first number
-	 * @param {number} stop second number
-	 * @param {number} amt amount to interpolate between the two values
-	 * @returns {number} interpolated number
-	 */
-	function lerp(start: number, stop: number, amt: number): number;
-
-	/** 🧮
-	 * Constrains a value between a minimum and maximum value.
-	 * @param {number} n number to constrain
-	 * @param {number} low lower bound
-	 * @param {number} high upper bound
-	 * @returns {number} constrained value
-	 */
-	function constrain(n: number, low: number, high: number): number;
-
-	/** 🧮
-	 * Normalizes a number from another range into a value between 0 and 1.
-	 * @param {number} n number to normalize
-	 * @param {number} start lower bound of the range
-	 * @param {number} stop upper bound of the range
-	 * @returns {number} normalized number
-	 */
-	function norm(n: number, start: number, stop: number): number;
-
-	/** 🧮
-	 * Calculates the fractional part of a number.
-	 * @param {number} n a number
-	 * @returns {number} fractional part of the number
-	 */
-	function fract(n: number): number;
-
-	/** 🧮
-	 * Calculates the absolute value of a number.
-	 * @param {number} n a number
-	 * @returns {number} absolute value of the number
-	 */
-	function abs(n: number): number;
-
-	/** 🧮
-	 * Rounds a number.
-	 * @param {number} n number to round
-	 * @param {number} [d] number of decimal places to round to
-	 * @returns {number} rounded number
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * textSize(32);
-	 * text(round(PI, 5), 10, 60);
-	 */
-	function round(n: number, d: number): number;
-
-	/** 🧮
-	 * Rounds a number up.
-	 * @param {number} n a number
-	 * @returns {number} rounded number
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * textSize(32);
-	 * text(ceil(PI), 10, 60);
-	 */
-	function ceil(n: number): number;
-
-	/** 🧮
-	 * Rounds a number down.
-	 * @param {number} n a number
-	 * @returns {number} rounded number
-	 * @example
-	 * createCanvas(200, 100);
-	 * background(200);
-	 * textSize(32);
-	 * text(floor(-PI), 10, 60);
-	 */
-	function floor(n: number): number;
-
-	/** 🧮
-	 * Returns the smallest value in a sequence of numbers.
-	 * @param {...number} args numbers to compare
-	 * @returns {number} minimum
-	 * @example
-	 * function draw() {
-	 * 	background(min(mouseX, 100));
-	 * 	circle(min(mouseX, 100), 0, 80);
-	 * }
-	 */
-	function min(...args: number[]): number;
-
-	/** 🧮
-	 * Returns the largest value in a sequence of numbers.
-	 * @param {...number} args numbers to compare
-	 * @returns {number} maximum
-	 * @example
-	 * function draw() {
-	 * 	background(max(mouseX, 100));
-	 * 	circle(max(mouseX, 100), 0, 80);
-	 * }
-	 */
-	function max(...args: number[]): number;
-
-	/** 🧮
-	 * Calculates the value of a base raised to a power.
-	 * 
-	 * For example, `pow(2, 3)` calculates 2 _ 2 _ 2 which is 8.
-	 * @param {number} base base
-	 * @param {number} exponent exponent
-	 * @returns {number} base raised to the power of exponent
-	 */
-	function pow(base: number, exponent: number): number;
-
-	/** 🧮
-	 * Calculates the square of a number.
-	 * @param {number} n number to square
-	 * @returns {number} square of the number
-	 */
-	function sq(n: number): number;
-
-	/** 🧮
-	 * Calculates the square root of a number.
-	 * @param {number} n a number
-	 * @returns {number} square root of the number
-	 */
-	function sqrt(n: number): number;
-
-	/** 🧮
-	 * Calculates the natural logarithm (base e) of a number.
-	 * @param {number} n a number
-	 * @returns {number} natural logarithm of the number
-	 */
-	function loge(n: number): number;
-
-	/** 🧮
-	 * Calculates e raised to the power of a number.
-	 * @param {number} exponent power to raise e to
-	 * @returns {number} e raised to the power of exponent
-	 */
-	function exp(exponent: number): number;
-
-	/** 🧮
-	 * Sets the seed for the random number generator.
-	 * @param {number} seed seed value
-	 */
-	function randomSeed(seed: number): void;
-
-	/** 🧮
-	 * Sets the random number generation method.
-	 * @param {any} method method to use for random number generation
-	 */
-	function randomGenerator(method: any): void;
-
-	/** 🧮
-	 * Generates a random number following a Gaussian (normal) distribution.
-	 * @param {number} mean mean (center) of the distribution
-	 * @param {number} std standard deviation (spread or "width") of the distribution
-	 * @returns {number} a random number following a Gaussian distribution
-	 */
-	function randomGaussian(mean: number, std: number): number;
-
-	/** 🧮
-	 * Generates a random number following an exponential distribution.
-	 * @returns {number} a random number following an exponential distribution
-	 */
-	function randomExponential(): number;
-
-	/** 🧮
-	 * Sets the noise generation mode.
-	 * 
-	 * Only the default mode, "perlin", is included in q5.js. Use of the
-	 * other modes requires the q5-noiser module.
-	 * @param {'perlin' | 'simplex' | 'blocky'} mode noise generation mode
-	 */
-	function noiseMode(mode: 'perlin' | 'simplex' | 'blocky'): void;
-
-	/** 🧮
-	 * Sets the seed value for noise generation.
-	 * @param {number} seed seed value
-	 */
-	function noiseSeed(seed: number): void;
-
-	/** 🧮
-	 * Sets the level of detail for noise generation.
-	 * @param {number} lod level of detail (number of octaves)
-	 * @param {number} falloff falloff rate for each octave
-	 */
-	function noiseDetail(lod: number, falloff: number): void;
-
-	/** 🧮
-	 * The ratio of a circle's circumference to its diameter.
-	 * Approximately 3.14159.
-	 */
-	const PI: number;
-
-	/** 🧮
-	 * 2 \* PI.
-	 * Approximately 6.28319.
-	 */
-	const TWO_PI: number;
-
-	/** 🧮
-	 * 2 \* PI.
-	 * Approximately 6.28319.
-	 */
-	const TAU: number;
-
-	/** 🧮
-	 * Half of PI.
-	 * Approximately 1.5708.
-	 */
-	const HALF_PI: number;
-
-	/** 🧮
-	 * A quarter of PI.
-	 * Approximately 0.7854.
-	 */
-	const QUARTER_PI: number;
-
-	function sin(angle: number): number;
-
-	function cos(angle: number): number;
-
-	function tan(angle: number): number;
-
-	function mag(val1: number, val2: number): number;
-
-	function asin(n: number): number;
-
-	function acos(n: number): number;
-
-	function atan(n: number): number;
-
-	function atan2(y: number, x: number): number;
-
-	// 🔊 sound
-
-	/**
-	 * q5 includes low latency sound playback and basic mixing capabilities
-	 * powered by WebAudio.
-	 * 
-	 * For audio filtering, synthesis, and analysis, consider using the
-	 * [p5.sound](https://p5js.org/reference/p5.sound/) addon with q5.
-	 */
-
-	/** 🔊
-	 * Loads audio data from a file and returns a `Sound` object.
-	 * 
-	 * Use functions like `play`, `pause`, and `stop` to
-	 * control playback. Note that sounds can only be played after the
-	 * first user interaction with the page!
-	 * 
-	 * Set `volume` to a value between 0 (silent) and 1 (full volume).
-	 * Set `pan` to a value between -1 (left) and 1 (right) to adjust
-	 * the sound's stereo position. Set `loop` to true to loop the sound.
-	 * 
-	 * Use `loaded`, `paused`, and `ended` to check the sound's status.
-	 * 
-	 * The entire sound file must be loaded before playback can start, use `await` to wait for a sound to load. To stream larger audio files use the `loadAudio` function instead.
-	 * @param {string} url sound file
-	 * @returns {Sound & PromiseLike<Sound>} sound
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let sound = loadSound('/assets/jump.wav');
-	 * sound.volume = 0.3;
-	 * 
-	 * function mousePressed() {
-	 * 	sound.play();
-	 * }
-	 */
-	function loadSound(url: string): Sound & PromiseLike<Sound>;
-
-	/** 🔊
-	 * Loads audio data from a file and returns an [HTMLAudioElement](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement).
-	 * 
-	 * Audio is considered loaded when the [canplaythrough event](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplaythrough_event) is fired.
-	 * 
-	 * Note that audio can only be played after the first user
-	 * interaction with the page!
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let audio = loadAudio('/assets/retro.flac');
-	 * audio.volume = 0.4;
-	 * 
-	 * function mousePressed() {
-	 * 	audio.play();
-	 * }
-	 */
-	function loadAudio(url: string): HTMLAudioElement & PromiseLike<HTMLAudioElement>;
-
-	/** 🔊
-	 * Returns the AudioContext in use or undefined if it doesn't exist.
-	 * @returns {AudioContext} AudioContext instance
-	 */
-	function getAudioContext(): AudioContext | void;
-
-	/** 🔊
-	 * Creates a new AudioContext or resumes it if it was suspended.
-	 * @returns {Promise<void>} a promise that resolves when the AudioContext is resumed
-	 */
-	function userStartAudio(): Promise<void>;
-
-	class Sound {
-
-		/** 🔊
-		 * Creates a new `Q5.Sound` object.
-		 */
-		constructor();
-
-		/** 🔊
-		 * Set the sound's volume to a value between
-		 * 0 (silent) and 1 (full volume).
-		 */
-		volume: number;
-
-		/** 🔊
-		 * Set the sound's stereo position between -1 (left) and 1 (right).
-		 */
-		pan: number;
-
-		/** 🔊
-		 * Set to true to make the sound loop continuously.
-		 */
-		loop: boolean;
-
-		/** 🔊
-		 * True if the sound data has finished loading.
-		 */
-		loaded: boolean;
-
-		/** 🔊
-		 * True if the sound is currently paused.
-		 */
-		paused: boolean;
-
-		/** 🔊
-		 * True if the sound has finished playing.
-		 */
-		ended: boolean;
-
-		/** 🔊
-		 * Plays the sound.
-		 * 
-		 * If this function is run when the sound is already playing,
-		 * a new playback will start, causing a layering effect.
-		 * 
-		 * If this function is run when the sound is paused,
-		 * all playback instances will be resumed.
-		 * 
-		 * Use `await` to wait for the sound to finish playing.
-		 * @returns {Promise<void>} a promise that resolves when the sound finishes playing
-		 */
-		play(): void;
-
-		/** 🔊
-		 * Pauses the sound, allowing it to be resumed.
-		 */
-		pause(): void;
-
-		/** 🔊
-		 * Stops the sound, resetting its playback position
-		 * to the beginning.
-		 * 
-		 * Removes all playback instances.
-		 */
-		stop(): void;
-	}
-
-	// 📑 dom
-
-	/**
-	 * The Document Object Model (DOM) is an interface for
-	 * creating and editing web pages with JavaScript.
-	 */
-
-	/** 📑
-	 * Creates a new HTML element and adds it to the page. `createEl` is
-	 * an alias.
-	 * 
-	 * Modify the element's CSS [`style`](https://developer.mozilla.org/docs/Web/API/HTMLElement/style) to change its appearance.
-	 * 
-	 * Use [`addEventListener`](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) to respond to events such as:
-	 * 
-	 * - "click": when the element is clicked
-	 * - "mouseover": when the mouse hovers over the element
-	 * - "mouseout": when the mouse stops hovering over the element
-	 * - "input": when a form element's value changes
-	 * 
-	 * q5 adds some extra functionality to the elements it creates:
-	 * 
-	 * - the `position` function makes it easy to place the element
-	 *   relative to the canvas
-	 * - the `size` function sets the width and height of the element
-	 * - alternatively, use the element's `x`, `y`, `width`, and `height` properties
-	 * @param {string} tag tag name of the element
-	 * @param {string} [content] content of the element
-	 * @returns {HTMLElement} element
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let el = createEl('div', '*');
-	 * el.position(50, 50);
-	 * el.size(100, 100);
-	 * el.style.fontSize = '136px';
-	 * el.style.textAlign = 'center';
-	 * el.style.backgroundColor = 'blue';
-	 * el.style.color = 'white';
-	 */
-	function createElement(tag: string, content?: string): HTMLElement;
-
-	/** 📑
-	 * Creates a link element.
-	 * @param {string} href url
-	 * @param {string} [text] text content
-	 * @param {boolean} [newTab] whether to open the link in a new tab
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let link = createA('https://q5js.org', 'q5.js');
-	 * link.position(16, 42);
-	 * link.style.fontSize = '80px';
-	 * 
-	 * link.addEventListener('mouseover', () => {
-	 * 	background('cyan');
-	 * });
-	 */
-	function createA(href: string, text?: string): HTMLAnchorElement;
-
-	/** 📑
-	 * Creates a button element.
-	 * @param {string} [content] text content
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * let btn = createButton('Click me!');
-	 * 
-	 * btn.addEventListener('click', () => {
-	 * 	background(random(100, 255));
-	 * });
-	 */
-	function createButton(content?: string): HTMLButtonElement;
-
-	/** 📑
-	 * Creates a checkbox element.
-	 * 
-	 * Use the `checked` property to get or set the checkbox's state.
-	 * 
-	 * The `label` property is the text label element next to the checkbox.
-	 * @param {string} [label] text label placed next to the checkbox
-	 * @param {boolean} [checked] initial state
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * let box = createCheckbox('Check me!');
-	 * box.label.style.color = 'lime';
-	 * 
-	 * box.addEventListener('input', () => {
-	 * 	if (box.checked) background('lime');
-	 * 	else background('black');
-	 * });
-	 */
-	function createCheckbox(label?: string, checked?: boolean): HTMLInputElement;
-
-	/** 📑
-	 * Creates a color input element.
-	 * 
-	 * Use the `value` property to get or set the color value.
-	 * @param {string} [value] initial color value
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * let picker = createColorPicker();
-	 * picker.value = '#fd7575';
-	 * 
-	 * function draw() {
-	 * 	background(picker.value);
-	 * }
-	 */
-	function createColorPicker(value?: string): HTMLInputElement;
-
-	/** 📑
-	 * Creates an image element.
-	 * @param {string} src url of the image
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * let img = createImg('/assets/p5play_logo.webp');
-	 * img.position(0, 0).size(100, 100);
-	 */
-	function createImg(src: string): HTMLImageElement;
-
-	/** 📑
-	 * Creates an input element.
-	 * 
-	 * Use the `value` property to get or set the input's value.
-	 * 
-	 * Use the `placeholder` property to set label text that appears
-	 * inside the input when it's empty.
-	 * 
-	 * See MDN's [input documentation](https://developer.mozilla.org/docs/Web/HTML/Element/input#input_types) for the full list of input types.
-	 * @param {string} [value] initial value
-	 * @param {string} [type] text input type, can be 'text', 'password', 'email', 'number', 'range', 'search', 'tel', 'url'
-	 * @example
-	 * createCanvas(200, 100);
-	 * textSize(64);
-	 * 
-	 * let input = createInput();
-	 * input.placeholder = 'Type here!';
-	 * input.size(200, 32);
-	 * 
-	 * input.addEventListener('input', () => {
-	 * 	background('orange');
-	 * 	text(input.value, 10, 70);
-	 * });
-	 */
-	function createInput(value?: string, type?: string): HTMLInputElement;
-
-	/** 📑
-	 * Creates a paragraph element.
-	 * @param {string} [content] text content
-	 * @example
-	 * createCanvas(200, 50);
-	 * background('coral');
-	 * 
-	 * let p = createP('Hello, world!');
-	 * p.style.color = 'pink';
-	 */
-	function createP(content?: string): HTMLParagraphElement;
-
-	/** 📑
-	 * Creates a radio button group.
-	 * 
-	 * Use the `option(label, value)` function to add new radio buttons
-	 * to the group.
-	 * 
-	 * Use the `value` property to get or set the value of the selected radio button.
-	 * @param {string} [groupName]
-	 * @example
-	 * createCanvas(200, 160);
-	 * 
-	 * let radio = createRadio();
-	 * radio.option('square', '1').option('circle', '2');
-	 * 
-	 * function draw() {
-	 * 	background(200);
-	 * 	if (radio.value == '1') square(75, 25, 80);
-	 * 	if (radio.value == '2') circle(100, 50, 80);
-	 * }
-	 */
-	function createRadio(groupName?: string): HTMLDivElement;
-
-	/** 📑
-	 * Creates a select element.
-	 * 
-	 * Use the `option(label, value)` function to add new options to
-	 * the select element.
-	 * 
-	 * Set `multiple` to `true` to allow multiple options to be selected.
-	 * 
-	 * Use the `value` property to get or set the selected option value.
-	 * 
-	 * Use the `selected` property get the labels of the selected
-	 * options or set the selected options by label. Can be a single
-	 * string or an array of strings.
-	 * @param {string} [placeholder] optional placeholder text that appears before an option is selected
-	 * @example
-	 * createCanvas(200, 100);
-	 * 
-	 * let sel = createSelect('Select an option');
-	 * sel.option('Red', '#f55').option('Green', '#5f5');
-	 * 
-	 * sel.addEventListener('change', () => {
-	 * 	background(sel.value);
-	 * });
-	 */
-	function createSelect(placeholder?: string): HTMLSelectElement;
-
-	/** 📑
-	 * Creates a slider element.
-	 * 
-	 * Use the `value` property to get or set the slider's value.
-	 * 
-	 * Use the `val` function to get the slider's value as a number.
-	 * @param {number} min minimum value
-	 * @param {number} max maximum value
-	 * @param {number} [value] initial value
-	 * @param {number} [step] step size
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let slider = createSlider(0, 255);
-	 * slider.position(10, 10).size(180);
-	 * 
-	 * function draw() {
-	 * 	background(slider.val());
-	 * }
-	 */
-	function createSlider(min: number, max: number, value?: number, step?: number): HTMLInputElement;
-
-	/** 📑
-	 * Creates a video element.
-	 * 
-	 * Note that videos must be muted to autoplay and the `play` and
-	 * `pause` functions can only be run after a user interaction.
-	 * 
-	 * The video element can be hidden and its content can be
-	 * displayed on the canvas using the `image` function.
-	 * @param {string} src url of the video
-	 * @returns {HTMLVideoElement & PromiseLike<HTMLVideoElement>} a new video element
-	 * @example
-	 * createCanvas(1);
-	 * 
-	 * let vid = createVideo('/assets/apollo4.mp4');
-	 * vid.size(200, 150);
-	 * vid.autoplay = vid.muted = vid.loop = true;
-	 * vid.controls = true;
-	 * @example
-	 * createCanvas(200, 150);
-	 * let vid = createVideo('/assets/apollo4.mp4');
-	 * vid.hide();
-	 * 
-	 * function mousePressed() {
-	 * 	vid.currentTime = 0;
-	 * 	vid.play();
-	 * }
-	 * function draw() {
-	 * 	image(vid, 0, 0, 200, 150);
-	 * 	filter(HUE_ROTATE, 90);
-	 * }
-	 */
-	function createVideo(src: string): HTMLVideoElement & PromiseLike<HTMLVideoElement>;
-
-	/** 📑
-	 * Creates a capture from a connected camera, such as a webcam.
-	 * 
-	 * The capture video element can be hidden and its content can be
-	 * displayed on the canvas using the `image` function.
-	 * 
-	 * Can preload to ensure the capture is ready to use when your
-	 * sketch starts.
-	 * 
-	 * Requests the highest video resolution from the user facing camera
-	 * by default. The first parameter to this function can be used to
-	 * specify the constraints for the capture. See [`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia)
-	 * for more info.
-	 * @param {string} [type] type of capture, can be only `VIDEO` or only `AUDIO`, the default is to use both video and audio
-	 * @param {boolean} [flipped] whether to mirror the video vertically, true by default
-	 * @returns {HTMLVideoElement & PromiseLike<HTMLVideoElement>} a new video element
-	 * @example
-	 * function mousePressed() {
-	 * 	let cap = createCapture(VIDEO);
-	 * 	cap.size(200, 112.5);
-	 * 	canvas.remove();
-	 * }
-	 * @example
-	 * let cap;
-	 * function mousePressed() {
-	 * 	cap = createCapture(VIDEO);
-	 * 	cap.hide();
-	 * }
-	 * 
-	 * function draw() {
-	 * 	let y = frameCount % height;
-	 * 	image(cap, 0, y, 200, 200);
-	 * }
-	 * @example
-	 * function mousePressed() {
-	 * 	let cap = createCapture({
-	 * 		video: { width: 640, height: 480 }
-	 * 	});
-	 * 	cap.size(200, 150);
-	 * 	canvas.remove();
-	 * }
-	 */
-	function createCapture(type?: string, flipped?: boolean): HTMLVideoElement & PromiseLike<HTMLVideoElement>;
-
-	/** 📑
-	 * Finds the first element in the DOM that matches the given [CSS selector](https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Basic_selectors).
-	 * @param {string} selector
-	 * @returns {HTMLElement} element
-	 */
-	function findElement(selector: string): HTMLElement;
-
-	/** 📑
-	 * Finds all elements in the DOM that match the given [CSS selector](https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Basic_selectors).
-	 * @param {string} selector
-	 * @returns {HTMLElement[]} elements
-	 */
-	function findElements(selector: string): HTMLElement[];
-
-	// 🎞 record
-
-	/** 🎞
-	 * Creates a recorder. Simply hit record to start recording!
-	 * 
-	 * The following properties can be set via the recorder UI or
-	 * programmatically.
-	 * 
-	 * - `format` is set to "H.264" by default.
-	 * - `bitrate` is a number in megabits per second (mbps). Its default
-	 *   value is determined by the height of the canvas. Increasing the
-	 *   bitrate will increase the quality and file size of the recording.
-	 * - `captureAudio` is set to true by default. Set to false to disable
-	 *   audio recording.
-	 * 
-	 * Note that recordings are done at a variable frame rate (VFR), which
-	 * makes the output video incompatible with some editing software.
-	 * For more info, see the
-	 * ["Recording the Canvas"](https://github.com/q5js/q5.js/wiki/Recording-the-Canvas).
-	 * wiki page.
-	 * @returns {HTMLElement} a recorder, q5 DOM element
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * let rec = createRecorder();
-	 * rec.bitrate = 10;
-	 * 
-	 * function draw() {
-	 * 	circle(mouseX, random(height), 10);
-	 * }
-	 */
-	function createRecorder(): HTMLElement;
-
-	/** 🎞
-	 * Starts recording the canvas or resumes recording if it was paused.
-	 * 
-	 * If no recorder exists, one is created but not displayed.
-	 */
-	function record(): void;
-
-	/** 🎞
-	 * Pauses the canvas recording, if one is in progress.
-	 */
-	function pauseRecording(): void;
-
-	/** 🎞
-	 * Discards the current recording.
-	 */
-	function deleteRecording(): void;
-
-	/** 🎞
-	 * Saves the current recording as a video file.
-	 * @param {string} fileName
-	 * @example
-	 * function draw() {
-	 * 	square(mouseX, random(200), 10);
-	 * }
-	 * 
-	 * function mousePressed() {
-	 * 	if (!recording) record();
-	 * 	else saveRecording('squares');
-	 * }
-	 */
-	function saveRecording(fileName: string): void;
-
-	/** 🎞
-	 * True if the canvas is currently being recorded.
-	 */
-	var recording: boolean;
-
-	// 🛠 utilities
-
-	/** 🛠
-	 * Loads a file or multiple files.
-	 * 
-	 * File type is determined by file extension. q5 supports loading
-	 * text, json, csv, font, audio, and image files.
-	 * 
-	 * By default, assets are loaded in parallel before q5 runs `draw`. Use `await` to wait for assets to load.
-	 * @param {...string} urls
-	 * @returns {Promise<any[]>} a promise that resolves with objects
-	 * @example
-	 * createCanvas(200);
-	 * let logo = load('/q5js_logo.avif');
-	 * 
-	 * function draw() {
-	 * 	image(logo, 0, 0, 200, 200);
-	 * }
-	 */
-	function load(...urls: string[]): PromiseLike<any[]>;
-
-	/** 🛠
-	 * Saves data to a file.
-	 * 
-	 * If data is not specified, the canvas will be saved.
-	 * 
-	 * If no arguments are provided, the canvas will be saved as
-	 * an image file named "untitled.png".
-	 * @param {object} [data] canvas, image, or JS object
-	 * @param {string} [fileName] filename to save as
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * circle(100, 100, 50);
-	 * 
-	 * function mousePressed() {
-	 * 	save('circle.png');
-	 * }
-	 * @example
-	 * createCanvas(200);
-	 * 
-	 * textSize(180);
-	 * let bolt = createTextImage('⚡️');
-	 * image(bolt, 16, -56);
-	 * 
-	 * function mousePressed() {
-	 * 	save(bolt, 'bolt.png');
-	 * }
-	 */
-	function save(data?: object, fileName?: string): void;
-
-	/** 🛠
-	 * Loads a text file from the specified url.
-	 * 
-	 * Using `await` to get the loaded text as a string is recommended.
-	 * @param {string} url text file
-	 * @returns {object & PromiseLike<string>} an object containing the loaded text in the property `obj.text` or use `await` to get the text string directly
-	 */
-	function loadText(url: string): object & PromiseLike<string>;
-
-	/** 🛠
-	 * Loads a JSON file from the specified url.
-	 * 
-	 * Using `await` to get the loaded JSON object or array is recommended.
-	 * @param {string} url JSON file
-	 * @returns {any & PromiseLike<any>} an object or array containing the loaded JSON
-	 */
-	function loadJSON(url: string): any & PromiseLike<any>;
-
-	/** 🛠
-	 * Loads a CSV file from the specified url.
-	 * 
-	 * Using `await` to get the loaded CSV as an array of objects is recommended.
-	 * @param {string} url CSV file
-	 * @returns {object[] & PromiseLike<object[]>} an array of objects containing the loaded CSV
-	 */
-	function loadCSV(url: string): object[] & PromiseLike<object[]>;
-
-	/** 🛠
-	 * Loads an xml file from the specified url.
-	 * 
-	 * Using `await` to get the loaded XML Element is recommended.
-	 * @param {string} url xml file
-	 * @returns {Element & PromiseLike<Element>} an object containing the loaded XML Element in a property called `obj.DOM` or use await to get the XML Element directly
-	 */
-	function loadXML(url: string): object & PromiseLike<Element>;
-
-	/** 🛠
-	 * Wait for any assets that started loading to finish loading. By default q5 runs this before looping draw (which is called preloading), but it can be used even after draw starts looping.
-	 * @returns {PromiseLike<any[]>} a promise that resolves with loaded objects
-	 */
-	function loadAll(): PromiseLike<any[]>;
-
-	/** 🛠
-	 * Disables the automatic preloading of assets before draw starts looping. This allows draw to start immediately, and assets can be lazy loaded or `loadAll()` can be used to wait for assets to finish loading later.
-	 */
-	function disablePreload(): void;
-
-	/** 🛠
-	 * nf is short for number format. It formats a number
-	 * to a string with a specified number of digits.
-	 * @param {number} num number to format
-	 * @param {number} digits number of digits to format to
-	 * @returns {string} formatted number
-	 */
-	function nf(num: number, digits: number): string;
-
-	/** 🛠
-	 * Shuffles the elements of an array.
-	 * @param {any[]} arr array to shuffle
-	 * @param {boolean} [modify] whether to modify the original array, false by default which copies the array before shuffling
-	 * @returns {any[]} shuffled array
-	 */
-	function shuffle(arr: any[]): any[];
-
-	/** 🛠
-	 * Stores an item in localStorage.
-	 * @param {string} key key under which to store the item
-	 * @param {string} val value to store
-	 */
-	function storeItem(key: string, val: string): void;
-
-	/** 🛠
-	 * Retrieves an item from localStorage.
-	 * @param {string} key key of the item to retrieve
-	 * @returns {string} value of the retrieved item
-	 */
-	function getItem(key: string): string;
-
-	/** 🛠
-	 * Removes an item from localStorage.
-	 * @param {string} key key of the item to remove
-	 */
-	function removeItem(key: string): void;
-
-	/** 🛠
-	 * Clears all items from localStorage.
-	 */
-	function clearStorage(): void;
-
-	/** 🛠
-	 * Returns the current year.
-	 * @returns {number} current year
-	 */
-	function year(): number;
-
-	/** 🛠
-	 * Returns the current day of the month.
-	 * @returns {number} current day
-	 */
-	function day(): number;
-
-	/** 🛠
-	 * Returns the current hour.
-	 * @returns {number} current hour
-	 */
-	function hour(): number;
-
-	/** 🛠
-	 * Returns the current minute.
-	 * @returns {number} current minute
-	 */
-	function minute(): number;
-
-	/** 🛠
-	 * Returns the current second.
-	 * @returns {number} current second
-	 */
-	function second(): number;
-
-	// ↗ vector
-
-	class Vector {
-
-		/** ↗
-		 * Constructs a new Vector object.
-		 * @param {number} x x component of the vector
-		 * @param {number} y y component of the vector
-		 * @param {number} [z] optional. The z component of the vector
-		 */
-		constructor(x: number, y: number, z?: number);
-
-		/** ↗
-		 * The x component of the vector.
-		 */
-		x: number;
-
-		/** ↗
-		 * The y component of the vector.
-		 */
-		y: number;
-
-		/** ↗
-		 * The z component of the vector, if applicable.
-		 */
-		z: number;
-
-		/** ↗
-		 * Adds a vector to this vector.
-		 * @param {Vector} v vector to add
-		 * @returns {Vector} resulting vector after addition
-		 */
-		add(v: Vector): Vector;
-
-		/** ↗
-		 * Subtracts a vector from this vector.
-		 * @param {Vector} v vector to subtract
-		 * @returns {Vector} resulting vector after subtraction
-		 */
-		sub(v: Vector): Vector;
-
-		/** ↗
-		 * Multiplies this vector by a scalar or element-wise by another vector.
-		 * @param {number | Vector} n scalar to multiply by, or a vector for element-wise multiplication
-		 * @returns {Vector} resulting vector after multiplication
-		 */
-		mult(n: number | Vector): Vector;
-
-		/** ↗
-		 * Divides this vector by a scalar or element-wise by another vector.
-		 * @param {number | Vector} n scalar to divide by, or a vector for element-wise division
-		 * @returns {Vector} resulting vector after division
-		 */
-		div(n: number | Vector): Vector;
-
-		/** ↗
-		 * Calculates the magnitude (length) of the vector.
-		 * @returns {number} magnitude of the vector
-		 */
-		mag(): number;
-
-		/** ↗
-		 * Normalizes the vector to a length of 1 (making it a unit vector).
-		 * @returns {Vector} this vector after normalization
-		 */
-		normalize(): Vector;
-
-		/** ↗
-		 * Sets the magnitude of the vector to the specified length.
-		 * @param {number} len new length of the vector
-		 * @returns {Vector} this vector after setting magnitude
-		 */
-		setMag(len: number): Vector;
-
-		/** ↗
-		 * Calculates the dot product of this vector and another vector.
-		 * @param {Vector} v other vector
-		 * @returns {number} dot product
-		 */
-		dot(v: Vector): number;
-
-		/** ↗
-		 * Calculates the cross product of this vector and another vector.
-		 * @param {Vector} v other vector
-		 * @returns {Vector} a new vector that is the cross product of this vector and the given vector
-		 */
-		cross(v: Vector): Vector;
-
-		/** ↗
-		 * Calculates the distance between this vector and another vector.
-		 * @param {Vector} v other vector
-		 * @returns {number} distance
-		 */
-		dist(v: Vector): number;
-
-		/** ↗
-		 * Copies this vector.
-		 * @returns {Vector} a new vector with the same components as this one
-		 */
-		copy(): Vector;
-
-		/** ↗
-		 * Sets the components of the vector.
-		 * @param {number} x x component
-		 * @param {number} y y component
-		 * @param {number} [z] optional. The z component
-		 * @returns {void}
-		 */
-		set(x: number, y: number, z?: number): void;
-
-		/** ↗
-		 * Limits the magnitude of the vector to the value used for the max parameter.
-		 * @param {number} max maximum magnitude for the vector
-		 * @returns {Vector} this vector after limiting
-		 */
-		limit(max: number): Vector;
-
-		/** ↗
-		 * Calculates the angle of rotation for this vector (only 2D vectors).
-		 * @returns {number} angle of rotation
-		 */
-		heading(): number;
-
-		/** ↗
-		 * Rotates the vector to a specific angle without changing its magnitude.
-		 * @param {number} angle angle in radians
-		 * @returns {Vector} this vector after setting the heading
-		 */
-		setHeading(angle: number): Vector;
-
-		/** ↗
-		 * Rotates the vector by the given angle (only 2D vectors).
-		 * @param {number} angle angle of rotation in radians
-		 * @returns {Vector} this vector after rotation
-		 */
-		rotate(angle: number): Vector;
-
-		/** ↗
-		 * Linearly interpolates between this vector and another vector.
-		 * @param {Vector} v vector to interpolate towards
-		 * @param {number} amt amount of interpolation; a number between 0.0 (close to the current vector) and 1.0 (close to the target vector)
-		 * @returns {Vector} this vector after interpolation
-		 */
-		lerp(v: Vector, amt: number): Vector;
-
-		/** ↗
-		 * Linearly interpolates between this vector and another vector, including the magnitude.
-		 * @param {Vector} v vector to interpolate towards
-		 * @param {number} amt amount of interpolation; a number between 0.0 (close to the current vector) and 1.0 (close to the target vector)
-		 * @returns {Vector} this vector after spherical interpolation
-		 */
-		slerp(v: Vector, amt: number): Vector;
-		static fromAngle(angle: number, length?: number): Vector;
-
-	}
-
-	// 🖌 shaping
-
-	/** 🖌
-	 * Draws an arc, which is a section of an ellipse.
-	 * 
-	 * `ellipseMode` affects how the arc is drawn.
-	 * 
-	 * q5 WebGPU only supports the default `PIE_OPEN` mode.
-	 * @param {number} x x-coordinate
-	 * @param {number} y y-coordinate
-	 * @param {number} w width of the ellipse
-	 * @param {number} h height of the ellipse
-	 * @param {number} start angle to start the arc
-	 * @param {number} stop angle to stop the arc
-	 * @param {number} [mode] shape and stroke style setting, default is `PIE_OPEN` for a pie shape with an unclosed stroke, can be `PIE`, `CHORD`, or `CHORD_OPEN`
-	 * @example
-	 * createCanvas(200);
-	 * background(200);
-	 * 
-	 * arc(40, 40, 40, 40, 0.8, -0.8);
-	 * arc(80, 80, 40, 40, 0.8, -0.8, PIE);
-	 * arc(120, 120, 40, 40, 0.8, -0.8, CHORD_OPEN);
-	 * arc(160, 160, 40, 40, 0.8, -0.8, CHORD);
-	 */
-	function arc(x: number, y: number, w: number, h: number, start: number, stop: number, mode?: number): void;
-
-	/** 🖌
-	 * Draws a curve.
-	 */
-	function curve(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
-
-	/** 🖌
-	 * Sets the amount of straight line segments used to make a curve.
-	 * 
-	 * Only takes effect in q5 WebGPU.
-	 * @param {number} val curve detail level, default is 20
-	 */
-	function curveDetail(val: number): void;
-
-	/** 🖌
-	 * Starts storing vertices for a convex shape.
-	 */
-	function beginShape(): void;
-
-	/** 🖌
-	 * Ends storing vertices for a convex shape.
-	 */
-	function endShape(): void;
-
-	/** 🖌
-	 * Starts storing vertices for a contour.
-	 * 
-	 * Not available in q5 WebGPU.
-	 */
-	function beginContour(): void;
-
-	/** 🖌
-	 * Ends storing vertices for a contour.
-	 * 
-	 * Not available in q5 WebGPU.
-	 */
-	function endContour(): void;
-
-	/** 🖌
-	 * Specifies a vertex in a shape.
-	 * @param {number} x x-coordinate
-	 * @param {number} y y-coordinate
-	 */
-	function vertex(x: number, y: number): void;
-
-	/** 🖌
-	 * Specifies a Bezier vertex in a shape.
-	 * @param {number} cp1x x-coordinate of the first control point
-	 * @param {number} cp1y y-coordinate of the first control point
-	 * @param {number} cp2x x-coordinate of the second control point
-	 * @param {number} cp2y y-coordinate of the second control point
-	 * @param {number} x x-coordinate of the anchor point
-	 * @param {number} y y-coordinate of the anchor point
-	 */
-	function bezierVertex(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
-
-	/** 🖌
-	 * Specifies a quadratic Bezier vertex in a shape.
-	 * @param {number} cp1x x-coordinate of the control point
-	 * @param {number} cp1y y-coordinate of the control point
-	 * @param {number} x x-coordinate of the anchor point
-	 * @param {number} y y-coordinate of the anchor point
-	 */
-	function quadraticVertex(cp1x: number, cp1y: number, x: number, y: number): void;
-
-	/** 🖌
-	 * Draws a Bezier curve.
-	 * @param {number} x1 x-coordinate of the first anchor point
-	 * @param {number} y1 y-coordinate of the first anchor point
-	 * @param {number} x2 x-coordinate of the first control point
-	 * @param {number} y2 y-coordinate of the first control point
-	 * @param {number} x3 x-coordinate of the second control point
-	 * @param {number} y3 y-coordinate of the second control point
-	 * @param {number} x4 x-coordinate of the second anchor point
-	 * @param {number} y4 y-coordinate of the second anchor point
-	 */
-	function bezier(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
-
-	/** 🖌
-	 * Draws a triangle.
-	 * @param {number} x1 x-coordinate of the first vertex
-	 * @param {number} y1 y-coordinate of the first vertex
-	 * @param {number} x2 x-coordinate of the second vertex
-	 * @param {number} y2 y-coordinate of the second vertex
-	 * @param {number} x3 x-coordinate of the third vertex
-	 * @param {number} y3 y-coordinate of the third vertex
-	 */
-	function triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
-
-	/** 🖌
-	 * Draws a quadrilateral.
-	 * @param {number} x1 x-coordinate of the first vertex
-	 * @param {number} y1 y-coordinate of the first vertex
-	 * @param {number} x2 x-coordinate of the second vertex
-	 * @param {number} y2 y-coordinate of the second vertex
-	 * @param {number} x3 x-coordinate of the third vertex
-	 * @param {number} y3 y-coordinate of the third vertex
-	 * @param {number} x4 x-coordinate of the fourth vertex
-	 * @param {number} y4 y-coordinate of the fourth vertex
-	 */
-	function quad(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
-
-	// ⚙ advanced
-
-	/** ⚙
-	 * Alias for `Q5`.
-	 */
-	const q5: typeof Q5;
-
-	class Q5 {
-
-		/** ⚙
-		 * Creates an [instance](https://github.com/q5js/q5.js/wiki/Instance-Mode) of Q5.
-		 * 
-		 * Used by the global `Canvas` function.
-		 * @param {string | Function} [scope]
-		 * @param {HTMLElement} [parent] element that the canvas will be placed inside
-		 * @example
-		 * let q = new Q5('namespace');
-		 * q.createCanvas(200, 100);
-		 * q.circle(100, 50, 20);
-		 */
-		constructor(scope?: string | Function, parent?: HTMLElement);
-
-		/** ⚙
-		 * The current minor version of q5.
-		 * @returns {string} the q5 version
-		 */
-		static version: string;
-
-		/** ⚙
-		 * Set to a language code other than 'en' (English) to use q5 in an additional language.
-		 * 
-		 * Currently supported languages:
-		 * 
-		 * - 'es' (Spanish)
-		 */
-		static lang: string;
-
-		/** ⚙
-		 * Turn off q5's friendly error messages.
-		 */
-		static disableFriendlyErrors: boolean;
-
-		/** ⚙
-		 * Set to true to keep draw looping after an error.
-		 */
-		static errorTolerant: boolean;
-
-		/** ⚙
-		 * True if the device supports HDR (the display-p3 colorspace).
-		 */
-		static supportsHDR: boolean;
-
-		/** ⚙
-		 * Sets the default canvas context attributes used for newly created
-		 * canvases and internal graphics. These options are overwritten by any
-		 * per-canvas options you pass to `Canvas`.
-		 */
-		static canvasOptions: object;
-
-		/** ⚙
-		 * A WebGPU memory allocation limit.
-		 * 
-		 * The maximum number of transformation matrixes
-		 * that can be used in a single draw call.
-		 */
-		static MAX_TRANSFORMS: number;
-
-		/** ⚙
-		 * A WebGPU memory allocation limit.
-		 * 
-		 * The maximum number of rectangles
-		 * (calls to `rect`, `square`, `capsule`)
-		 * that can be drawn in a single draw call.
-		 */
-		static MAX_RECTS: number;
-
-		/** ⚙
-		 * A WebGPU memory allocation limit.
-		 * 
-		 * The maximum number of ellipses
-		 * (calls to `ellipse`, `circle`, and `arc`)
-		 * that can be drawn in a single draw call.
-		 */
-		static MAX_ELLIPSES: number;
-
-		/** ⚙
-		 * A WebGPU memory allocation limit.
-		 * 
-		 * The maximum number of text characters
-		 * that can be drawn in a single draw call.
-		 */
-		static MAX_CHARS: number;
-
-		/** ⚙
-		 * A WebGPU memory allocation limit.
-		 * 
-		 * The maximum number of separate calls to `text`
-		 * that can be drawn in a single draw call.
-		 */
-		static MAX_TEXTS: number;
-
-		/** ⚙
-		 * Creates a new Q5 instance that uses [q5's WebGPU renderer](https://github.com/q5js/q5.js/wiki/q5-WebGPU-renderer).
-		 */
-		static WebGPU(): Q5;
-
-		/** ⚙
-		 * Addons can augment q5 with new functionality by adding hooks,
-		 * functions to be run at specific phases in the q5 lifecycle.
-		 * 
-		 * Inside the function, `this` refers to the Q5 instance.
-		 * @param {string} lifecycle 'init', 'presetup', 'postsetup', 'predraw', 'postdraw', or 'remove'
-		 * @param {Function} fn The function to be run at the specified lifecycle phase.
-		 */
-		static addHook(lifecycle: string, fn: Function): void;
-
-		/** ⚙
-		 * p5.js v2 compatible way to register an addon with q5.
-		 * @param {Function} addon A function that receives `Q5`, `Q5.prototype`, and a `lifecycles` object.
-		 */
-		static registerAddon(addon: Function): void;
-
-		/** ⚙
-		 * An object containing q5's modules, functions that run when q5 loads.
-		 * 
-		 * Each function receives two input parameters:
-		 * 
-		 * - the q5 instance
-		 * - a proxy for editing the q5 instance and corresponding properties of the global scope
-		 */
-		static modules: object;
-
-		/** ⚙
-		 * The q5 draw function is run 60 times per second by default.
-		 */
-		draw(): void;
-
-		/** ⚙
-		 * Runs after each `draw` function call and post-draw q5 addon processes, if any.
-		 * 
-		 * Useful for adding post-processing effects when it's not possible
-		 * to do so at the end of the `draw` function, such as when using
-		 * addons like p5play that auto-draw to the canvas after the `draw`
-		 * function is run.
-		 */
-		postProcess(): void;
-		update(): void; //-
-
-		drawFrame(): void; //-
-
-		static Image: {
-			new (w: number, h: number, opt?: any): Q5.Image;
-			};
-
-	}
-
-	namespace Q5 {
-		interface Image {
-			width: number;
-			height: number;
-		}
-	}
-
-}
-
-export {};