q5 2.10.3 → 2.10.6

package/src/q5-2d-soft-filters.js

@@ -1,53 +1,52 @@
 /* software implementation of image filters */
 Q5.renderers.q2d.soft_filters = ($) => {
-	let tmpBuf = null;
+	let u = null; // uint8 temporary buffer
 
-	function ensureTmpBuf() {
+	function ensureBuf() {
 		let l = $.canvas.width * $.canvas.height * 4;
-		if (!tmpBuf || tmpBuf.length != l) {
-			tmpBuf = new Uint8ClampedArray(l);
-		}
+		if (!u || u.length != l) u = new Uint8ClampedArray(l);
 	}
 
 	function initSoftFilters() {
 		$._filters = [];
-		$._filters[Q5.THRESHOLD] = (data, thresh) => {
+		$._filters[Q5.THRESHOLD] = (d, thresh) => {
 			if (thresh === undefined) thresh = 127.5;
 			else thresh *= 255;
-			for (let i = 0; i < data.length; i += 4) {
-				const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
-				data[i] = data[i + 1] = data[i + 2] = gray >= thresh ? 255 : 0;
+			for (let i = 0; i < d.length; i += 4) {
+				const gray = 0.2126 * d[i] + 0.7152 * d[i + 1] + 0.0722 * d[i + 2];
+				d[i] = d[i + 1] = d[i + 2] = gray >= thresh ? 255 : 0;
 			}
 		};
-		$._filters[Q5.GRAY] = (data) => {
-			for (let i = 0; i < data.length; i += 4) {
-				const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
-				data[i] = data[i + 1] = data[i + 2] = gray;
+		$._filters[Q5.GRAY] = (d) => {
+			for (let i = 0; i < d.length; i += 4) {
+				const gray = 0.2126 * d[i] + 0.7152 * d[i + 1] + 0.0722 * d[i + 2];
+				d[i] = d[i + 1] = d[i + 2] = gray;
 			}
 		};
-		$._filters[Q5.OPAQUE] = (data) => {
-			for (let i = 0; i < data.length; i += 4) {
-				data[i + 3] = 255;
+		$._filters[Q5.OPAQUE] = (d) => {
+			for (let i = 0; i < d.length; i += 4) {
+				d[i + 3] = 255;
 			}
 		};
-		$._filters[Q5.INVERT] = (data) => {
-			for (let i = 0; i < data.length; i += 4) {
-				data[i] = 255 - data[i];
-				data[i + 1] = 255 - data[i + 1];
-				data[i + 2] = 255 - data[i + 2];
+		$._filters[Q5.INVERT] = (d) => {
+			for (let i = 0; i < d.length; i += 4) {
+				d[i] = 255 - d[i];
+				d[i + 1] = 255 - d[i + 1];
+				d[i + 2] = 255 - d[i + 2];
 			}
 		};
-		$._filters[Q5.POSTERIZE] = (data, lvl = 4) => {
+		$._filters[Q5.POSTERIZE] = (d, lvl = 4) => {
 			let lvl1 = lvl - 1;
-			for (let i = 0; i < data.length; i += 4) {
-				data[i] = (((data[i] * lvl) >> 8) * 255) / lvl1;
-				data[i + 1] = (((data[i + 1] * lvl) >> 8) * 255) / lvl1;
-				data[i + 2] = (((data[i + 2] * lvl) >> 8) * 255) / lvl1;
+			for (let i = 0; i < d.length; i += 4) {
+				d[i] = (((d[i] * lvl) >> 8) * 255) / lvl1;
+				d[i + 1] = (((d[i + 1] * lvl) >> 8) * 255) / lvl1;
+				d[i + 2] = (((d[i + 2] * lvl) >> 8) * 255) / lvl1;
 			}
 		};
-		$._filters[Q5.DILATE] = (data) => {
-			ensureTmpBuf();
-			tmpBuf.set(data);
+		$._filters[Q5.DILATE] = (d, func) => {
+			func ??= Math.max;
+			ensureBuf();
+			u.set(d);
 			let [w, h] = [$.canvas.width, $.canvas.height];
 			for (let i = 0; i < h; i++) {
 				for (let j = 0; j < w; j++) {
@@ -61,55 +60,25 @@ Q5.renderers.q2d.soft_filters = ($) => {
 						let kt = k + t;
 						let kb = k + b;
 						let ko = k + oi;
-						data[oi + oj + k] = Math.max(
-							/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
-							tmpBuf[ko + l],
-							tmpBuf[ko + oj],
-							tmpBuf[ko + r],
-							/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
-						);
+						d[oi + oj + k] = func(u[kt + oj], u[ko + l], u[ko + oj], u[ko + r], u[kb + oj]);
 					}
 				}
 			}
 		};
-		$._filters[Q5.ERODE] = (data) => {
-			ensureTmpBuf();
-			tmpBuf.set(data);
-			let [w, h] = [$.canvas.width, $.canvas.height];
-			for (let i = 0; i < h; i++) {
-				for (let j = 0; j < w; j++) {
-					let l = 4 * Math.max(j - 1, 0);
-					let r = 4 * Math.min(j + 1, w - 1);
-					let t = 4 * Math.max(i - 1, 0) * w;
-					let b = 4 * Math.min(i + 1, h - 1) * w;
-					let oi = 4 * i * w;
-					let oj = 4 * j;
-					for (let k = 0; k < 4; k++) {
-						let kt = k + t;
-						let kb = k + b;
-						let ko = k + oi;
-						data[oi + oj + k] = Math.min(
-							/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
-							tmpBuf[ko + l],
-							tmpBuf[ko + oj],
-							tmpBuf[ko + r],
-							/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
-						);
-					}
-				}
-			}
+		$._filters[Q5.ERODE] = (d) => {
+			$._filters[Q5.DILATE](d, Math.min);
 		};
-		$._filters[Q5.BLUR] = (data, rad) => {
-			rad = rad || 1;
-			rad = Math.floor(rad * $._pixelDensity);
-			ensureTmpBuf();
-			tmpBuf.set(data);
+		$._filters[Q5.BLUR] = (d, r) => {
+			r = r || 1;
+			r = Math.floor(r * $._pixelDensity);
+			ensureBuf();
+			u.set(d);
 
-			let ksize = rad * 2 + 1;
+			let ksize = r * 2 + 1;
 
-			function gauss1d(ksize) {
+			function gauss(ksize) {
 				let im = new Float32Array(ksize);
-				let sigma = 0.3 * rad + 0.8;
+				let sigma = 0.3 * r + 0.8;
 				let ss2 = sigma * sigma * 2;
 				for (let i = 0; i < ksize; i++) {
 					let x = i - ksize / 2;
@@ -119,7 +88,7 @@ Q5.renderers.q2d.soft_filters = ($) => {
 				return im;
 			}
 
-			let kern = gauss1d(ksize);
+			let kern = gauss(ksize);
 			let [w, h] = [$.canvas.width, $.canvas.height];
 			for (let i = 0; i < h; i++) {
 				for (let j = 0; j < w; j++) {
@@ -128,21 +97,21 @@ Q5.renderers.q2d.soft_filters = ($) => {
 						s2 = 0,
 						s3 = 0;
 					for (let k = 0; k < ksize; k++) {
-						let jk = Math.min(Math.max(j - rad + k, 0), w - 1);
+						let jk = Math.min(Math.max(j - r + k, 0), w - 1);
 						let idx = 4 * (i * w + jk);
-						s0 += tmpBuf[idx] * kern[k];
-						s1 += tmpBuf[idx + 1] * kern[k];
-						s2 += tmpBuf[idx + 2] * kern[k];
-						s3 += tmpBuf[idx + 3] * kern[k];
+						s0 += u[idx] * kern[k];
+						s1 += u[idx + 1] * kern[k];
+						s2 += u[idx + 2] * kern[k];
+						s3 += u[idx + 3] * kern[k];
 					}
 					let idx = 4 * (i * w + j);
-					data[idx] = s0;
-					data[idx + 1] = s1;
-					data[idx + 2] = s2;
-					data[idx + 3] = s3;
+					d[idx] = s0;
+					d[idx + 1] = s1;
+					d[idx + 2] = s2;
+					d[idx + 3] = s3;
 				}
 			}
-			tmpBuf.set(data);
+			u.set(d);
 			for (let i = 0; i < h; i++) {
 				for (let j = 0; j < w; j++) {
 					let s0 = 0,
@@ -150,18 +119,18 @@ Q5.renderers.q2d.soft_filters = ($) => {
 						s2 = 0,
 						s3 = 0;
 					for (let k = 0; k < ksize; k++) {
-						let ik = Math.min(Math.max(i - rad + k, 0), h - 1);
+						let ik = Math.min(Math.max(i - r + k, 0), h - 1);
 						let idx = 4 * (ik * w + j);
-						s0 += tmpBuf[idx] * kern[k];
-						s1 += tmpBuf[idx + 1] * kern[k];
-						s2 += tmpBuf[idx + 2] * kern[k];
-						s3 += tmpBuf[idx + 3] * kern[k];
+						s0 += u[idx] * kern[k];
+						s1 += u[idx + 1] * kern[k];
+						s2 += u[idx + 2] * kern[k];
+						s3 += u[idx + 3] * kern[k];
 					}
 					let idx = 4 * (i * w + j);
-					data[idx] = s0;
-					data[idx + 1] = s1;
-					data[idx + 2] = s2;
-					data[idx + 3] = s3;
+					d[idx] = s0;
+					d[idx + 1] = s1;
+					d[idx + 2] = s2;
+					d[idx + 3] = s3;
 				}
 			}
 		};

package/src/q5-canvas.js

@@ -1,58 +1,4 @@
 Q5.modules.canvas = ($, q) => {
-	$.CENTER = 'center';
-	$.LEFT = 'left';
-	$.RIGHT = 'right';
-	$.TOP = 'top';
-	$.BOTTOM = 'bottom';
-
-	$.BASELINE = 'alphabetic';
-
-	$.NORMAL = 'normal';
-	$.ITALIC = 'italic';
-	$.BOLD = 'bold';
-	$.BOLDITALIC = 'italic bold';
-
-	$.ROUND = 'round';
-	$.SQUARE = 'butt';
-	$.PROJECT = 'square';
-	$.MITER = 'miter';
-	$.BEVEL = 'bevel';
-
-	$.CHORD_OPEN = 0;
-	$.PIE_OPEN = 1;
-	$.PIE = 2;
-	$.CHORD = 3;
-
-	$.RADIUS = 'radius';
-	$.CORNER = 'corner';
-	$.CORNERS = 'corners';
-
-	$.OPEN = 0;
-	$.CLOSE = 1;
-
-	$.LANDSCAPE = 'landscape';
-	$.PORTRAIT = 'portrait';
-
-	$.BLEND = 'source-over';
-	$.REMOVE = 'destination-out';
-	$.ADD = 'lighter';
-	$.DARKEST = 'darken';
-	$.LIGHTEST = 'lighten';
-	$.DIFFERENCE = 'difference';
-	$.SUBTRACT = 'subtract';
-	$.EXCLUSION = 'exclusion';
-	$.MULTIPLY = 'multiply';
-	$.SCREEN = 'screen';
-	$.REPLACE = 'copy';
-	$.OVERLAY = 'overlay';
-	$.HARD_LIGHT = 'hard-light';
-	$.SOFT_LIGHT = 'soft-light';
-	$.DODGE = 'color-dodge';
-	$.BURN = 'color-burn';
-
-	$.P2D = '2d';
-	$.WEBGL = 'webgl';
-
 	$._OffscreenCanvas =
 		window.OffscreenCanvas ||
 		function () {
@@ -331,6 +277,74 @@ Q5.modules.canvas = ($, q) => {
 	}
 };
 
+Q5.CENTER = 'center';
+Q5.LEFT = 'left';
+Q5.RIGHT = 'right';
+Q5.TOP = 'top';
+Q5.BOTTOM = 'bottom';
+
+Q5.BASELINE = 'alphabetic';
+
+Q5.NORMAL = 'normal';
+Q5.ITALIC = 'italic';
+Q5.BOLD = 'bold';
+Q5.BOLDITALIC = 'italic bold';
+
+Q5.ROUND = 'round';
+Q5.SQUARE = 'butt';
+Q5.PROJECT = 'square';
+Q5.MITER = 'miter';
+Q5.BEVEL = 'bevel';
+
+Q5.CHORD_OPEN = 0;
+Q5.PIE_OPEN = 1;
+Q5.PIE = 2;
+Q5.CHORD = 3;
+
+Q5.RADIUS = 'radius';
+Q5.CORNER = 'corner';
+Q5.CORNERS = 'corners';
+
+Q5.OPEN = 0;
+Q5.CLOSE = 1;
+
+Q5.LANDSCAPE = 'landscape';
+Q5.PORTRAIT = 'portrait';
+
+Q5.BLEND = 'source-over';
+Q5.REMOVE = 'destination-out';
+Q5.ADD = 'lighter';
+Q5.DARKEST = 'darken';
+Q5.LIGHTEST = 'lighten';
+Q5.DIFFERENCE = 'difference';
+Q5.SUBTRACT = 'subtract';
+Q5.EXCLUSION = 'exclusion';
+Q5.MULTIPLY = 'multiply';
+Q5.SCREEN = 'screen';
+Q5.REPLACE = 'copy';
+Q5.OVERLAY = 'overlay';
+Q5.HARD_LIGHT = 'hard-light';
+Q5.SOFT_LIGHT = 'soft-light';
+Q5.DODGE = 'color-dodge';
+Q5.BURN = 'color-burn';
+
+Q5.THRESHOLD = 1;
+Q5.GRAY = 2;
+Q5.OPAQUE = 3;
+Q5.INVERT = 4;
+Q5.POSTERIZE = 5;
+Q5.DILATE = 6;
+Q5.ERODE = 7;
+Q5.BLUR = 8;
+Q5.SEPIA = 9;
+Q5.BRIGHTNESS = 10;
+Q5.SATURATION = 11;
+Q5.CONTRAST = 12;
+Q5.HUE_ROTATE = 13;
+
+Q5.P2D = '2d';
+Q5.WEBGL = 'webgl';
+
 Q5.canvasOptions = {
 	alpha: false,
 	colorSpace: 'display-p3'

package/src/q5-color.js

@@ -1,5 +1,6 @@
 Q5.modules.color = ($, q) => {
 	$.RGB = $.RGBA = $._colorMode = 'rgb';
+	$.SRGB = 'srgb';
 	$.OKLCH = 'oklch';
 
 	$.colorMode = (mode, format) => {
@@ -10,7 +11,6 @@ Q5.modules.color = ($, q) => {
 		if (mode == 'oklch') {
 			q.Color = Q5.ColorOKLCH;
 		} else {
-			let srgb = $.canvas.colorSpace == 'srgb';
 			if ($._colorFormat == 255) {
 				q.Color = srgb ? Q5.ColorRGBA_8 : Q5.ColorRGBA_P3_8;
 			} else {
@@ -90,14 +90,19 @@ Q5.modules.color = ($, q) => {
 			if (Array.isArray(c0)) [c0, c1, c2, c3] = c0;
 		}
 
-		if (c2 == undefined) return new C(c0, c0, c0, c1);
+		if (c2 == undefined) {
+			if ($._colorMode == Q5.OKLCH) return new C(c0, 0, 0, c1);
+			return new C(c0, c0, c0, c1);
+		}
 		return new C(c0, c1, c2, c3);
 	};
 
+	// deprecated
 	$.red = (c) => c.r;
 	$.green = (c) => c.g;
 	$.blue = (c) => c.b;
 	$.alpha = (c) => c.a;
+
 	$.lightness = (c) => {
 		if (c.l) return c.l;
 		return ((0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) * 100) / 255;
@@ -155,9 +160,43 @@ Q5.ColorOKLCH = class extends Q5.Color {
 		this.h = h;
 		this.a = a ?? 1;
 	}
+	get levels() {
+		return [this.l, this.c, this.h, this.a];
+	}
+	equals(c) {
+		return c && this.l == c.l && this.c == c.c && this.h == c.h && this.a == c.a;
+	}
+	isSameColor(c) {
+		return c && this.l == c.l && this.c == c.c && this.h == c.h;
+	}
 	toString() {
 		return `oklch(${this.l} ${this.c} ${this.h} / ${this.a})`;
 	}
+
+	get lightness() {
+		return this.l;
+	}
+	set lightness(v) {
+		this.l = v;
+	}
+	get chroma() {
+		return this.c;
+	}
+	set chroma(v) {
+		this.c = v;
+	}
+	get hue() {
+		return this.h;
+	}
+	set hue(v) {
+		this.h = v;
+	}
+	get alpha() {
+		return this.a;
+	}
+	set alpha(v) {
+		this.a = v;
+	}
 };
 
 Q5.ColorRGBA = class extends Q5.Color {
@@ -171,9 +210,39 @@ Q5.ColorRGBA = class extends Q5.Color {
 	get levels() {
 		return [this.r, this.g, this.b, this.a];
 	}
+	equals(c) {
+		return c && this.r == c.r && this.g == c.g && this.b == c.b && this.a == c.a;
+	}
+	isSameColor(c) {
+		return c && this.r == c.r && this.g == c.g && this.b == c.b;
+	}
 	toString() {
 		return `color(srgb ${this.r} ${this.g} ${this.b} / ${this.a})`;
 	}
+	get red() {
+		return this.r;
+	}
+	set red(v) {
+		this.r = v;
+	}
+	get green() {
+		return this.g;
+	}
+	set green(v) {
+		this.g = v;
+	}
+	get blue() {
+		return this.b;
+	}
+	set blue(v) {
+		this.b = v;
+	}
+	get alpha() {
+		return this.a;
+	}
+	set alpha(v) {
+		this.a = v;
+	}
 };
 
 Q5.ColorRGBA_P3 = class extends Q5.ColorRGBA {
@@ -187,6 +256,7 @@ Q5.ColorRGBA_8 = class extends Q5.ColorRGBA {
 	constructor(r, g, b, a) {
 		super(r, g, b, a ?? 255);
 	}
+	// deprecated set functions for backwards compatibility
 	setRed(v) {
 		this.r = v;
 	}
@@ -199,9 +269,6 @@ Q5.ColorRGBA_8 = class extends Q5.ColorRGBA {
 	setAlpha(v) {
 		this.a = v;
 	}
-	get levels() {
-		return [this.r, this.g, this.b, this.a];
-	}
 	toString() {
 		return `rgb(${this.r} ${this.g} ${this.b} / ${this.a / 255})`;
 	}

package/src/q5-core.js

@@ -143,15 +143,16 @@ function Q5(scope, parent, renderer) {
 	$.getTargetFrameRate = () => $._targetFrameRate || 60;
 	$.getFPS = () => $._fps;
 
+	// shims for compatibility with p5.js libraries
 	$.Element = function (a) {
 		this.elt = a;
 	};
 	$._elements = [];
+	$.describe = () => {};
 
 	$.TWO_PI = $.TAU = Math.PI * 2;
 
 	$.log = $.print = console.log;
-	$.describe = () => {};
 
 	for (let m in Q5.modules) {
 		Q5.modules[m]($, q);