q5 2.14.3 → 2.14.5

package/src/q5-2d-image.js

@@ -1,330 +0,0 @@
-Q5.renderers.q2d.image = ($, q) => {
-	class Q5Image {
-		constructor(w, h, opt) {
-			let $ = this;
-			$._scope = 'image';
-			$.canvas = $.ctx = $.drawingContext = null;
-			$.pixels = [];
-			Q5.modules.canvas($, $);
-			let r = Q5.renderers.q2d;
-			for (let m of ['canvas', 'image', 'soft_filters']) {
-				if (r[m]) r[m]($, $);
-			}
-			$._pixelDensity = opt.pixelDensity || 1;
-			$.createCanvas(w, h, opt);
-			delete $.createCanvas;
-			$._loop = false;
-		}
-		get w() {
-			return this.width;
-		}
-		get h() {
-			return this.height;
-		}
-	}
-
-	Q5.Image ??= Q5Image;
-
-	$._tint = null;
-	let imgData = null;
-
-	$.createImage = (w, h, opt) => {
-		opt ??= {};
-		opt.alpha ??= true;
-		opt.colorSpace ??= $.canvas.colorSpace || Q5.canvasOptions.colorSpace;
-		let img = new Q5.Image(w, h, opt);
-		img.defaultWidth = w * $._defaultImageScale;
-		img.defaultHeight = h * $._defaultImageScale;
-		return img;
-	};
-
-	$.loadImage = function (url, cb, opt) {
-		if (url.canvas) return url;
-		if (url.slice(-3).toLowerCase() == 'gif') {
-			throw new Error(
-				`q5 doesn't support GIFs. Use a video or p5play animation instead. https://github.com/q5js/q5.js/issues/84`
-			);
-		}
-		q._preloadCount++;
-		let last = [...arguments].at(-1);
-		if (typeof last == 'object') {
-			opt = last;
-			cb = null;
-		} else opt = null;
-
-		let g = $.createImage(1, 1, opt);
-		let pd = (g._pixelDensity = opt?.pixelDensity || 1);
-
-		function loaded(img) {
-			img._pixelDensity = pd;
-			g.defaultWidth = img.width * $._defaultImageScale;
-			g.defaultHeight = img.height * $._defaultImageScale;
-			g.naturalWidth = img.naturalWidth || img.width;
-			g.naturalHeight = img.naturalHeight || img.height;
-			g._setImageSize(Math.ceil(g.naturalWidth / pd), Math.ceil(g.naturalHeight / pd));
-
-			g.ctx.drawImage(img, 0, 0);
-			q._preloadCount--;
-			if (cb) cb(g);
-		}
-
-		let img = new window.Image();
-		img.crossOrigin = 'Anonymous';
-		img.onload = () => loaded(img);
-		img.onerror = (e) => {
-			q._preloadCount--;
-			throw e;
-		};
-		img.src = url;
-
-		return g;
-	};
-
-	$.imageMode = (mode) => ($._imageMode = mode);
-
-	$.image = (img, dx, dy, dw, dh, sx = 0, sy = 0, sw, sh) => {
-		if (!img) return;
-		let drawable = img.canvas || img;
-
-		dw ??= img.defaultWidth || drawable.width || img.videoWidth;
-		dh ??= img.defaultHeight || drawable.height || img.videoHeight;
-		if ($._imageMode == 'center') {
-			dx -= dw * 0.5;
-			dy -= dh * 0.5;
-		}
-		if ($._da) {
-			dx *= $._da;
-			dy *= $._da;
-			dw *= $._da;
-			dh *= $._da;
-			sx *= $._da;
-			sy *= $._da;
-			sw *= $._da;
-			sh *= $._da;
-		}
-		let pd = img._pixelDensity || 1;
-		if (!sw) {
-			sw = drawable.width || drawable.videoWidth;
-		} else sw *= pd;
-		if (!sh) {
-			sh = drawable.height || drawable.videoHeight;
-		} else sh *= pd;
-
-		if ($._tint) {
-			if (img._retint || img._tint != $._tint) {
-				img._tintImg ??= $.createImage(img.w, img.h, { pixelDensity: pd });
-
-				if (img._tintImg.width != img.width || img._tintImg.height != img.height) {
-					img._tintImg.resize(img.w, img.h);
-				}
-
-				let tnt = img._tintImg.ctx;
-				tnt.globalCompositeOperation = 'copy';
-				tnt.fillStyle = $._tint;
-				tnt.fillRect(0, 0, img.width, img.height);
-
-				if (img.canvas.alpha) {
-					tnt.globalCompositeOperation = 'destination-in';
-					tnt.drawImage(drawable, 0, 0, img.width, img.height);
-				}
-
-				tnt.globalCompositeOperation = 'multiply';
-				tnt.drawImage(drawable, 0, 0, img.width, img.height);
-
-				img._tint = $._tint;
-				img._retint = false;
-			}
-
-			drawable = img._tintImg.canvas;
-		}
-
-		$.ctx.drawImage(drawable, sx * pd, sy * pd, sw, sh, dx, dy, dw, dh);
-	};
-
-	$.filter = (type, value) => {
-		$.ctx.save();
-
-		let f = '';
-
-		if ($.ctx.filter) {
-			if (typeof type == 'string') {
-				f = type;
-			} else if (type == Q5.GRAY) {
-				f = `saturate(0%)`;
-			} else if (type == Q5.INVERT) {
-				f = `invert(100%)`;
-			} else if (type == Q5.BLUR) {
-				let r = Math.ceil(value * $._pixelDensity) || 1;
-				f = `blur(${r}px)`;
-			} else if (type == Q5.THRESHOLD) {
-				value ??= 0.5;
-				let b = Math.floor((0.5 / Math.max(value, 0.00001)) * 100);
-				f = `saturate(0%) brightness(${b}%) contrast(1000000%)`;
-			} else if (type == Q5.SEPIA) {
-				f = `sepia(${value ?? 1})`;
-			} else if (type == Q5.BRIGHTNESS) {
-				f = `brightness(${value ?? 1})`;
-			} else if (type == Q5.SATURATION) {
-				f = `saturate(${value ?? 1})`;
-			} else if (type == Q5.CONTRAST) {
-				f = `contrast(${value ?? 1})`;
-			} else if (type == Q5.HUE_ROTATE) {
-				let unit = $._angleMode == 0 ? 'rad' : 'deg';
-				f = `hue-rotate(${value}${unit})`;
-			}
-
-			if (f) {
-				$.ctx.filter = f;
-				if ($.ctx.filter == 'none') {
-					throw new Error(`Invalid filter format: ${type}`);
-				}
-			}
-		}
-
-		if (!f) $._softFilter(type, value);
-
-		$.ctx.globalCompositeOperation = 'source-over';
-		$.ctx.drawImage($.canvas, 0, 0, $.canvas.w, $.canvas.h);
-		$.ctx.restore();
-		$._retint = true;
-	};
-
-	if ($._scope == 'image') {
-		$.resize = (w, h) => {
-			let c = $.canvas;
-			let o = new $._OffscreenCanvas(c.width, c.height);
-			let tmpCtx = o.getContext('2d', {
-				colorSpace: c.colorSpace
-			});
-			tmpCtx.drawImage(c, 0, 0);
-			$._setImageSize(w, h);
-			$.defaultWidth = c.width * $._defaultImageScale;
-			$.defaultHeight = c.height * $._defaultImageScale;
-
-			$.ctx.clearRect(0, 0, c.width, c.height);
-			$.ctx.drawImage(o, 0, 0, c.width, c.height);
-
-			$._retint = true;
-		};
-	}
-
-	$._getImageData = (x, y, w, h) => {
-		return $.ctx.getImageData(x, y, w, h, { colorSpace: $.canvas.colorSpace });
-	};
-
-	$.trim = () => {
-		let pd = $._pixelDensity || 1;
-		let w = $.canvas.width;
-		let h = $.canvas.height;
-		let data = $._getImageData(0, 0, w, h).data;
-		let left = w,
-			right = 0,
-			top = h,
-			bottom = 0;
-
-		let i = 3;
-		for (let y = 0; y < h; y++) {
-			for (let x = 0; x < w; x++) {
-				if (data[i] !== 0) {
-					if (x < left) left = x;
-					if (x > right) right = x;
-					if (y < top) top = y;
-					if (y > bottom) bottom = y;
-				}
-				i += 4;
-			}
-		}
-		top = Math.floor(top / pd);
-		bottom = Math.floor(bottom / pd);
-		left = Math.floor(left / pd);
-		right = Math.floor(right / pd);
-
-		return $.get(left, top, right - left + 1, bottom - top + 1);
-	};
-
-	$.mask = (img) => {
-		$.ctx.save();
-		$.ctx.resetTransform();
-		let old = $.ctx.globalCompositeOperation;
-		$.ctx.globalCompositeOperation = 'destination-in';
-		$.ctx.drawImage(img.canvas, 0, 0);
-		$.ctx.globalCompositeOperation = old;
-		$.ctx.restore();
-
-		$._retint = true;
-	};
-
-	$.inset = (x, y, w, h, dx, dy, dw, dh) => {
-		let pd = $._pixelDensity || 1;
-		$.ctx.drawImage($.canvas, x * pd, y * pd, w * pd, h * pd, dx, dy, dw, dh);
-
-		$._retint = true;
-	};
-
-	$.copy = () => $.get();
-
-	$.get = (x, y, w, h) => {
-		let pd = $._pixelDensity || 1;
-		if (x !== undefined && w === undefined) {
-			let c = $._getImageData(x * pd, y * pd, 1, 1).data;
-			return [c[0], c[1], c[2], c[3] / 255];
-		}
-		x = Math.floor(x || 0) * pd;
-		y = Math.floor(y || 0) * pd;
-		let _w = (w = w || $.width);
-		let _h = (h = h || $.height);
-		w *= pd;
-		h *= pd;
-		let img = $.createImage(w, h);
-		img.ctx.drawImage($.canvas, x, y, w, h, 0, 0, w, h);
-		img._pixelDensity = pd;
-		img.width = _w;
-		img.height = _h;
-		return img;
-	};
-
-	$.set = (x, y, c) => {
-		x = Math.floor(x);
-		y = Math.floor(y);
-		$._retint = true;
-		if (c.canvas) {
-			let old = $._tint;
-			$._tint = null;
-			$.image(c, x, y);
-			$._tint = old;
-			return;
-		}
-		if (!$.pixels.length) $.loadPixels();
-		let mod = $._pixelDensity || 1;
-		for (let i = 0; i < mod; i++) {
-			for (let j = 0; j < mod; j++) {
-				let idx = 4 * ((y * mod + i) * $.canvas.width + x * mod + j);
-				$.pixels[idx] = c.r;
-				$.pixels[idx + 1] = c.g;
-				$.pixels[idx + 2] = c.b;
-				$.pixels[idx + 3] = c.a;
-			}
-		}
-	};
-
-	$.loadPixels = () => {
-		imgData = $._getImageData(0, 0, $.canvas.width, $.canvas.height);
-		q.pixels = imgData.data;
-	};
-	$.updatePixels = () => {
-		if (imgData != null) {
-			$.ctx.putImageData(imgData, 0, 0);
-			$._retint = true;
-		}
-	};
-
-	$.smooth = () => ($.ctx.imageSmoothingEnabled = true);
-	$.noSmooth = () => ($.ctx.imageSmoothingEnabled = false);
-
-	if ($._scope == 'image') return;
-
-	$.tint = function (c) {
-		$._tint = (c._q5Color ? c : $.color(...arguments)).toString();
-	};
-	$.noTint = () => ($._tint = null);
-};

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

@@ -1,145 +0,0 @@
-/* software implementation of image filters */
-Q5.renderers.q2d.soft_filters = ($) => {
-	let u = null; // uint8 temporary buffer
-
-	function ensureBuf() {
-		let l = $.canvas.width * $.canvas.height * 4;
-		if (!u || u.length != l) u = new Uint8ClampedArray(l);
-	}
-
-	function initSoftFilters() {
-		$._filters = [];
-		$._filters[Q5.THRESHOLD] = (d, thresh) => {
-			if (thresh === undefined) thresh = 127.5;
-			else thresh *= 255;
-			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] = (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] = (d) => {
-			for (let i = 0; i < d.length; i += 4) {
-				d[i + 3] = 255;
-			}
-		};
-		$._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] = (d, lvl = 4) => {
-			let lvl1 = lvl - 1;
-			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] = (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++) {
-					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;
-						d[oi + oj + k] = func(u[kt + oj], u[ko + l], u[ko + oj], u[ko + r], u[kb + oj]);
-					}
-				}
-			}
-		};
-		$._filters[Q5.ERODE] = (d) => {
-			$._filters[Q5.DILATE](d, Math.min);
-		};
-		$._filters[Q5.BLUR] = (d, r) => {
-			r = r || 1;
-			r = Math.floor(r * $._pixelDensity);
-			ensureBuf();
-			u.set(d);
-
-			let ksize = r * 2 + 1;
-
-			function gauss(ksize) {
-				let im = new Float32Array(ksize);
-				let sigma = 0.3 * r + 0.8;
-				let ss2 = sigma * sigma * 2;
-				for (let i = 0; i < ksize; i++) {
-					let x = i - ksize / 2;
-					let z = Math.exp(-(x * x) / ss2) / (2.5066282746 * sigma);
-					im[i] = z;
-				}
-				return im;
-			}
-
-			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++) {
-					let s0 = 0,
-						s1 = 0,
-						s2 = 0,
-						s3 = 0;
-					for (let k = 0; k < ksize; k++) {
-						let jk = Math.min(Math.max(j - r + k, 0), w - 1);
-						let idx = 4 * (i * w + jk);
-						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);
-					d[idx] = s0;
-					d[idx + 1] = s1;
-					d[idx + 2] = s2;
-					d[idx + 3] = s3;
-				}
-			}
-			u.set(d);
-			for (let i = 0; i < h; i++) {
-				for (let j = 0; j < w; j++) {
-					let s0 = 0,
-						s1 = 0,
-						s2 = 0,
-						s3 = 0;
-					for (let k = 0; k < ksize; k++) {
-						let ik = Math.min(Math.max(i - r + k, 0), h - 1);
-						let idx = 4 * (ik * w + j);
-						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);
-					d[idx] = s0;
-					d[idx + 1] = s1;
-					d[idx + 2] = s2;
-					d[idx + 3] = s3;
-				}
-			}
-		};
-	}
-
-	$._softFilter = (typ, x) => {
-		if (!$._filters) initSoftFilters();
-		let imgData = $.ctx._getImageData(0, 0, $.canvas.width, $.canvas.height);
-		$._filters[typ](imgData.data, x);
-		$.ctx.putImageData(imgData, 0, 0);
-	};
-};