q5/q5.d.ts

Beginner friendly graphics powered by WebGPU and optimized for interactive art!

/**
 * q5.d.ts
 * 
 * TypeScript definitions for q5.js for use with IDEs like VSCode
 * for autocompletion, hover over documentation, and type checking.
 */
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! 😎
	 */

	/** ⭐️
	 * The draw function is run 60 times per second by default.
	 * @example
function draw() {
  background('silver');
	circle(frameCount % 200, 100, 80);
}
	 */
	function draw(): void;

	/** ⭐️
	 * The setup function is run once, when the program starts.
	 * @example
function setup() {
	createCanvas(200, 100);
	background('aqua');
}
	 */
	function setup(): void;

	/** ⭐️
	 * Load assets in the preload function to ensure that they'll be
	 * ready to use in the setup and draw functions.
	 * 
	 * q5's preload system can also be used without a preload function
	 * if you create a canvas first, as shown in the second example.
	 * @example
let logo;

function preload() {
	logo = loadImage('/q5js_logo.webp');
}

function draw() {
	background(logo);
}
	 * @example
createCanvas(200, 100);

let logo = loadImage('/q5js_logo.webp');

function draw() {
	background(logo);
}
	 */
	function preload(): 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.
	 * @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;

	/** ⭐️
	 * Logs a message to the JavaScript console. Alias for the standard
	 * [`console.log`](https://developer.mozilla.org/docs/Web/API/console/log_static) function.
	 * 
	 * You can open web developer tools in most browsers by using the 
	 * keyboard shortcut `Ctrl + Shift + i` or `command + option + i`,
	 * then click the "Console" tab.
	 * @param {*} message message to log
	 */
	function log(message: any): void;

	/** ⭐️
	 * Runs after each `draw` function call and post draw hooks.
	 * 
	 * 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;

	/** ⭐️
	 * 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 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;

	/** ⭐️
	 * By default, q5 uses the same preload system as p5.js v1
	 * to load assets asynchronously, before the setup and draw
	 * functions are run. It makes it easy for users to
	 * load many images, sounds, and other assets in parallel.
	 * 
	 * In p5 v2, the preload system was entirely removed in
	 * favor of having load* functions, such as `loadImage`,
	 * return promises.
	 * 
	 * By default, q5 also supports use of `async setup` for loading.
	 * Use the [`load`](https://q5js.org/learn/#load)
	 * function to load a file or multiple files. It returns
	 * a promise that resolves when the file(s) are loaded.
	 * 
	 * Alternatively, disable the preload system in q5 to make
	 * load* functions return promises, to match p5 v2 behavior.
	 * @param {boolean} val true by default, whether to enable or disable the preload system, affects the return value of load* functions
	 * @example
createCanvas(200);
usePreloadSystem(false);

logo = await loadImage('/q5js_logo.webp');

function draw() {
	background(logo);
}
	 */
	function usePreloadSystem(val: boolean): void;

	class Q5 {
		/** ⭐️
		 * Creates an instance of Q5.
		 *
		 * Running `new Q5()` starts q5 in top-level global mode,
		 * enabling use of q5 functions and variables on the file level, 
		 * outside of `setup` and `draw`. You can also start Q5 in this mode
		 * by running [`createCanvas`](https://q5js.org/learn/#createCanvas) 
		 * on the file level.
		 * 
		 * If you don't create a new instance of Q5, an 
		 * instance will be created automatically, replicating
		 * p5's limited global mode. p5's instance mode is supported by 
		 * this constructor as well but its use is deprecated, use
		 * [q5's namespaced instance mode](https://github.com/q5js/q5.js/wiki/Instance-Mode) instead.
		 * @param {string | Function} [scope]
		 *   - "global": (default) adds q5 functions and variables to the global scope
		 *   - "instance": does not add q5 functions or variables to the global scope
		 * @param {HTMLElement} [parent] element that the canvas will be placed inside
		 * @example
new Q5();
createCanvas(200, 100);
circle(100, 50, 80);
		 * @example
let q = new Q5('instance');
q.createCanvas(200, 100);
q.circle(100, 50, 20);
		 */
		constructor(scope?: string | Function, parent?: HTMLElement);

		/** ⭐️
		 * Q5 reformats some errors to make them more readable for beginners.
		 * @default false
		 */
		static disableFriendlyErrors: boolean;

		/** ⭐️
		 * Sets the default canvas context attributes for all Q5 instances
		 * and graphics.
		 * @default { alpha: false, colorSpace: 'display-p3' }
		 */
		static canvasOptions: {};

		/** ⭐️
		 * True if the device supports HDR (the display-p3 colorspace).
		 */
		static supportsHDR: boolean;

		/** ⭐️
		 * Modules added to this object will be added to new Q5 instances.
		 */
		static modules: {};

		static Image: {
			new(w: number, h: number, opt?: any): Q5.Image;
		}

		/** ⭐️
		 * Creates a new Q5 instance that uses [q5's WebGPU renderer](https://github.com/q5js/q5.js/wiki/q5-WebGPU-renderer).
		 * @example
let q = await Q5.WebGPU();

q.draw = () => {
	background(0.8);
	circle(mouseX, 0, 80);
};
		 */
		static WebGPU(): Q5;

		/** ⭐️
		 * The draw function is run 60 times per second by default.
		 */
		draw(): void; //-

		/** ⭐️
		 * The setup function is run once, when the program starts.
		 */
		setup(): void; //-

		/** ⭐️
		 * Load assets in the preload function to ensure that they'll be
		 * ready to use in the setup and draw functions.
		 * 
		 * q5's preload system can also be used without a preload function
		 * if you create a canvas first.
		 */
		preload(): void; //-

		/** ⭐️
		 * The number of frames that have been displayed since the program 
		 * started.
		 */
		postProcess(): void; //-
	}

	namespace Q5 {
		interface Image {
			width: number; //-
			height: number; //-
		}
	}

	// ⬜️ canvas

	/** ⬜️
	 * Creates a canvas element, a section of the screen your program
	 * can draw on.
	 * 
	 * Run this function to start using q5. If this function is not run
	 * by the user, a 200x200 canvas will be created automatically before
	 * the draw loop starts.
	 * 
	 * When using q5 WebGPU, create a canvas before using any other
	 * q5 functions. The origin of a WebGPU canvas is at its center.
	 * @param {number} [w] width or size of the canvas
	 * @param {number} [h] height of the canvas
	 * @param {Object} [opt] options for the canvas
	 * @param {boolean} [opt.alpha] whether the canvas should have an alpha channel that allows it to be seen through, default is false
	 * @param {string} [opt.colorSpace] color space of the canvas, either "srgb" or "display-p3", default is "display-p3" for devices that support HDR colors
	 * @returns {HTMLCanvasElement} created canvas element
	 * @example
createCanvas(200, 100);
circle(100, 50, 80);
	 * @example
await Q5.WebGPU();
createCanvas(200, 100);
circle(0, 0, 80);
	 * @example
createCanvas(200, 200, { alpha: true });

function draw() {
	clear();
	circle(frameCount % 200, 100, 80);
}
	 */
	function createCanvas(w?: number, h?: number, options?: CanvasRenderingContext2DSettings): HTMLCanvasElement;

	/** ⬜️
	 * The canvas element associated with the Q5 instance.
	 * 
	 * @prop {number} w
	 * @prop {number} width
	 * @prop {number} h
	 * @prop {number} height
	 * @prop {number} hw half the width
	 * @prop {number} hh half the height
	 * @prop {string} renderer either "c2d" (Canvas2D) or "webgpu"
	 */
	var canvas: HTMLCanvasElement;

	/** ⬜️
	 * Clears the canvas, making every pixel completely transparent.
	 *
	 * Note that the canvas can only be seen through if it has an alpha channel.
	 */
	function clear(): void;

	/** ⬜️
	 * Sets the fill color for shapes. 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 for shapes. 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, shapes 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, shapes 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 shapes.
	 * @param {number} weight size of the stroke in pixels
	 * @example
createCanvas(200);
background(200);
stroke('red');
circle(50, 100, 80);

strokeWeight(20);
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.
	 * @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);
text('q5', 100, 100);
	 * @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.
	 * @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.
	 * @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;

	/** ⬜️
	 * 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;

	/** ⬜️
	 * 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(100, 100);
	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(QUARTER_PI);

	// drawn from its top-left corner by default
	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(4);
	circle(0, 0, 80);
}
	 */
	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(QUARTER_PI);
	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(QUARTER_PI);
	square(0, 0, 80);
}
	 */
	function shearY(angle: number): void;

	/** ⬜️
	 * Applies a transformation matrix.
	 *
	 * Accepts a 3x3 or 4x4 matrix as either an array or multiple arguments.
	 * @param {number} a horizontal scaling
	 * @param {number} b horizontal skewing
	 * @param {number} c vertical skewing
	 * @param {number} d vertical scaling
	 * @param {number} e horizontal moving
	 * @param {number} f vertical moving
	 * @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.
	 *
	 * This includes the fill, stroke, stroke weight, tint, image mode, 
	 * rect mode, ellipse mode, text size, text align, text baseline, and
	 * shadow settings.
	 * @example
function draw() {
	background(200);

	pushStyles();
	fill('blue');
	circle(50, 50, 80);
	popStyles();
	circle(150, 150, 80);
}
	 */
	function pushStyles(): void;

	/** ⬜️
	 * Restores the previously saved drawing style settings.
	 */
	function popStyles(): 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.
	 */
	function pop(): void;

	/** ⬜️
	 * Resizes the canvas to the specified width and height.
	 * @param {number} w width of the canvas
	 * @param {number} h height of the canvas
	 */
	function resizeCanvas(w: number, h: number): void;

	/** ⬜️
	 * Sets the pixel density of the canvas.
	 * @param {number} v pixel density value
	 * @returns {number} pixel density
	 */
	function pixelDensity(v: number): number;

	/** ⬜️
	 * Returns the current display density.
	 * @returns {number} display density
	 */
	function displayDensity(): number;

	/** ⬜️
	 * Enables or disables fullscreen mode.
	 * @param {boolean} [v] boolean indicating whether to enable or disable fullscreen mode
	 * @returns {void | boolean} true if fullscreen mode is enabled, false otherwise
	 */
	function fullscreen(v?: boolean): void | boolean;

	/** ⬜️
	 * Any position coordinates or dimensions you use will be scaled based
	 * on the unit provided to this function.
	 * 
	 * Not available in q5 WebGPU.
	 * @param {number} unit unit to scale by
	 * @example
createCanvas(200);
flexibleCanvas(100);
// rect will appear in the middle of the canvas
rect(20, 20, 60, 60);
	 */
	function flexibleCanvas(unit: number): void;

	/** ⬜️
	 * Creates a graphics buffer.
	 * 
	 * Not recommended for use in q5 WebGPU.
	 * @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;

	/** ⬜️
	 * The 2D rendering context for the canvas, if using the Canvas2D
	 * renderer.
	 */
	var ctx: CanvasRenderingContext2D;

	/** ⬜️
	 * Alias for `ctx`, the 2D rendering context for the canvas.
	 */
	var drawingContext: CanvasRenderingContext2D;

	// 🎨 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 RGB color mode, colors have `r`/`red`, `g`/`green`, `b`/`blue`, and `a`/`alpha` components. The default color 
	 * format is integer, so set components to values between 0 and 255.
	 * 
	 * In q5 WebGPU, the default color mode is RGB in float format, so
	 * set color components to values between 0 and 1.
	 * 
	 * 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.
	 * 
	 * 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) % 255;
}
	 * @example
let q = await Q5.WebGPU();

//           (r, g, b,   a)
let c = color(0, 1, 1, 0.2);

q.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.
	 * 
	 * The default color mode is RGB in legacy integer format.
	 *
	 * In WebGPU, the default is RGB in float format (best performance).
	 * 
	 * Color gamut is 'display-p3' by default, if the device supports HDR.
	 * 
	 * @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';

	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[];
	}

	// 💻 display

	/** 💻
	 * Customize how your canvas is presented.
	 * @param {string} mode
	 *   - "normal": (default) canvas is not repositioned
	 *   - "centered": canvas is moved to the center of its parent
	 *   - "maxed": canvas will be scaled to fill the parent element, with letterboxing if necessary to preserve its aspect ratio
	 * @param {string} renderQuality
	 *   - "smooth": (default) smooth upscaling if the canvas is scaled
	 *   - "pixelated": pixels rendered as sharp squares
	 * @param {number} scale can also be given as a string (for example "x2")
	 * @example
createCanvas(50, 25);

displayMode('centered', 'pixelated', 4);

circle(25, 12.5, 16);
	 */
	function displayMode(mode: string, renderQuality: string, scale: string | number): void;

	// 🧑‍🎨 shapes

	/** 🧑‍🎨
	 * 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
let q = await Q5.WebGPU();

q.draw = () => {
	background(0.5, 0.4);
	circle(mouseX, mouseY, 20);
};
	 */
	function background(filler: Color | Q5.Image): 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} [tl] top-left radius
	 * @param {number} [tr] top-right radius
	 * @param {number} [br] bottom-right radius
	 * @param {number} [bl] bottom-left radius
	 * @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, tl?: number, tr?: number, br?: number, bl?: 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} [tl] top-left radius
	 * @param {number} [tr] top-right radius
	 * @param {number} [br] bottom-right radius
	 * @param {number} [bl] bottom-left radius
	 * @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, tl?: number, tr?: number, br?: number, bl?: number): void;

	/** 🧑‍🎨
	 * 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 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 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 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;

	/** 🧑‍🎨
	 * Set the global composite operation for the canvas context.
	 * @param {string} val composite operation
	 */
	function blendMode(val: string): void;

	/** 🧑‍🎨
	 * Set the line cap style to `ROUND`, `SQUARE`, or `BUTT`.
	 * @param {CanvasLineCap} val line cap style
	 */
	function strokeCap(val: CanvasLineCap): void;

	/** 🧑‍🎨
	 * Set the line join style to `ROUND`, `BEVEL`, or `MITER`.
	 * @param {CanvasLineJoin} val line join style
	 */
	function strokeJoin(val: CanvasLineJoin): void;

	/** 🧑‍🎨
	 * Set ellipse mode to `CENTER`, `RADIUS`, or `CORNER`.
	 * @param {string} val ellipse mode
	 */
	function ellipseMode(val: string): void;

	/** 🧑‍🎨
	 * Set the rectangle mode to `CORNER`, `CORNERS`, `RADIUS`, or `CENTER`.
	 * @param {string} val rectangle mode
	 */
	function rectMode(val: string): 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
	 * @example
await Q5.WebGPU();
curveDetail(2);
circle(100, 100, 80);
	 */
	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;

	/** 🧑‍🎨
	 * 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;

	/** 🧑‍🎨
	 * 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;

	// 🌆 image

	/** 🌆
	 * Loads an image from a URL and optionally runs a callback function.
	 * @param {string} url url of the image to load
	 * @param {(img: any) => void} [cb] callback function after the image is loaded
	 * @param {any} [opt] optional parameters for loading the image
	 * @returns {Q5.Image} image
	 * @example
createCanvas(200);

let logo = loadImage('/q5js_logo.webp');

function draw() {
	background(logo);
}
	 * @example
let q = await Q5.WebGPU();
createCanvas(200);

let logo = loadImage('/q5js_logo.webp');

q.draw = () => {
	background(logo);
};
	 */
	function loadImage(url: string, cb?: (img: any) => void, opt?: any): Q5.Image;

	/** 🌆
	 * Draws an image to the canvas.
	 * @param {any} img image 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.webp');

function draw() {
	image(logo, 0, 0, 200, 200);
}
	 * @example
createCanvas(200);

let logo = loadImage('/q5js_logo.webp');

function draw() {
  image(logo, 0, 0, 200, 200, 256, 256, 512, 512);
}
	 */
	function image(img: any, dx: number, dy: number, dw?: number, dh?: number, sx?: number, sy?: number, sw?: number, sh?: number): void;

	/** 🌆
	 * Sets the image mode, which determines the position and alignment of images drawn on the canvas.
	 * `CORNER`: (default) images will be drawn from the top-left corner
	 * `CORNERS`: images will be drawn from the top-left to the bottom-right corner
	 * `CENTER`: images will be drawn centered at (dx, dy)
	 * @param {string} mode
	 * @example
createCanvas(200);

let logo = loadImage('/q5js_logo.webp');

function draw() {
	imageMode(CENTER);
	image(logo, 100, 100, 200, 200);
}
	 */
	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.webp');

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 {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.webp');

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;

	/** 🌆
	 * Retrieves a subsection of an image or canvas, as a q5 Image.
	 * Or if width and height are both 1, returns the color of the pixel at the given coordinates in `[R, G, B, A]` array format.
	 * @param {number} x
	 * @param {number} y
	 * @param {number} [w] width of the area
	 * @param {number} [h] height of the area
	 * @returns {Image | number[]}
	 * @example
createCanvas(200);

let logo = loadImage('/q5js_logo.webp');

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.
	 * 
	 * 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.
	 * @param {number} x
	 * @param {number} y
	 * @param {any} c 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, c: any): 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.webp');

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;

	/** 🌆
	 * Array of pixels in the canvas or image. Use `loadPixels` to load the pixel data.
	 */
	var pixels: number[];

	/** 🌆
	 * Loads pixel data into the canvas' or image's `pixels` array.
	 * @example
createCanvas(200);
let icon = loadImage('/q5js_icon.png');

function setup() {
	icon.loadPixels();
	for (let i=0; i < 65536; i+=16) icon.pixels[i] = 255;
	icon.updatePixels();
	image(icon, 0, 0, 200, 200);
}
	 */
	function loadPixels(): void;

	/** 🌆
	 * Applies changes in the `pixels` array to the canvas or image.
	 * @example
createCanvas(200);
function setup() {
	for (let x = 0; x < 200; x += 5) {
		for (let y = 0; y < 200; y += 5) {
			set(x, y, color('red'));
		}
	}
	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
	 * @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.webp');

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;

	// ✍️ text

	/** ✍️
	 * Renders text to the screen. 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 example below loads [Robotica](https://www.dafont.com/robotica-courtney.font) created by Courtney Novits.
	 * 
	 * If no fonts are loaded, the default sans-serif font is used.
	 *
	 * In q5 WebGPU, only fonts in [MSDF format](https://github.com/q5js/q5.js/wiki/q5-WebGPU-renderer#text-rendering)
	 * with the file ending "-msdf.json" can be used to render text with 
	 * the `text` function. Fonts in other formats ca