let cnv; let isMobile; let grid; let emptyPos; // Will be initialized in initializeGrid let isPuzzleSolved = false; // Flag to track solved state let imgA; // Variable for the image // --- Variables for animation --- let tileVisuals = []; // Stores { x, y, tx, ty } for tiles 1 through 15 const ANIMATION_SPEED = 0.15; // Lerp factor for smooth movement let smallSquareSize; // Calculated size of each tile // Helper to get visual center coordinates function getVisualCoords(r, c) { // Calculate the center x and y coordinates for the square at grid position (r, c). // (c - 1.5) and (r - 1.5) center the 4x4 grid around (width/2, height/2) let centerX = width / 2 + (c - 1.5) * smallSquareSize; let centerY = height / 2 + (r - 1.5) * smallSquareSize; return { x: centerX, y: centerY }; } // Helper to get grid position from mouse/touch coordinates function getGridPosition(mx, my) { // Use 95% of the square canvas dimension for the puzzle block size let blockSize = width * 0.95; let s = blockSize / 4; // Top-left corner of the 4x4 block let startX = width / 2 - blockSize / 2; let startY = height / 2 - blockSize / 2; // Calculate column and row (0-3) let c = floor((mx - startX) / s); let r = floor((my - startY) / s); if (r >= 0 && r < 4 && c >= 0 && c < 4) { return { r: r, c: c }; } return null; // Outside the grid } // Checks if the puzzle is in the solved state (1-15 in order, 0 at [3][3]) function isSolved() { let expectedValue = 1; for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { // The last spot (3, 3) must be the empty tile (0) if (i === 3 && j === 3) { if (grid[i][j] !== 0) { return false; } } else { // All other spots must be in sequential order if (grid[i][j] !== expectedValue) { return false; } expectedValue++; } } } return true; } function tryMoveTile(r, c) { if (isPuzzleSolved) return; // Do nothing if the puzzle is already solved // Check if the clicked tile (r, c) is adjacent to the empty spot let { r: er, c: ec } = emptyPos; // Check adjacency: sum of absolute differences in row/col must be 1 let isAdjacent = (abs(r - er) + abs(c - ec) === 1); if (isAdjacent) { let tileValue = grid[r][c]; // 1. LOGICAL Swap: The piece moves into the empty spot grid[er][ec] = tileValue; grid[r][c] = 0; // 2. VISUAL Update: Set the target position (tx, ty) of the moved piece // to the new empty position (er, ec). let newTargetCoords = getVisualCoords(er, ec); tileVisuals[tileValue].tx = newTargetCoords.x; tileVisuals[tileValue].ty = newTargetCoords.y; // 3. Update the position of the empty space emptyPos.r = r; emptyPos.c = c; // 4. Check for solved state after a successful move isPuzzleSolved = isSolved(); } } // Shared click logic function handleClick() { let pos = getGridPosition(mouseX, mouseY); if (pos) { tryMoveTile(pos.r, pos.c); } } function mouseClicked(event) { if (!isMobile) handleClick(); } function touchEnded(event) { if (isMobile) { handleClick(); return false; // prevent default scrolling } } // Calculates the number of inversions in a 1D array of tiles (excluding 0) function calculateInversions(arr) { let inversions = 0; // Iterate through all pairs of tiles for (let i = 0; i < arr.length - 1; i++) { for (let j = i + 1; j < arr.length; j++) { // Count inversions: a larger number precedes a smaller number if (arr[i] > arr[j]) { inversions++; } } } return inversions; } // Creates a truly random, but guaranteed solvable, starting grid function createRandomSolvableGrid() { let tiles = []; for (let i = 1; i <= 15; i++) { tiles.push(i); } // 1. Create a random permutation of tiles 1-15 tiles = shuffle(tiles); // 2. Select a random position for the empty spot (0-3 for r and c) let er = floor(random(4)); let ec = floor(random(4)); emptyPos = { r: er, c: ec }; // 3. Calculate inversions based on the 15 tiles let inversions = calculateInversions(tiles); // 4. Solvability Check (for N=4, even): (Inversions + Empty Row from bottom) must be even. // Row from bottom is (4 - er). let emptyRowFromBottom = 4 - er; let totalParity = inversions + emptyRowFromBottom; // 5. If total parity is odd (unsolvable), swap two tiles to fix it. if (totalParity % 2 !== 0) { // Find positions of 14 and 15 in the `tiles` array let index14 = tiles.indexOf(14); let index15 = tiles.indexOf(15); // Swap them to change the inversion count by an odd number, fixing parity if (index14 !== -1 && index15 !== -1) { [tiles[index14], tiles[index15]] = [tiles[index15], tiles[index14]]; } else { // Fallback: swap the first two tiles if 14/15 are missing [tiles[0], tiles[1]] = [tiles[1], tiles[0]]; } } // 6. Populate the grid array grid = []; tileVisuals = []; let tileIndex = 0; for (let i = 0; i < 4; i++) { grid[i] = []; for (let j = 0; j < 4; j++) { if (i === er && j === ec) { grid[i][j] = 0; // Empty spot } else { let value = tiles[tileIndex++]; grid[i][j] = value; // Initialize placeholder visual state for the tile if (value >= 1 && value <= 15) { tileVisuals[value] = { x: 0, y: 0, tx: 0, ty: 0 }; } } } } } function preload() { // Load the attached image imgA = loadImage('https://dae.transientusercontent.xyz/uploads/6ec28532-a6d7-4b65-b3e5-da528e466857'); } function updateVisualsFromGrid(resetCurrent = true) { // Recalculate size based on current square canvas dimensions let blockSize = width * 0.95; smallSquareSize = blockSize / 4; // Iterate through the current logical grid to find where each piece is for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { let tileValue = grid[i][j]; if (tileValue !== 0) { let coords = getVisualCoords(i, j); if (tileVisuals[tileValue]) { // Set the target position (tx, ty) tileVisuals[tileValue].tx = coords.x; tileVisuals[tileValue].ty = coords.y; // Only reset current position (x, y) on a full grid reset (setup/resize/initial shuffle) if (resetCurrent) { tileVisuals[tileValue].x = coords.x; tileVisuals[tileValue].y = coords.y; } } } } } } function initializeGrid() { // Use the new function to generate a fully randomized and solvable grid configuration createRandomSolvableGrid(); // Update visuals to match the shuffled logical state, snapping them into place (resetCurrent=true) updateVisualsFromGrid(true); // Check if the initial shuffle accidentally solved it isPuzzleSolved = isSolved(); } function setup() { let dim = min(windowWidth, windowHeight); cnv = createCanvas(dim, dim); // Create a square canvas imageMode(CENTER); // detect touch-capable devices once isMobile = (('ontouchstart' in window) || navigator.maxTouchPoints > 0) && width < 767; // Disable default touch scrolling for interactive mobile experiences cnv.elt.style.touchAction = 'none'; cnv.elt.addEventListener('touchmove', e => { e.preventDefault(); }, { passive: false }); rectMode(CENTER); // Initialize grid and shuffle it initializeGrid(); } function draw() { // Recalculate size in draw for responsiveness let blockSize = width * 0.95; smallSquareSize = blockSize / 4; // Set a dark background background(20); let sourceTileW = imgA.width / 4; let sourceTileH = imgA.height / 4; // --- Drawing Logic using tileVisuals and animation --- for (let tileValue = 1; tileValue <= 15; tileValue++) { let tile = tileVisuals[tileValue]; // 1. Animate the tile position using lerp towards the target (tx, ty) tile.x = lerp(tile.x, tile.tx, ANIMATION_SPEED); tile.y = lerp(tile.y, tile.ty, ANIMATION_SPEED); // 2. Calculate source crop based on tileValue let tileIndex = tileValue - 1; let origR = floor(tileIndex / 4); let origC = tileIndex % 4; let sourceX = origC * sourceTileW; let sourceY = origR * sourceTileH; // 3. Draw the Cropped Image Slice at the animated position (tile.x, tile.y) image( imgA, tile.x, // dx: Center X of the destination tile (animated) tile.y, // dy: Center Y of the destination tile (animated) smallSquareSize, // dWidth smallSquareSize, // dHeight sourceX, // sx sourceY, // sy sourceTileW, // sWidth sourceTileH // sHeight ); // 4. Add a dark stroke to separate the tiles visually noFill(); stroke(20); strokeWeight(2); rect(tile.x, tile.y, smallSquareSize, smallSquareSize); } // 5. Solved State Feedback: Draw the missing piece if solved if (isPuzzleSolved) { // The missing piece is the one that corresponds to the 4th row, 4th column (index 15) let origR = 3; let origC = 3; let sourceX = origC * sourceTileW; let sourceY = origR * sourceTileH; // The destination is the current position of the empty spot (which is [3][3] when solved) let solvedCoords = getVisualCoords(emptyPos.r, emptyPos.c); // Draw the Cropped Image Slice image( imgA, solvedCoords.x, // dx: Center X of the destination tile solvedCoords.y, // dy: Center Y of the destination tile smallSquareSize, // dWidth smallSquareSize, // dHeight sourceX, // sx sourceY, // sy sourceTileW, // sWidth sourceTileH // sHeight ); // Add a dark stroke to match the other tiles noFill(); stroke(20); strokeWeight(2); rect(solvedCoords.x, solvedCoords.y, smallSquareSize, smallSquareSize); } } function windowResized() { let dim = min(windowWidth, windowHeight); resizeCanvas(dim, dim); // Maintain square canvas size // Recalculate all visual positions and snap them to the new size updateVisualsFromGrid(true); }