q5 3.7.5 → 3.7.6

package/defs/q5-es.d.ts

@@ -5,7 +5,7 @@ declare global {
 	/**
 	 * Bienvenido a la documentación de q5! 🤩
 	 * 
-	 * ¿Primera vez programando? Revisa la [guía para principiantes de q5].
+	 * ¿Primera vez programando? Revisa la [guía para principiantes de q5](https://github.com/q5js/q5.js/wiki/q5-Beginner's-Brief).
 	 * 
 	 * En estas páginas de "Aprender" puedes experimentar editando los mini ejemplos. ¡Diviértete! 😎
 	 */
@@ -27,14 +27,14 @@ declare global {
 	 * fondo('silver');
 	 * círculo(0, 0, 80);
 	 */
-	function crearLienzo(ancho?: number, alto?: number, opciones: object): Promise<HTMLCanvasElement>;
+	function crearLienzo(ancho?: number, alto?: number, opciones?: CanvasRenderingContext2DSettings): Promise<HTMLCanvasElement>;
 
 	/** ⭐
 	 * Función a declarar. Se ejecutará 60 veces por segundo de forma predeterminada. Tiene comportamiento de bucle, lo que permite hacer animaciones cuadro a cuadro.
 	 * @example
 	 * q5.dibujar = function () {
 	 * 	fondo('silver');
-	 * 	círculo(mouseX, mouseY, 80);
+	 * 	círculo(ratónX, ratónY, 80);
 	 * };
 	 */
 	function dibujar(): void;
@@ -46,11 +46,11 @@ declare global {
 	 * @param {any} mensaje a imprimir
 	 * @example
 	 * q5.dibujar = function () {
-	 * 	círculo(mouseX, mouseY, 80);
-	 * 	log('The mouse is at:', mouseX, mouseY);
+	 * 	círculo(ratónX, ratónY, 80);
+	 * 	log('El ratón está en:', ratónX, ratónY);
 	 * };
 	 */
-	function log(...mensaje: any[]): void;
+	function log(mensaje: any): void;
 
 	// 🧑‍🎨 shapes
 
@@ -65,94 +65,3507 @@ declare global {
 	 */
 	function círculo(): void;
 
-	// 🎨 color
+	/** 🧑‍🎨
+	 * Dibuja una elipse.
+	 * @param {number} x posición x
+	 * @param {number} y posición y
+	 * @param {number} ancho ancho de la elipse
+	 * @param {number} [alto] alto de la elipse
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * elipse(0, 0, 160, 80);
+	 */
+	function elipse(x: number, y: number, ancho: number, alto?: number): void;
 
-	/** 🎨
-	 * Dibuja sobre todo el lienzo con un color o una imagen.
+	/** 🧑‍🎨
+	 * Dibuja un rectángulo o un rectángulo redondeado.
+	 * @param {number} x posición x
+	 * @param {number} y posición y
+	 * @param {number} w ancho del rectángulo
+	 * @param {number} [h] alto del rectángulo
+	 * @param {number} [redondeado] radio para todas las esquinas
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
 	 * 
-	 * Al igual que la función [`color`](https://q5js.org/learn/#color),
-	 * esta función puede aceptar colores en una amplia gama de formatos:
-	 * cadena de color CSS, valor de escala de grises y valores de componentes de color.
-	 * @param {Color | Q5.Image} relleno un color o una imagen para dibujar
+	 * rect(-70, -80, 40, 60);
+	 * rect(-20, -30, 40, 60, 10);
+	 * rect(30, 20, 40, 60, 30);
+	 */
+	function rect(x: number, y: number, ancho: number, alto?: number, redondeado?: number): void;
+
+	/** 🧑‍🎨
+	 * Dibuja un cuadrado o un cuadrado redondeado.
+	 * @param {number} x posición x
+	 * @param {number} y posición y
+	 * @param {number} tamaño tamaño de los lados del cuadrado
+	 * @param {number} [redondeado] radio para todas las esquinas
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * cuadrado(-70, -70, 40);
+	 * cuadrado(-20, -20, 40, 10);
+	 * cuadrado(30, 30, 40, 30);
+	 */
+	function cuadrado(x: number, y: number, tamaño: number, redondeado?: number): void;
+
+	/** 🧑‍🎨
+	 * Dibuja un punto en el lienzo.
+	 * @param {number} x posición x
+	 * @param {number} y posición y
 	 * @example
 	 * await crearLienzo(200, 100);
-	 * fondo('crimson');
+	 * trazo('white');
+	 * punto(-25, 0);
+	 * 
+	 * grosorTrazo(10);
+	 * punto(25, 0);
+	 */
+	function punto(x: number, y: number): void;
+
+	/** 🧑‍🎨
+	 * Dibuja una línea en el lienzo.
+	 * @param {number} x1 posición x del primer punto
+	 * @param {number} y1 posición y del primer punto
+	 * @param {number} x2 posición x del segundo punto
+	 * @param {number} y2 posición y del segundo punto
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * trazo('lime');
+	 * línea(-80, -30, 80, 30);
+	 */
+	function línea(): void;
+
+	/** 🧑‍🎨
+	 * Dibuja una cápsula.
+	 * @param {number} x1 posición x del primer punto
+	 * @param {number} y1 posición y del primer punto
+	 * @param {number} x2 posición x del segundo punto
+	 * @param {number} y2 posición y del segundo punto
+	 * @param {number} r radio de los extremos semicirculares de la cápsula
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * grosorTrazo(5);
+	 * cápsula(-60, -10, 60, 10, 10);
 	 * @example
 	 * q5.dibujar = function () {
-	 * 	fondo(0.5, 0.2);
-	 * 	círculo(mouseX, mouseY, 20);
+	 * 	fondo(0.8);
+	 * 	relleno('cyan');
+	 * 	grosorTrazo(10);
+	 * 	cápsula(0, 0, ratónX, ratónY, 20);
 	 * };
 	 */
-	function fondo(relleno: Color | Q5.Image): void;
+	function cápsula(): void;
 
-	// 💻 display
+	/** 🧑‍🎨
+	 * Establecer a `ESQUINA` (por defecto), `CENTRO`, `RADIO`, o `ESQUINAS`.
+	 * 
+	 * Cambia cómo se interpretan las primeras cuatro entradas para
+	 * `rect` y `cuadrado`.
+	 * @param {string} modo
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * modoRect(ESQUINA);
+	 * 
+	 * //  ( x,  y,   w,  h)
+	 * rect(-50, -25, 100, 50);
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * modoRect(CENTRO);
+	 * 
+	 * //  ( cX, cY,   w,  h)
+	 * rect(0, 0, 100, 50);
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * modoRect(RADIO);
+	 * 
+	 * //  ( cX, cY, rX, rY)
+	 * rect(0, 0, 50, 25);
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * modoRect(ESQUINAS);
+	 * 
+	 * //  ( x1, y1, x2, y2)
+	 * rect(-50, -25, 50, 25);
+	 */
+	function modoRect(modo: string): void;
 
-	/** 💻
-	 * El ancho de la ventana (cantidad de píxeles). Atajo para `window.innerWidth`.
+	/** 🧑‍🎨
+	 * Establecer a `CENTRO` (por defecto), `RADIO`, `ESQUINA`, o `ESQUINAS`.
+	 * 
+	 * Cambia cómo se interpretan las primeras cuatro entradas para
+	 * `elipse`, `círculo`, y `arco`.
+	 * @param {string} modo
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * modoEliptico(CENTRO);
+	 * 
+	 * //     (  x,  y,   w,  h)
+	 * elipse(0, 0, 100, 50);
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * modoEliptico(RADIO);
+	 * 
+	 * //     (  x,  y, rX, rY)
+	 * elipse(0, 0, 50, 25);
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * modoEliptico(ESQUINA);
+	 * 
+	 * //     (lX, tY,   w,  h)
+	 * elipse(-50, -25, 100, 50);
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * modoEliptico(ESQUINAS);
+	 * 
+	 * //     ( x1, y1, x2, y2)
+	 * elipse(-50, -25, 50, 25);
 	 */
-	var anchoVentana: number;
+	function modoEliptico(modo: string): void;
 
-	/** 💻
-	 * El alto de la ventana (cantidad de píxeles). Atajo para `window.innerHeight`.
+	/** 🧑‍🎨
+	 * Modo de alineación de forma, para usar en `modoRect` y `modoEliptico`.
 	 */
-	var altoVentana: number;
+	const ESQUINA: 'corner';
 
-	/** 💻
-	 * Número del cuadro actual, es decir, la cantidad de cuadros que se han dibujado desde que se inició el sketch.
+	/** 🧑‍🎨
+	 * Modo de alineación de forma, para usar en `modoRect` y `modoEliptico`.
 	 */
-	var cuadroActual: number;
+	const RADIO: 'radius';
 
-	/** 💻
-	 * Detiene el bucle de dibujo.
+	/** 🧑‍🎨
+	 * Modo de alineación de forma, para usar en `modoRect` y `modoEliptico`.
 	 */
-	function pausar(): void;
+	const ESQUINAS: 'corners';
 
-	/** 💻
-	 * Dibuja el lienzo `n` veces. Si no recibe parametro, se dibuja una sola vez. Útil para controlar animaciones con el bucle pausado.
-	 * @param {number} [n] cantidad de veces que se volverá a dibujar el lienzo, por defecto es 1
+	// 🌆 image
+
+	/** 🌆
+	 * Carga una imagen desde una URL.
+	 * 
+	 * Por defecto, los recursos se cargan en paralelo antes de que q5 ejecute `dibujar`. Usa `await` para esperar a que una imagen se cargue.
+	 * @param {string} url url de la imagen a cargar
+	 * @returns {Q5.Image & PromiseLike<Q5.Image>} imagen
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let logo = cargarImagen('/q5js_logo.avif');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	fondo(logo);
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let logo = await cargarImagen('/q5js_logo.avif');
+	 * fondo(logo);
 	 */
-	function redibujar(n?: number): void;
+	function cargarImagen(url: string): Q5.Imagen & PromiseLike<Q5.Imagen>;
 
-	/** 💻
-	 * Vuelve a activar el bucle de dibujo en caso de que estuviera pausado.
+	/** 🌆
+	 * Dibuja una imagen o fotograma de video en el lienzo.
+	 * @param {Q5.Image | HTMLVideoElement} img imagen o video a dibujar
+	 * @param {number} dx posición x donde dibujar la imagen
+	 * @param {number} dy posición y donde dibujar la imagen
+	 * @param {number} [dw] ancho de la imagen de destino
+	 * @param {number} [dh] alto de la imagen de destino
+	 * @param {number} [sx] posición x en la fuente para empezar a recortar una subsección
+	 * @param {number} [sy] posición y en la fuente para empezar a recortar una subsección
+	 * @param {number} [sw] ancho de la subsección de la imagen fuente
+	 * @param {number} [sh] alto de la subsección de la imagen fuente
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let logo = cargarImagen('/q5js_logo.avif');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	imagen(logo, -100, -100, 200, 200);
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let logo = cargarImagen('/q5js_logo.avif');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	imagen(logo, -100, -100, 200, 200, 256, 256, 512, 512);
+	 * };
 	 */
-	function reanudar(): void;
+	function imagen(): void;
 
-	/** 💻
-	 * Si recibe un parámetro, establece la cantidad ideal de cuadros que se intentarán dibujar por cada segundo (es decir, la tasa de refresco, la frecuencia del bucle).
+	/** 🌆
+	 * Establecer a `CORNER` (por defecto), `CORNERS`, o `CENTER`.
 	 * 
-	 * Retorna la frecuencia real alcanzada durante el último segundo de ejecución. Incluso si nunca se modifica explícitamente la frecuencia, el valor real suele fluctuar entre el ideal y 0. Para un mejor análisis del rendimiento usar las herramientas del navegador (DevTools).
-	 * @param `hz` {number} [frecuencia] cantidad ideal de cuadros a dibujar en un segundo, por defecto es 60
-	 * @returns {number} frecuencia real del bucle en el último segundo
+	 * Cambia cómo se interpretan las entradas a `imagen`.
+	 * @param {string} modo
+	 * @example
+	 * await crearLienzo(200);
+	 * let logo = cargarImagen('/q5js_logo.avif');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	modoImagen(CORNER);
+	 * 
+	 * 	//   ( img,  x,  y,   w,   h)
+	 * 	imagen(logo, -50, -50, 100, 100);
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * let logo = cargarImagen('/q5js_logo.avif');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	modoImagen(CENTER);
+	 * 
+	 * 	//   ( img,  cX,  cY,   w,   h)
+	 * 	imagen(logo, 0, 0, 100, 100);
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * let logo = cargarImagen('/q5js_logo.avif');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	modoImagen(CORNERS);
+	 * 
+	 * 	//   ( img, x1, y1,  x2,  y2)
+	 * 	imagen(logo, -50, -50, 50, 50);
+	 * };
 	 */
-	function frecuenciaRefresco(hz: number): void | number;
+	function modoImagen(modo: string): void;
 
-	/** 💻
-	 * Retorna la cantidad ideal de cuadros que se intentan dibujar por segundo.
+	/** 🌆
+	 * Establece la escala de imagen por defecto, que se aplica a las imágenes cuando
+	 * se dibujan sin un ancho o alto especificado.
+	 * 
+	 * Por defecto es 0.5 para que las imágenes aparezcan en su tamaño real
+	 * cuando la densidad de píxeles es 2. Las imágenes se dibujarán a un tamaño
+	 * por defecto consistente relativo al lienzo independientemente de la densidad de píxeles.
+	 * 
+	 * Esta función debe llamarse antes de que se carguen las imágenes para
+	 * tener efecto.
+	 * @param {number} escala
+	 * @returns {number} escala de imagen por defecto
 	 */
-	function frecuenciaIdeal(): void;
+	function escalaImagenPorDefecto(escala: number): number;
 
-	/** 💻
-	 * Retorna la cantidad maxima de cuadros que se podrían estar dibujando en cada segundo.
+	/** 🌆
+	 * Redimensiona la imagen.
+	 * @param {number} w nuevo ancho
+	 * @param {number} h nuevo alto
+	 * @example
+	 * await crearLienzo(200);
 	 * 
-	 * Es un valor teórico que depende del estado del dispositivo. Para un mejor análisis del rendimiento usar las herramientas del navegador (DevTools).
-	 * @returns {number} cantidad máxima teorica de cuadros por segundo
+	 * let logo = await cargar('/q5js_logo.avif');
+	 * 
+	 * logo.redimensionar(128, 128);
+	 * imagen(logo, -100, -100, 200, 200);
 	 */
-	function frecuenciaMaxima(): void;
+	function redimensionar(w: number, h: number): void;
 
-	/** 💻
-	 * Funcion a declarar. Se ejecuta después de cada llamada a `dibujar` y de los `hooks de dibujo`, pero antes de dibujar realmente el lienzo.
+	/** 🌆
+	 * Devuelve una imagen recortada, eliminando los píxeles transparentes de los bordes.
+	 * @returns {Q5.Image}
+	 */
+	function recortar(): Q5.Imagen;
+
+	/** 🌆
+	 * Habilita el renderizado suave de imágenes mostradas más grandes que
+	 * su tamaño real. Esta es la configuración por defecto, así que ejecutar esta
+	 * función solo tiene efecto si se ha llamado a `noSuavizar`.
+	 * @example
+	 * await crearLienzo(200);
+	 * let icono = await cargar('/q5js_icon.png');
+	 * imagen(icono, -100, -100, 200, 200);
+	 */
+	function suavizar(): void;
+
+	/** 🌆
+	 * Deshabilita el renderizado suave de imágenes para un aspecto pixelado.
+	 * @example
+	 * await crearLienzo(200);
 	 * 
-	 * Útil para agregar efectos finales cuando es difícil hacerlo en la función de dibujo. Por ejemplo, al usar extensiones como p5play que dibujan capas superpuestas al lienzo.
+	 * let icono = await cargar('/q5js_icon.png');
+	 * 
+	 * noSuavizar();
+	 * imagen(icono, -100, -100, 200, 200);
 	 */
-	function retocarDibujo(): void;
+	function noSuavizar(): void;
 
-	/** 💻
-	 * Milisegundos que han pasado desde el último cuadro dibujado. Con la frecuencia por defecto a 60 hz, el tiempo aproximado es 16.6 ms o mas.
+	/** 🌆
+	 * Aplica un tinte (superposición de color) al dibujo.
 	 * 
-	 * Útil para mantener las animaciones sincronizadas con precisión, sobretodo si existen momentos en que la ejecución se ralentiza por sobrecarga del dispositivo. En casos en que la frecuencia real del bucle sea considerablemente mas baja, es recomendable reducir la frecuencia ideal.
+	 * El valor alfa del color de tinte determina la
+	 * fuerza del tinte. Para cambiar la opacidad de una imagen,
+	 * usa la función `opacidad`.
+	 * 
+	 * El teñido afecta a todas las imágenes dibujadas posteriormente. El color de tinte
+	 * se aplica a las imágenes usando el modo de mezcla "multiply".
+	 * 
+	 * Dado que el proceso de teñido es intensivo en rendimiento, cada vez
+	 * que se tiñe una imagen, q5 almacena en caché el resultado. `imagen` dibujará la
+	 * imagen teñida en caché a menos que el color de tinte haya cambiado o la
+	 * imagen que se está tiñendo haya sido editada.
+	 * 
+	 * Si necesitas dibujar una imagen múltiples veces cada fotograma con
+	 * diferentes tintes, considera hacer copias de la imagen y teñir
+	 * cada copia por separado.
+	 * @param {string | number} color color de tinte
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let logo = await cargar('/q5js_logo.avif');
+	 * 
+	 * teñir(1, 0, 0, 0.5);
+	 * imagen(logo, -100, -100, 200, 200);
 	 */
-	function ultimoTiempo(): void;
+	function teñir(): void;
+
+	/** 🌆
+	 * Las imágenes dibujadas después de ejecutar esta función no serán teñidas.
+	 */
+	function noTeñir(): void;
+
+	/** 🌆
+	 * Enmascara la imagen con otra imagen.
+	 * @param {Q5.Image} img imagen a usar como máscara
+	 */
+	function enmascarar(img: Q5.Imagen): void;
+
+	/** 🌆
+	 * Devuelve una copia de la imagen.
+	 * @returns {Q5.Image}
+	 */
+	function copiar(): Q5.Imagen;
+
+	/** 🌆
+	 * Muestra una región de la imagen en otra región de la imagen.
+	 * Se puede usar para crear un detalle insertado, también conocido como efecto de lupa.
+	 * @param {number} sx coordenada x de la región fuente
+	 * @param {number} sy coordenada y de la región fuente
+	 * @param {number} sw ancho de la región fuente
+	 * @param {number} sh alto de la región fuente
+	 * @param {number} dx coordenada x de la región destino
+	 * @param {number} dy coordenada y de la región destino
+	 * @param {number} dw ancho de la región destino
+	 * @param {number} dh alto de la región destino
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let logo = await cargar('/q5js_logo.avif');
+	 * 
+	 * logo.insertado(256, 256, 512, 512, 0, 0, 256, 256);
+	 * imagen(logo, -100, -100, 200, 200);
+	 */
+	function insertado(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
+
+	/** 🌆
+	 * Recupera una subsección de una imagen o lienzo como una nueva Imagen Q5
+	 * o el color de un píxel en la imagen o lienzo.
+	 * 
+	 * Si solo se especifican x e y, esta función devuelve el color del píxel
+	 * en la coordenada dada en formato de array `[R, G, B, A]`. Si `cargarPíxeles`
+	 * nunca se ha ejecutado, es ejecutado por esta función.
+	 * 
+	 * Si haces cambios en el lienzo o imagen, debes llamar a `cargarPíxeles`
+	 * antes de usar esta función para obtener los datos de color actuales.
+	 * 
+	 * No aplicable a lienzos WebGPU.
+	 * @param {number} x
+	 * @param {number} y
+	 * @param {number} [w] ancho del área, por defecto es 1
+	 * @param {number} [h] alto del área, por defecto es 1
+	 * @returns {Q5.Image | number[]}
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let logo = await cargar('/q5js_logo.avif');
+	 * 
+	 * let recortada = logo.obtener(256, 256, 512, 512);
+	 * imagen(recortada, -100, -100, 200, 200);
+	 */
+	function obtener(x: number, y: number, w?: number, h?: number): Q5.Imagen | number[];
+
+	/** 🌆
+	 * Establece el color de un píxel en la imagen o lienzo. El modo de color debe ser RGB.
+	 * 
+	 * O si se proporciona un lienzo o imagen, se dibuja encima de la
+	 * imagen o lienzo de destino, ignorando su configuración de tinte.
+	 * 
+	 * Ejecuta `actualizarPíxeles` para aplicar los cambios.
+	 * 
+	 * No aplicable a lienzos WebGPU.
+	 * @param {number} x
+	 * @param {number} y
+	 * @param {any} val color, lienzo, o imagen
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let c = color('lime');
+	 * let img = crearImagen(50, 50);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	img.establecer(aleatorio(50), aleatorio(50), c);
+	 * 	img.actualizarPíxeles();
+	 * 
+	 * 	fondo(img);
+	 * };
+	 */
+	function establecer(x: number, y: number, val: any): void;
+
+	/** 🌆
+	 * Array de datos de color de píxeles de un lienzo o imagen.
+	 * 
+	 * Vacío por defecto, poblar ejecutando `cargarPíxeles`.
+	 * 
+	 * Cada píxel está representado por cuatro valores consecutivos en el array,
+	 * correspondientes a sus canales rojo, verde, azul y alfa.
+	 * 
+	 * Los datos del píxel superior izquierdo están al principio del array
+	 * y los datos del píxel inferior derecho están al final, yendo de
+	 * izquierda a derecha y de arriba a abajo.
+	 */
+	function píxeles(): void;
+
+	/** 🌆
+	 * Carga datos de píxeles en `píxeles` desde el lienzo o imagen.
+	 * 
+	 * El ejemplo a continuación establece el canal verde de algunos píxeles
+	 * a un valor aleatorio.
+	 * 
+	 * No aplicable a lienzos WebGPU.
+	 * @example
+	 * frecuenciaRefresco(5);
+	 * let icono = cargarImagen('/q5js_icon.png');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	icono.cargarPíxeles();
+	 * 	for (let i = 0; i < icono.píxeles.length; i += 16) {
+	 * 		icono.píxeles[i + 1] = aleatorio(1);
+	 * 	}
+	 * 	icono.actualizarPíxeles();
+	 * 	fondo(icono);
+	 * };
+	 */
+	function cargarPíxeles(): void;
+
+	/** 🌆
+	 * Aplica cambios en el array `píxeles` al lienzo o imagen.
+	 * 
+	 * No aplicable a lienzos WebGPU.
+	 * @example
+	 * await crearLienzo(200);
+	 * let c = color('pink');
+	 * 
+	 * let img = crearImagen(50, 50);
+	 * for (let x = 0; x < 50; x += 3) {
+	 * 	for (let y = 0; y < 50; y += 3) {
+	 * 		img.establecer(x, y, c);
+	 * 	}
+	 * }
+	 * img.actualizarPíxeles();
+	 * 
+	 * fondo(img);
+	 */
+	function actualizarPíxeles(): void;
+
+	/** 🌆
+	 * Aplica un filtro a la imagen.
+	 * 
+	 * Mira la documentación de las constantes de filtro de q5 a continuación para más información.
+	 * 
+	 * También se puede usar una cadena de filtro CSS.
+	 * https://developer.mozilla.org/docs/Web/CSS/filter
+	 * 
+	 * No aplicable a lienzos WebGPU.
+	 * @param {string} tipo tipo de filtro o una cadena de filtro CSS
+	 * @param {number} [valor] valor opcional, depende del tipo de filtro
+	 * @example
+	 * await crearLienzo(200);
+	 * let logo = await cargar('/q5js_logo.avif');
+	 * logo.filtro(INVERTIR);
+	 * imagen(logo, -100, -100, 200, 200);
+	 */
+	function filtro(tipo: string, valor?: number): void;
+
+	/** 🌆
+	 * Convierte la imagen a píxeles blancos y negros dependiendo si están por encima o por debajo de cierto umbral.
+	 */
+	const UMBRAL: 1;
+
+	/** 🌆
+	 * Convierte la imagen a escala de grises estableciendo cada píxel a su luminancia.
+	 */
+	const GRIS: 2;
+
+	/** 🌆
+	 * Establece el canal alfa a totalmente opaco.
+	 */
+	const OPACO: 3;
+
+	/** 🌆
+	 * Invierte el color de cada píxel.
+	 */
+	const INVERTIR: 4;
+
+	/** 🌆
+	 * Limita cada canal de la imagen al número de colores especificado como argumento.
+	 */
+	const POSTERIZAR: 5;
+
+	/** 🌆
+	 * Aumenta el tamaño de las áreas brillantes.
+	 */
+	const DILATAR: 6;
+
+	/** 🌆
+	 * Aumenta el tamaño de las áreas oscuras.
+	 */
+	const EROSIONAR: 7;
+
+	/** 🌆
+	 * Aplica un desenfoque gaussiano a la imagen.
+	 */
+	const DESENFOCAR: 8;
+
+	/** 🌆
+	 * Crea una nueva imagen.
+	 * @param {number} w ancho
+	 * @param {number} h alto
+	 * @param {any} [opt] configuraciones opcionales para la imagen
+	 * @returns {Q5.Image}
+	 */
+	function crearImagen(w: number, h: number, opt?: any): Q5.Imagen;
+
+	/** 🌆
+	 * Crea un búfer de gráficos.
+	 * 
+	 * Deshabilitado por defecto en q5 WebGPU.
+	 * Mira el issue [#104](https://github.com/q5js/q5.js/issues/104) para detalles.
+	 * @param {number} w ancho
+	 * @param {number} h alto
+	 * @param {object} [opt] opciones
+	 * @returns {Q5} un nuevo búfer de gráficos Q5
+	 */
+	function crearGráficos(): void;
+
+	// 📘 text
+
+	/** 📘
+	 * Renderiza texto en el lienzo.
+	 * 
+	 * El texto se puede posicionar con los parámetros x e y
+	 * y opcionalmente se puede restringir.
+	 * @param {string} str cadena de texto a mostrar
+	 * @param {number} x coordenada-x de la posición del texto
+	 * @param {number} y coordenada-y de la posición del texto
+	 * @param {number} [anchoEnvoltura] ancho máximo de línea en caracteres
+	 * @param {number} [limiteLineas] número máximo de líneas
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo('silver');
+	 * 
+	 * tamañoTexto(32);
+	 * texto('Hello, world!', -88, 10);
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * tamañoTexto(20);
+	 * 
+	 * let info =
+	 * 	'q5.js was designed to make creative coding fun and accessible for a new generation of artists, designers, educators, and beginners.';
+	 * 
+	 * texto(info, -88, -70, 20, 6);
+	 * //
+	 * //
+	 */
+	function texto(str: string, x: number, y: number, anchoEnvoltura?: number, limiteLineas?: number): void;
+
+	/** 📘
+	 * Carga una fuente desde una URL.
+	 * 
+	 * El archivo de fuente puede estar en cualquier formato aceptado en CSS, como
+	 * archivos .ttf y .otf. El primer ejemplo a continuación carga
+	 * [Robotica](https://www.dafont.com/robotica-courtney.font).
+	 * 
+	 * También soporta cargar [fuentes de Google](https://fonts.google.com/).
+	 * El segundo ejemplo carga
+	 * [Pacifico](https://fonts.google.com/specimen/Pacifico).
+	 * 
+	 * Si no se cargan fuentes, se usa la fuente sans-serif por defecto.
+	 * 
+	 * Por defecto, los recursos se cargan en paralelo antes de que q5 ejecute `dibujar`. Usa `await` para esperar a que una fuente se cargue.
+	 *
+	 * En q5 WebGPU, las fuentes en [formato MSDF](https://github.com/q5js/q5.js/wiki/q5-WebGPU-renderer#text-rendering)
+	 * con el archivo terminando en "-msdf.json" se pueden usar para renderizado de texto de alto rendimiento. Haz la tuya usando el [convertidor de fuentes MSDF](https://msdf-bmfont.donmccurdy.com/).
+	 * @param {string} url URL de la fuente a cargar
+	 * @returns {FontFace & PromiseLike<FontFace>} fuente
+	 * @example
+	 * await crearLienzo(200, 56);
+	 * 
+	 * await cargarFuente('/assets/Robotica.ttf');
+	 * 
+	 * relleno('skyblue');
+	 * tamañoTexto(64);
+	 * imagenTexto('Hello!', -98, 24);
+	 * @example
+	 * await crearLienzo(200, 74);
+	 * 
+	 * cargarFuente('fonts.googleapis.com/css2?family=Pacifico');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	relleno('hotpink');
+	 * 	tamañoTexto(68);
+	 * 	imagenTexto('Hello!', -98, 31);
+	 * };
+	 * @example
+	 * await crearLienzo(200, 74);
+	 * 
+	 * await cargarFuente('sans-serif'); // msdf
+	 * 
+	 * relleno('white');
+	 * tamañoTexto(68);
+	 * imagenTexto('Hello!', -98, 31);
+	 */
+	function cargarFuente(url: string): FontFace & PromiseLike<FontFace>;
+
+	/** 📘
+	 * Establece la fuente actual a usar para renderizar texto.
+	 * 
+	 * Por defecto, la fuente se establece a la [familia de fuentes CSS](https://developer.mozilla.org/docs/Web/CSS/font-family)
+	 * "sans-serif" o la última fuente cargada.
+	 * @param {string} nombreFuente nombre de la familia de fuentes o un objeto FontFace
+	 * @example
+	 * await crearLienzo(200, 160);
+	 * fondo(0.8);
+	 * 
+	 * fuenteTexto('serif');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	tamañoTexto(32);
+	 * 	texto('Hello, world!', -96, 10);
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * fuenteTexto('monospace');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	texto('Hello, world!', -68, 10);
+	 * };
+	 */
+	function fuenteTexto(nombreFuente: string): void;
+
+	/** 📘
+	 * Establece u obtiene el tamaño de fuente actual. Si no se proporciona argumento, devuelve el tamaño de fuente actual.
+	 * @param {number} [tamaño] tamaño de la fuente en píxeles
+	 * @returns {number | void} tamaño de fuente actual cuando no se proporciona argumento
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	tamañoTexto(abs(ratónX));
+	 * 	texto('A', -90, 90);
+	 * };
+	 */
+	function tamañoTexto(): void;
+
+	/** 📘
+	 * Establece u obtiene la altura de línea actual. Si no se proporciona argumento, devuelve la altura de línea actual.
+	 * @param {number} [interlineado] altura de línea en píxeles
+	 * @returns {number | void} altura de línea actual cuando no se proporciona argumento
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	tamañoTexto(abs(ratónX));
+	 * 	texto('A', -90, 90);
+	 * 	rect(-90, 90, 5, -interlineado());
+	 * };
+	 */
+	function interlineado(interlineado?: number): number | void;
+
+	/** 📘
+	 * Establece el estilo de texto actual.
+	 * 
+	 * No aplicable a WebGPU cuando se usan fuentes MSDF.
+	 * @param {'normal' | 'italic' | 'bold' | 'bolditalic'} estilo estilo de fuente
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * estiloTexto(CURSIVA);
+	 * 
+	 * tamañoTexto(32);
+	 * texto('Hello, world!', -88, 6);
+	 */
+	function estiloTexto(estilo: 'normal' | 'italic' | 'bold' | 'bolditalic'): void;
+
+	/** 📘
+	 * Establece la alineación horizontal y vertical del texto.
+	 * @param {'left' | 'center' | 'right'} horiz alineación horizontal
+	 * @param {'top' | 'middle' | 'bottom' | 'alphabetic'} [vert] alineación vertical
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * tamañoTexto(32);
+	 * 
+	 * alineaciónTexto(CENTRO, MEDIO);
+	 * texto('Hello, world!', 0, 0);
+	 */
+	function alineaciónTexto(): void;
+
+	/** 📘
+	 * Establece el peso del texto.
+	 * 
+	 * - 100: delgado
+	 * - 200: extra-ligero
+	 * - 300: ligero
+	 * - 400: normal/regular
+	 * - 500: medio
+	 * - 600: semi-negrita
+	 * - 700: negrita
+	 * - 800: más negrita/extra-negrita
+	 * - 900: negro/pesado
+	 * @param {number | string} peso peso de la fuente
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * tamañoTexto(32);
+	 * alineaciónTexto(CENTRO, MEDIO);
+	 * 
+	 * pesoTexto(100);
+	 * texto('Hello, world!', 0, 0);
+	 */
+	function pesoTexto(peso: number | string): void;
+
+	/** 📘
+	 * Calcula y devuelve el ancho de una cadena de texto dada.
+	 * @param {string} str cadena a medir
+	 * @returns {number} ancho del texto en píxeles
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	tamañoTexto(abs(ratónX));
+	 * 	rect(-90, 90, anchoTexto('A'), -interlineado());
+	 * 	texto('A', -90, 90);
+	 * };
+	 */
+	function anchoTexto(str: string): number;
+
+	/** 📘
+	 * Calcula y devuelve el ascenso (la distancia desde la línea base hasta la parte superior del carácter más alto) de la fuente actual.
+	 * @param {string} str cadena a medir
+	 * @returns {number} ascenso del texto en píxeles
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	tamañoTexto(abs(ratónX));
+	 * 	rect(-90, 90, anchoTexto('A'), -ascensoTexto());
+	 * 	texto('A', -90, 90);
+	 * };
+	 */
+	function ascensoTexto(str: string): number;
+
+	/** 📘
+	 * Calcula y devuelve el descenso (la distancia desde la línea base hasta la parte inferior del carácter más bajo) de la fuente actual.
+	 * @param {string} str cadena a medir
+	 * @returns {number} descenso del texto en píxeles
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * tamañoTexto(64);
+	 * 
+	 * rect(-100, 0, 200, descensoTexto('q5'));
+	 * texto('q5', -90, 0);
+	 */
+	function descensoTexto(str: string): number;
+
+	/** 📘
+	 * Crea una imagen a partir de una cadena de texto.
+	 * @param {string} str cadena de texto
+	 * @param {number} [anchoEnvoltura] ancho máximo de línea en caracteres
+	 * @param {number} [limiteLineas] número máximo de líneas
+	 * @returns {Q5.Image} un objeto de imagen representando el texto renderizado
+	 * @example
+	 * await crearLienzo(200);
+	 * tamañoTexto(96);
+	 * 
+	 * let img = crearImagenTexto('🐶');
+	 * img.filtro(INVERTIR);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	imagen(img, -45, -90);
+	 * };
+	 */
+	function crearImagenTexto(str: string, anchoEnvoltura: number, limiteLineas: number): Q5.Imagen;
+
+	/** 📘
+	 * Renderiza una imagen generada a partir de texto en el lienzo.
+	 * 
+	 * Si el primer parámetro es una cadena, se creará y almacenará en caché automáticamente
+	 * una imagen del texto.
+	 * 
+	 * El posicionamiento de la imagen se ve afectado por la configuración actual de
+	 * alineación de texto y línea base.
+	 * 
+	 * En q5 WebGPU, esta función es la única forma de dibujar texto multicolor,
+	 * como emojis, y de usar fuentes que no están en formato MSDF.
+	 * Usar esta función para dibujar texto que cambia cada fotograma tiene
+	 * un costo de rendimiento muy alto.
+	 * @param {Q5.Image | string} img imagen o texto
+	 * @param {number} x coordenada-x donde se debe colocar la imagen
+	 * @param {number} y coordenada-y donde se debe colocar la imagen
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * tamañoTexto(96);
+	 * alineaciónTexto(CENTRO, CENTRO);
+	 * 
+	 * imagenTexto('🐶', 0, 0);
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * await cargar('/assets/Robotica.ttf');
+	 * 
+	 * fondo(0.8);
+	 * tamañoTexto(66);
+	 * imagenTexto('Hello!', -100, 100);
+	 */
+	function imagenTexto(img: Q5.Imagen | String, x: number, y: number): void;
+
+	/** 📘
+	 * Formateador de números, se puede usar para mostrar un número como una cadena con
+	 * un número especificado de dígitos antes y después del punto decimal,
+	 * opcionalmente añadiendo relleno con ceros.
+	 * @param {number} n número a formatear
+	 * @param {number} l número mínimo de dígitos que aparecen antes del punto decimal; el número se rellena con ceros si es necesario
+	 * @param {number} r número de dígitos que aparecen después del punto decimal
+	 * @returns {string} una representación de cadena del número, formateada en consecuencia
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * 
+	 * tamañoTexto(32);
+	 * texto(nf(PI, 4, 5), -90, 10);
+	 */
+	function nf(num: number, digitos: number): string;
+
+	/** 📘
+	 * Estilo de fuente normal.
+	 */
+	const NORMAL: 'normal';
+
+	/** 📘
+	 * Estilo de fuente cursiva.
+	 */
+	const CURSIVA: 'italic';
+
+	/** 📘
+	 * Peso de fuente negrita.
+	 */
+	const NEGRILLA: 'bold';
+
+	/** 📘
+	 * Estilo de fuente negrita y cursiva.
+	 */
+	const NEGRILLA_CURSIVA: 'italic bold';
+
+	/** 📘
+	 * Alinear texto a la izquierda.
+	 */
+	const IZQUIERDA: 'left';
+
+	/** 📘
+	 * Alinear texto al centro.
+	 */
+	const CENTRO: 'center';
+
+	/** 📘
+	 * Alinear texto a la derecha.
+	 */
+	const DERECHA: 'right';
+
+	/** 📘
+	 * Alinear texto arriba.
+	 */
+	const ARRIBA: 'top';
+
+	/** 📘
+	 * Alinear texto abajo.
+	 */
+	const ABAJO: 'bottom';
+
+	/** 📘
+	 * Alinear texto a la línea base (alfabética).
+	 */
+	const LINEA_BASE: 'alphabetic';
+
+	// 🖲 input
+
+	/**
+	 * El manejo de entrada de q5 es muy básico.
+	 * 
+	 * Para un mejor manejo de entrada, incluyendo soporte para controladores de juegos, considera usar el addon [p5play](https://p5play.org/) con q5.
+	 * 
+	 * Ten en cuenta que las respuestas de entrada dentro de `dibujar` pueden retrasarse
+	 * hasta un ciclo de fotograma: desde el momento exacto en que ocurre un evento de entrada
+	 * hasta la próxima vez que se dibuja un fotograma.
+	 * 
+	 * Reproduce sonidos o activa otra retroalimentación no visual inmediatamente
+	 * respondiendo a eventos de entrada dentro de funciones como
+	 * `alPresionarRatón` y `alPresionarTecla`.
+	 */
+
+	/** 🖲
+	 * Posición X actual del ratón.
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	tamañoTexto(64);
+	 * 	texto(redondear(ratónX), -50, 20);
+	 * };
+	 */
+	function ratónX(): void;
+
+	/** 🖲
+	 * Posición Y actual del ratón.
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	círculo(0, ratónY, 100);
+	 * };
+	 */
+	function ratónY(): void;
+
+	/** 🖲
+	 * Posición X previa del ratón.
+	 */
+	function pRatónX(): void;
+
+	/** 🖲
+	 * Posición Y previa del ratón.
+	 */
+	function pRatónY(): void;
+
+	/** 🖲
+	 * El botón actual siendo presionado: 'left', 'right', 'center').
+	 * 
+	 * El valor por defecto es una cadena vacía.
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	tamañoTexto(64);
+	 * 	texto(botónRatón, -80, 20);
+	 * };
+	 */
+	function botónRatón(): void;
+
+	/** 🖲
+	 * Verdadero si el ratón está actualmente presionado, falso de lo contrario.
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	if (ratónPresionado) fondo(0.4);
+	 * 	else fondo(0.8);
+	 * };
+	 */
+	function ratónPresionado(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de presionar el ratón.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alPresionarRatón = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.1) % 1;
+	 * };
+	 */
+	function alPresionarRatón(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de soltar el ratón.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alSoltarRatón = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.1) % 1;
+	 * };
+	 */
+	function alSoltarRatón(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de mover el ratón.
+	 * 
+	 * En dispositivos con pantalla táctil esta función no se llama
+	 * cuando el usuario arrastra su dedo en la pantalla.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alMoverRatón = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.005) % 1;
+	 * };
+	 */
+	function alMoverRatón(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de arrastrar el ratón.
+	 * 
+	 * Arrastrar el ratón se define como mover el ratón
+	 * mientras un botón del ratón está presionado.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alArrastrarRatón = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.005) % 1;
+	 * };
+	 */
+	function alArrastrarRatón(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de doble clic del ratón.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.dobleClic = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.1) % 1;
+	 * };
+	 */
+	function dobleClic(): void;
+
+	/** 🖲
+	 * El nombre de la última tecla presionada.
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	tamañoTexto(64);
+	 * 	texto(tecla, -80, 20);
+	 * };
+	 */
+	let tecla: string;
+
+	/** 🖲
+	 * Verdadero si una tecla está actualmente presionada, falso de lo contrario.
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	if (teclaPresionada) fondo(0.4);
+	 * 	else fondo(0.8);
+	 * };
+	 */
+	let teclaPresionada: boolean;
+
+	/** 🖲
+	 * Devuelve verdadero si el usuario está presionando la tecla especificada, falso
+	 * de lo contrario. Acepta nombres de teclas insensibles a mayúsculas.
+	 * @param {string} tecla tecla a comprobar
+	 * @returns {boolean} verdadero si la tecla está presionada, falso de lo contrario
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	if (teclaEstaPresionada('f') && teclaEstaPresionada('j')) {
+	 * 		rect(-50, -50, 100, 100);
+	 * 	}
+	 * };
+	 */
+	function teclaEstaPresionada(tecla: string): boolean;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de presionar tecla.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alPresionarTecla = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.1) % 1;
+	 * };
+	 */
+	function alPresionarTecla(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de soltar tecla.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alSoltarTecla = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.1) % 1;
+	 * };
+	 */
+	function alSoltarTecla(): void;
+
+	/** 🖲
+	 * Array que contiene todos los puntos de toque actuales dentro de la
+	 * ventana del navegador. Cada toque es un objeto con
+	 * propiedades `id`, `x`, e `y`.
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	for (let toque of toques) {
+	 * 		círculo(toque.x, toque.y, 100);
+	 * 	}
+	 * };
+	 */
+	let toques: any[];
+
+	/** 🖲
+	 * Define esta función para responder a eventos de inicio de toque
+	 * en el lienzo.
+	 * 
+	 * Devuelve true para habilitar gestos táctiles como pellizcar para hacer zoom
+	 * y desplazarse, que q5 deshabilita en el lienzo por defecto.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alEmpezarToque = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.1) % 1;
+	 * };
+	 */
+	function alEmpezarToque(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de fin de toque
+	 * en el lienzo.
+	 * 
+	 * Devuelve true para habilitar gestos táctiles como pellizcar para hacer zoom
+	 * y desplazarse, que q5 deshabilita en el lienzo por defecto.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alTerminarToque = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.1) % 1;
+	 * };
+	 */
+	function alTerminarToque(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de movimiento de toque
+	 * en el lienzo.
+	 * 
+	 * Devuelve true para habilitar gestos táctiles como pellizcar para hacer zoom
+	 * y desplazarse, que q5 deshabilita en el lienzo por defecto.
+	 * @example
+	 * await crearLienzo(200);
+	 * let gris = 0.4;
+	 * 
+	 * q5.alMoverToque = function () {
+	 * 	fondo(gris);
+	 * 	gris = (gris + 0.005) % 1;
+	 * };
+	 */
+	function alMoverToque(): void;
+
+	/** 🖲
+	 * Objeto que contiene todos los punteros actuales dentro de la
+	 * ventana del navegador.
+	 * 
+	 * Esto incluye ratón, toque y punteros de lápiz.
+	 * 
+	 * Cada puntero es un objeto con
+	 * propiedades `event`, `x`, e `y`.
+	 * La propiedad `event` contiene el
+	 * [PointerEvent](https://developer.mozilla.org/docs/Web/API/PointerEvent) original.
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	for (let punteroID in punteros) {
+	 * 		let puntero = punteros[punteroID];
+	 * 		círculo(puntero.x, puntero.y, 100);
+	 * 	}
+	 * };
+	 */
+	let punteros: {};
+
+	/** 🖲
+	 * Establece el cursor a un [tipo de cursor CSS](https://developer.mozilla.org/docs/Web/CSS/cursor) o imagen.
+	 * Si se proporciona una imagen, las coordenadas x e y opcionales pueden
+	 * especificar el punto activo del cursor.
+	 * @param {string} nombre nombre del cursor o la url a una imagen
+	 * @param {number} [x] coordenada x del punto del cursor
+	 * @param {number} [y] coordenada y del punto del cursor
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * cursor('pointer');
+	 */
+	function cursor(nombre: string, x?: number, y?: number): void;
+
+	/** 🖲
+	 * Oculta el cursor dentro de los límites del lienzo.
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * sinCursor();
+	 */
+	function sinCursor(): void;
+
+	/** 🖲
+	 * Define esta función para responder a eventos de la rueda del ratón.
+	 * 
+	 * `event.deltaX` y `event.deltaY` son las cantidades de desplazamiento horizontal y vertical,
+	 * respectivamente.
+	 * 
+	 * Devuelve true para permitir el comportamiento por defecto de desplazar la página.
+	 * @example
+	 * let x = (y = 0);
+	 * q5.dibujar = function () {
+	 * 	círculo(x, y, 10);
+	 * };
+	 * q5.ruedaRatón = function (e) {
+	 * 	x += e.deltaX;
+	 * 	y += e.deltaY;
+	 * 	return false;
+	 * };
+	 */
+	function ruedaRatón(): void;
+
+	/** 🖲
+	 * Solicita que el puntero se bloquee al cuerpo del documento, ocultando
+	 * el cursor y permitiendo un movimiento ilimitado.
+	 * 
+	 * Los sistemas operativos habilitan la aceleración del ratón por defecto, lo cual es útil cuando a veces quieres un movimiento lento y preciso (piensa en cómo usarías un paquete de gráficos), pero también quieres moverte grandes distancias con un movimiento de ratón más rápido (piensa en desplazarte y seleccionar varios archivos). Para algunos juegos, sin embargo, se prefieren los datos de entrada de ratón sin procesar para controlar la rotación de la cámara — donde el mismo movimiento de distancia, rápido o lento, resulta en la misma rotación.
+	 * 
+	 * Para salir del modo de bloqueo de puntero, llama a `document.exitPointerLock()`.
+	 * @param {boolean} movimientoNoAjustado establecer a true para deshabilitar la aceleración del ratón a nivel de SO y acceder a la entrada de ratón sin procesar
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	círculo(ratónX / 10, ratónY / 10, 10);
+	 * };
+	 * 
+	 * q5.dobleClic = function () {
+	 * 	if (!document.pointerLockElement) {
+	 * 		bloqueoPuntero();
+	 * 	} else {
+	 * 		document.exitPointerLock();
+	 * 	}
+	 * };
+	 */
+	function bloqueoPuntero(movimientoNoAjustado: boolean): void;
+
+	// 🎨 color
+
+	/** 🎨
+	 * Dibuja sobre todo el lienzo con un color o una imagen.
+	 * 
+	 * Al igual que la función [`color`](https://q5js.org/learn/#color),
+	 * esta función puede aceptar colores en una amplia gama de formatos:
+	 * cadena de color CSS, valor de escala de grises y valores de componentes de color.
+	 * @param {Color | Q5.Image} relleno un color o una imagen para dibujar
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo('crimson');
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.5, 0.2);
+	 * 	círculo(mouseX, mouseY, 20);
+	 * };
+	 */
+	function fondo(relleno: Color | Q5.Imagen): void;
+
+	function color(c0: string | number | Color | number[], c1?: number, c2?: number, c3?: number): Color;
+
+	function modoColor(modo: 'rgb' | 'oklch', formato: 1 | 255, gama: 'srgb' | 'display-p3'): void;
+
+	const RGB: 'rgb';
+
+	const OKLCH: 'oklch';
+
+	const HSL: 'hsl';
+
+	const HSB: 'hsb';
+
+	const SRGB: 'srgb';
+
+	const DISPLAY_P3: 'display-p3';
+
+	class Color {
+		constructor(c0: number, c1: number, c2: number, c3: number);
+
+		igual(otro: Color): boolean;
+
+		esMismoColor(otro: Color): boolean;
+
+		toString(): string;
+
+		niveles: number[];
+	}
+
+	// 💅 styles
+
+	/** 💅
+	 * Establece el color de relleno. El defecto es blanco.
+	 * 
+	 * Como la función [`color`](https://q5js.org/learn/#color), esta función
+	 * puede aceptar colores en una amplia gama de formatos: como una cadena de color CSS,
+	 * un objeto `Color`, valor de escala de grises, o valores de componentes de color.
+	 * @param {Color} color color de relleno
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * relleno('red');
+	 * círculo(-20, -20, 80);
+	 * 
+	 * relleno('lime');
+	 * cuadrado(-20, -20, 80);
+	 */
+	function relleno(color: Color): void;
+
+	/** 💅
+	 * Establece el color del trazo (contorno). El defecto es negro.
+	 * 
+	 * Como la función [`color`](https://q5js.org/learn/#color), esta función
+	 * puede aceptar colores en una amplia gama de formatos: como una cadena de color CSS,
+	 * un objeto `Color`, valor de escala de grises, o valores de componentes de color.
+	 * @param {Color} color color de trazo
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * relleno(0.14);
+	 * 
+	 * trazo('red');
+	 * círculo(-20, -20, 80);
+	 * 
+	 * trazo('lime');
+	 * cuadrado(-20, -20, 80);
+	 */
+	function trazo(color: Color): void;
+
+	/** 💅
+	 * Después de llamar a esta función, el dibujo no será rellenado.
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * sinRelleno();
+	 * 
+	 * trazo('red');
+	 * círculo(-20, -20, 80);
+	 * trazo('lime');
+	 * cuadrado(-20, -20, 80);
+	 */
+	function sinRelleno(): void;
+
+	/** 💅
+	 * Después de llamar a esta función, el dibujo no tendrá un trazo (contorno).
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * relleno(0.14);
+	 * trazo('red');
+	 * círculo(-20, -20, 80);
+	 * 
+	 * sinTrazo();
+	 * cuadrado(-20, -20, 80);
+	 */
+	function sinTrazo(): void;
+
+	/** 💅
+	 * Establece el tamaño del trazo usado para líneas y el borde alrededor de dibujos.
+	 * @param {number} grosor tamaño del trazo en píxeles
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * trazo('red');
+	 * círculo(-50, 0, 80);
+	 * 
+	 * grosorTrazo(12);
+	 * círculo(50, 0, 80);
+	 */
+	function grosorTrazo(grosor: number): void;
+
+	/** 💅
+	 * Establece la opacidad global, que afecta a todas las operaciones de dibujo posteriores, excepto `fondo`. El defecto es 1, totalmente opaco.
+	 * 
+	 * En q5 WebGPU esta función solo afecta a imágenes.
+	 * @param {number} alfa nivel de opacidad, variando de 0 a 1
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * opacidad(1);
+	 * círculo(-20, -20, 80);
+	 * 
+	 * opacidad(0.2);
+	 * cuadrado(-20, -20, 80);
+	 */
+	function opacidad(alfa: number): void;
+
+	/** 💅
+	 * Establece el color de la sombra. El defecto es transparente (sin sombra).
+	 * 
+	 * Las sombras se aplican a cualquier cosa dibujada en el lienzo, incluyendo formas rellenas,
+	 * trazos, texto, e imágenes.
+	 * 
+	 * Como la función [`color`](https://q5js.org/learn/#color), esta función
+	 * puede aceptar colores en una amplia gama de formatos: como una cadena de color CSS,
+	 * un objeto `Color`, valor de escala de grises, o valores de componentes de color.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 * @param {Color} color color de sombra
+	 */
+	function sombra(color: string | Color): void;
+
+	/** 💅
+	 * Deshabilita el efecto de sombra.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 */
+	function sinSombra(): void;
+
+	/** 💅
+	 * Establece el desplazamiento de la sombra y el radio de desenfoque.
+	 * 
+	 * Cuando q5 comienza, el desplazamiento de la sombra es (10, 10) con un desenfoque de 10.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 * @param {number} offsetX desplazamiento horizontal de la sombra
+	 * @param {number} offsetY desplazamiento vertical de la sombra, por defecto es el mismo que offsetX
+	 * @param {number} desenfoque radio de desenfoque de la sombra, por defecto es 0
+	 */
+	function cajaSombra(offsetX: number, offsetY: number, desenfoque: number): void;
+
+	/** 💅
+	 * Establece la operación de composición global para el contexto del lienzo.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 * @param {string} val operación de composición
+	 */
+	function modoMezcla(val: string): void;
+
+	/** 💅
+	 * Establece el estilo de terminación de línea a `ROUND`, `SQUARE`, o `PROJECT`.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 * @param {CanvasLineCap} val estilo de terminación de línea
+	 */
+	function terminaciónTrazo(): void;
+
+	/** 💅
+	 * Establece el estilo de unión de línea a `ROUND`, `BEVEL`, o `MITER`.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 * @param {CanvasLineJoin} val estilo de unión de línea
+	 */
+	function uniónTrazo(): void;
+
+	/** 💅
+	 * Establece el lienzo en modo borrar, donde las formas borrarán lo que está
+	 * debajo de ellas en lugar de dibujar sobre ello.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 * @param {number} [rellenoAlfa] nivel de opacidad del color de relleno
+	 * @param {number} [trazoAlfa] nivel de opacidad del color de trazo
+	 */
+	function borrar(rellenoAlfa?: number, trazoAlfa?: number): void;
+
+	/** 💅
+	 * Reinicia el lienzo del modo borrar al modo de dibujo normal.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 */
+	function noBorrar(): void;
+
+	/** 💅
+	 * Guarda la configuración de estilo de dibujo actual.
+	 * 
+	 * Esto incluye el relleno, trazo, grosor de trazo, tinte, modo de imagen,
+	 * modo de rectángulo, modo de elipse, tamaño de texto, alineación de texto, línea base de texto, y
+	 * configuración de sombra.
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * guardarEstilos();
+	 * relleno('blue');
+	 * círculo(-50, -50, 80);
+	 * 
+	 * recuperarEstilos();
+	 * círculo(50, 50, 80);
+	 */
+	function guardarEstilos(): void;
+
+	/** 💅
+	 * Restaura la configuración de estilo de dibujo guardada previamente.
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * guardarEstilos();
+	 * relleno('blue');
+	 * círculo(-50, -50, 80);
+	 * 
+	 * recuperarEstilos();
+	 * círculo(50, 50, 80);
+	 */
+	function recuperarEstilos(): void;
+
+	/** 💅
+	 * Limpia el lienzo, haciendo que cada píxel sea completamente transparente.
+	 * 
+	 * Ten en cuenta que el lienzo solo se puede ver a través si tiene un canal alfa.
+	 * 
+	 * #### webgpu
+	 */
+	function limpiar(): void;
+
+	/** 💅
+	 * Comprueba si un punto dado está dentro del área de relleno del camino actual.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 * @param {number} x coordenada-x del punto
+	 * @param {number} y coordenada-y del punto
+	 * @returns {boolean} verdadero si el punto está dentro del área de relleno, falso de lo contrario
+	 */
+	function enRelleno(x: number, y: number): boolean;
+
+	/** 💅
+	 * Comprueba si un punto dado está dentro del trazo del camino actual.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 * @param {number} x coordenada-x del punto
+	 * @param {number} y coordenada-y del punto
+	 * @returns {boolean} verdadero si el punto está dentro del trazo, falso de lo contrario
+	 */
+	function enTrazo(x: number, y: number): boolean;
+
+	// 🦋 transforms
+
+	/** 🦋
+	 * Traslada el origen del contexto de dibujo.
+	 * @param {number} x traslación a lo largo del eje x
+	 * @param {number} y traslación a lo largo del eje y
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	trasladar(50, 50);
+	 * 	círculo(0, 0, 80);
+	 * };
+	 */
+	function trasladar(x: number, y: number): void;
+
+	/** 🦋
+	 * Rota el contexto de dibujo.
+	 * @param {number} angulo ángulo de rotación en radianes
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	rotar(ratónX / 50);
+	 * 
+	 * 	modoRect(CENTER);
+	 * 	cuadrado(0, 0, 120);
+	 * };
+	 */
+	function rotar(angulo: number): void;
+
+	/** 🦋
+	 * Escala el contexto de dibujo.
+	 * 
+	 * Si solo se proporciona un parámetro de entrada,
+	 * el contexto de dibujo se escalará uniformemente.
+	 * @param {number} x factor de escala a lo largo del eje x
+	 * @param {number} [y] factor de escala a lo largo del eje y
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	escalar(ratónX / 10);
+	 * 	círculo(0, 0, 20);
+	 * };
+	 */
+	function escalar(x: number, y?: number): void;
+
+	/** 🦋
+	 * Cizalla el contexto de dibujo a lo largo del eje x.
+	 * @param {number} angulo ángulo de cizallamiento en radianes
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	trasladar(-75, -40);
+	 * 	cizallarX(ratónX / 100);
+	 * 	cuadrado(0, 0, 80);
+	 * };
+	 */
+	function cizallarX(angulo: number): void;
+
+	/** 🦋
+	 * Cizalla el contexto de dibujo a lo largo del eje y.
+	 * @param {number} angulo ángulo de cizallamiento en radianes
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	trasladar(-75, -40);
+	 * 	cizallarY(ratónX / 100);
+	 * 	cuadrado(0, 0, 80);
+	 * };
+	 */
+	function cizallarY(angulo: number): void;
+
+	/** 🦋
+	 * Aplica una matriz de transformación.
+	 * 
+	 * Acepta una matriz de 3x3 como un array o múltiples argumentos.
+	 *
+	 * Ten en cuenta que en q5 WebGPU, la matriz de identidad (por defecto)
+	 * tiene una escala y negativa para voltear el eje y para coincidir con
+	 * el renderizador Canvas2D.
+	 * @param {number} a
+	 * @param {number} b
+	 * @param {number} c
+	 * @param {number} d
+	 * @param {number} e
+	 * @param {number} f
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 
+	 * 	aplicarMatriz(2, -1, 1, -1);
+	 * 	círculo(0, 0, 80);
+	 * };
+	 */
+	function aplicarMatriz(a: number, b: number, c: number, d: number, e: number, f: number): void;
+
+	/** 🦋
+	 * Reinicia la matriz de transformación.
+	 * 
+	 * q5 ejecuta esta función antes de cada vez que se ejecuta la función `dibujar`,
+	 * para que las transformaciones no se trasladen al siguiente fotograma.
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * trasladar(50, 50);
+	 * círculo(0, 0, 80);
+	 * 
+	 * reiniciarMatriz();
+	 * cuadrado(0, 0, 50);
+	 */
+	function reiniciarMatriz(): void;
+
+	/** 🦋
+	 * Guarda la matriz de transformación actual.
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * guardarMatriz();
+	 * rotar(CUARTO_PI);
+	 * elipse(0, 0, 120, 40);
+	 * recuperarMatriz();
+	 * 
+	 * elipse(0, 0, 120, 40);
+	 */
+	function guardarMatriz(): void;
+
+	/** 🦋
+	 * Restaura la matriz de transformación guardada previamente.
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * guardarMatriz();
+	 * rotar(CUARTO_PI);
+	 * elipse(0, 0, 120, 40);
+	 * recuperarMatriz();
+	 * 
+	 * elipse(0, 0, 120, 40);
+	 */
+	function recuperarMatriz(): void;
+
+	/** 🦋
+	 * Guarda la configuración de estilo de dibujo y transformaciones actuales.
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * guardar();
+	 * relleno('blue');
+	 * trasladar(50, 50);
+	 * círculo(0, 0, 80);
+	 * recuperar();
+	 * 
+	 * cuadrado(0, 0, 50);
+	 */
+	function guardar(datos?: object, nombreArchivo?: string): void;
+
+	/** 🦋
+	 * Restaura la configuración de estilo de dibujo y transformaciones guardadas previamente.
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * guardar();
+	 * relleno('blue');
+	 * trasladar(50, 50);
+	 * círculo(0, 0, 80);
+	 * recuperar();
+	 * 
+	 * cuadrado(0, 0, 50);
+	 */
+	function recuperar(): void;
+
+	// 💻 display
+
+	/** 💻
+	 * El ancho de la ventana (cantidad de píxeles). Atajo para `window.innerWidth`.
+	 */
+	var anchoVentana: number;
+
+	/** 💻
+	 * El alto de la ventana (cantidad de píxeles). Atajo para `window.innerHeight`.
+	 */
+	var altoVentana: number;
+
+	/** 💻
+	 * Número del cuadro actual, es decir, la cantidad de cuadros que se han dibujado desde que se inició el sketch.
+	 */
+	var cuadroActual: number;
+
+	/** 💻
+	 * Detiene el bucle de dibujo.
+	 */
+	function pausar(): void;
+
+	/** 💻
+	 * Dibuja el lienzo `n` veces. Si no recibe parametro, se dibuja una sola vez. Útil para controlar animaciones con el bucle pausado.
+	 * @param {number} [n] cantidad de veces que se volverá a dibujar el lienzo, por defecto es 1
+	 */
+	function redibujar(n?: number): void;
+
+	/** 💻
+	 * Vuelve a activar el bucle de dibujo en caso de que estuviera pausado.
+	 */
+	function reanudar(): void;
+
+	/** 💻
+	 * Si recibe un parámetro, establece la cantidad ideal de cuadros que se intentarán dibujar por cada segundo (es decir, la tasa de refresco, la frecuencia del bucle).
+	 * 
+	 * Retorna la frecuencia real alcanzada durante el último segundo de ejecución. Incluso si nunca se modifica explícitamente la frecuencia, el valor real suele fluctuar entre el ideal y 0. Para un mejor análisis del rendimiento usar las herramientas del navegador (DevTools).
+	 * @param `hz` {number} [frecuencia] cantidad ideal de cuadros a dibujar en un segundo, por defecto es 60
+	 * @returns {number} frecuencia real del bucle en el último segundo
+	 */
+	function frecuenciaRefresco(hertz?: number): number;
+
+	/** 💻
+	 * Retorna la cantidad ideal de cuadros que se intentan dibujar por segundo.
+	 */
+	function frecuenciaIdeal(): void;
+
+	/** 💻
+	 * Retorna la cantidad maxima de cuadros que se podrían estar dibujando en cada segundo.
+	 * 
+	 * Es un valor teórico que depende del estado del dispositivo. Para un mejor análisis del rendimiento usar las herramientas del navegador (DevTools).
+	 * @returns {number} cantidad máxima teorica de cuadros por segundo
+	 */
+	function frecuenciaMaxima(): void;
+
+	/** 💻
+	 * Funcion a declarar. Se ejecuta después de cada llamada a `dibujar` y de los `hooks de dibujo`, pero antes de dibujar realmente el lienzo.
+	 * 
+	 * Útil para agregar efectos finales cuando es difícil hacerlo en la función de dibujo. Por ejemplo, al usar extensiones como p5play que dibujan capas superpuestas al lienzo.
+	 */
+	function retocarDibujo(): void;
+
+	/** 💻
+	 * Milisegundos que han pasado desde el último cuadro dibujado. Con la frecuencia por defecto a 60 hz, el tiempo aproximado es 16.6 ms o mas.
+	 * 
+	 * Útil para mantener las animaciones sincronizadas con precisión, sobretodo si existen momentos en que la ejecución se ralentiza por sobrecarga del dispositivo. En casos en que la frecuencia real del bucle sea considerablemente mas baja, es recomendable reducir la frecuencia ideal.
+	 */
+	function ultimoTiempo(): void;
+
+	const MAXIMIZADO: 'maxed';
+
+	const SUAVE: 'smooth';
+
+	const PIXELADO: 'pixelated';
+
+	function pantallaCompleta(v?: boolean): void;
+
+	var ancho: number;
+
+	var alto: number;
+
+	var medioAncho: number;
+
+	var medioAlto: number;
+
+	var lienzo: HTMLCanvasElement;
+
+	function redimensionarLienzo(w: number, h: number): void;
+
+	function obtenerTasaFotogramasObjetivo(): number;
+
+	function obtenerFPS(): number;
+
+	function postProcesar(): void;
+
+	var deltaTiempo: number;
+
+	var contextoDibujo: CanvasRenderingContext2D;
+
+	// 🧮 math
+
+	/** 🧮
+	 * Genera un valor aleatorio.
+	 * 
+	 * - Si no se proporcionan entradas, devuelve un número entre 0 y 1.
+	 * - Si se proporciona una entrada numérica, devuelve un número entre 0 y el valor proporcionado.
+	 * - Si se proporcionan dos entradas numéricas, devuelve un número entre los dos valores.
+	 * - Si se proporciona un array, devuelve un elemento aleatorio del array.
+	 * @param {number | any[]} [bajo] límite inferior (inclusivo) o un array
+	 * @param {number} [alto] límite superior (exclusivo)
+	 * @returns {number | any} un número o elemento aleatorio
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * frecuenciaRefresco(5);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	círculo(0, 0, aleatorio(200));
+	 * };
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	círculo(aleatorio(-100, 100), aleatorio(-100, 100), 10);
+	 * };
+	 */
+	function aleatorio(bajo?: number | any[], alto?: number): number | any;
+
+	/** 🧮
+	 * Genera un número aleatorio dentro de un rango simétrico alrededor de cero.
+	 * 
+	 * Se puede usar para crear un efecto de fluctuación (desplazamiento aleatorio).
+	 * 
+	 * Equivalente a `aleatorio(-cantidad, cantidad)`.
+	 * @param {number} cantidad cantidad máxima absoluta de fluctuación, por defecto es 1
+	 * @returns {number} número aleatorio entre -val y val
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	círculo(ratónX + flu(3), ratónY + flu(3), 5);
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	círculo(flu(50), 0, aleatorio(50));
+	 * };
+	 */
+	function flu(cantidad: number): number;
+
+	/** 🧮
+	 * Genera un valor de ruido basado en las entradas x, y, y z.
+	 * 
+	 * Usa [Ruido Perlin](https://es.wikipedia.org/wiki/Ruido_Perlin) por defecto.
+	 * @param {number} [x] entrada coordenada-x
+	 * @param {number} [y] entrada coordenada-y
+	 * @param {number} [z] entrada coordenada-z
+	 * @returns {number} un valor de ruido
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	let n = ruido(frameCount * 0.01);
+	 * 	círculo(0, 0, n * 200);
+	 * };
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	let t = (frameCount + ratónX) * 0.02;
+	 * 	for (let x = -5; x < 220; x += 10) {
+	 * 		let n = ruido(t, x * 0.1);
+	 * 		círculo(x - 100, 0, n * 40);
+	 * 	}
+	 * };
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	sinTrazo();
+	 * 	let t = millis() * 0.002;
+	 * 	for (let x = -100; x < 100; x += 5) {
+	 * 		for (let y = -100; y < 100; y += 5) {
+	 * 			relleno(ruido(t, (ratónX + x) * 0.05, y * 0.05));
+	 * 			cuadrado(x, y, 5);
+	 * 		}
+	 * 	}
+	 * };
+	 */
+	function ruido(x?: number, y?: number, z?: number): number;
+
+	/** 🧮
+	 * Calcula la distancia entre dos puntos.
+	 * 
+	 * Esta función también acepta dos objetos con propiedades `x` e `y`.
+	 * @param {number} x1 coordenada-x del primer punto
+	 * @param {number} y1 coordenada-y del primer punto
+	 * @param {number} x2 coordenada-x del segundo punto
+	 * @param {number} y2 coordenada-y del segundo punto
+	 * @returns {number} distancia entre los puntos
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	línea(0, 0, ratónX, ratónY);
+	 * 
+	 * 	let d = dist(0, 0, ratónX, ratónY);
+	 * 	texto(redondear(d), -80, -80);
+	 * };
+	 */
+	function dist(x1: number, y1: number, x2: number, y2: number): number;
+
+	/** 🧮
+	 * Mapea un número de un rango a otro.
+	 * @param {number} val valor entrante a convertir
+	 * @param {number} inicio1 límite inferior del rango actual del valor
+	 * @param {number} fin1 límite superior del rango actual del valor
+	 * @param {number} inicio2 límite inferior del rango objetivo del valor
+	 * @param {number} fin2 límite superior del rango objetivo del valor
+	 * @returns {number} valor mapeado
+	 */
+	function mapa(val: number, inicio1: number, fin1: number, inicio2: number, fin2: number): number;
+
+	/** 🧮
+	 * Establece el modo para interpretar y dibujar ángulos. Puede ser 'degrees' (grados) o 'radians' (radianes).
+	 * @param {'degrees' | 'radians'} modo modo a establecer para la interpretación de ángulos
+	 */
+	function modoÁngulo(): void;
+
+	/** 🧮
+	 * Convierte grados a radianes.
+	 * @param {number} grados ángulo en grados
+	 * @returns {number} ángulo en radianes
+	 */
+	function radianes(grados: number): number;
+
+	/** 🧮
+	 * Convierte radianes a grados.
+	 * @param {number} radianes ángulo en radianes
+	 * @returns {number} ángulo en grados
+	 */
+	function grados(radianes: number): number;
+
+	/** 🧮
+	 * Calcula un número entre dos números en un incremento específico.
+	 * @param {number} inicio primer número
+	 * @param {number} fin segundo número
+	 * @param {number} cant cantidad a interpolar entre los dos valores
+	 * @returns {number} número interpolado
+	 */
+	function interpolar(inicio: number, fin: number, cant: number): number;
+
+	/** 🧮
+	 * Restringe un valor entre un valor mínimo y máximo.
+	 * @param {number} n número a restringir
+	 * @param {number} bajo límite inferior
+	 * @param {number} alto límite superior
+	 * @returns {number} valor restringido
+	 */
+	function constreñir(): void;
+
+	/** 🧮
+	 * Normaliza un número de otro rango en un valor entre 0 y 1.
+	 * @param {number} n número a normalizar
+	 * @param {number} inicio límite inferior del rango
+	 * @param {number} fin límite superior del rango
+	 * @returns {number} número normalizado
+	 */
+	function norm(n: number, inicio: number, fin: number): number;
+
+	/** 🧮
+	 * Calcula la parte fraccionaria de un número.
+	 * @param {number} n un número
+	 * @returns {number} parte fraccionaria del número
+	 */
+	function frac(n: number): number;
+
+	/** 🧮
+	 * Calcula el valor absoluto de un número.
+	 * @param {number} n un número
+	 * @returns {number} valor absoluto del número
+	 */
+	function abs(n: number): number;
+
+	/** 🧮
+	 * Redondea un número.
+	 * @param {number} n número a redondear
+	 * @param {number} [d] número de lugares decimales a redondear
+	 * @returns {number} número redondeado
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * tamañoTexto(32);
+	 * texto(redondear(PI, 5), -90, 10);
+	 */
+	function redondear(n: number, d: number): number;
+
+	/** 🧮
+	 * Redondea un número hacia arriba.
+	 * @param {number} n un número
+	 * @returns {number} número redondeado
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * tamañoTexto(32);
+	 * texto(techo(PI), -90, 10);
+	 */
+	function techo(n: number): number;
+
+	/** 🧮
+	 * Redondea un número hacia abajo.
+	 * @param {number} n un número
+	 * @returns {number} número redondeado
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * tamañoTexto(32);
+	 * texto(piso(-PI), -90, 10);
+	 */
+	function piso(n: number): number;
+
+	/** 🧮
+	 * Devuelve el valor más pequeño en una secuencia de números.
+	 * @param {...number} args números a comparar
+	 * @returns {number} mínimo
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(min(-ratónX / 100, 0.5));
+	 * 	círculo(min(ratónX, 0), 0, 80);
+	 * };
+	 */
+	function min(...args: number[]): number;
+
+	/** 🧮
+	 * Devuelve el valor más grande en una secuencia de números.
+	 * @param {...number} args números a comparar
+	 * @returns {number} máximo
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	fondo(max(-ratónX / 100, 0.5));
+	 * 	círculo(max(ratónX, 0), 0, 80);
+	 * };
+	 */
+	function max(...args: number[]): number;
+
+	/** 🧮
+	 * Calcula el valor de una base elevada a una potencia.
+	 * 
+	 * Por ejemplo, `pot(2, 3)` calcula 2 _ 2 _ 2 que es 8.
+	 * @param {number} base base
+	 * @param {number} exponente exponente
+	 * @returns {number} base elevada a la potencia del exponente
+	 */
+	function pot(base: number, exponente: number): number;
+
+	/** 🧮
+	 * Calcula el cuadrado de un número.
+	 * @param {number} n número a elevar al cuadrado
+	 * @returns {number} cuadrado del número
+	 */
+	function cuad(n: number): number;
+
+	/** 🧮
+	 * Calcula la raíz cuadrada de un número.
+	 * @param {number} n un número
+	 * @returns {number} raíz cuadrada del número
+	 */
+	function raiz(n: number): number;
+
+	/** 🧮
+	 * Calcula el logaritmo natural (base e) de un número.
+	 * @param {number} n un número
+	 * @returns {number} logaritmo natural del número
+	 */
+	function loge(n: number): number;
+
+	/** 🧮
+	 * Calcula e elevado a la potencia de un número.
+	 * @param {number} exponente potencia a la que elevar e
+	 * @returns {number} e elevado a la potencia del exponente
+	 */
+	function exp(exponente: number): number;
+
+	/** 🧮
+	 * Establece la semilla para el generador de números aleatorios.
+	 * @param {number} semilla valor de la semilla
+	 */
+	function semillaAleatoria(semilla: number): void;
+
+	/** 🧮
+	 * Establece el método de generación de números aleatorios.
+	 * @param {any} metodo método a usar para la generación de números aleatorios
+	 */
+	function generadorAleatorio(metodo: any): void;
+
+	/** 🧮
+	 * Genera un número aleatorio siguiendo una distribución Gaussiana (normal).
+	 * @param {number} media media (centro) de la distribución
+	 * @param {number} std desviación estándar (dispersión o "ancho") de la distribución
+	 * @returns {number} un número aleatorio siguiendo una distribución Gaussiana
+	 */
+	function aleatorioGaussiano(media: number, std: number): number;
+
+	/** 🧮
+	 * Genera un número aleatorio siguiendo una distribución exponencial.
+	 * @returns {number} un número aleatorio siguiendo una distribución exponencial
+	 */
+	function aleatorioExponencial(): number;
+
+	/** 🧮
+	 * Establece el modo de generación de ruido.
+	 * 
+	 * Solo el modo por defecto, "perlin", está incluido en q5.js. El uso de los
+	 * otros modos requiere el módulo q5-noiser.
+	 * @param {'perlin' | 'simplex' | 'blocky'} modo modo de generación de ruido
+	 */
+	function modoRuido(modo: 'perlin' | 'simplex' | 'blocky'): void;
+
+	/** 🧮
+	 * Establece el valor de la semilla para la generación de ruido.
+	 * @param {number} semilla valor de la semilla
+	 */
+	function semillaRuido(semilla: number): void;
+
+	/** 🧮
+	 * Establece el nivel de detalle para la generación de ruido.
+	 * @param {number} lod nivel de detalle (número de octavas)
+	 * @param {number} caida tasa de caída para cada octava
+	 */
+	function detalleRuido(lod: number, caida: number): void;
+
+	/** 🧮
+	 * La relación de la circunferencia de un círculo a su diámetro.
+	 * Aproximadamente 3.14159.
+	 */
+	const DOS_PI: number;
+
+	/** 🧮
+	 * 2 \* PI.
+	 * Aproximadamente 6.28319.
+	 */
+	const DOS_PI: number;
+
+	/** 🧮
+	 * 2 \* PI.
+	 * Aproximadamente 6.28319.
+	 */
+	function TAU(): void;
+
+	/** 🧮
+	 * Mitad de PI.
+	 * Aproximadamente 1.5708.
+	 */
+	const MEDIO_PI: number;
+
+	/** 🧮
+	 * Un cuarto de PI.
+	 * Aproximadamente 0.7854.
+	 */
+	const CUARTO_PI: number;
+
+	// 🔊 sound
+
+	/**
+	 * q5 incluye reproducción de sonido de baja latencia y capacidades básicas de mezcla
+	 * impulsadas por WebAudio.
+	 * 
+	 * Para filtrado de audio, síntesis y análisis, considera usar el
+	 * addon [p5.sound](https://p5js.org/reference/p5.sound/) con q5.
+	 */
+
+	/** 🔊
+	 * Carga datos de audio desde un archivo y devuelve un objeto `Sonido`.
+	 * 
+	 * Usa funciones como `reproducir`, `pausar`, y `detener` para
+	 * controlar la reproducción. ¡Ten en cuenta que los sonidos solo pueden reproducirse después de la
+	 * primera interacción del usuario con la página!
+	 * 
+	 * Establece `volumen` a un valor entre 0 (silencio) y 1 (volumen completo).
+	 * Establece `pan` a un valor entre -1 (izquierda) y 1 (derecha) para ajustar
+	 * la posición estéreo del sonido. Establece `bucle` a true para repetir el sonido.
+	 * 
+	 * Usa `cargado`, `pausado`, y `terminado` para comprobar el estado del sonido.
+	 * 
+	 * El archivo de sonido completo debe cargarse antes de que la reproducción pueda comenzar, usa `await` para esperar a que un sonido se cargue. Para transmitir archivos de audio más grandes usa la función `cargarAudio` en su lugar.
+	 * @param {string} url archivo de sonido
+	 * @returns {Sonido & PromiseLike<Sonido>} sonido
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let sonido = cargarSonido('/assets/jump.wav');
+	 * sonido.volumen = 0.3;
+	 * 
+	 * q5.alPresionarRatón = function () {
+	 * 	sonido.reproducir();
+	 * };
+	 */
+	function cargarSonido(url: string): Sonido & PromiseLike<Sonido>;
+
+	/** 🔊
+	 * Carga datos de audio desde un archivo y devuelve un [HTMLAudioElement](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement).
+	 * 
+	 * El audio se considera cargado cuando se dispara el [evento canplaythrough](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplaythrough_event).
+	 * 
+	 * ¡Ten en cuenta que el audio solo puede reproducirse después de la primera interacción
+	 * del usuario con la página!
+	 * @param url archivo de audio
+	 * @returns {HTMLAudioElement & PromiseLike<HTMLAudioElement>} un HTMLAudioElement
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let audio = cargarAudio('/assets/retro.flac');
+	 * audio.volume = 0.4;
+	 * 
+	 * q5.alPresionarRatón = function () {
+	 * 	audio.play();
+	 * };
+	 */
+	function cargarAudio(url: string): HTMLAudioElement & PromiseLike<HTMLAudioElement>;
+
+	/** 🔊
+	 * Devuelve el AudioContext en uso o undefined si no existe.
+	 * @returns {AudioContext} instancia de AudioContext
+	 */
+	function obtenerContextoAudio(): AudioContext | void;
+
+	/** 🔊
+	 * Crea un nuevo AudioContext o lo reanuda si estaba suspendido.
+	 * @returns {Promise<void>} una promesa que se resuelve cuando el AudioContext se reanuda
+	 */
+	function iniciarAudioUsuario(): Promise<void>;
+
+	class Sonido {
+
+		/** 🔊
+		 * Crea un nuevo objeto `Q5.Sonido`.
+		 */
+		constructor();
+
+		/** 🔊
+		 * Establece el volumen del sonido a un valor entre
+		 * 0 (silencio) y 1 (volumen completo).
+		 */
+		volumen: number;
+
+		/** 🔊
+		 * Establece la posición estéreo del sonido entre -1 (izquierda) y 1 (derecha).
+		 */
+		pan: number;
+
+		/** 🔊
+		 * Establece a true para hacer que el sonido se repita continuamente.
+		 */
+		bucle: boolean;
+
+		/** 🔊
+		 * Verdadero si los datos de sonido han terminado de cargarse.
+		 */
+		cargado: boolean;
+
+		/** 🔊
+		 * Verdadero si el sonido está actualmente pausado.
+		 */
+		pausado: boolean;
+
+		/** 🔊
+		 * Verdadero si el sonido ha terminado de reproducirse.
+		 */
+		terminado: boolean;
+
+		/** 🔊
+		 * Reproduce el sonido.
+		 * 
+		 * Si esta función se ejecuta cuando el sonido ya se está reproduciendo,
+		 * comenzará una nueva reproducción, causando un efecto de capas.
+		 * 
+		 * Si esta función se ejecuta cuando el sonido está pausado,
+		 * todas las instancias de reproducción se reanudarán.
+		 * 
+		 * Usa `await` para esperar a que el sonido termine de reproducirse.
+		 * @returns {Promise<void>} una promesa que se resuelve cuando el sonido termina de reproducirse
+		 */
+		reproducir(): void;
+
+		/** 🔊
+		 * Pausa el sonido, permitiendo que sea reanudado.
+		 */
+		pausar(): void;
+
+		/** 🔊
+		 * Detiene el sonido, reiniciando su posición de reproducción
+		 * al principio.
+		 * 
+		 * Elimina todas las instancias de reproducción.
+		 */
+		detener(): void;
+	}
+
+	// 📑 dom
+
+	/**
+	 * El Modelo de Objetos del Documento (DOM) es una interfaz para
+	 * crear y editar páginas web con JavaScript.
+	 */
+
+	/** 📑
+	 * Crea un nuevo elemento HTML y lo añade a la página. `createEl` es
+	 * un alias.
+	 * 
+	 * Modifica el [`style`](https://developer.mozilla.org/docs/Web/API/HTMLElement/style) CSS del elemento para cambiar su apariencia.
+	 * 
+	 * Usa [`addEventListener`](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) para responder a eventos como:
+	 * 
+	 * - "click": cuando se hace clic en el elemento
+	 * - "mouseover": cuando el ratón pasa sobre el elemento
+	 * - "mouseout": cuando el ratón deja de pasar sobre el elemento
+	 * - "input": cuando el valor de un elemento de formulario cambia
+	 * 
+	 * q5 añade alguna funcionalidad extra a los elementos que crea:
+	 * 
+	 * - la función `position` facilita colocar el elemento
+	 *   relativo al lienzo
+	 * - la función `size` establece el ancho y alto del elemento
+	 * - alternativamente, usa las propiedades `x`, `y`, `width`, y `height` del elemento
+	 * @param {string} etiqueta nombre de la etiqueta del elemento
+	 * @param {string} [contenido] contenido del elemento
+	 * @returns {HTMLElement} elemento
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let el = crearElemento('div', '*');
+	 * el.position(50, 50);
+	 * el.size(100, 100);
+	 * el.style.fontSize = '136px';
+	 * el.style.textAlign = 'center';
+	 * el.style.backgroundColor = 'blue';
+	 * el.style.color = 'white';
+	 */
+	function crearElemento(etiqueta: string, contenido?: string): HTMLElement;
+
+	/** 📑
+	 * Crea un elemento de enlace.
+	 * @param {string} href url
+	 * @param {string} [texto] contenido de texto
+	 * @param {boolean} [nuevaPestaña] si abrir el enlace en una nueva pestaña
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let enlace = crearA('https://q5js.org', 'q5.js');
+	 * enlace.position(16, 42);
+	 * enlace.style.fontSize = '80px';
+	 * 
+	 * enlace.addEventListener('mouseover', () => {
+	 * 	fondo('cyan');
+	 * });
+	 */
+	function crearA(href: string, texto?: string): HTMLAnchorElement;
+
+	/** 📑
+	 * Crea un elemento de botón.
+	 * @param {string} [contenido] contenido de texto
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * 
+	 * let btn = crearBotón('Click me!');
+	 * 
+	 * btn.addEventListener('click', () => {
+	 * 	fondo(aleatorio(0.4, 1));
+	 * });
+	 */
+	function crearBotón(): void;
+
+	/** 📑
+	 * Crea un elemento de casilla de verificación (checkbox).
+	 * 
+	 * Usa la propiedad `checked` para obtener o establecer el estado de la casilla.
+	 * 
+	 * La propiedad `label` es el elemento de etiqueta de texto junto a la casilla.
+	 * @param {string} [etiqueta] etiqueta de texto colocada junto a la casilla
+	 * @param {boolean} [marcado] estado inicial
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * 
+	 * let casilla = crearCasilla('Check me!');
+	 * casilla.label.style.color = 'lime';
+	 * 
+	 * casilla.addEventListener('input', () => {
+	 * 	if (casilla.checked) fondo('lime');
+	 * 	else fondo('black');
+	 * });
+	 */
+	function crearCasilla(etiqueta?: string, marcado?: boolean): HTMLInputElement;
+
+	/** 📑
+	 * Crea un elemento de entrada de color.
+	 * 
+	 * Usa la propiedad `value` para obtener o establecer el valor del color.
+	 * @param {string} [valor] valor de color inicial
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * 
+	 * let selector = crearSelectorColor();
+	 * selector.value = '#fd7575';
+	 * 
+	 * q5.dibujar = function () {
+	 * 	fondo(selector.value);
+	 * };
+	 */
+	function crearSelectorColor(valor?: string): HTMLInputElement;
+
+	/** 📑
+	 * Crea un elemento de imagen.
+	 * @param {string} src url de la imagen
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * 
+	 * let img = crearImg('/assets/p5play_logo.webp');
+	 * img.position(0, 0).size(100, 100);
+	 */
+	function crearImg(src: string): HTMLImageElement;
+
+	/** 📑
+	 * Crea un elemento de entrada (input).
+	 * 
+	 * Usa la propiedad `value` para obtener o establecer el valor de la entrada.
+	 * 
+	 * Usa la propiedad `placeholder` para establecer el texto de etiqueta que aparece
+	 * dentro de la entrada cuando está vacía.
+	 * 
+	 * Mira la [documentación de input](https://developer.mozilla.org/docs/Web/HTML/Element/input#input_types) de MDN para la lista completa de tipos de entrada.
+	 * @param {string} [valor] valor inicial
+	 * @param {string} [tipo] tipo de entrada de texto, puede ser 'text', 'password', 'email', 'number', 'range', 'search', 'tel', 'url'
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * tamañoTexto(64);
+	 * 
+	 * let entrada = crearEntrada();
+	 * entrada.placeholder = 'Type here!';
+	 * entrada.size(200, 32);
+	 * 
+	 * entrada.addEventListener('input', () => {
+	 * 	fondo('orange');
+	 * 	texto(entrada.value, -90, 30);
+	 * });
+	 */
+	function crearEntrada(valor?: string, tipo?: string): HTMLInputElement;
+
+	/** 📑
+	 * Crea un elemento de párrafo.
+	 * @param {string} [contenido] contenido de texto
+	 * @example
+	 * await crearLienzo(200, 50);
+	 * fondo('coral');
+	 * 
+	 * let p = crearP('Hello, world!');
+	 * p.style.color = 'pink';
+	 */
+	function crearP(contenido?: string): HTMLParagraphElement;
+
+	/** 📑
+	 * Crea un grupo de botones de radio.
+	 * 
+	 * Usa la función `option(etiqueta, valor)` para añadir nuevos botones de radio
+	 * al grupo.
+	 * 
+	 * Usa la propiedad `value` para obtener o establecer el valor del botón de radio seleccionado.
+	 * @param {string} [nombreGrupo]
+	 * @example
+	 * await crearLienzo(200, 160);
+	 * 
+	 * let radio = crearOpciónes();
+	 * radio.option('square', '1').option('circle', '2');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	fondo(0.8);
+	 * 	if (radio.value == '1') cuadrado(-40, -40, 80);
+	 * 	if (radio.value == '2') círculo(0, 0, 80);
+	 * };
+	 */
+	function crearOpciónes(): void;
+
+	/** 📑
+	 * Crea un elemento de selección (select).
+	 * 
+	 * Usa la función `option(etiqueta, valor)` para añadir nuevas opciones al
+	 * elemento de selección.
+	 * 
+	 * Establece `multiple` a `true` para permitir seleccionar múltiples opciones.
+	 * 
+	 * Usa la propiedad `value` para obtener o establecer el valor de la opción seleccionada.
+	 * 
+	 * Usa la propiedad `selected` para obtener las etiquetas de las opciones
+	 * seleccionadas o establecer las opciones seleccionadas por etiqueta. Puede ser una sola
+	 * cadena o un array de cadenas.
+	 * @param {string} [placeholder] texto opcional que aparece antes de que se seleccione una opción
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * 
+	 * let sel = crearSelección('Select a color');
+	 * sel.option('Red', '#f55').option('Green', '#5f5');
+	 * 
+	 * sel.addEventListener('change', () => {
+	 * 	fondo(sel.value);
+	 * });
+	 */
+	function crearSelección(): void;
+
+	/** 📑
+	 * Crea un elemento deslizador (slider).
+	 * 
+	 * Usa la propiedad `value` para obtener o establecer el valor del deslizador.
+	 * 
+	 * Usa la función `val` para obtener el valor del deslizador como un número.
+	 * @param {number} min valor mínimo
+	 * @param {number} max valor máximo
+	 * @param {number} [valor] valor inicial
+	 * @param {number} [paso] tamaño del paso
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let deslizador = crearDeslizador(0, 1, 0.5, 0.1);
+	 * deslizador.position(10, 10).size(180);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	fondo(deslizador.val());
+	 * };
+	 */
+	function crearDeslizador(min: number, max: number, valor?: number, paso?: number): HTMLInputElement;
+
+	/** 📑
+	 * Crea un elemento de video.
+	 * 
+	 * Ten en cuenta que los videos deben estar silenciados para reproducirse automáticamente y las funciones `play` y
+	 * `pause` solo pueden ejecutarse después de una interacción del usuario.
+	 * 
+	 * El elemento de video puede ocultarse y su contenido puede
+	 * mostrarse en el lienzo usando la función `imagen`.
+	 * @param {string} src url del video
+	 * @returns {HTMLVideoElement & PromiseLike<HTMLVideoElement>} un nuevo elemento de video
+	 * @example
+	 * await crearLienzo(1);
+	 * 
+	 * let vid = crearVideo('/assets/apollo4.mp4');
+	 * vid.size(200, 150);
+	 * vid.autoplay = vid.muted = vid.loop = true;
+	 * vid.controls = true;
+	 * @example
+	 * await crearLienzo(200, 150);
+	 * let vid = crearVideo('/assets/apollo4.mp4');
+	 * vid.hide();
+	 * 
+	 * q5.alPresionarRatón = function () {
+	 * 	vid.currentTime = 0;
+	 * 	vid.play();
+	 * };
+	 * q5.dibujar = function () {
+	 * 	imagen(vid, -100, -75, 200, 150);
+	 * 	// filtro(HUE_ROTATE, 90);
+	 * };
+	 */
+	function crearVideo(src: string): HTMLVideoElement & PromiseLike<HTMLVideoElement>;
+
+	/** 📑
+	 * Crea una captura desde una cámara conectada, como una webcam.
+	 * 
+	 * El elemento de video de captura puede ocultarse y su contenido puede
+	 * mostrarse en el lienzo usando la función `imagen`.
+	 * 
+	 * Puede precargarse para asegurar que la captura esté lista para usar cuando tu
+	 * sketch comience.
+	 * 
+	 * Solicita la resolución de video más alta de la cámara frontal del usuario
+	 * por defecto. El primer parámetro de esta función se puede usar para
+	 * especificar las restricciones para la captura. Mira [`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia)
+	 * para más información.
+	 * @param {string} [tipo] tipo de captura, puede ser solo `VIDEO` o solo `AUDIO`, el defecto es usar ambos video y audio
+	 * @param {boolean} [volteado] si reflejar el video verticalmente, true por defecto
+	 * @returns {HTMLVideoElement & PromiseLike<HTMLVideoElement>} un nuevo elemento de video
+	 * @example
+	 * q5.alPresionarRatón = function () {
+	 * 	let cap = crearCaptura(VIDEO);
+	 * 	cap.size(200, 112.5);
+	 * 	canvas.remove();
+	 * };
+	 * @example
+	 * let cap;
+	 * q5.alPresionarRatón = function () {
+	 * 	cap = crearCaptura(VIDEO);
+	 * 	cap.hide();
+	 * };
+	 * 
+	 * q5.dibujar = function () {
+	 * 	let y = (frameCount % 200) - 100;
+	 * 	imagen(cap, -100, y, 200, 200);
+	 * };
+	 * @example
+	 * q5.alPresionarRatón = function () {
+	 * 	let cap = crearCaptura({
+	 * 		video: { width: 640, height: 480 }
+	 * 	});
+	 * 	cap.size(200, 150);
+	 * 	canvas.remove();
+	 * };
+	 */
+	function crearCaptura(tipo?: string, volteado?: boolean): HTMLVideoElement & PromiseLike<HTMLVideoElement>;
+
+	/** 📑
+	 * Encuentra el primer elemento en el DOM que coincide con el [selector CSS](https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) dado.
+	 * @param {string} selector
+	 * @returns {HTMLElement} elemento
+	 */
+	function encontrarElemento(selector: string): HTMLElement;
+
+	/** 📑
+	 * Encuentra todos los elementos en el DOM que coinciden con el [selector CSS](https://developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) dado.
+	 * @param {string} selector
+	 * @returns {HTMLElement[]} elementos
+	 */
+	function encontrarElementos(selector: string): HTMLElement[];
+
+	// 🎞 record
+
+	/** 🎞
+	 * Crea una grabadora. ¡Simplemente presiona grabar para empezar a grabar!
+	 * 
+	 * Las siguientes propiedades se pueden establecer a través de la UI de la grabadora o
+	 * programáticamente.
+	 * 
+	 * - `format` se establece a "H.264" por defecto.
+	 * - `bitrate` es un número en megabits por segundo (mbps). Su valor por defecto
+	 *   está determinado por la altura del lienzo. Aumentar la
+	 *   tasa de bits aumentará la calidad y el tamaño del archivo de la grabación.
+	 * - `captureAudio` se establece a true por defecto. Establecer a false para deshabilitar
+	 *   la grabación de audio.
+	 * 
+	 * Ten en cuenta que las grabaciones se hacen a una tasa de fotogramas variable (VFR), lo que
+	 * hace que el video de salida sea incompatible con algún software de edición.
+	 * Para más información, mira la página wiki
+	 * ["Recording the Canvas"](https://github.com/q5js/q5.js/wiki/Recording-the-Canvas).
+	 * @returns {HTMLElement} una grabadora, elemento DOM de q5
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let grab = crearGrabadora();
+	 * grab.bitrate = 10;
+	 * 
+	 * q5.dibujar = function () {
+	 * 	círculo(ratónX, flu(medioAlto), 10);
+	 * };
+	 */
+	function crearGrabadora(): HTMLElement;
+
+	/** 🎞
+	 * Comienza a grabar el lienzo o reanuda la grabación si estaba pausada.
+	 * 
+	 * Si no existe grabadora, se crea una pero no se muestra.
+	 */
+	function grabar(): void;
+
+	/** 🎞
+	 * Pausa la grabación del lienzo, si hay una en progreso.
+	 */
+	function pausarGrabación(): void;
+
+	/** 🎞
+	 * Descarta la grabación actual.
+	 */
+	function borrarGrabación(): void;
+
+	/** 🎞
+	 * Guarda la grabación actual como un archivo de video.
+	 * @param {string} nombreArchivo
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	cuadrado(ratónX, flu(100), 10);
+	 * };
+	 * 
+	 * q5.alPresionarRatón = function () {
+	 * 	if (!grabando) grabar();
+	 * 	else guardarGrabación('squares');
+	 * };
+	 */
+	function guardarGrabación(): void;
+
+	/** 🎞
+	 * Verdadero si el lienzo está siendo grabado actualmente.
+	 */
+	var grabando: boolean;
+
+	// 🛠 utilities
+
+	/** 🛠
+	 * Carga un archivo o múltiples archivos.
+	 * 
+	 * El tipo de archivo se determina por la extensión del archivo. q5 soporta cargar
+	 * archivos de texto, json, csv, fuente, audio, e imagen.
+	 * 
+	 * Por defecto, los recursos se cargan en paralelo antes de que q5 ejecute `dibujar`. Usa `await` para esperar a que los recursos se carguen.
+	 * @param {...string} urls
+	 * @returns {Promise<any[]>} una promesa que se resuelve con objetos
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let logo = cargar('/q5js_logo.avif');
+	 * 
+	 * q5.dibujar = function () {
+	 * 	imagen(logo, -100, -100, 200, 200);
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * await cargar('/assets/Robotica.ttf');
+	 * 
+	 * tamañoTexto(28);
+	 * texto('Hello, world!', -97, 100);
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let [salto, retro] = await cargar('/assets/jump.wav', '/assets/retro.flac');
+	 * 
+	 * q5.alPresionarRatón = function () {
+	 * 	botónRatón == 'left' ? salto.reproducir() : retro.reproducir();
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * tamañoTexto(32);
+	 * 
+	 * let miXML = await cargar('/assets/animals.xml');
+	 * let mamiferos = miXML.getElementsByTagName('mammal');
+	 * let y = -100;
+	 * for (let mamifero of mamiferos) {
+	 * 	texto(mamifero.textContent, -100, (y += 32));
+	 * }
+	 */
+	function cargar(...urls: string[]): PromiseLike<any[]>;
+
+	/** 🛠
+	 * Guarda datos en un archivo.
+	 * 
+	 * Si no se especifican datos, se guardará el lienzo.
+	 * 
+	 * Si no se proporcionan argumentos, el lienzo se guardará como
+	 * un archivo de imagen llamado "untitled.png".
+	 * @param {object} [datos] lienzo, imagen, u objeto JS
+	 * @param {string} [nombreArchivo] nombre de archivo para guardar como
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * círculo(0, 0, 50);
+	 * 
+	 * q5.alPresionarRatón = function () {
+	 * 	guardar('circle.png');
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * texto('save me?', -90, 0);
+	 * tamañoTexto(180);
+	 * let rayo = crearImagenTexto('⚡️');
+	 * 
+	 * q5.alPresionarRatón = function () {
+	 * 	guardar(rayo, 'bolt.png');
+	 * };
+	 */
+	function guardar(datos?: object, nombreArchivo?: string): void;
+
+	/** 🛠
+	 * Carga un archivo de texto desde la url especificada.
+	 * 
+	 * Se recomienda usar `await` para obtener el texto cargado como una cadena.
+	 * @param {string} url archivo de texto
+	 * @returns {object & PromiseLike<string>} un objeto conteniendo el texto cargado en la propiedad `obj.text` o usa `await` para obtener la cadena de texto directamente
+	 */
+	function cargarTexto(url: string): object & PromiseLike<string>;
+
+	/** 🛠
+	 * Carga un archivo JSON desde la url especificada.
+	 * 
+	 * Se recomienda usar `await` para obtener el objeto o array JSON cargado.
+	 * @param {string} url archivo JSON
+	 * @returns {any & PromiseLike<any>} un objeto o array conteniendo el JSON cargado
+	 */
+	function cargarJSON(url: string): any & PromiseLike<any>;
+
+	/** 🛠
+	 * Carga un archivo CSV desde la url especificada.
+	 * 
+	 * Se recomienda usar `await` para obtener el CSV cargado como un array de objetos.
+	 * @param {string} url archivo CSV
+	 * @returns {object[] & PromiseLike<object[]>} un array de objetos conteniendo el CSV cargado
+	 */
+	function cargarCSV(url: string): object[] & PromiseLike<object[]>;
+
+	/** 🛠
+	 * Carga un archivo xml desde la url especificada.
+	 * 
+	 * Se recomienda usar `await` para obtener el Elemento XML cargado.
+	 * @param {string} url archivo xml
+	 * @returns {Element & PromiseLike<Element>} un objeto conteniendo el Elemento XML cargado en una propiedad llamada `obj.DOM` o usa await para obtener el Elemento XML directamente
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(200);
+	 * tamañoTexto(32);
+	 * 
+	 * let animales = await cargarXML('/assets/animals.xml');
+	 * 
+	 * let mamiferos = animales.getElementsByTagName('mammal');
+	 * let y = 64;
+	 * for (let mamifero of mamiferos) {
+	 * 	texto(mamifero.textContent, 20, (y += 32));
+	 * }
+	 */
+	function cargarXML(url: string): object & PromiseLike<Element>;
+
+	/** 🛠
+	 * Espera a que cualquier recurso que comenzó a cargarse termine de cargarse. Por defecto q5 ejecuta esto antes de hacer bucle en dibujar (lo cual se llama precarga), pero se puede usar incluso después de que dibujar comience a hacer bucle.
+	 * @returns {PromiseLike<any[]>} una promesa que se resuelve con objetos cargados
+	 */
+	function cargarTodo(): PromiseLike<any[]>;
+
+	/** 🛠
+	 * Deshabilita la precarga automática de recursos antes de que dibujar comience a hacer bucle. Esto permite que dibujar comience inmediatamente, y los recursos se pueden cargar perezosamente o se puede usar `cargarTodo()` para esperar a que los recursos terminen de cargarse más tarde.
+	 */
+	function deshabilitarPrecarga(): void;
+
+	/** 🛠
+	 * nf es la abreviatura de formato de número. Formatea un número
+	 * a una cadena con un número especificado de dígitos.
+	 * @param {number} num número a formatear
+	 * @param {number} digitos número de dígitos a formatear
+	 * @returns {string} número formateado
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * 
+	 * tamañoTexto(32);
+	 * texto(nf(PI, 4, 5), -90, 10);
+	 */
+	function nf(num: number, digitos: number): string;
+
+	/** 🛠
+	 * Baraja los elementos de un array.
+	 * @param {any[]} arr array a barajar
+	 * @param {boolean} [modificar] si modificar el array original, falso por defecto lo cual copia el array antes de barajar
+	 * @returns {any[]} array barajado
+	 */
+	function barajar(arr: any[]): any[];
+
+	/** 🛠
+	 * Almacena un ítem en localStorage.
+	 * @param {string} clave clave bajo la cual almacenar el ítem
+	 * @param {string} val valor a almacenar
+	 */
+	function guardarItem(clave: string, val: string): void;
+
+	/** 🛠
+	 * Recupera un ítem de localStorage.
+	 * @param {string} clave clave del ítem a recuperar
+	 * @returns {string} valor del ítem recuperado
+	 */
+	function obtenerItem(clave: string): string;
+
+	/** 🛠
+	 * Elimina un ítem de localStorage.
+	 * @param {string} clave clave del ítem a eliminar
+	 */
+	function eliminarItem(clave: string): void;
+
+	/** 🛠
+	 * Limpia todos los ítems de localStorage.
+	 */
+	function limpiarAlmacenamiento(): void;
+
+	/** 🛠
+	 * Devuelve el año actual.
+	 * @returns {number} año actual
+	 */
+	function año(): void;
+
+	/** 🛠
+	 * Devuelve el día actual del mes.
+	 * @returns {number} día actual
+	 */
+	function día(): void;
+
+	/** 🛠
+	 * Devuelve la hora actual.
+	 * @returns {number} hora actual
+	 */
+	function hora(): number;
+
+	/** 🛠
+	 * Devuelve el minuto actual.
+	 * @returns {number} minuto actual
+	 */
+	function minuto(): number;
+
+	/** 🛠
+	 * Devuelve el segundo actual.
+	 * @returns {number} segundo actual
+	 */
+	function segundo(): number;
+
+	// ↗ vector
+
+	/** ↗
+	 * Crea un nuevo objeto Vector.
+	 * @param {number} [x] componente x del vector
+	 * @param {number} [y] componente y del vector
+	 * @param {number} [z] componente z del vector
+	 * @param {number} [w] componente w del vector
+	 * @returns {Vector} nuevo objeto Vector
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * let v = crearVector(100, 100);
+	 * círculo(v.x, v.y, 50);
+	 */
+	function crearVector(): void;
+
+	/** ↗
+	 * Una clase para describir un vector bidimensional o tridimensional, específicamente un vector euclidiano (también conocido como geométrico). Un vector es una entidad que tiene tanto magnitud como dirección. El tipo de datos almacena los componentes del vector (x, y para 2D, y z para 3D). La magnitud y dirección se pueden acceder a través de los métodos `mag()` y `heading()`.
+	 * @param {number} [x] componente x del vector
+	 * @param {number} [y] componente y del vector
+	 * @param {number} [z] componente z del vector
+	 * @param {number} [w] componente w del vector
+	 * @returns {Vector} este vector
+	 * @returns {Vector} copia del vector
+	 * @param {number | Vector} x componente x del vector o Vector a sumar
+	 * @param {number} [y] componente y del vector
+	 * @param {number} [z] componente z del vector
+	 * @returns {Vector} este vector
+	 * @param {number | Vector} x componente x del vector o Vector a restar
+	 * @param {number} [y] componente y del vector
+	 * @param {number} [z] componente z del vector
+	 * @returns {Vector} este vector
+	 * @param {number} n escalar por el cual multiplicar
+	 * @returns {Vector} este vector
+	 * @param {number} n escalar por el cual dividir
+	 * @returns {Vector} este vector
+	 * @returns {number} magnitud del vector
+	 * @returns {number} magnitud del vector al cuadrado
+	 * @param {Vector} v vector con el cual hacer producto punto
+	 * @returns {number} producto punto
+	 * @param {Vector} v vector con el cual hacer producto cruz
+	 * @returns {Vector} producto cruz
+	 * @param {Vector} v vector al cual calcular distancia
+	 * @returns {number} distancia
+	 * @returns {Vector} este vector
+	 * @param {number} max magnitud máxima
+	 * @returns {Vector} este vector
+	 * @param {number} len nueva longitud para este vector
+	 * @returns {Vector} este vector
+	 * @returns {number} el ángulo de rotación
+	 * @param {number} ángulo ángulo de rotación
+	 * @returns {Vector} este vector
+	 * @param {Vector} v el vector x, y, z
+	 * @returns {number} el ángulo entre
+	 * @param {Vector} v el vector x, y, z
+	 * @param {number} amt la cantidad de interpolación; 0.0 es el vector antiguo, 1.0 es el nuevo vector, 0.5 está a mitad de camino
+	 * @returns {Vector} este vector
+	 * @param {Vector} superficieNormal el vector normal a la superficie
+	 * @returns {Vector} este vector
+	 * @returns {number[]} array de flotantes
+	 * @param {Vector} v el vector a comparar
+	 * @returns {boolean} verdadero si los vectores son iguales
+	 * @param {number} ángulo el ángulo deseado
+	 * @param {number} [longitud] longitud del nuevo vector (por defecto a 1)
+	 * @returns {Vector} nuevo objeto Vector
+	 * @returns {Vector} nuevo objeto Vector
+	 * @returns {Vector} nuevo objeto Vector
+	 */
+	class Vector {
+
+		// 🖌 shaping
+
+		/** 🖌
+	 * Dibuja un arco, que es una sección de una elipse.
+	 * 
+	 * `modoEliptico` afecta cómo se dibuja el arco.
+	 * 
+	 * q5 WebGPU solo soporta el modo por defecto `PIE_OPEN`.
+	 * @param {number} x coordenada-x
+	 * @param {number} y coordenada-y
+	 * @param {number} w ancho de la elipse
+	 * @param {number} h alto de la elipse
+	 * @param {number} inicio ángulo para empezar el arco
+	 * @param {number} fin ángulo para terminar el arco
+	 * @param {number} [modo] configuración de estilo de forma y trazo, por defecto es `PIE_OPEN` para una forma de pastel con un trazo no cerrado, puede ser `PIE`, `CHORD`, o `CHORD_OPEN`
+	 * @example
+	 * await crearLienzo(200);
+	 * fondo(0.8);
+	 * 
+	 * arco(0, 0, 160, 160, 0.8, -0.8);
+	 */
+		function arco(x: number, y: number, w: number, h: number, inicio: number, fin: number, modo?: number): void;
+
+		/** 🖌
+	 * Dibuja una curva.
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * fondo(0.8);
+	 * 
+	 * curva(-100, -200, -50, 0, 50, 0, 100, -200);
+	 */
+		function curva(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
+
+		/** 🖌
+	 * Establece la cantidad de segmentos de línea recta usados para hacer una curva.
+	 * 
+	 * Solo tiene efecto en q5 WebGPU.
+	 * @param {number} val nivel de detalle de la curva, por defecto es 20
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * detalleCurva(4);
+	 * 
+	 * grosorTrazo(10);
+	 * trazo(0, 1, 1);
+	 * curva(-100, -200, -50, 0, 50, 0, 100, -200);
+	 */
+		function detalleCurva(val: number): void;
+
+		/** 🖌
+	 * Comienza a almacenar vértices para una forma convexa.
+	 */
+		function empezarForma(): void;
+
+		/** 🖌
+	 * Termina de almacenar vértices para una forma convexa.
+	 */
+		function terminarForma(): void;
+
+		/** 🖌
+	 * Comienza a almacenar vértices para un contorno.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 */
+		function empezarContorno(): void;
+
+		/** 🖌
+	 * Termina de almacenar vértices para un contorno.
+	 * 
+	 * No disponible en q5 WebGPU.
+	 */
+		function terminarContorno(): void;
+
+		/** 🖌
+	 * Especifica un vértice en una forma.
+	 * @param {number} x coordenada-x
+	 * @param {number} y coordenada-y
+	 */
+		function vértice(): void;
+
+		/** 🖌
+	 * Especifica un vértice Bezier en una forma.
+	 * @param {number} cp1x coordenada-x del primer punto de control
+	 * @param {number} cp1y coordenada-y del primer punto de control
+	 * @param {number} cp2x coordenada-x del segundo punto de control
+	 * @param {number} cp2y coordenada-y del segundo punto de control
+	 * @param {number} x coordenada-x del punto de anclaje
+	 * @param {number} y coordenada-y del punto de anclaje
+	 */
+		function vérticeBezier(): void;
+
+		/** 🖌
+	 * Especifica un vértice Bezier cuadrático en una forma.
+	 * @param {number} cp1x coordenada-x del punto de control
+	 * @param {number} cp1y coordenada-y del punto de control
+	 * @param {number} x coordenada-x del punto de anclaje
+	 * @param {number} y coordenada-y del punto de anclaje
+	 */
+		function vérticeCuadrático(): void;
+
+		/** 🖌
+	 * Dibuja una curva Bezier.
+	 * @param {number} x1 coordenada-x del primer punto de anclaje
+	 * @param {number} y1 coordenada-y del primer punto de anclaje
+	 * @param {number} x2 coordenada-x del primer punto de control
+	 * @param {number} y2 coordenada-y del primer punto de control
+	 * @param {number} x3 coordenada-x del segundo punto de control
+	 * @param {number} y3 coordenada-y del segundo punto de control
+	 * @param {number} x4 coordenada-x del segundo punto de anclaje
+	 * @param {number} y4 coordenada-y del segundo punto de anclaje
+	 */
+		function bezier(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
+
+		/** 🖌
+	 * Dibuja un triángulo.
+	 * @param {number} x1 coordenada-x del primer vértice
+	 * @param {number} y1 coordenada-y del primer vértice
+	 * @param {number} x2 coordenada-x del segundo vértice
+	 * @param {number} y2 coordenada-y del segundo vértice
+	 * @param {number} x3 coordenada-x del tercer vértice
+	 * @param {number} y3 coordenada-y del tercer vértice
+	 */
+		function triángulo(): void;
+
+		/** 🖌
+	 * Dibuja un cuadrilátero.
+	 * @param {number} x1 coordenada-x del primer vértice
+	 * @param {number} y1 coordenada-y del primer vértice
+	 * @param {number} x2 coordenada-x del segundo vértice
+	 * @param {number} y2 coordenada-y del segundo vértice
+	 * @param {number} x3 coordenada-x del tercer vértice
+	 * @param {number} y3 coordenada-y del tercer vértice
+	 * @param {number} x4 coordenada-x del cuarto vértice
+	 * @param {number} y4 coordenada-y del cuarto vértice
+	 */
+		function quad(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
+
+		// ⚡ shaders
+
+		/**
+	 * ¡Shaders personalizados escritos en WGSL (WebGPU Shading Language) pueden ser
+	 * usados para crear efectos visuales avanzados en q5!
+	 */
+
+		/** ⚡
+	 * Crea un shader que q5 puede usar para dibujar formas.
+	 * 
+	 * Afecta a las siguientes funciones:
+	 * `triángulo`, `quad`, `plano`,
+	 * `curva`, `bezier`, `empezarForma`/`terminarForma`,
+	 * y `fondo` (a menos que se use una imagen).
+	 * 
+	 * Usa esta función para personalizar una copia del
+	 * [shader de formas por defecto](https://github.com/q5js/q5.js/blob/main/src/shaders/shapes.wgsl).
+	 * 
+	 * Para más información sobre los parámetros de entrada de las funciones de vértice y fragmento,
+	 * datos, y funciones auxiliares disponibles para usar
+	 * en tu código de shader personalizado, lee la página wiki
+	 * ["Custom Shaders in q5 WebGPU"](https://github.com/q5js/q5.js/wiki/Custom-Shaders-in-q5-WebGPU).
+	 * @param {string} codigo extracto de código shader WGSL
+	 * @returns {GPUShaderModule} un programa shader
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let wobble = crearShader(`
+	 * @vertex
+	 * fn vertexMain(v: VertexParams) -> FragParams {
+	 * 	var vert = transformVertex(v.pos, v.matrixIndex);
+	 * 
+	 *   let i = f32(v.vertexIndex) % 4 * 100;
+	 *   vert.x += cos((q.time + i) * 0.01) * 0.1;
+	 * 
+	 * 	var f: FragParams;
+	 * 	f.position = vert;
+	 * 	f.color = vec4f(1, 0, 0, 1);
+	 * 	return f;
+	 * }`);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	limpiar();
+	 * 	shader(wobble);
+	 * 	plano(0, 0, 100);
+	 * };
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let stripes = crearShader(`
+	 * @fragment
+	 * fn fragMain(f: FragParams) -> @location(0) vec4f {
+	 * 	let r = cos((q.mouseY + f.position.y) * 0.2);
+	 * 	return vec4(r, 0.0, 1, 1);
+	 * }`);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	shader(stripes);
+	 * 	triángulo(-50, -50, 0, 50, 50, -50);
+	 * };
+	 */
+		function crearShader(codigo: string): GPUShaderModule;
+
+		/** ⚡
+	 * Un plano es un rectángulo centrado sin trazo.
+	 * @param {number} x centro x
+	 * @param {number} y centro y
+	 * @param {number} w ancho o longitud del lado
+	 * @param {number} [h] alto
+	 * @example
+	 * await crearLienzo(200);
+	 * plano(0, 0, 100);
+	 */
+		function plano(x: number, y: number, w: number, h?: number): void;
+
+		/** ⚡
+	 * Aplica un shader.
+	 * @param {GPUShaderModule} moduloShader un programa shader
+	 */
+		function shader(moduloShader: GPUShaderModule): void;
+
+		/** ⚡
+	 * Hace que q5 use el shader de formas por defecto.
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let stripes = crearShader(`
+	 * @fragment
+	 * fn fragMain(f: FragParams) -> @location(0) vec4f {
+	 * 	let g = cos((q.mouseY + f.position.y) * 0.05);
+	 * 	return vec4(1, g, 0, 1);
+	 * }`);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	shader(stripes);
+	 * 	fondo(0);
+	 * 
+	 * 	reiniciarShader();
+	 * 	triángulo(-50, -50, 0, 50, 50, -50);
+	 * };
+	 */
+		function reiniciarShader(): void;
+
+		/** ⚡
+	 * Hace que q5 use el shader de fotograma por defecto.
+	 */
+		function reiniciarShaderFotograma(): void;
+
+		/** ⚡
+	 * Hace que q5 use el shader de imagen por defecto.
+	 */
+		function reiniciarShaderImagen(): void;
+
+		/** ⚡
+	 * Hace que q5 use el shader de video por defecto.
+	 */
+		function reiniciarShaderVideo(): void;
+
+		/** ⚡
+	 * Hace que q5 use el shader de texto por defecto.
+	 */
+		function reiniciarShaderTexto(): void;
+
+		/** ⚡
+	 * Hace que q5 use todos los shaders por defecto.
+	 */
+		function reiniciarShaders(): void;
+
+		/** ⚡
+	 * Crea un shader que q5 puede usar para dibujar fotogramas.
+	 * 
+	 * `crearLienzo` debe ejecutarse antes de usar esta función.
+	 * 
+	 * Usa esta función para personalizar una copia del
+	 * [shader de fotograma por defecto](https://github.com/q5js/q5.js/blob/main/src/shaders/frame.wgsl).
+	 * @example
+	 * await crearLienzo(200);
+	 * 
+	 * let boxy = crearShaderFotograma(`
+	 * @fragment
+	 * fn fragMain(f: FragParams) -> @location(0) vec4f {
+	 * 	let x = sin(f.texCoord.y * 4 + q.time * 0.002);
+	 * 	let y = cos(f.texCoord.x * 4 + q.time * 0.002);
+	 * 	let uv = f.texCoord + vec2f(x, y);
+	 * 	return textureSample(tex, samp, uv);
+	 * }`);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	trazo(1);
+	 * 	grosorTrazo(8);
+	 * 	línea(ratónX, ratónY, pRatónX, pRatónY);
+	 * 	ratónPresionado ? reiniciarShaders() : shader(boxy);
+	 * };
+	 */
+		function crearShaderFotograma(codigo: string): GPUShaderModule;
+
+		/** ⚡
+	 * Crea un shader que q5 puede usar para dibujar imágenes.
+	 * 
+	 * Usa esta función para personalizar una copia del
+	 * [shader de imagen por defecto](https://github.com/q5js/q5.js/blob/main/src/shaders/image.wgsl).
+	 * @param {string} codigo extracto de código shader WGSL
+	 * @returns {GPUShaderModule} un programa shader
+	 * @example
+	 * await crearLienzo(200);
+	 * modoImagen(CENTER);
+	 * 
+	 * let logo = cargarImagen('/q5js_logo.avif');
+	 * 
+	 * let grate = crearShaderImagen(`
+	 * @fragment
+	 * fn fragMain(f: FragParams) -> @location(0) vec4f {
+	 * 	var texColor = textureSample(tex, samp, f.texCoord);
+	 * 	texColor.b += (q.mouseX + f.position.x) % 20 / 10;
+	 * 	return texColor;
+	 * }`);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	fondo(0.7);
+	 * 	shader(grate);
+	 * 	imagen(logo, 0, 0, 180, 180);
+	 * };
+	 */
+		function crearShaderImagen(codigo: string): GPUShaderModule;
+
+		/** ⚡
+	 * Crea un shader que q5 puede usar para dibujar fotogramas de video.
+	 * 
+	 * Usa esta función para personalizar una copia del
+	 * [shader de video por defecto](https://github.com/q5js/q5.js/blob/main/src/shaders/video.wgsl).
+	 * @param {string} codigo extracto de código shader WGSL
+	 * @returns {GPUShaderModule} un programa shader
+	 * @example
+	 * await crearLienzo(200, 600);
+	 * 
+	 * let vid = crearVideo('/assets/apollo4.mp4');
+	 * vid.hide();
+	 * 
+	 * let flipper = crearShaderVideo(`
+	 * @vertex
+	 * fn vertexMain(v: VertexParams) -> FragParams {
+	 * 	var vert = transformVertex(v.pos, v.matrixIndex);
+	 * 
+	 * 	var vi = f32(v.vertexIndex);
+	 * 	vert.y *= cos((q.frameCount + vi * 10) * 0.03);
+	 * 
+	 * 	var f: FragParams;
+	 * 	f.position = vert;
+	 * 	f.texCoord = v.texCoord;
+	 * 	return f;
+	 * }
+	 * 	
+	 * @fragment
+	 * fn fragMain(f: FragParams) -> @location(0) vec4f {
+	 * 	var texColor =
+	 * 		textureSampleBaseClampToEdge(tex, samp, f.texCoord);
+	 * 	texColor.r = 0;
+	 * 	texColor.b *= 2;
+	 * 	return texColor;
+	 * }`);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	limpiar();
+	 * 	if (ratónPresionado) vid.play();
+	 * 	shader(flipper);
+	 * 	imagen(vid, -100, 150, 200, 150);
+	 * };
+	 */
+		function crearShaderVideo(codigo: string): GPUShaderModule;
+
+		/** ⚡
+	 * Crea un shader que q5 puede usar para dibujar texto.
+	 * 
+	 * Usa esta función para personalizar una copia del
+	 * [shader de texto por defecto](https://github.com/q5js/q5.js/blob/main/src/shaders/text.wgsl).
+	 * @param {string} codigo extracto de código shader WGSL
+	 * @returns {GPUShaderModule} un programa shader
+	 * @example
+	 * await crearLienzo(200);
+	 * alineaciónTexto(CENTER, CENTER);
+	 * 
+	 * let spin = crearShaderTexto(`
+	 * @vertex
+	 * fn vertexMain(v : VertexParams) -> FragParams {
+	 * 	let char = textChars[v.instanceIndex];
+	 * 	let text = textMetadata[i32(char.w)];
+	 * 	let fontChar = fontChars[i32(char.z)];
+	 * 	let pos = calcPos(v.vertexIndex, char, fontChar, text);
+	 * 
+	 * 	var vert = transformVertex(pos, text.matrixIndex);
+	 * 
+	 * 	let i = f32(v.instanceIndex + 1);
+	 * 	vert.y *= cos((q.frameCount - 5 * i) * 0.05);
+	 * 
+	 * 	var f : FragParams;
+	 * 	f.position = vert;
+	 * 	f.texCoord = calcUV(v.vertexIndex, fontChar);
+	 * 	f.fillColor = colors[i32(text.fillIndex)];
+	 * 	f.strokeColor = colors[i32(text.strokeIndex)];
+	 * 	f.strokeWeight = text.strokeWeight;
+	 * 	f.edge = text.edge;
+	 * 	return f;
+	 * }`);
+	 * 
+	 * q5.dibujar = function () {
+	 * 	limpiar();
+	 * 	shader(spin);
+	 * 	relleno(1, 0, 1);
+	 * 	tamañoTexto(32);
+	 * 	texto('Hello, World!', 0, 0);
+	 * };
+	 */
+		function crearShaderTexto(codigo: string): GPUShaderModule;
+
+		// ⚙ advanced
+
+		class Q5 {
+
+			/** ⚙
+		 * Funcion constructora. Crea una instancia de Q5.
+		 * @param {string | Function} [ambito]
+		 * @param {HTMLElement} [contenedor] elemento HTML dentro del cual se colocará el lienzo
+		 */
+			constructor(scope?: string | Function, parent?: HTMLElement);
+			static deshabilitarErroresAmigables: boolean;
+
+			static toleranteErrores: boolean;
+
+			static soportaHDR: boolean;
+
+			static opcionesLienzo: object;
+
+			static MAX_RECTS: number;
+
+			static MAX_ELIPSES: number;
+
+			static MAX_TRANSFORMACIONES: number;
+
+			static MAX_CARACTERES: number;
+
+			static MAX_TEXTOS: number;
+
+			static WebGPU(): Q5;
+
+			static agregarHook(cicloVida: string, fn: Function): void;
+
+			static registrarAddon(addon: Function): void;
+
+			static modulos: object;
+
+			dibujar(): void;
+
+			postProcesar(): void;
+
+			actualizar(): void; //-
+
+			dibujarFotograma(): void; //-
+
+			static Imagen: {
+				new (w: number, h: number, opt?: any): Q5.Imagen;
+			};
+
+	}
+
+	namespace Q5 {
+		interface Imagen {
+			ancho: number;
+			alto: number;
+		}
+	}
+
+	const q5: typeof Q5;
 
 }