q5 3.7.0 → 3.7.3

package/defs/q5-c2d-es.d.ts

@@ -0,0 +1,133 @@
+declare global {
+
+	// ⭐ core
+
+	/**
+	 * Bienvenido a la documentación de q5! 🤩
+	 * 
+	 * ¿Primera vez programando? Revisa la [guía para principiantes de q5].
+	 * 
+	 * En estas páginas de "Aprender" puedes experimentar editando los mini ejemplos. ¡Diviértete! 😎
+	 */
+
+	/** ⭐
+	 * Crea un elemento de lienzo, una sección de la pantalla donde tu programa
+	 * puede dibujar.
+	 * 
+	 * ¡Ejecuta esta función para empezar a usar q5!
+	 * 
+	 * Ten en cuenta que en este ejemplo, el círculo se encuentra en la posición [0, 0], el origen del lienzo.
+	 * @param {number} [ancho] ancho del lienzo en píxeles
+	 * @param {number} [alto] alto del lienzo en píxeles
+	 * @param {object} [opciones] opciones para el contexto 2d
+	 * @return {Promise<HTMLCanvasElement>} una promesa que se resuelve con el elemento canvas creado
+	 */
+	function crearLienzo(ancho?: number, alto?: number, opciones: object): 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.
+	 */
+	function dibujar(): void;
+
+	/** ⭐
+	 * Imprime un mensaje en la consola de JavaScript. Atajo para `console.log()`.
+	 * 
+	 * Para acceder a las herramientas del navegador (DevTools) generalmente es con click derecho + "inspeccionar", o presionando las teclas `ctrl + shift + i` o `command + option + i`. La consola se encuentra en la pestaña "console".
+	 * @param {any} mensaje a imprimir
+	 */
+	function log(...mensaje: any[]): void;
+
+	// 🧑‍🎨 shapes
+
+	/** 🧑‍🎨
+	 * Dibuja un círculo en la posición (x, y) con el diámetro especificado.
+	 * @param {number} x posición x del centro del círculo
+	 * @param {number} y posición y del centro del círculo
+	 * @param {number} diámetro del círculo
+	 */
+	function círculo(): 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
+	 */
+	function fondo(relleno: Color | Q5.Image): 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(hz: number): void | 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;
+
+}
+
+export {};

package/defs/q5-c2d.d.ts

@@ -21,14 +21,14 @@ declare global {
 	 * @param {number} [w] width or side lengths of the canvas
 	 * @param {number} [h] height of the canvas
 	 * @param {object} [opt] [options](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getContextAttributes)
-	 * @returns {HTMLCanvasElement} created canvas element
+	 * @returns {Promise<HTMLCanvasElement>} created canvas element
 	 * @example
 	 * // Canvas2D
 	 * createCanvas(200, 100);
 	 * background('silver');
 	 * circle(0, 0, 80);
 	 */
-	function createCanvas(w?: number, h?: number, options?: CanvasRenderingContext2DSettings): HTMLCanvasElement;
+	function createCanvas(w?: number, h?: number, options?: CanvasRenderingContext2DSettings): Promise<HTMLCanvasElement>;
 
 	/** ⭐
 	 * The q5 draw function is run 60 times per second by default.
@@ -814,6 +814,8 @@ declare global {
 
 	/** 📘
 	 * Sets the current text style.
+	 * 
+	 * Not applicable to WebGPU when using MSDF fonts.
 	 * @param {'normal' | 'italic' | 'bold' | 'bolditalic'} style font style
 	 * @example
 	 * createCanvas(200);

package/defs/q5-es.d.ts

@@ -0,0 +1,159 @@
+declare global {
+
+	// ⭐ core
+
+	/**
+	 * Bienvenido a la documentación de q5! 🤩
+	 * 
+	 * ¿Primera vez programando? Revisa la [guía para principiantes de q5].
+	 * 
+	 * En estas páginas de "Aprender" puedes experimentar editando los mini ejemplos. ¡Diviértete! 😎
+	 */
+
+	/** ⭐
+	 * Crea un elemento de lienzo, una sección de la pantalla donde tu programa
+	 * puede dibujar.
+	 * 
+	 * ¡Ejecuta esta función para empezar a usar q5!
+	 * 
+	 * Ten en cuenta que en este ejemplo, el círculo se encuentra en la posición [0, 0], el origen del lienzo.
+	 * @param {number} [ancho] ancho del lienzo en píxeles
+	 * @param {number} [alto] alto del lienzo en píxeles
+	 * @param {object} [opciones] opciones para el contexto 2d
+	 * @return {Promise<HTMLCanvasElement>} una promesa que se resuelve con el elemento canvas creado
+	 * @example
+	 * // WebGPU
+	 * await crearLienzo(200, 100);
+	 * fondo('silver');
+	 * círculo(0, 0, 80);
+	 */
+	function crearLienzo(ancho?: number, alto?: number, opciones: object): 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);
+	 * };
+	 */
+	function dibujar(): void;
+
+	/** ⭐
+	 * Imprime un mensaje en la consola de JavaScript. Atajo para `console.log()`.
+	 * 
+	 * Para acceder a las herramientas del navegador (DevTools) generalmente es con click derecho + "inspeccionar", o presionando las teclas `ctrl + shift + i` o `command + option + i`. La consola se encuentra en la pestaña "console".
+	 * @param {any} mensaje a imprimir
+	 * @example
+	 * q5.dibujar = function () {
+	 * 	círculo(mouseX, mouseY, 80);
+	 * 	log('The mouse is at:', mouseX, mouseY);
+	 * };
+	 */
+	function log(...mensaje: any[]): void;
+
+	// 🧑‍🎨 shapes
+
+	/** 🧑‍🎨
+	 * Dibuja un círculo en la posición (x, y) con el diámetro especificado.
+	 * @param {number} x posición x del centro del círculo
+	 * @param {number} y posición y del centro del círculo
+	 * @param {number} diámetro del círculo
+	 * @example
+	 * await crearLienzo(200, 100);
+	 * círculo(0, 0, 80);
+	 */
+	function círculo(): 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.Image): 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(hz: number): void | 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;
+
+}
+
+export {};

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "3.7.0",
+	"version": "3.7.3",
 	"license": "LGPL-3.0",
 	"description": "Beginner friendly graphics powered by WebGPU and optimized for interactive art!",
 	"author": "quinton-ashley",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "3.7.0",
+	"version": "3.7.3",
 	"description": "Beginner friendly graphics powered by WebGPU and optimized for interactive art!",
 	"author": "quinton-ashley",
 	"contributors": [
@@ -29,7 +29,7 @@
 		}
 	],
 	"scripts": {
-		"bundle": "cat src/q5-core.js src/q5-canvas.js src/q5-c2d-canvas.js src/q5-c2d-shapes.js src/q5-c2d-image.js src/q5-c2d-soft-filters.js src/q5-c2d-text.js src/q5-color.js src/q5-display.js src/q5-dom.js src/q5-fes.js src/q5-input.js src/q5-math.js src/q5-record.js src/q5-sound.js src/q5-util.js src/q5-vector.js src/q5-webgpu.js > q5.js",
+		"bundle": "cat src/q5-core.js src/q5-canvas.js src/q5-c2d-canvas.js src/q5-c2d-shapes.js src/q5-c2d-image.js src/q5-c2d-soft-filters.js src/q5-c2d-text.js src/q5-color.js src/q5-display.js src/q5-dom.js src/q5-fes.js src/q5-input.js src/q5-math.js src/q5-record.js src/q5-sound.js src/q5-util.js src/q5-vector.js src/q5-webgpu.js src/q5-lang.js > q5.js",
 		"min": "terser q5.js --compress ecma=2025 --mangle > q5.min.js",
 		"dist": "bun bundle && bun min",
 		"dist-p5play": "bun dist && cp q5.js ../../web/p5play-web/v3/q5.js && cp q5.min.js ../../web/p5play-web/v3/q5.min.js",

package/q5.d.ts

@@ -21,14 +21,14 @@ declare global {
 	 * @param {number} [w] width or side lengths of the canvas
 	 * @param {number} [h] height of the canvas
 	 * @param {object} [opt] [options](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getContextAttributes)
-	 * @returns {HTMLCanvasElement} created canvas element
+	 * @returns {Promise<HTMLCanvasElement>} created canvas element
 	 * @example
 	 * // Canvas2D
 	 * createCanvas(200, 100);
 	 * background('silver');
 	 * circle(0, 0, 80);
 	 */
-	function createCanvas(w?: number, h?: number, options?: CanvasRenderingContext2DSettings): HTMLCanvasElement;
+	function createCanvas(w?: number, h?: number, options?: CanvasRenderingContext2DSettings): Promise<HTMLCanvasElement>;
 
 	/** ⭐
 	 * The q5 draw function is run 60 times per second by default.
@@ -814,6 +814,8 @@ declare global {
 
 	/** 📘
 	 * Sets the current text style.
+	 * 
+	 * Not applicable to WebGPU when using MSDF fonts.
 	 * @param {'normal' | 'italic' | 'bold' | 'bolditalic'} style font style
 	 * @example
 	 * createCanvas(200);

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 3.6
+ * @version 3.7
  * @author quinton-ashley
  * @contributors evanalulu, Tezumie, ormaq, Dukemz, LingDong-
  * @license LGPL-3.0
@@ -275,32 +275,13 @@ function Q5(scope, parent, renderer) {
 
 	let t = globalScope || $;
 
-	let userFns = [
-		'postProcess',
-		'mouseMoved',
-		'mousePressed',
-		'mouseReleased',
-		'mouseDragged',
-		'mouseClicked',
-		'doubleClicked',
-		'mouseWheel',
-		'keyPressed',
-		'keyReleased',
-		'keyTyped',
-		'touchStarted',
-		'touchMoved',
-		'touchEnded',
-		'windowResized',
-		'preload'
-	];
+	let userFns = Q5._userFns.slice(0, 15);
 	// shim if undefined
 	for (let name of userFns) $[name] ??= () => {};
 
-	userFns.pop();
-
-	let allUserFns = ['update', 'draw', 'drawFrame', ...userFns];
-
 	if ($._isGlobal) {
+		let allUserFns = Q5._userFns.slice(0, 17);
+
 		for (let name of allUserFns) {
 			if (Q5[name]) $[name] = Q5[name];
 			else {
@@ -314,6 +295,9 @@ function Q5(scope, parent, renderer) {
 
 	function wrapWithFES(name) {
 		const fn = t[name] || $[name];
+		if (fn == undefined) {
+			log('hi');
+		}
 		$[name] = (event) => {
 			try {
 				return fn(event);
@@ -329,8 +313,10 @@ function Q5(scope, parent, renderer) {
 
 		readyResolve();
 
-		wrapWithFES('preload');
-		$.preload();
+		if ($.preload) {
+			wrapWithFES('preload');
+			$.preload();
+		}
 
 		// wait for the user to define setup, update, or draw
 		await Promise.race([
@@ -400,6 +386,26 @@ Q5._friendlyError = (msg, func) => {
 };
 Q5._validateParameters = () => true;
 
+Q5._userFns = [
+	'postProcess',
+	'mouseMoved',
+	'mousePressed',
+	'mouseReleased',
+	'mouseDragged',
+	'mouseClicked',
+	'doubleClicked',
+	'mouseWheel',
+	'keyPressed',
+	'keyReleased',
+	'keyTyped',
+	'touchStarted',
+	'touchMoved',
+	'touchEnded',
+	'windowResized',
+	'update',
+	'draw'
+];
+
 Q5.hooks = {
 	init: [],
 	presetup: [],
@@ -459,7 +465,7 @@ if (typeof window == 'object') {
 	window.WEBGPU = 'webgpu';
 } else global.window = 0;
 
-Q5.version = Q5.VERSION = '3.6';
+Q5.version = Q5.VERSION = '3.7';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -6857,6 +6863,8 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 			if (_rectMode == 'corner') {
 				x += hw;
 				y += hh;
+				hw = Math.abs(hw);
+				hh = Math.abs(hh);
 			} else if (_rectMode == 'radius') {
 				hw = w;
 				hh = h;
@@ -8050,6 +8058,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 	};
 
 	$.textSize = (size) => {
+		if (!$._font) $._g.textSize(size);
 		if (size == undefined) return _textSize;
 		_textSize = size;
 		if (!leadingSet) {
@@ -8086,6 +8095,8 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 	};
 
 	$.textLeading = (lineHeight) => {
+		if (!$._font) return $._g.textLeading(lineHeight);
+		if (!lineHeight) return leading;
 		$._font.lineHeight = leading = lineHeight;
 		leadDiff = leading - _textSize;
 		leadPercent = leading / _textSize;
@@ -8097,6 +8108,10 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		if (vert) _textBaseline = vert;
 	};
 
+	$.textStyle = (style) => {
+		// stub
+	};
+
 	let charStack = [],
 		textStack = [];
 
@@ -8174,6 +8189,8 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 			return $.textImage(img, x, y);
 		}
 
+		let hasNewline;
+
 		if (str.length > w) {
 			let wrapped = [];
 			let i = 0;
@@ -8189,21 +8206,10 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 				i = end + 1;
 			}
 			str = wrapped.join('\n');
+			hasNewline = true;
 		}
 
-		let spaces = 0, // whitespace char count, not literal spaces
-			hasNewline;
-		for (let i = 0; i < str.length; i++) {
-			let c = str[i];
-			switch (c) {
-				case '\n':
-					hasNewline = true;
-				case '\r':
-				case '\t':
-				case ' ':
-					spaces++;
-			}
-		}
+		hasNewline ??= str.includes('\n');
 
 		let charsData = [];
 
@@ -8226,7 +8232,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 			else if (tb == 'center') y -= _textSize * 0.5;
 			else if (tb == 'bottom') y -= leading;
 		} else {
-			// measure the text to get the line widths before setting
+			// measure the text to get the line height before setting
 			// the x position to properly align the text
 			measurements = measureText($._font, str);
 
@@ -8269,8 +8275,27 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 	};
 
 	$.textWidth = (str) => {
-		if (!$._font) return 0;
-		return measureText($._font, str).width;
+		if (!$._font) {
+			$._g.textSize(_textSize);
+			return $._g.textWidth(str);
+		}
+		return (measureText($._font, str).width * _textSize) / 42;
+	};
+
+	$.textAscent = (str) => {
+		if (!$._font) {
+			$._g.textSize(_textSize);
+			return $._g.textAscent(str);
+		}
+		return leading - leadDiff;
+	};
+
+	$.textDescent = (str) => {
+		if (!$._font) {
+			$._g.textSize(_textSize);
+			return $._g.textDescent(str);
+		}
+		return leadDiff;
 	};
 
 	$.createTextImage = (str, w, h) => {
@@ -8443,3 +8468,106 @@ Q5.WebGPU = async function (scope, parent) {
 	await q.ready;
 	return q;
 };
+const libLangs = `
+# core
+createCanvas -> es:crearLienzo ja:キャンバスを作成する
+
+# color
+background -> es:fondo ja:背景
+
+# display
+windowWidth -> es:anchoVentana
+windowHeight -> es:altoVentana
+frameCount ->  es:cuadroActual
+noLoop -> es:pausar
+redraw -> es:redibujar
+loop -> es:reanudar
+frameRate -> es:frecuenciaRefresco
+getTargetFrameRate -> es:frecuenciaIdeal
+getFPS -> es:frecuenciaMaxima
+deltaTime -> es:ultimoTiempo
+
+# shape
+circle -> es:círculo
+`;
+
+const userLangs = `
+update -> es:actualizar
+draw -> es:dibujar
+postProcess -> es:retocarDibujo
+`;
+
+const parseLangs = function (data, lang) {
+	let map = {};
+	for (let l of data.split('\n')) {
+		let i = l.indexOf(' ' + lang + ':');
+		if (i > 0 && l[0] != '#') {
+			map[l.split(' ')[0]] = l.slice(i + 4).split(' ')[0];
+		}
+	}
+	return map;
+};
+
+Object.defineProperty(Q5, 'lang', {
+	get: () => Q5._lang || 'en',
+	set: (val) => {
+		if (val == Q5._lang) return;
+
+		Q5._lang = val;
+
+		if (val == 'en') {
+			// reset to English only user functions
+			Q5._userFns = Q5._userFns.slice(0, 17);
+			Q5._libMap = Q5._userFnsMap = {};
+			return;
+		}
+
+		let libMap = parseLangs(libLangs, val);
+
+		if (typeof window == 'object') {
+			window[libMap.createCanvas] = createCanvas;
+		}
+
+		let userFnsMap = parseLangs(userLangs, val);
+
+		for (let name in userFnsMap) {
+			let translatedName = userFnsMap[name];
+			if (Q5.hasOwnProperty(translatedName)) continue;
+			Object.defineProperty(Q5, translatedName, {
+				get: () => Q5[name],
+				set: (fn) => (Q5[name] = fn)
+			});
+		}
+
+		Q5._libMap = libMap;
+		Q5._userFnsMap = userFnsMap;
+		Q5._userFns.push(...Object.values(userFnsMap));
+	}
+});
+
+Q5.modules.lang = ($) => {
+	let userFnsMap = Q5._userFnsMap;
+
+	for (let name in userFnsMap) {
+		let translatedName = userFnsMap[name];
+		Object.defineProperty($, translatedName, {
+			get: () => $[name],
+			set: (fn) => ($[name] = fn)
+		});
+	}
+
+	let libMap = Q5._libMap;
+
+	if (libMap?.createCanvas) {
+		$[libMap.createCanvas] = $.createCanvas;
+	}
+};
+
+Q5.addHook('presetup', ($) => {
+	let libMap = Q5._libMap;
+
+	for (let name in libMap) {
+		let translatedName = libMap[name];
+		$[translatedName] = $[name];
+	}
+});