2.10.0

q5js · Nov 22, 2024 · b2aa9ed · b2aa9ed
1 parent 1cca23e
commit b2aa9ed
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.9.26",
+	"version": "2.10.0",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [

diff --git a/q5.d.ts b/q5.d.ts
@@ -400,6 +400,79 @@ function draw() {
 	 */
 	function opacity(alpha: number): void;
 
+	/** ⬜️
+	 * Sets the shadow color. The default is transparent (no shadow).
+	 * 
+	 * Shadows apply to anything drawn to the canvas, including filled
+	 * shapes, strokes, text, and images.
+	 * 
+	 * Like the [`color`](https://q5js.org/learn/#color) function, this function can accept colors in a wide range of formats: CSS color string, hex string, grayscale value, and color component values.
+	 * @param {string | Color} color - shadow color
+	 * @example
+function draw() {
+  background(200);
+	
+	noFill();
+	shadow('black');
+	rect(64, 60, 80, 80);
+	text('q5', 100, 100);
+}
+	 * @example
+createCanvas(256, 256);
+let logo = loadImage('https://p5play.org/assets/p5play_logo.webp');
+
+function setup() {
+	background(200);
+	shadow(0);
+	image(logo, 27, 27, 200, 200);
+}
+	 */
+	function shadow(color: string | Color): void;
+
+	/** ⬜️
+	 * Disables the shadow effect.
+	 * @example
+function draw() {
+  background(200);
+	noStroke();
+	shadow('black');
+	rect(14, 14, 80, 80);
+
+	noShadow();
+	rect(104, 104, 80, 80);
+}
+	 */
+	function noShadow(): void;
+
+	/** ⬜️
+	 * Sets the shadow offset and blur radius.
+	 * 
+	 * When q5 starts, shadow offset is (10, 10) with a blur of 10.
+	 * @param {number} offsetX - horizontal offset of the shadow
+	 * @param {number} offsetY - vertical offset of the shadow, defaults to be the same as offsetX
+	 * @param {number} blur - blur radius of the shadow, defaults to 0
+	 * @example
+function draw() {
+	background(200);
+	noStroke();
+	shadow('red');
+
+	shadowBox(-20, -8, 50);
+	circle(100, 100, 80, 80);
+}
+	 * @example
+function draw() {
+	background(200);
+	noStroke();
+	shadow('aqua');
+	shadowBox(20);
+	rect(50, 50, 100, 100);
+  textSize(64);
+  text('q5', 60, 115);
+}
+	 */
+	function shadowBox(offsetX: number, offsetY: number, blur: number): void;
+
 	/** ⬜️
 	 * Translates the origin of the drawing context.
 	 * @param {number} x - translation along the x-axis

diff --git a/q5.js b/q5.js
@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.9
+ * @version 2.10
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -311,7 +311,7 @@ function createCanvas(w, h, opt) {
 	}
 }
 
-Q5.version = Q5.VERSION = '2.9';
+Q5.version = Q5.VERSION = '2.10';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -616,6 +616,10 @@ Q5.modules.canvas = ($, q) => {
 		'_doFill',
 		'_strokeSet',
 		'_fillSet',
+		'_shadow',
+		'_shadowOffsetX',
+		'_shadowOffsetY',
+		'_shadowBlur',
 		'_tint',
 		'_imageMode',
 		'_rectMode',
@@ -744,6 +748,32 @@ Q5.renderers.q2d.canvas = ($, q) => {
 	$.noStroke = () => ($._doStroke = false);
 	$.opacity = (a) => ($.ctx.globalAlpha = a);
 
+	$._shadowOffsetX = $._shadowOffsetY = $._shadowBlur = 10;
+
+	$.shadow = function (c) {
+		if (Q5.Color) {
+			if (!c._q5Color) {
+				if (typeof c != 'string') c = $.color(...arguments);
+				else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+			}
+		}
+		$.ctx.shadowColor = $._shadow = c.toString();
+
+		$.ctx.shadowOffsetX ||= $._shadowOffsetX;
+		$.ctx.shadowOffsetY ||= $._shadowOffsetY;
+		$.ctx.shadowBlur ||= $._shadowBlur;
+	};
+
+	$.shadowBox = (offsetX, offsetY, blur) => {
+		$.ctx.shadowOffsetX = $._shadowOffsetX = offsetX;
+		$.ctx.shadowOffsetY = $._shadowOffsetY = offsetY || offsetX;
+		$.ctx.shadowBlur = $._shadowBlur = blur || 0;
+	};
+
+	$.noShadow = () => {
+		$.ctx.shadowOffsetX = $.ctx.shadowOffsetY = $.ctx.shadowBlur = 0;
+	};
+
 	// DRAWING MATRIX
 
 	$.translate = (x, y) => {
@@ -1331,16 +1361,35 @@ Q5.renderers.q2d.image = ($, q) => {
 		$.ctx.drawImage(drawable, sx * pd, sy * pd, sw, sh, dx, dy, dw, dh);
 
 		if ($._tint) {
-			$.ctx.shadowBlur = 0;
+			$.ctx.save();
+
 			$.ctx.shadowOffsetX = 0;
 			$.ctx.shadowOffsetY = 0;
+			$.ctx.shadowBlur = 0;
+
+			if (img.canvas.alpha) {
+				img.tintImg ??= $.createImage(dw, dh);
+				if (img.tintImg.width != dw || img.tintImg.height != dh) {
+					img.tintImg.resize(dw, dh);
+				}
+
+				let tnt = img.tintImg.ctx;
+				tnt.globalCompositeOperation = 'copy';
+				tnt.fillStyle = $._tint;
+				tnt.fillRect(0, 0, dw, dh);
+
+				tnt.globalCompositeOperation = 'destination-in';
+				tnt.drawImage(drawable, 0, 0, dw, dh);
+
+				$.ctx.globalCompositeOperation = 'multiply';
+				$.ctx.drawImage(img.tintImg.canvas, 0, 0, dw, dh, dx, dy, dw, dh);
+			} else {
+				$.ctx.globalCompositeOperation = 'multiply';
+				$.ctx.fillStyle = $._tint;
+				$.ctx.fillRect(dx, dy, dw, dh);
+			}
 
-			let fill = $.ctx.fillStyle;
-			$.ctx.globalCompositeOperation = 'multiply';
-			$.ctx.fillStyle = $._tint.toString();
-			$.ctx.fillRect(dx, dy, dw, dh);
-			$.ctx.globalCompositeOperation = 'source-over';
-			$.ctx.fillStyle = fill;
+			$.ctx.restore();
 		}
 	};
 
@@ -1496,7 +1545,7 @@ Q5.renderers.q2d.image = ($, q) => {
 	if ($._scope == 'image') return;
 
 	$.tint = function (c) {
-		$._tint = c._q5Color ? c : $.color(...arguments);
+		$._tint = (c._q5Color ? c : $.color(...arguments)).toString();
 	};
 	$.noTint = () => ($._tint = null);
 };

diff --git a/q5.min.js b/q5.min.js
diff --git a/src/q5-2d-canvas.js b/src/q5-2d-canvas.js
@@ -88,6 +88,32 @@ Q5.renderers.q2d.canvas = ($, q) => {
 	$.noStroke = () => ($._doStroke = false);
 	$.opacity = (a) => ($.ctx.globalAlpha = a);
 
+	$._shadowOffsetX = $._shadowOffsetY = $._shadowBlur = 10;
+
+	$.shadow = function (c) {
+		if (Q5.Color) {
+			if (!c._q5Color) {
+				if (typeof c != 'string') c = $.color(...arguments);
+				else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+			}
+		}
+		$.ctx.shadowColor = $._shadow = c.toString();
+
+		$.ctx.shadowOffsetX ||= $._shadowOffsetX;
+		$.ctx.shadowOffsetY ||= $._shadowOffsetY;
+		$.ctx.shadowBlur ||= $._shadowBlur;
+	};
+
+	$.shadowBox = (offsetX, offsetY, blur) => {
+		$.ctx.shadowOffsetX = $._shadowOffsetX = offsetX;
+		$.ctx.shadowOffsetY = $._shadowOffsetY = offsetY || offsetX;
+		$.ctx.shadowBlur = $._shadowBlur = blur || 0;
+	};
+
+	$.noShadow = () => {
+		$.ctx.shadowOffsetX = $.ctx.shadowOffsetY = $.ctx.shadowBlur = 0;
+	};
+
 	// DRAWING MATRIX
 
 	$.translate = (x, y) => {

diff --git a/src/q5-2d-image.js b/src/q5-2d-image.js
@@ -117,16 +117,35 @@ Q5.renderers.q2d.image = ($, q) => {
 		$.ctx.drawImage(drawable, sx * pd, sy * pd, sw, sh, dx, dy, dw, dh);
 
 		if ($._tint) {
-			$.ctx.shadowBlur = 0;
+			$.ctx.save();
+
 			$.ctx.shadowOffsetX = 0;
 			$.ctx.shadowOffsetY = 0;
+			$.ctx.shadowBlur = 0;
+
+			if (img.canvas.alpha) {
+				img.tintImg ??= $.createImage(dw, dh);
+				if (img.tintImg.width != dw || img.tintImg.height != dh) {
+					img.tintImg.resize(dw, dh);
+				}
+
+				let tnt = img.tintImg.ctx;
+				tnt.globalCompositeOperation = 'copy';
+				tnt.fillStyle = $._tint;
+				tnt.fillRect(0, 0, dw, dh);
+
+				tnt.globalCompositeOperation = 'destination-in';
+				tnt.drawImage(drawable, 0, 0, dw, dh);
+
+				$.ctx.globalCompositeOperation = 'multiply';
+				$.ctx.drawImage(img.tintImg.canvas, 0, 0, dw, dh, dx, dy, dw, dh);
+			} else {
+				$.ctx.globalCompositeOperation = 'multiply';
+				$.ctx.fillStyle = $._tint;
+				$.ctx.fillRect(dx, dy, dw, dh);
+			}
 
-			let fill = $.ctx.fillStyle;
-			$.ctx.globalCompositeOperation = 'multiply';
-			$.ctx.fillStyle = $._tint.toString();
-			$.ctx.fillRect(dx, dy, dw, dh);
-			$.ctx.globalCompositeOperation = 'source-over';
-			$.ctx.fillStyle = fill;
+			$.ctx.restore();
 		}
 	};
 
@@ -282,7 +301,7 @@ Q5.renderers.q2d.image = ($, q) => {
 	if ($._scope == 'image') return;
 
 	$.tint = function (c) {
-		$._tint = c._q5Color ? c : $.color(...arguments);
+		$._tint = (c._q5Color ? c : $.color(...arguments)).toString();
 	};
 	$.noTint = () => ($._tint = null);
 };

diff --git a/src/q5-canvas.js b/src/q5-canvas.js
@@ -296,6 +296,10 @@ Q5.modules.canvas = ($, q) => {
 		'_doFill',
 		'_strokeSet',
 		'_fillSet',
+		'_shadow',
+		'_shadowOffsetX',
+		'_shadowOffsetY',
+		'_shadowBlur',
 		'_tint',
 		'_imageMode',
 		'_rectMode',

diff --git a/src/q5-core.js b/src/q5-core.js
@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.9
+ * @version 2.10
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -311,7 +311,7 @@ function createCanvas(w, h, opt) {
 	}
 }
 
-Q5.version = Q5.VERSION = '2.9';
+Q5.version = Q5.VERSION = '2.10';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {