import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Play, RotateCcw, Zap, Info, Binary, TreeDeciduous } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = '#0f172a'; const PRIMARY = '#38bdf8'; const SECONDARY = '#fbbf24'; const ACCENT = '#f472b6'; const SUCCESS = '#4ade80'; const TEXT_COLOR = '#f8fafc'; const INITIAL_DATA = [ { label: 'A', weight: 5 }, { label: 'B', weight: 9 }, { label: 'C', weight: 12 }, { label: 'D', weight: 13 }, { label: 'E', weight: 16 }, { label: 'F', weight: 45 }, ]; // Node structure: { id, label, weight, left, right, x, y, targetX, targetY, isNew, depth, code } const generateId = () => Math.random().toString(36).substr(2, 9); export default function HuffmanAnimation() { const [nodes, setNodes] = useState([]); const [links, setLinks] = useState([]); const [phase, setPhase] = useState('IDLE'); // IDLE, SELECTING, MERGING, FINALIZING, COMPLETED const [message, setMessage] = useState('Optimal Prefix Code (Huffman Coding) Visualization'); const [tick, setTick] = useState(0); const stateRef = useRef({ forest: [], // Array of root nodes allNodes: [], // Flattened nodes for rendering step: 0, isAnimating: false, startTime: 0, selectedIds: [], codes: {}, }); const rafRef = useRef(); // Initialize the forest const init = useCallback(() => { const initialNodes = INITIAL_DATA.map((d, i) => ({ id: generateId(), label: d.label, weight: d.weight, left: null, right: null, x: 150 + i * 180, y: 550, targetX: 150 + i * 180, targetY: 550, depth: 0, opacity: 1, isLeaf: true, })); stateRef.current.forest = [...initialNodes].sort((a, b) => a.weight - b.weight); stateRef.current.allNodes = [...initialNodes]; stateRef.current.selectedIds = []; stateRef.current.codes = {}; stateRef.current.step = 0; setNodes([...stateRef.current.allNodes]); setLinks([]); setPhase('IDLE'); setMessage('Ready to construct the Huffman Tree.'); }, []); useEffect(() => { init(); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, [init]); // Main Animation Loop const animate = useCallback((time) => { const { allNodes } = stateRef.current; let needsUpdate = false; allNodes.forEach(node => { const dx = node.targetX - node.x; const dy = node.targetY - node.y; if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) { node.x += dx * 0.1; node.y += dy * 0.1; needsUpdate = true; } else { node.x = node.targetX; node.y = node.targetY; } }); if (needsUpdate) { setTick(t => t + 1); } rafRef.current = requestAnimationFrame(animate); }, []); useEffect(() => { rafRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(rafRef.current); }, [animate]); // Tree Layout Helper const updateTreeLayout = (roots) => { const totalRoots = roots.length; const spacing = WIDTH / (totalRoots + 1); roots.forEach((root, index) => { const baseX = spacing * (index + 1); const baseY = 550 - root.depth * 80; const layoutNode = (node, x, y, offset) => { node.targetX = x; node.targetY = y; if (node.left) { layoutNode(node.left, x - offset, y + 80, offset / 1.8); } if (node.right) { layoutNode(node.right, x + offset, y + 80, offset / 1.8); } }; layoutNode(root, baseX, baseY, 60 * Math.pow(1.2, root.depth)); }); }; const generateCodes = (node, currentCode, codesMap) => { if (!node) return; if (node.isLeaf) { codesMap[node.label] = currentCode; node.code = currentCode; } generateCodes(node.left, currentCode + "0", codesMap); generateCodes(node.right, currentCode + "1", codesMap); }; const nextStep = async () => { if (stateRef.current.isAnimating) return; stateRef.current.isAnimating = true; const forest = stateRef.current.forest; if (forest.length > 1) { // 1. SELECTING PHASE setPhase('SELECTING'); const n1 = forest[0]; const n2 = forest[1]; stateRef.current.selectedIds = [n1.id, n2.id]; setMessage(`Selecting two nodes with minimum weights: ${n1.weight} and ${n2.weight}`); setNodes([...stateRef.current.allNodes]); await new Promise(r => setTimeout(r, 1200)); // 2. MERGING PHASE setPhase('MERGING'); const newWeight = n1.weight + n2.weight; const newDepth = Math.max(n1.depth, n2.depth) + 1; const newNode = { id: generateId(), label: '', weight: newWeight, left: n1, right: n2, x: (n1.x + n2.x) / 2, y: (n1.y + n2.y) / 2 - 50, targetX: (n1.x + n2.x) / 2, targetY: (n1.y + n2.y) / 2 - 80, depth: newDepth, opacity: 1, isLeaf: false, }; stateRef.current.allNodes.push(newNode); const remainingNodes = forest.slice(2); stateRef.current.forest = [...remainingNodes, newNode].sort((a, b) => a.weight - b.weight); // Update links setLinks(prev => [ ...prev, { from: newNode.id, to: n1.id, bit: '0' }, { from: newNode.id, to: n2.id, bit: '1' } ]); setMessage(`Merging nodes into a new parent with weight ${newWeight}`); updateTreeLayout(stateRef.current.forest); setNodes([...stateRef.current.allNodes]); await new Promise(r => setTimeout(r, 1500)); stateRef.current.selectedIds = []; setPhase('IDLE'); if (stateRef.current.forest.length === 1) { setPhase('FINALIZING'); setMessage("Construction complete! Generating prefix codes..."); const codes = {}; generateCodes(stateRef.current.forest[0], "", codes); stateRef.current.codes = codes; await new Promise(r => setTimeout(r, 1000)); setPhase('COMPLETED'); setMessage("Optimal prefix codes have been successfully assigned."); } } stateRef.current.isAnimating = false; }; const autoPlay = async () => { while (stateRef.current.forest.length > 1) { await nextStep(); } }; const particles = useMemo(() => { return Array.from({ length: 30 }).map((_, i) => ({ id: i, x: Math.random() * WIDTH, y: Math.random() * HEIGHT, size: Math.random() * 3 + 1, duration: Math.random() * 10 + 10, })); }, []); return (

{/* HUD Header */}

HUFFMAN CODING

{message}

{/* Control Panel */}

{/* Code Table Overlay */} {phase === 'COMPLETED' && (

Result Codes

{Object.entries(stateRef.current.codes).sort().map(([char, code]) => (

{char} {code}

))} )} {/* Legend */}

Leaf Node (Char)

Internal Node (Sum)

Selected for Merge

); }