q5 3.7.6 → 3.8.0

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "3.7.6",
+	"version": "3.8.0",
 	"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.6",
+	"version": "3.8.0",
 	"description": "Beginner friendly graphics powered by WebGPU and optimized for interactive art!",
 	"author": "quinton-ashley",
 	"contributors": [

package/q5.d.ts

@@ -545,7 +545,7 @@ declare global {
 	/** 🌆
 	 * Array of pixel color data from a canvas or image.
 	 * 
-	 * Empty by default, populate by running `loadPixels`.
+	 * Empty by default, get the data by running `loadPixels`.
 	 * 
 	 * Each pixel is represented by four consecutive values in the array,
 	 * corresponding to its red, green, blue, and alpha channels.
@@ -677,13 +677,6 @@ declare global {
 	 */
 	function createGraphics(w: number, h: number, opt?: any): Q5;
 
-	namespace Q5 {
-		interface Image {
-			width: number;
-			height: number;
-		}
-	}
-
 	// 📘 text
 
 	/** 📘
@@ -3168,7 +3161,7 @@ declare global {
 	 * @example
 	 * createCanvas(200, 100);
 	 * 
-	 * let sel = createSelect('Select a color');
+	 * let sel = createSelect('Select an option');
 	 * sel.option('Red', '#f55').option('Green', '#5f5');
 	 * 
 	 * sel.addEventListener('change', () => {
@@ -3954,6 +3947,13 @@ declare global {
 
 	}
 
+	namespace Q5 {
+		interface Image {
+			width: number;
+			height: number;
+		}
+	}
+
 }
 
 export {};

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 3.7
+ * @version 3.8
  * @author quinton-ashley
  * @contributors evanalulu, Tezumie, ormaq, Dukemz, LingDong-
  * @license LGPL-3.0
@@ -464,7 +464,7 @@ if (typeof window == 'object') {
 	window.WEBGPU = 'webgpu';
 } else global.window = 0;
 
-Q5.version = Q5.VERSION = '3.7';
+Q5.version = Q5.VERSION = '3.8';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -619,8 +619,6 @@ Q5.modules.canvas = ($, q) => {
 
 		c.w = w = Math.ceil(w);
 		c.h = h = Math.ceil(h);
-		q.halfWidth = c.hw = w / 2;
-		q.halfHeight = c.hh = h / 2;
 
 		// changes the actual size of the canvas
 		c.width = Math.ceil(w * $._pixelDensity);
@@ -628,6 +626,17 @@ Q5.modules.canvas = ($, q) => {
 
 		q.width = w;
 		q.height = h;
+		q.halfWidth = c.hw = w / 2;
+		q.halfHeight = c.hh = h / 2;
+
+		let m = Q5._libMap;
+
+		if (m.width) {
+			q[m.width] = w;
+			q[m.height] = h;
+			q[m.halfWidth] = q.halfWidth;
+			q[m.halfHeight] = q.halfHeight;
+		}
 
 		if ($.displayMode && !c.displayMode) $.displayMode();
 		else $._adjustDisplay(true);
@@ -1583,7 +1592,13 @@ Q5.renderers.c2d.image = ($, q) => {
 			$.ctx.clearRect(0, 0, c.width, c.height);
 			$.ctx.drawImage(o, 0, 0, c.width, c.height);
 
-			$.modified = $._retint = true;
+			$._retint = true;
+
+			if ($._owner?._makeDrawable) {
+				$._texture.destroy();
+				delete $._texture;
+				$._owner._makeDrawable($);
+			}
 		};
 	}
 
@@ -1752,6 +1767,26 @@ Q5.Image = class {
 		$.defaultHeight = h * scale;
 		delete $.createCanvas;
 		$._loop = false;
+
+		let libMap = Q5._libMap;
+		let imgFns = [
+			'copy',
+			'filter',
+			'get',
+			'set',
+			'resize',
+			'mask',
+			'trim',
+			'inset',
+			'pixels',
+			'loadPixels',
+			'updatePixels',
+			'smooth',
+			'noSmooth'
+		];
+		for (let name of imgFns) {
+			if (libMap[name]) $[libMap[name]] = $[name];
+		}
 	}
 	get w() {
 		return this.width;
@@ -8608,8 +8643,8 @@ shearX -> es:cizallarX
 shearY -> es:cizallarY
 applyMatrix -> es:aplicarMatriz
 resetMatrix -> es:reiniciarMatriz
-push -> es:guardar
-pop -> es:recuperar
+push -> es:apilar
+pop -> es:desapilar
 pushMatrix -> es:guardarMatriz
 popMatrix -> es:recuperarMatriz
 
@@ -8731,6 +8766,7 @@ RIGHT -> es:DERECHA
 TOP -> es:ARRIBA
 BOTTOM -> es:ABAJO
 BASELINE -> es:LINEA_BASE
+MIDDLE -> es:MEDIO
 RGB -> es:RGB
 OKLCH -> es:OKLCH
 HSL -> es:HSL
@@ -8743,6 +8779,9 @@ PIXELATED -> es:PIXELADO
 TWO_PI -> es:DOS_PI
 HALF_PI -> es:MEDIO_PI
 QUARTER_PI -> es:CUARTO_PI
+
+# vector
+createVector -> es:crearVector
 `;
 
 const userLangs = `
@@ -8762,6 +8801,45 @@ touchMoved -> es:alMoverToque
 mouseWheel -> es:ruedaRatón
 `;
 
+const classLangs = {
+	Vector: `
+add -> es:sumar
+sub -> es:restar
+mult -> es:multiplicar
+div -> es:dividir
+mag -> es:magnitud
+magSq -> es:magnitudCuad
+dist -> es:distancia
+normalize -> es:normalizar
+limit -> es:limitar
+setMag -> es:establecerMagnitud
+heading -> es:rumbo
+rotate -> es:rotar
+lerp -> es:interpolar
+array -> es:arreglo
+copy -> es:copiar
+dot -> es:punto
+cross -> es:cruz
+angleBetween -> es:anguloEntre
+reflect -> es:reflejar
+`,
+	Sound: `
+load -> es:cargar
+play -> es:reproducir
+stop -> es:parar
+pause -> es:pausar
+loop -> es:bucle
+setVolume -> es:establecerVolumen
+setPan -> es:establecerPan
+setLoop -> es:establecerBucle
+isLoaded -> es:estaCargado
+isPlaying -> es:estaReproduciendo
+isPaused -> es:estaPausado
+isLooping -> es:estaEnBucle
+onended -> es:alTerminar
+`
+};
+
 const parseLangs = function (data, lang) {
 	let map = {};
 	for (let l of data.split('\n')) {
@@ -8773,8 +8851,6 @@ const parseLangs = function (data, lang) {
 	return map;
 };
 
-Q5._lang = 'en';
-
 Object.defineProperty(Q5, 'lang', {
 	get: () => Q5._lang,
 	set: (val) => {
@@ -8784,15 +8860,15 @@ Object.defineProperty(Q5, 'lang', {
 
 		if (val == 'en') {
 			// reset to English only user functions
-			Q5._userFns = Q5._userFns.slice(0, 17);
+			Q5._userFns = Q5._userFns.slice(0, 19);
 			Q5._libMap = Q5._userFnsMap = {};
 			return;
 		}
 
-		let libMap = parseLangs(libLangs, val);
+		let m = parseLangs(libLangs, val);
 
 		if (typeof window == 'object') {
-			window[libMap.createCanvas] = createCanvas;
+			window[m.createCanvas] = createCanvas;
 		}
 
 		let userFnsMap = parseLangs(userLangs, val);
@@ -8806,12 +8882,33 @@ Object.defineProperty(Q5, 'lang', {
 			});
 		}
 
-		Q5._libMap = libMap;
+		for (let className in classLangs) {
+			if (Q5[className]) {
+				let map = parseLangs(classLangs[className], val);
+				let proto = Q5[className].prototype;
+				for (let name in map) {
+					let translatedName = map[name];
+					if (proto.hasOwnProperty(translatedName)) continue;
+					Object.defineProperty(proto, translatedName, {
+						get: function () {
+							return this[name];
+						},
+						set: function (v) {
+							this[name] = v;
+						}
+					});
+				}
+			}
+		}
+
+		Q5._libMap = m;
 		Q5._userFnsMap = userFnsMap;
 		Q5._userFns.push(...Object.values(userFnsMap));
 	}
 });
 
+Q5.lang = 'en';
+
 Q5.modules.lang = ($) => {
 	let userFnsMap = Q5._userFnsMap;
 
@@ -8823,29 +8920,36 @@ Q5.modules.lang = ($) => {
 		});
 	}
 
-	let libMap = Q5._libMap;
+	let m = Q5._libMap;
 
-	if (libMap?.createCanvas) {
-		$[libMap.createCanvas] = $.createCanvas;
+	if (m.createCanvas) {
+		$[m.createCanvas] = $.createCanvas;
 	}
 };
 
 Q5.addHook('init', (q) => {
-	let libMap = Q5._libMap;
+	let m = Q5._libMap;
 
-	for (let name in libMap) {
-		let translatedName = libMap[name];
+	for (let name in m) {
+		let translatedName = m[name];
 		q[translatedName] = q[name];
 	}
 });
 
 Q5.addHook('predraw', (q) => {
-	let libMap = Q5._libMap;
+	let m = Q5._libMap;
 
-	// update mouse
-	if (libMap.mouseX) {
-		q[libMap.mouseX] = q.mouseX;
-		q[libMap.mouseY] = q.mouseY;
-		q[libMap.mouseIsPressed] = q.mouseIsPressed;
-	}
+	if (!m.mouseX) return;
+
+	q[m.frameCount] = q.frameCount;
+
+	// update user input
+	q[m.mouseX] = q.mouseX;
+	q[m.mouseY] = q.mouseY;
+	q[m.mouseIsPressed] = q.mouseIsPressed;
+	q[m.mouseButton] = q.mouseButton;
+	q[m.key] = q.key;
+	q[m.keyIsPressed] = q.keyIsPressed;
+	q[m.touches] = q.touches;
+	q[m.pointers] = q.pointers;
 });