You can now suppress warnings with suppressWarnings. This should be used for any warning that may appear in the future. Also, clicking the button to proceed in the warning notice appends suppressWarnings to the URL parameters.

README.md

@@ -138,6 +138,7 @@ Now you know link fu. Here's a list of customization options:
 - `url` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg)
 - `loops` - (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video.
 - `fps` — the framerate of the effect. Can be any number between 0 and 60. Default is 60.
+- `suppressWarnings` - if set to "true", this suppresses any warnings that would otherwise appear— when viewing the project on a device with no GPU, for example.
 
 ## Troubleshooting
 

js/config.js

@@ -121,6 +121,7 @@ const defaults = {
 	resolution: 0.75, // An overall scale multiplier
 	useHalfFloat: false,
 	renderer: "regl", // The preferred web graphics API
+	suppressWarnings: false, // Whether to show warnings to visitors on load
 	isometric: false,
 	useHoloplay: false,
 	loops: false,
@@ -401,6 +402,7 @@ versions["2021"] = versions.resurrections;
 
 const range = (f, min = -Infinity, max = Infinity) => Math.max(min, Math.min(max, f));
 const nullNaN = (f) => (isNaN(f) ? null : f);
+const isTrue = (s) => s.toLowerCase().includes("true");
 
 const parseColor = (isHSL) => (s) => ({
 	space: isHSL ? "hsl" : "rgb",
@@ -440,7 +442,7 @@ const paramMapping = {
 	version: { key: "version", parser: (s) => s },
 	font: { key: "font", parser: (s) => s },
 	effect: { key: "effect", parser: (s) => s },
-	camera: { key: "useCamera", parser: (s) => s.toLowerCase().includes("true") },
+	camera: { key: "useCamera", parser: isTrue },
 	width: { key: "numColumns", parser: (s) => nullNaN(parseInt(s)) },
 	numColumns: { key: "numColumns", parser: (s) => nullNaN(parseInt(s)) },
 	density: { key: "density", parser: (s) => nullNaN(range(parseFloat(s), 0)) },
@@ -498,13 +500,14 @@ const paramMapping = {
 		parser: (s) => nullNaN(range(parseFloat(s), 0, Infinity)),
 	},
 
-	volumetric: { key: "volumetric", parser: (s) => s.toLowerCase().includes("true") },
+	volumetric: { key: "volumetric", parser: isTrue },
-	loops: { key: "loops", parser: (s) => s.toLowerCase().includes("true") },
+	loops: { key: "loops", parser: isTrue },
 	fps: { key: "fps", parser: (s) => nullNaN(range(parseFloat(s), 0, 60)) },
-	skipIntro: { key: "skipIntro", parser: (s) => s.toLowerCase().includes("true") },
+	skipIntro: { key: "skipIntro", parser: isTrue },
 	renderer: { key: "renderer", parser: (s) => s },
-	once: { key: "once", parser: (s) => s.toLowerCase().includes("true") },
+	suppressWarnings: { key: "suppressWarnings", parser: isTrue },
-	isometric: { key: "isometric", parser: (s) => s.toLowerCase().includes("true") },
+	once: { key: "once", parser: isTrue },
+	isometric: { key: "isometric", parser: isTrue },
 };
 
 paramMapping.paletteRGB = paramMapping.palette;

js/main.js

@@ -18,12 +18,12 @@ const isRunningSwiftShader = () => {
 };
 
 document.body.onload = async () => {
-	const urlParams = Object.fromEntries(new URLSearchParams(window.location.search).entries());
+	const urlParams = new URLSearchParams(window.location.search);
-	const config = makeConfig(urlParams);
+	const config = makeConfig(Object.fromEntries(urlParams.entries()));
 	const useWebGPU = (await supportsWebGPU()) && ["webgpu"].includes(config.renderer?.toLowerCase());
 	const solution = import(`./${useWebGPU ? "webgpu" : "regl"}/main.js`);
 
-	if (isRunningSwiftShader()) {
+	if (isRunningSwiftShader() && !config.suppressWarnings) {
 		const notice = document.createElement("notice");
 		notice.innerHTML = `<div class="notice">
 		<p>Wake up, Neo... you've got hardware acceleration disabled.</p>
@@ -34,6 +34,9 @@ document.body.onload = async () => {
 		canvas.style.display = "none";
 		document.body.appendChild(notice);
 		document.querySelector(".blue.pill").addEventListener("click", async () => {
+			config.suppressWarnings = true;
+			urlParams.set("suppressWarnings", true);
+			history.replaceState({}, "", "?" + unescape(urlParams.toString()));
 			(await solution).default(canvas, config);
 			canvas.style.display = "unset";
 			document.body.removeChild(notice);