feat: implemented flood fill recursion algorthim

Author: Satvik-Singh192

src/algorithms/Recursion/FloodFill.js

@@ -0,0 +1,18 @@
+export function floodFill(mat, x, y, targetColor, newColor, steps = []) {
+  const rows = mat.length;
+  const cols = mat[0].length;
+
+  if (x < 0 || y < 0 || x >= rows || y >= cols) return;
+  if (mat[x][y] !== targetColor) return;
+
+  steps.push({ x, y });
+
+  mat[x][y] = newColor;
+
+  floodFill(mat, x + 1, y, targetColor, newColor, steps);
+  floodFill(mat, x - 1, y, targetColor, newColor, steps);
+  floodFill(mat, x, y + 1, targetColor, newColor, steps);
+  floodFill(mat, x, y - 1, targetColor, newColor, steps);
+
+  return steps;
+}

src/components/Recursion/FloodFill.jsx

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import { floodFill } from "@/algorithms/Recursion/FloodFill";
+export default function FloodFillVisualizer() {
+  const rows = 20;
+  const cols = 20;
+
+  const generateGrid = () => {
+    const grid = [];
+    for (let i = 0; i < rows; i++) {
+      const row = [];
+      for (let j = 0; j < cols; j++) {
+        row.push(Math.random() > 0.3 ? 1 : 0);
+      }
+      grid.push(row);
+    }
+    return grid;
+  };
+
+  const [grid, setGrid] = useState(generateGrid());
+  const [speed, setSpeed] = useState(200);
+  const [isRunning, setIsRunning] = useState(false);
+
+  const source = { x: 0, y: 0 };
+
+  const startFloodFill = () => {
+    if (isRunning) return;
+
+    const mat = grid.map((row) => [...row]);
+    const steps = [];
+    floodFill(grid.map((row) => [...row]), source.x, source.y, 1, 2, steps);
+
+    animateFill(steps);
+  };
+
+  const animateFill = (steps) => {
+    let i = 0;
+    setIsRunning(true);
+
+    const interval = setInterval(() => {
+      if (i >= steps.length) {
+        clearInterval(interval);
+        setIsRunning(false);
+        return;
+      }
+
+      const { x, y } = steps[i];
+      setGrid((prev) => {
+        const newGrid = prev.map((row) => [...row]);
+        newGrid[x][y] = 2;
+        return newGrid;
+      });
+
+      i++;
+    }, speed);
+  };
+
+  return (
+    <div style={{ textAlign: "center", marginTop: "30px" }}>
+      <h2>Recursive Flood Fill Visualization</h2>
+      <div style={{ margin: "20px 0" }}>
+        <label style={{ fontWeight: "bold" }}>Speed: </label>
+        <input
+          type="range"
+          min="50"
+          max="800"
+          value={speed}
+          onChange={(e) => setSpeed(Number(e.target.value))}
+          style={{ width: "300px" }}
+        />
+        <div>{speed} ms per step</div>
+      </div>
+      <div
+        style={{
+          display: "inline-grid",
+          gridTemplateColumns: `repeat(${cols}, 25px)`,
+          gap: "2px",
+          marginTop: "20px",
+        }}
+      >
+        {grid.map((row, r) =>
+          row.map((cell, c) => {
+            let color = "#dfe6e9";
+
+            if (r === source.x && c === source.y) {
+              color = "#ff7675";
+            } else if (cell === 2) {
+              color = "#3498db";
+            } else if (cell === 1) {
+              color = "#b2bec3";
+            }
+
+            return (
+              <div
+                key={`${r}-${c}`}
+                style={{
+                  width: 25,
+                  height: 25,
+                  borderRadius: 4,
+                  border: "1px solid #ccc",
+                  backgroundColor: color,
+                  transition: "background-color 0.25s",
+                }}
+              />
+            );
+          })
+        )}
+      </div>
+      <div style={{ marginTop: "30px" }}>
+        <button
+          disabled={isRunning}
+          onClick={startFloodFill}
+          style={{
+            padding: "10px 20px",
+            background: isRunning ? "#b2bec3" : "#0984e3",
+            color: "white",
+            border: "none",
+            cursor: isRunning ? "not-allowed" : "pointer",
+            borderRadius: "5px",
+            marginRight: "10px",
+          }}
+        >
+          Start Flood Fill
+        </button>
+
+        <button
+          disabled={isRunning}
+          onClick={() => setGrid(generateGrid())}
+          style={{
+            padding: "10px 20px",
+            background: "#6c5ce7",
+            color: "white",
+            border: "none",
+            cursor: "pointer",
+            borderRadius: "5px",
+          }}
+        >
+          Reset Grid
+        </button>
+      </div>
+    </div>
+  );
+}

src/pages/Recursion/FloodFill.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import FloodFillVisualizer from "@/components/Recursion/FloodFill";
+
+export default function FloodFillPage() {
+  return (
+    <div>
+      <FloodFillVisualizer />
+    </div>
+  );
+}

src/pages/Recursion/RecursionPage.jsx

@@ -5,6 +5,7 @@ import NQueens from "./NQueens";
 import Sudoku from "./sudokuSolver";
 import TowerOfHanoi from "./towerOfHanoi";
 import SubsetSum from "./SubsetSum";
+import FloodFillPage from "./FloodFill";
 export default function RecursionPage() {
   const [selectedAlgo, setSelectedAlgo] = useState("");
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -41,7 +42,12 @@ export default function RecursionPage() {
             <SubsetSum />
           </div>
         );
-
+      case "FloodFill":
+        return(
+          <div className="w-full p-4 overflow-auto">
+              <FloodFillPage />
+          </div>
+        )
       default:
         return (
           <div className="flex flex-col items-center justify-center text-center p-6 min-h-screen bg-gray-900 text-gray-300">
@@ -87,6 +93,7 @@ export default function RecursionPage() {
           <option value="SudokuSolver">Sudoku Solver</option>
           <option value="TowerofHanoi">Tower of Hanoi</option>
           <option value="SubsetSum">Subset Sum</option>
+          <option value="FloodFill">Flood Fill</option>
         </select>
 
         <button