2.18.2

q5js · Jan 30, 2025 · b89973f · b89973f
1 parent fbaea31
commit b89973f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.18.1",
+	"version": "2.18.2",
 	"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
@@ -1255,6 +1255,9 @@ let img = createImg('/assets/p5play_logo.webp')
 	 * 
 	 * Use the `value` property to get or set the input's value.
 	 * 
+	 * Use the `placeholder` property to set label text that appears
+	 * inside the input when it's empty.
+	 * 
 	 * See MDN's [input documentation](https://developer.mozilla.org/docs/Web/HTML/Element/input#input_types) for the full list of input types.
 	 * @param {string} [value] initial value
 	 * @param {string} [type] text input type, can be 'text', 'password', 'email', 'number', 'range', 'search', 'tel', 'url'

diff --git a/q5.js b/q5.js
@@ -3549,26 +3549,27 @@ Q5.modules.record = ($) => {
 			}
 		}
 
-		formatSelect = $.createSelect();
+		formatSelect = $.createSelect('format');
 		for (const name in rec.formats) {
 			formatSelect.option(name, rec.formats[name]);
 		}
+		formatSelect.title = 'Video Format';
 		rec.append(formatSelect);
 
-		// prettier-ignore
-		rec.qualityPresets = {
-			SD:   10000000, // 10 Mbps
-			HD:   16000000, // 16 Mbps
-			FHD:  22000000, // 22 Mbps
-			QHD:  28000000, // 28 Mbps
-			'4K': 48000000, // 48 Mbps
-			'8K': 75000000  // 75 Mbps
+		let qMult = {
+			min: 0.1,
+			low: 0.25,
+			mid: 0.5,
+			high: 0.75,
+			ultra: 0.9,
+			max: 1
 		};
 
-		qualitySelect = $.createSelect();
-		for (let name in rec.qualityPresets) {
-			qualitySelect.option(name);
+		qualitySelect = $.createSelect('quality');
+		for (let name in qMult) {
+			qualitySelect.option(name, qMult[name]);
 		}
+		qualitySelect.title = 'Video Quality';
 		rec.append(qualitySelect);
 
 		rec.encoderSettings = {};
@@ -3578,7 +3579,7 @@ Q5.modules.record = ($) => {
 		}
 
 		function changeQuality() {
-			rec.encoderSettings.videoBitsPerSecond = rec.qualityPresets[qualitySelect.value];
+			rec.encoderSettings.videoBitsPerSecond = maxVideoBitRate * qualitySelect.value;
 		}
 
 		formatSelect.addEventListener('change', changeFormat);
@@ -3587,8 +3588,8 @@ Q5.modules.record = ($) => {
 		Object.defineProperty(rec, 'quality', {
 			get: () => qualitySelect.selected,
 			set: (v) => {
-				v = v.toUpperCase();
-				if (rec.qualityPresets[v]) {
+				v = v.toLowerCase();
+				if (qMult[v]) {
 					qualitySelect.selected = v;
 					changeQuality();
 				}
@@ -3607,11 +3608,15 @@ Q5.modules.record = ($) => {
 		});
 
 		let h = $.canvas.height;
-		rec.quality = h >= 4320 ? '8K' : h >= 2160 ? '4K' : h >= 1440 ? 'QHD' : h >= 1080 ? 'FHD' : h >= 720 ? 'HD' : 'SD';
 
 		if (h >= 1440 && rec.formats.VP9) rec.format = 'VP9';
 		else rec.format = 'H.264';
 
+		let maxVideoBitRate =
+			(h >= 4320 ? 128 : h >= 2160 ? 75 : h >= 1440 ? 36 : h >= 1080 ? 28 : h >= 720 ? 22 : 16) * 1000000;
+
+		rec.quality = 'high';
+
 		btn0.addEventListener('click', () => {
 			if (!$.recording) start();
 			else if (!rec.paused) $.pauseRecording();

diff --git a/q5.min.js b/q5.min.js
diff --git a/src/q5-record.js b/src/q5-record.js
@@ -92,26 +92,27 @@ Q5.modules.record = ($) => {
 			}
 		}
 
-		formatSelect = $.createSelect();
+		formatSelect = $.createSelect('format');
 		for (const name in rec.formats) {
 			formatSelect.option(name, rec.formats[name]);
 		}
+		formatSelect.title = 'Video Format';
 		rec.append(formatSelect);
 
-		// prettier-ignore
-		rec.qualityPresets = {
-			SD:   10000000, // 10 Mbps
-			HD:   16000000, // 16 Mbps
-			FHD:  22000000, // 22 Mbps
-			QHD:  28000000, // 28 Mbps
-			'4K': 48000000, // 48 Mbps
-			'8K': 75000000  // 75 Mbps
+		let qMult = {
+			min: 0.1,
+			low: 0.25,
+			mid: 0.5,
+			high: 0.75,
+			ultra: 0.9,
+			max: 1
 		};
 
-		qualitySelect = $.createSelect();
-		for (let name in rec.qualityPresets) {
-			qualitySelect.option(name);
+		qualitySelect = $.createSelect('quality');
+		for (let name in qMult) {
+			qualitySelect.option(name, qMult[name]);
 		}
+		qualitySelect.title = 'Video Quality';
 		rec.append(qualitySelect);
 
 		rec.encoderSettings = {};
@@ -121,7 +122,7 @@ Q5.modules.record = ($) => {
 		}
 
 		function changeQuality() {
-			rec.encoderSettings.videoBitsPerSecond = rec.qualityPresets[qualitySelect.value];
+			rec.encoderSettings.videoBitsPerSecond = maxVideoBitRate * qualitySelect.value;
 		}
 
 		formatSelect.addEventListener('change', changeFormat);
@@ -130,8 +131,8 @@ Q5.modules.record = ($) => {
 		Object.defineProperty(rec, 'quality', {
 			get: () => qualitySelect.selected,
 			set: (v) => {
-				v = v.toUpperCase();
-				if (rec.qualityPresets[v]) {
+				v = v.toLowerCase();
+				if (qMult[v]) {
 					qualitySelect.selected = v;
 					changeQuality();
 				}
@@ -150,11 +151,15 @@ Q5.modules.record = ($) => {
 		});
 
 		let h = $.canvas.height;
-		rec.quality = h >= 4320 ? '8K' : h >= 2160 ? '4K' : h >= 1440 ? 'QHD' : h >= 1080 ? 'FHD' : h >= 720 ? 'HD' : 'SD';
 
 		if (h >= 1440 && rec.formats.VP9) rec.format = 'VP9';
 		else rec.format = 'H.264';
 
+		let maxVideoBitRate =
+			(h >= 4320 ? 128 : h >= 2160 ? 75 : h >= 1440 ? 36 : h >= 1080 ? 28 : h >= 720 ? 22 : 16) * 1000000;
+
+		rec.quality = 'high';
+
 		btn0.addEventListener('click', () => {
 			if (!$.recording) start();
 			else if (!rec.paused) $.pauseRecording();