fix dithering bug

script.js

@@ -599,9 +599,11 @@
     const pCols = OUTPUT_SIZE;
     const pRows = OUTPUT_SIZE;
 
-    outputCanvas.width = pCols * currentPatternSize;
+    const canvasWidth = pCols + currentPatternSize - 1;
-    outputCanvas.height = pRows * currentPatternSize;
+    const canvasHeight = pRows + currentPatternSize - 1;
-    outputCtx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+    outputCanvas.width = canvasWidth;
+    outputCanvas.height = canvasHeight;
+    outputCtx.clearRect(0, 0, canvasWidth, canvasHeight);
 
     stats.grid.pCols = pCols;
     stats.grid.pRows = pRows;
@@ -746,15 +748,30 @@
       phase = 'done';
       statusEl.textContent = 'WFC complete!';
       stats.wfcRun.status = 'WFC Complete!';
-        if (payload.finalStats)
+      if (payload.finalStats) {
           Object.assign(stats.wfcRun, payload.finalStats.wfcRun || {});
+      }
       if (stats.wfcRun.startTime > 0 && stats.wfcRun.endTime === 0) {
           stats.wfcRun.endTime = performance.now();
-          stats.wfcRun.durationMs =
+          stats.wfcRun.durationMs = stats.wfcRun.endTime - stats.wfcRun.startTime;
-            stats.wfcRun.endTime - stats.wfcRun.startTime;
       }
+
+      // Use the definitive final grid from the payload to force a full redraw.
+      if (payload.finalGrid) {
+          payload.finalGrid.forEach((row, r) => {
+              row.forEach((cellOptions, c) => {
+                  // We use addDirtyTile to update our internal state and queue the draw
+                  addDirtyTile(c, r, cellOptions);
+              });
+          });
+      }
+      
+      // Immediately draw all the tiles from the final grid.
       processAndDrawDirtyTiles(); 
-        if (solverWorker) solverWorker.terminate();
+
+      if (solverWorker) {
+          solverWorker.terminate();
+      }
       break;
       case 'WFC_FAILED':
         phase = 'error';
@@ -854,8 +871,8 @@
   function drawTile(c, r, cellOptions, patternArrayForDrawing, pSize) {
     if (!cellOptions || !patternArrayForDrawing) return;
     const numOptions = cellOptions.length;
-    const pixelX = c * pSize;
+    const pixelX = c;
-    const pixelY = r * pSize;
+    const pixelY = r;
 
     if (numOptions === 1) {
       drawCollapsedPatternForCell(

wfc_setup_worker.js

@@ -215,6 +215,9 @@ function extractPatterns() {
   });
 }
 
+// --- CORRECTED `buildAdjacency` for the OVERLAPPING MODEL ---
+// --- Paste this into wfc_setup_worker.js ---
+
 function buildAdjacency() {
   const t1 = performance.now();
   adjacency = {};
@@ -223,7 +226,6 @@ function buildAdjacency() {
   let ruleCount = 0;
 
   for (const pat of patterns) {
-    // patterns is an array of pattern objects
     adjacency[pat.id] = { up: [], down: [], left: [], right: [] };
   }
 
@@ -240,15 +242,18 @@ function buildAdjacency() {
         ruleCount++;
         continue;
       }
+      
+      // Check if q can be to the RIGHT of p (OVERLAPPING MODEL)
+      // The right N-1 columns of p must match the left N-1 columns of q.
       let canSitRight = true;
       if (pSize > 1) {
-        for (let r = 0; r < pSize; r++) {
+        for (let r = 0; r < pSize; r++) {           // For each row
-          for (let c = 0; c < pSize - 1; c++) {
+          for (let c = 0; c < pSize - 1; c++) {   // For each overlapping column
             for (let ch = 0; ch < 4; ch++) {
-              if (
+              // Compare p's pixel at [r][c+1] with q's pixel at [r][c]
-                p.cells[(r * pSize + (c + 1)) * 4 + ch] !==
+              const pPixel = p.cells[(r * pSize + (c + 1)) * 4 + ch];
-                q.cells[(r * pSize + c) * 4 + ch]
+              const qPixel = q.cells[(r * pSize + c) * 4 + ch];
-              ) {
+              if (pPixel !== qPixel) {
                 canSitRight = false;
                 break;
               }
@@ -258,7 +263,7 @@ function buildAdjacency() {
           if (!canSitRight) break;
         }
       } else {
-        canSitRight = true;
+        canSitRight = true; // 1x1 patterns are always adjacent
       }
 
       if (canSitRight) {
@@ -268,15 +273,17 @@ function buildAdjacency() {
         ruleCount++;
       }
 
+      // Check if q can be DOWN from p (OVERLAPPING MODEL)
+      // The bottom N-1 rows of p must match the top N-1 rows of q.
       let canSitDown = true;
       if (pSize > 1) {
-        for (let c_col = 0; c_col < pSize; c_col++) {
+        for (let r = 0; r < pSize - 1; r++) {   // For each overlapping row
-          for (let r_row = 0; r_row < pSize - 1; r_row++) {
+          for (let c = 0; c < pSize; c++) {     // For each column in that row
             for (let ch = 0; ch < 4; ch++) {
-              if (
+              // Compare p's pixel at [r+1][c] with q's pixel at [r][c]
-                p.cells[((r_row + 1) * pSize + c_col) * 4 + ch] !==
+              const pPixel = p.cells[((r + 1) * pSize + c) * 4 + ch];
-                q.cells[(r_row * pSize + c_col) * 4 + ch]
+              const qPixel = q.cells[(r * pSize + c) * 4 + ch];
-              ) {
+              if (pPixel !== qPixel) {
                 canSitDown = false;
                 break;
               }
@@ -286,7 +293,7 @@ function buildAdjacency() {
           if (!canSitDown) break;
         }
       } else {
-        canSitDown = true;
+        canSitDown = true; // 1x1 patterns are always adjacent
       }
 
       if (canSitDown) {

wfc_solver_worker.js

@@ -372,6 +372,7 @@ function runStepInWorker() {
       payload: { wfcRun: { totalBacktracks: solverRunStats.totalBacktracks } },
     });
 
+    // THIS IS THE CORRECTED BACKTRACKING LOOP
     while (backtrackStack.length > 0) {
         const lastDecision = backtrackStack.pop();
         const {
@@ -405,12 +406,11 @@ function runStepInWorker() {
                 queuedCoordinatesSet.add(coordKeyBacktrack);
             }
 
-        // Push new decision point for this choice
+            // THE FIX: Push the updated decision back onto the stack
             if (backtrackStack.length < MAX_BACKTRACK_DEPTH_W) {
-          // Check before pushing
                 backtrackStack.push({
-            ...lastDecision, // Keep most of the old data
+                    ...lastDecision,
-            lastTriedOptionIndexInList: nextOptionIndexToTryInList, // Update the tried index
+                    lastTriedOptionIndexInList: nextOptionIndexToTryInList,
                 });
                 solverRunStats.maxBacktrackStackDepthReached = Math.max(
                     solverRunStats.maxBacktrackStackDepthReached,
@@ -433,11 +433,6 @@ function runStepInWorker() {
                         },
                     },
                 });
-        } else {
-          // Cannot push new state if max depth would be exceeded by this push.
-          // This implies this new choice, if it leads to immediate contradiction, cannot be further backtracked from this exact point.
-          // This state is tricky; the original code had a check *before* collapse.
-          // For now, we just don't push if it would exceed.
             }
 
             self.postMessage({
@@ -453,13 +448,10 @@ function runStepInWorker() {
             solverPhase = 'propagate';
             backtrackedSuccessfully = true;
 
-        // When backtracking, the entire grid might have changed, so signal main to redraw all from current worker grid state.
-        // This is simpler than tracking all individual changes during backtrack restoration.
             const allTilesUpdate = [];
             for (let r_idx = 0; r_idx < pRows; r_idx++) {
                 for (let c_idx = 0; c_idx < pCols; c_idx++) {
                     if (grid[r_idx] && grid[r_idx][c_idx]) {
-              // Ensure cell exists
                     allTilesUpdate.push({
                         c: c_idx,
                         r: r_idx,
@@ -478,6 +470,7 @@ function runStepInWorker() {
         }
     }
 
+
     if (!backtrackedSuccessfully) {
       self.postMessage({
         type: 'REQUEST_RESTART_FROM_SOLVER',
@@ -495,9 +488,13 @@ function runStepInWorker() {
 
 if (allCollapsed()) {
     solverPhase = 'stop';
+    // Add the final grid to the payload. This is the definitive final state.
     self.postMessage({
       type: 'WFC_COMPLETE',
-      payload: { finalStats: { wfcRun: solverRunStats } },
+      payload: { 
+          finalStats: { wfcRun: solverRunStats },
+          finalGrid: grid 
+      },
     });
     return;
 }