the inglorious return of overmasking

Former-commit-id: 1a81a3f783d0bf78f530b9a72db090f9ed65d8ae

index.html

@@ -107,12 +107,6 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
 					name="scaleFactor"
 					min="1"
 					max="16" /><br />
-				<label for="cbxSnap">Snap to grid?</label>
-				<input
-					type="checkbox"
-					id="cbxSnap"
-					onchange="changeSnapMode()"
-					checked="checked" /><br />
 				<label for="cbxHRFix">Auto txt2img HRfix?</label>
 				<input
 					type="checkbox"

js/index.js

@@ -181,7 +181,6 @@ function startup() {
 	changeCfgScale();
 	changeBatchCount();
 	changeBatchSize();
-	changeSnapMode();
 	changeMaskBlur();
 	changeSeed();
 	changeOverMaskPx();
@@ -577,10 +576,6 @@ const changeSteps = sliderChangeHandlerFactory(
 	30
 );
 
-function changeSnapMode() {
-	snapToGrid = document.getElementById("cbxSnap").checked;
-}
-
 function changeMaskBlur() {
 	stableDiffusionData.mask_blur = document.getElementById("maskBlur").value;
 	localStorage.setItem("mask_blur", stableDiffusionData.mask_blur);

js/ui/tool/dream.js

@@ -68,8 +68,16 @@ const dream_generate_callback = (evn, state) => {
 			auxCtx.globalCompositeOperation = "destination-atop";
 			auxCtx.fillStyle = "#FFFF";
 			auxCtx.fillRect(0, 0, bb.w, bb.h);
-			request.mask = auxCanvas.toDataURL();
-
+			var currentMask = auxCanvas.toDataURL();
+			request.mask =
+				document.getElementById("overMaskPx").value > 0
+					? applyOvermask(
+							auxCanvas,
+							auxCtx,
+							document.getElementById("overMaskPx").value,
+							currentMask
+					  )
+					: currentMask;
 			// Dream
 			dream(bb.x, bb.y, request, {method: "img2img", stopMarching, bb});
 		}
@@ -86,6 +94,37 @@ const dream_erase_callback = (evn, state) => {
 	commands.runCommand("eraseImage", "Erase Area", bb);
 };
 
+function applyOvermask(canvas, ctx, px) {
+	// :badpokerface: look it might be all placebo but i like overmask lol
+	// yes it's crushingly inefficient i knooow :( must fix
+	// https://stackoverflow.com/a/30204783 was instrumental to this working or completely to blame for this disaster depending on your interpretation
+	const tmpOvermaskCanvas = document.createElement("canvas");
+	tmpOvermaskCanvas.width = canvas.width;
+	tmpOvermaskCanvas.height = canvas.height;
+	var ctxImgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+	const omCtx = tmpOvermaskCanvas.getContext("2d");
+	omCtx.putImageData(ctxImgData, 0, 0);
+	for (i = 0; i < ctxImgData.data.length; i += 4) {
+		if (ctxImgData.data[i] == 255) {
+			// white pixel?
+			// just blotch all over the thing
+			var rando = Math.floor(Math.random() * px);
+			omCtx.beginPath();
+			omCtx.arc(
+				(i / 4) % tmpOvermaskCanvas.width,
+				Math.floor(i / 4 / tmpOvermaskCanvas.width),
+				scaleFactor + rando, // was 4 * sf + rando, too big
+				0,
+				2 * Math.PI,
+				true
+			);
+			omCtx.fillStyle = "#FFFFFFFF";
+			omCtx.fill();
+		}
+	}
+	return tmpOvermaskCanvas.toDataURL();
+}
+
 /**
  * Image to Image
  */