let cols = 40; // Changed to 50x50 as per original request let rows = 40; // Changed to 50x50 as per original request let cellSize; let grid = []; let mazeWalls = []; // Stores walls that remain to form the maze let revealedPaths = []; // Stores walls that are removed to form paths let pathCells = new Set(); // Stores indices of cells that are part of the revealed path let dsu; let wallRevealIndex = 0; let lastRevealTime = 0; const revealInterval = 50; // ms, changed back to 200ms as per original request const wallsPerReveal = 10; // Changed back to 3 as per original request let activeExplosions = []; // Array to hold active explosion effects let cnv; let colorPathStart; let colorPathEnd; let colorHiddenStart; let colorHiddenEnd; // Disjoint Set Union (DSU) implementation class DSU { constructor(n) { this.parent = Array(n).fill(0).map((_, i) => i); this.size = Array(n).fill(1); } find(i) { if (this.parent[i] === i) { return i; } return this.parent[i] = this.find(this.parent[i]); } union(i, j) { let rootI = this.find(i); let rootJ = this.find(j); if (rootI !== rootJ) { if (this.size[rootI] < this.size[rootJ]) { [rootI, rootJ] = [rootJ, rootI]; } this.parent[rootJ] = rootI; this.size[rootI] += this.size[rootJ]; return true; } return false; } } // Explosion class for visual effect class Explosion { constructor(x, y, startTime) { this.x = x; this.y = y; this.startTime = startTime; this.duration = 400; // ms this.maxRadius = cellSize * 0.8; this.color = color(255, 150, 0); // Orange-ish explosion } display() { let elapsed = millis() - this.startTime; let progress = elapsed / this.duration; if (progress < 1) { let currentRadius = lerp(0, this.maxRadius, easeOutQuad(progress)); // Ensure alpha truly reaches 0 at the end of the duration let alpha = map(progress, 0, 1, 255, 0, true); noFill(); stroke(red(this.color), green(this.color), blue(this.color), alpha); strokeWeight(2); ellipse(this.x, this.y, currentRadius * 2); } } isFinished() { return (millis() - this.startTime) > this.duration; } } // Easing function for a more natural expansion function easeOutQuad(t) { return t * (2 - t); } function setup() { cnv = createCanvas(windowWidth, windowHeight); imageMode(CENTER); // detect touch-capable devices once window.isMobile = (('ontouchstart' in window) || navigator.maxTouchPoints > 0) && width < 767; cnv.elt.style.touchAction = 'none'; cnv.elt.addEventListener('touchmove', e => { e.preventDefault(); }, { passive: false }); cellSize = min(width / cols, height / rows); colorPathStart = color(65, 105, 225); // Royal Blue colorPathEnd = color(147, 112, 219); // Medium Purple colorHiddenStart = color(0); // Black colorHiddenEnd = color(100); // Dark Grey // Initialize DSU for all cells dsu = new DSU(cols * rows); pathCells.clear(); // Clear path cells for new maze // Create all possible walls let allPotentialWalls = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { let currentCellIdx = r * cols + c; // Vertical wall (right of current cell) if (c < cols - 1) { let nextCellIdx = r * cols + (c + 1); allPotentialWalls.push({ x1: (c + 1) * cellSize, y1: r * cellSize, x2: (c + 1) * cellSize, y2: (r + 1) * cellSize, cell1: currentCellIdx, cell2: nextCellIdx, isBorder: false // Flag to identify border walls later }); } // Horizontal wall (below current cell) if (r < rows - 1) { let nextCellIdx = (r + 1) * cols + c; allPotentialWalls.push({ x1: c * cellSize, y1: (r + 1) * cellSize, x2: (c + 1) * cellSize, y2: (r + 1) * cellSize, cell1: currentCellIdx, cell2: nextCellIdx, isBorder: false }); } } } // Shuffle walls for randomness allPotentialWalls = shuffle(allPotentialWalls); // Apply Kruskal's algorithm to generate maze paths mazeWalls = []; // Walls that will form the maze structure revealedPaths = []; // Walls that will be removed (paths) for (let i = 0; i < allPotentialWalls.length; i++) { let wall = allPotentialWalls[i]; if (dsu.union(wall.cell1, wall.cell2)) { // If union successful, this wall is removed to create a path revealedPaths.push(wall); } else { // This wall remains as part of the maze structure mazeWalls.push(wall); } } lastRevealTime = millis(); wallRevealIndex = 0; // Reset index for new maze generation } function draw() { // No background(0) here, we'll draw gradient for all cells first translate((width - cols * cellSize) / 2, (height - rows * cellSize) / 2); noStroke(); // Draw black to grey gradient for all cells (acting as initial background) for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { let inter = map(r, 0, rows - 1, 0, 1); // Vertical gradient let gradientColor = lerpColor(colorHiddenStart, colorHiddenEnd, inter); fill(gradientColor); rect(c * cellSize, r * cellSize, cellSize, cellSize); } } // Draw gradient background for revealed path cells (on top of hidden gradient) for (let cellIdx of pathCells) { let r = floor(cellIdx / cols); let c = cellIdx % cols; let inter = map(c + r, 0, cols + rows - 2, 0, 1); // Diagonal gradient for path let gradientColor = lerpColor(colorPathStart, colorPathEnd, inter); fill(gradientColor); rect(c * cellSize, r * cellSize, cellSize, cellSize); } stroke(255); strokeWeight(1); // Draw the outer border of the maze noFill(); rect(0, 0, cols * cellSize, rows * cellSize); // Erase the top-left opening (entrance) by drawing black lines over the border stroke(0); line(0, 0, cellSize, 0); // Top border segment line(0, 0, 0, cellSize); // Left border segment // Erase the bottom-right opening (exit) line(cols * cellSize - cellSize, rows * cellSize, cols * cellSize, rows * cellSize); // Bottom border segment line(cols * cellSize, rows * cellSize - cellSize, cols * cellSize, rows * cellSize); // Right border segment stroke(255); // Reset stroke color for maze walls // Draw all walls that are part of the permanent maze structure for (let i = 0; i < mazeWalls.length; i++) { let wall = mazeWalls[i]; line(wall.x1, wall.y1, wall.x2, wall.y2); } // Draw walls that are *not yet revealed* (i.e., still solid blocks) // These are the walls from revealedPaths that have not been processed by wallRevealIndex yet. for (let i = wallRevealIndex; i < revealedPaths.length; i++) { let wall = revealedPaths[i]; line(wall.x1, wall.y1, wall.x2, wall.y2); } // Reveal paths over time and trigger explosions if (millis() - lastRevealTime > revealInterval && wallRevealIndex < revealedPaths.length) { for (let i = 0; i < wallsPerReveal; i++) { if (wallRevealIndex < revealedPaths.length) { let wall = revealedPaths[wallRevealIndex]; // Add cells connected by the removed wall to pathCells pathCells.add(wall.cell1); pathCells.add(wall.cell2); // Create an explosion at the midpoint of the revealed wall let midX = (wall.x1 + wall.x2) / 2; let midY = (wall.y1 + wall.y2) / 2; activeExplosions.push(new Explosion(midX, midY, millis())); wallRevealIndex++; } } lastRevealTime = millis(); } // Display and manage explosions push(); // Isolate drawing transformations // Clip drawing to the maze boundary clip(() => { rect(0, 0, cols * cellSize, rows * cellSize); }); for (let i = activeExplosions.length - 1; i >= 0; i--) { activeExplosions[i].display(); if (activeExplosions[i].isFinished()) { activeExplosions.splice(i, 1); // Remove finished explosions } } pop(); // Restore drawing state } function windowResized() { resizeCanvas(windowWidth, windowHeight); cellSize = min(width / cols, height / rows); setup(); // Re-run setup to reinitialize grid and walls with new cell size } // Helper to shuffle an array (Fisher-Yates algorithm) function shuffle(array) { let currentIndex = array.length, randomIndex; // While there remain elements to shuffle. while (currentIndex != 0) { // Pick a remaining element. randomIndex = floor(random(currentIndex)); currentIndex--; // And swap it with the current element. [array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex] ]; } return array; }

Adammmm

Endless Morphing Blobs

Endless Morphing Blobs