q5/q5.d.ts

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

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! 😎
	 */

	/** ⭐
	 * 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 createCanvas(w?: number, h?: number, options?: CanvasRenderingContext2DSettings): 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, populate 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;

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

	// 📘 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.
	 * 
	 * In q5 WebGPU, 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 for high performance text rendering. Make your own using the [MSDF font converter](https://msdf-bmfont.donmccurdy.com/).
	 * 
	 * 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 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) % 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.
	 * 
	 * 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';

	/** 🎨
	 * 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(2