From 2574793e4f2527bf342cca73298dd2c59d1749e6 Mon Sep 17 00:00:00 2001
From: tim h <zero01101@gmail.com>
Date: Sun, 27 Nov 2022 13:21:17 -0600
Subject: [PATCH] finally

---
 js/ui/tool/dream.js | 58 +++++++++++++++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index 8c40d88..670b491 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -47,12 +47,16 @@ const dream_generate_callback = (evn, state) => {
 			// Get init image
 			auxCtx.fillRect(0, 0, bb.w, bb.h);
 			auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
+			// console.log("drawImage imgCanvas:\n" + auxCanvas.toDataURL());
 			request.init_images = [auxCanvas.toDataURL()];
 
 			// Get mask image
 			auxCtx.fillStyle = "#000F";
 			auxCtx.fillRect(0, 0, bb.w, bb.h);
+			// console.log("auxCtx fillRect #000F:\n" + auxCanvas.toDataURL());
 			if (state.invertMask) {
+				// overmasking by definition is entirely pointless with an inverted mask outpaint
+				// since it should explicitly avoid brushed masks too, we just won't even bother
 				auxCtx.globalCompositeOperation = "destination-in";
 				auxCtx.drawImage(
 					maskPaintCanvas,
@@ -65,13 +69,32 @@ const dream_generate_callback = (evn, state) => {
 					bb.w,
 					bb.h
 				);
+				// console.log(
+				// 	"invertMask drawImage maskPaintCanvas dest-in:\n" +
+				// 		auxCanvas.toDataURL()
+				// );
 
 				auxCtx.globalCompositeOperation = "destination-in";
 				auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
+				// console.log(
+				// 	"invertMask drawImage imgCanvas dest-in:\n" + auxCanvas.toDataURL()
+				// );
 			} else {
 				auxCtx.globalCompositeOperation = "destination-in";
 				auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
-				auxCtx.globalCompositeOperation = "destination-out";
+				// console.log("drawImage imgCanvas dest-in:\n" + auxCanvas.toDataURL());
+				// here's where to overmask to avoid including the brushed mask - 99% of my issues were from failing to set source-over for the overmask blotches
+				if (state.overMaskPx > 0) {
+					// transparent to white first
+					auxCtx.globalCompositeOperation = "destination-atop";
+					auxCtx.fillStyle = "#FFFF";
+					auxCtx.fillRect(0, 0, bb.w, bb.h);
+					// console.log("pre-overmask fillRect #FFFF:\n" + auxCanvas.toDataURL());
+					applyOvermask(auxCanvas, auxCtx, state.overMaskPx);
+					// console.log("overmask applied:\n" + auxCanvas.toDataURL());
+				}
+
+				auxCtx.globalCompositeOperation = "destination-out"; // ???
 				auxCtx.drawImage(
 					maskPaintCanvas,
 					bb.x,
@@ -83,15 +106,15 @@ const dream_generate_callback = (evn, state) => {
 					bb.w,
 					bb.h
 				);
+				// console.log(
+				// 	"drawImage maskPaintCanvas dest-out:\n" + auxCanvas.toDataURL()
+				// );
 			}
 			auxCtx.globalCompositeOperation = "destination-atop";
 			auxCtx.fillStyle = "#FFFF";
 			auxCtx.fillRect(0, 0, bb.w, bb.h);
-			var currentMask = auxCanvas.toDataURL();
-			request.mask =
-				state.overMaskPx > 0
-					? applyOvermask(auxCanvas, auxCtx, state.overMaskPx, currentMask)
-					: currentMask;
+			// console.log("fillRect #FFFF dest-atop:\n" + auxCanvas.toDataURL());
+			request.mask = auxCanvas.toDataURL();
 			// Dream
 			dream(bb.x, bb.y, request, {method: "img2img", stopMarching, bb});
 		}
@@ -112,21 +135,17 @@ 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);
+	// console.log("submitted canvas to overmask:\n" + canvas.toDataURL());
 	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),
+			ctx.beginPath();
+			ctx.arc(
+				(i / 4) % canvas.width,
+				Math.floor(i / 4 / canvas.width),
 				scaleFactor +
 					rando +
 					(rando > scaleFactor ? rando / scaleFactor : scaleFactor / rando), // was 4 * sf + rando, too big, but i think i want it more ... random
@@ -134,11 +153,14 @@ function applyOvermask(canvas, ctx, px) {
 				2 * Math.PI,
 				true
 			);
-			omCtx.fillStyle = "#FFFFFFFF";
-			omCtx.fill();
+			ctx.globalCompositeOperation = "source-over";
+			ctx.fillStyle = "#FFFF";
+			ctx.fill();
+			// if (i % 100000 == 0) {
+			// 	console.log("blotched src-over:\n" + canvas.toDataURL());
+			// }
 		}
 	}
-	return tmpOvermaskCanvas.toDataURL();
 }
 
 /**