undefined - Initial Deployment

index.html

@@ -24,7 +24,7 @@
             gap: 2rem;
             justify-content: center;
             width: 100%;
-            max-width: 1200px;
+            max-width: 1400px;
         }
         .canvas-container {
             display: flex;
@@ -55,7 +55,7 @@
             display: flex;
             flex-direction: column;
             gap: 1rem;
-            min-width: 250px;
+            min-width: 280px;
         }
         .control-group {
             display: flex;
@@ -69,6 +69,8 @@
             padding: 0.5rem;
             border: 1px solid #ccc;
             border-radius: 4px;
+            box-sizing: border-box;
+            width: 100%;
         }
         .control-group input[type="checkbox"] {
             width: 20px;
@@ -148,6 +150,10 @@
             <div class="control-group">
                 <label for="n-size">Pattern Size (N)</label>
                 <input type="number" id="n-size" value="3" min="2" max="5">
+            </div>
+             <div class="control-group">
+                <label for="input-dim">Input Grid Size</label>
+                <input type="number" id="input-dim" value="20" min="10" max="40">
             </div>
             <div class="control-group">
                 <label for="output-width">Output Width</label>
@@ -183,7 +189,7 @@
 
         <div class="canvas-container">
             <h2>Input Canvas</h2>
-            <canvas id="input-canvas" width="200" height="200"></canvas>
+            <canvas id="input-canvas" width="300" height="300"></canvas>
         </div>
 
         <div class="canvas-container">
@@ -200,6 +206,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const outputCanvas = document.getElementById('output-canvas');
     const outputCtx = outputCanvas.getContext('2d');
     const nSizeInput = document.getElementById('n-size');
+    const inputDimInput = document.getElementById('input-dim'); // New
     const outputWidthInput = document.getElementById('output-width');
     const outputHeightInput = document.getElementById('output-height');
     const augmentCheckbox = document.getElementById('augment');
@@ -211,12 +218,13 @@ document.addEventListener('DOMContentLoaded', () => {
     const colorPicker = document.getElementById('color-picker');
 
     // --- DRAWING STATE ---
-    const INPUT_DIM = 20; // 20x20 grid for input
-    const PIXEL_SIZE = inputCanvas.width / INPUT_DIM;
+    let inputDim = parseInt(inputDimInput.value);
+    let pixelSize = inputCanvas.width / inputDim;
     let isDrawing = false;
-    let colors = ['#ffffff', '#000000', '#007bff', '#28a745'];
+    // Expanded color palette
+    let colors = ['#ffffff', '#000000', '#f44336', '#ffeb3b', '#4caf50', '#2196f3', '#9c27b0', '#ff9800'];
     let currentColorIndex = 1;
-    let inputGrid = Array.from({ length: INPUT_DIM }, () => Array(INPUT_DIM).fill(0));
+    let inputGrid = [];
 
     // --- HELPER FUNCTIONS ---
     const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
@@ -250,33 +258,41 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function drawInputGrid() {
         inputCtx.clearRect(0, 0, inputCanvas.width, inputCanvas.height);
-        for (let y = 0; y < INPUT_DIM; y++) {
-            for (let x = 0; x < INPUT_DIM; x++) {
+        for (let y = 0; y < inputDim; y++) {
+            for (let x = 0; x < inputDim; x++) {
                 inputCtx.fillStyle = colors[inputGrid[y][x]];
-                inputCtx.fillRect(x * PIXEL_SIZE, y * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
+                inputCtx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
             }
         }
         // Draw grid lines for clarity
         inputCtx.strokeStyle = '#ddd';
         inputCtx.lineWidth = 0.5;
-        for (let i = 0; i <= INPUT_DIM; i++) {
+        for (let i = 0; i <= inputDim; i++) {
             inputCtx.beginPath();
-            inputCtx.moveTo(i * PIXEL_SIZE, 0);
-            inputCtx.lineTo(i * PIXEL_SIZE, inputCanvas.height);
+            inputCtx.moveTo(i * pixelSize, 0);
+            inputCtx.lineTo(i * pixelSize, inputCanvas.height);
             inputCtx.stroke();
             inputCtx.beginPath();
-            inputCtx.moveTo(0, i * PIXEL_SIZE);
-            inputCtx.lineTo(inputCanvas.width, i * PIXEL_SIZE);
+            inputCtx.moveTo(0, i * pixelSize);
+            inputCtx.lineTo(inputCanvas.width, i * pixelSize);
             inputCtx.stroke();
         }
     }
+    
+    // NEW: Function to reset the input canvas based on new dimensions
+    function resetInputCanvas() {
+        inputDim = parseInt(inputDimInput.value);
+        pixelSize = inputCanvas.width / inputDim;
+        inputGrid = Array.from({ length: inputDim }, () => Array(inputDim).fill(0));
+        drawInputGrid();
+    }
 
     function handleDraw(event) {
         if (!isDrawing) return;
         const rect = inputCanvas.getBoundingClientRect();
-        const x = Math.floor((event.clientX - rect.left) / PIXEL_SIZE);
-        const y = Math.floor((event.clientY - rect.top) / PIXEL_SIZE);
-        if (x >= 0 && x < INPUT_DIM && y >= 0 && y < INPUT_DIM) {
+        const x = Math.floor((event.clientX - rect.left) / pixelSize);
+        const y = Math.floor((event.clientY - rect.top) / pixelSize);
+        if (x >= 0 && x < inputDim && y >= 0 && y < inputDim) {
             if (inputGrid[y][x] !== currentColorIndex) {
                 inputGrid[y][x] = currentColorIndex;
                 drawInputGrid();
@@ -288,26 +304,26 @@ document.addEventListener('DOMContentLoaded', () => {
     inputCanvas.addEventListener('mouseup', () => { isDrawing = false; });
     inputCanvas.addEventListener('mouseleave', () => { isDrawing = false; });
     inputCanvas.addEventListener('mousemove', handleDraw);
-
-    clearBtn.addEventListener('click', () => {
-        inputGrid = Array.from({ length: INPUT_DIM }, () => Array(INPUT_DIM).fill(0));
-        drawInputGrid();
-    });
     
-    // Default pattern
+    // NEW: Event listener for changing input grid size
+    inputDimInput.addEventListener('change', resetInputCanvas);
+    clearBtn.addEventListener('click', resetInputCanvas); // Clear button now also uses the reset function
+    
+    // Default pattern, now scales with inputDim
     function createDefaultPattern() {
-        inputGrid = Array.from({ length: INPUT_DIM }, () => Array(INPUT_DIM).fill(0));
-        // A simple cross pattern
-        for(let i = 5; i < 15; i++) {
-            inputGrid[10][i] = 1; // black line
-            inputGrid[i][10] = 2; // blue line
-        }
-        inputGrid[10][10] = 3; // green center
+        inputGrid = Array.from({ length: inputDim }, () => Array(inputDim).fill(0));
+        const center = Math.floor(inputDim / 2);
+        const start = Math.floor(inputDim / 4);
+        const end = inputDim - start;
+        for(let i = start; i < end; i++) {
+            inputGrid[center][i] = 1; // Black line
+            inputGrid[i][center] = 2; // Red line
+        }
+        inputGrid[center][center] = 3; // Yellow center
     }
 
 
-    // --- WFC ALGORITHM ---
-    
+    // --- WFC ALGORITHM (No changes needed in this class) ---
     class WFC {
         constructor(inputGrid, N, outputWidth, outputHeight, useAugmentations, visualizeCallback) {
             this.N = N;
@@ -322,9 +338,7 @@ document.addEventListener('DOMContentLoaded', () => {
             this.parseInput(inputGrid);
             this.buildAdjacency();
 
-            // The "wave" is the main grid for the output
             this.wave = [];
-            // Track entropy for quick lookup
             this.entropy = [];
             this.allPatternIndices = Array.from({ length: this.patterns.length }, (_, i) => i);
 
@@ -332,19 +346,18 @@ document.addEventListener('DOMContentLoaded', () => {
                 this.wave[y] = [];
                 this.entropy[y] = [];
                 for (let x = 0; x < outputWidth; x++) {
-                    // Each cell in the wave can initially be any pattern
                     this.wave[y][x] = [...this.allPatternIndices];
                     this.entropy[y][x] = this.patterns.length;
                 }
             }
         }
-
-        // 1. Read the input and count NxN patterns.
         parseInput(grid) {
             const patternMap = new Map();
+            const gridHeight = grid.length;
+            const gridWidth = grid[0].length;
 
-            for (let y = 0; y < grid.length - this.N + 1; y++) {
-                for (let x = 0; x < grid[0].length - this.N + 1; x++) {
+            for (let y = 0; y <= gridHeight - this.N; y++) {
+                for (let x = 0; x <= gridWidth - this.N; x++) {
                     const pattern = [];
                     for (let dy = 0; dy < this.N; dy++) {
                         pattern.push(...grid[y + dy].slice(x, x + this.N));
@@ -373,8 +386,6 @@ document.addEventListener('DOMContentLoaded', () => {
                 throw new Error("No patterns found. Try a larger or more varied input, or a smaller N.");
             }
         }
-
-        // (optional) Augment pattern data with rotations and reflections.
         getAugmentations(pattern) {
             const augmentations = new Set();
             let current = pattern;
@@ -385,7 +396,6 @@ document.addEventListener('DOMContentLoaded', () => {
             }
             return Array.from(augmentations).map(hash => hash.split(',').map(Number));
         }
-        
         rotate(p) {
             const newPattern = Array(this.N * this.N);
             for (let y = 0; y < this.N; y++) {
@@ -395,7 +405,6 @@ document.addEventListener('DOMContentLoaded', () => {
             }
             return newPattern;
         }
-
         reflect(p) {
             const newPattern = Array(this.N * this.N);
             for (let y = 0; y < this.N; y++) {
@@ -405,109 +414,67 @@ document.addEventListener('DOMContentLoaded', () => {
             }
             return newPattern;
         }
-
-        // Pre-calculate which patterns can be placed next to each other.
         buildAdjacency() {
-            this.adjacency = {}; // { patternIndex: { dx, dy: [valid neighbor indices] } }
+            this.adjacency = {};
             for (let i = 0; i < this.patterns.length; i++) {
-                this.adjacency[i] = {
-                    '1,0': [],  // Right
-                    '-1,0': [], // Left
-                    '0,1': [],  // Down
-                    '0,-1': []  // Up
-                };
+                this.adjacency[i] = { '1,0': [], '-1,0': [], '0,1': [], '0,-1': [] };
             }
-            
             for (let i = 0; i < this.patterns.length; i++) {
                 for (let j = 0; j < this.patterns.length; j++) {
-                    const p1 = this.patterns[i];
-                    const p2 = this.patterns[j];
-
-                    // Check Right: p2 is to the right of p1
-                    if (this.checkOverlap(p1, p2, 1, 0)) this.adjacency[i]['1,0'].push(j);
-                    // Check Left: p2 is to the left of p1
-                    if (this.checkOverlap(p1, p2, -1, 0)) this.adjacency[i]['-1,0'].push(j);
-                    // Check Down: p2 is below p1
-                    if (this.checkOverlap(p1, p2, 0, 1)) this.adjacency[i]['0,1'].push(j);
-                    // Check Up: p2 is above p1
-                    if (this.checkOverlap(p1, p2, 0, -1)) this.adjacency[i]['0,-1'].push(j);
+                    if (this.checkOverlap(this.patterns[i], this.patterns[j], 1, 0)) this.adjacency[i]['1,0'].push(j);
+                    if (this.checkOverlap(this.patterns[i], this.patterns[j], -1, 0)) this.adjacency[i]['-1,0'].push(j);
+                    if (this.checkOverlap(this.patterns[i], this.patterns[j], 0, 1)) this.adjacency[i]['0,1'].push(j);
+                    if (this.checkOverlap(this.patterns[i], this.patterns[j], 0, -1)) this.adjacency[i]['0,-1'].push(j);
                 }
             }
         }
-        
         checkOverlap(p1, p2, dx, dy) {
-            // Checks if p2 can be placed at offset (dx, dy) from p1
             for (let y = 0; y < this.N; y++) {
                 for (let x = 0; x < this.N; x++) {
                     const nx = x - dx;
                     const ny = y - dy;
                     if (nx >= 0 && nx < this.N && ny >= 0 && ny < this.N) {
-                        if (p1[y * this.N + x] !== p2[ny * this.N + nx]) {
-                            return false;
-                        }
+                        if (p1[y * this.N + x] !== p2[ny * this.N + nx]) return false;
                     }
                 }
             }
             return true;
         }
-
-
-        // 4. Main Loop
         async run() {
             let iterations = this.outputWidth * this.outputHeight;
             while(iterations > 0) {
                 const collapsedCoords = this.observe();
-                if (collapsedCoords === null) {
-                    // Finished successfully
-                    return this.generateOutput();
-                }
-
+                if (collapsedCoords === null) return this.generateOutput();
                 const contradiction = this.propagate(collapsedCoords);
-                if (contradiction) {
-                    throw new Error("Contradiction reached. Cannot continue.");
-                }
-                
+                if (contradiction) throw new Error("Contradiction reached. Cannot continue.");
                 iterations--;
                 if (this.visualizeCallback) {
-                   await this.visualizeCallback(this.entropy, this.patterns.length);
-                   await sleep(0); // Yield to the browser to render changes
+                   await this.visualizeCallback(this.wave, this.patterns.length);
+                   await sleep(0);
                 }
             }
-            // If loop finishes, it's also a success
             return this.generateOutput();
         }
-
-        // 4a. Observation: Find the cell with the lowest entropy and collapse it.
         observe() {
             let minEntropy = Infinity;
             let minCoords = null;
-            
-            // Find cell with minimum non-zero entropy
             for (let y = 0; y < this.outputHeight; y++) {
                 for (let x = 0; x < this.outputWidth; x++) {
-                    const ent = this.entropy[y][x];
-                    if (ent > 1 && ent < minEntropy) {
-                        minEntropy = ent;
+                    const possibilities = this.wave[y][x].length;
+                    if (possibilities > 1 && possibilities < minEntropy) {
+                        minEntropy = possibilities;
                         minCoords = [{x, y}];
-                    } else if (ent > 1 && ent === minEntropy) {
+                    } else if (possibilities > 1 && possibilities === minEntropy) {
                         minCoords.push({x, y});
                     }
                 }
             }
-            
-            if (minCoords === null) {
-                return null; // All cells collapsed
-            }
-
-            // Break ties randomly
+            if (minCoords === null) return null;
             const choice = minCoords[Math.floor(Math.random() * minCoords.length)];
             const {x, y} = choice;
-            
-            // Collapse the chosen cell
             const possiblePatterns = this.wave[y][x];
             const totalWeight = possiblePatterns.reduce((sum, pIndex) => sum + this.patternWeights[pIndex], 0);
             let rnd = Math.random() * totalWeight;
-
             let chosenPattern;
             for(const pIndex of possiblePatterns) {
                 rnd -= this.patternWeights[pIndex];
@@ -516,70 +483,45 @@ document.addEventListener('DOMContentLoaded', () => {
                     break;
                 }
             }
-
             this.wave[y][x] = [chosenPattern];
-            this.entropy[y][x] = 1;
-
             return {x, y};
         }
-
-        // 4b. Propagation: Update neighbors based on the recent collapse.
         propagate(startCoords) {
             const stack = [startCoords];
-            
             while(stack.length > 0) {
                 const {x, y} = stack.pop();
                 const currentPatterns = this.wave[y][x];
-                
-                // For each neighbor
                 for (const [dx, dy] of [[0,1], [0,-1], [1,0], [-1,0]]) {
                     const nx = x + dx;
                     const ny = y + dy;
-                    
                     if (nx < 0 || nx >= this.outputWidth || ny < 0 || ny >= this.outputHeight) continue;
-                    
                     let neighborPatterns = this.wave[ny][nx];
                     if(neighborPatterns.length <= 1) continue;
-
-                    // Get all patterns that are valid neighbors in this direction
                     const validNeighboringPatterns = new Set();
-                    const directionKey = `${-dx},${-dy}`; // from neighbor's perspective
+                    const directionKey = `${-dx},${-dy}`;
                     for (const pIndex of currentPatterns) {
-                        this.adjacency[pIndex][directionKey].forEach(validIndex => {
-                            validNeighboringPatterns.add(validIndex);
-                        });
+                        this.adjacency[pIndex][directionKey].forEach(validIndex => validNeighboringPatterns.add(validIndex));
                     }
-
-                    // Filter neighbor's possibilities
                     const originalLength = neighborPatterns.length;
                     const newNeighborPatterns = neighborPatterns.filter(pIndex => validNeighboringPatterns.has(pIndex));
-                    
-                    if (newNeighborPatterns.length === 0) {
-                        return true; // Contradiction!
-                    }
-
+                    if (newNeighborPatterns.length === 0) return true;
                     if (newNeighborPatterns.length < originalLength) {
                         this.wave[ny][nx] = newNeighborPatterns;
-                        this.entropy[ny][nx] = newNeighborPatterns.length;
                         stack.push({x: nx, y: ny});
                     }
                 }
             }
-            return false; // No contradiction
+            return false;
         }
-
-        // 5. Create the final image from the collapsed wave.
         generateOutput() {
             const outputGrid = Array.from({ length: this.outputHeight }, () => Array(this.outputWidth));
             for (let y = 0; y < this.outputHeight; y++) {
                 for (let x = 0; x < this.outputWidth; x++) {
                     if (this.wave[y][x].length > 0) {
-                        const patternIndex = this.wave[y][x][0];
-                        const pattern = this.patterns[patternIndex];
-                        // Render the top-left pixel of the pattern at this position
+                        const pattern = this.patterns[this.wave[y][x][0]];
                         outputGrid[y][x] = pattern[0];
                     } else {
-                         outputGrid[y][x] = 0; // Should not happen in success case
+                         outputGrid[y][x] = 0;
                     }
                 }
             }
@@ -589,21 +531,18 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
     // --- MAIN EXECUTION ---
-    
     async function handleGenerate() {
         generateBtn.disabled = true;
         statusDiv.textContent = 'Starting...';
         statusDiv.style.color = '#333';
         
-        // Resize output canvas
         const outputWidth = parseInt(outputWidthInput.value);
         const outputHeight = parseInt(outputHeightInput.value);
         outputCanvas.width = outputWidth * 10;
         outputCanvas.height = outputHeight * 10;
         outputCtx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
 
-
-        await sleep(10); // Allow UI to update
+        await sleep(10);
         
         try {
             statusDiv.textContent = '1. Parsing input patterns...';
@@ -613,15 +552,16 @@ document.addEventListener('DOMContentLoaded', () => {
 
             let visualizeCallback = null;
             if (visualize) {
-                visualizeCallback = (entropyGrid, maxEntropy) => {
+                visualizeCallback = (wave, maxEntropy) => {
                     const pixelW = outputCanvas.width / outputWidth;
                     const pixelH = outputCanvas.height / outputHeight;
                     outputCtx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
                     for(let y = 0; y < outputHeight; y++) {
                         for (let x = 0; x < outputWidth; x++) {
-                           const entropy = entropyGrid[y][x];
+                           const entropy = wave[y][x].length;
                            if(entropy === 1) {
-                               outputCtx.fillStyle = '#00ff00'; // Green for collapsed
+                               const colorIndex = wfc.patterns[wave[y][x][0]][0];
+                               outputCtx.fillStyle = colors[colorIndex];
                            } else {
                                const grayscale = Math.floor(255 * (1 - (entropy / maxEntropy)));
                                outputCtx.fillStyle = `rgb(${grayscale}, ${grayscale}, ${grayscale})`;
@@ -634,7 +574,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
             const wfc = new WFC(inputGrid, N, outputWidth, outputHeight, useAugmentations, visualizeCallback);
             
-            statusDiv.textContent = '2. Running WFC algorithm... (this may take a moment)';
+            statusDiv.textContent = '2. Running WFC algorithm...';
             await sleep(10);
             
             const resultGrid = await wfc.run();
@@ -642,14 +582,13 @@ document.addEventListener('DOMContentLoaded', () => {
             statusDiv.textContent = '3. Rendering output...';
             await sleep(10);
 
-            // Draw final result
             const pixelW = outputCanvas.width / outputWidth;
             const pixelH = outputCanvas.height / outputHeight;
             outputCtx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
             for(let y = 0; y < outputHeight; y++) {
                 for (let x = 0; x < outputWidth; x++) {
                     const colorIndex = resultGrid[y][x];
-                    outputCtx.fillStyle = colors[colorIndex] || '#ff00ff'; // Magenta for errors
+                    outputCtx.fillStyle = colors[colorIndex] || '#ff00ff';
                     outputCtx.fillRect(x * pixelW, y * pixelH, pixelW, pixelH);
                 }
             }
@@ -668,12 +607,15 @@ document.addEventListener('DOMContentLoaded', () => {
 
     generateBtn.addEventListener('click', handleGenerate);
 
-    // Initial setup
-    createDefaultPattern();
-    updatePalette();
-    drawInputGrid();
+    // --- INITIALIZATION ---
+    function initialize() {
+        updatePalette();
+        createDefaultPattern();
+        drawInputGrid();
+    }
+    
+    initialize();
 });
-
 </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=EnovinxSchool/wave-collapse-function-not-designed-by-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>