```javascript 'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // Utility to format address to Hex string (e.g., 0x1000) const toHex = (num) => `0x${num.toString(16).toUpperCase()}`; export default function CPointerAnimation() { // --- State Management --- // Memory Array: Addresses and Values const [memoryBlock, setMemoryBlock] = useState([ { address: 0x1000, value: 10, highlight: false }, { address: 0x1004, value: 20, highlight: false }, { address: 0x1008, value: 30, highlight: false }, { address: 0x100C, value: 40, highlight: false }, ]); // Pointer Variable State const [pointer, setPointer] = useState({ address: 0x2000, // The address OF the pointer variable itself value: null, // The address stored INSIDE the pointer (points to memoryBlock) targetIndex: -1, // Visual index for animation alignment (-1 means null) active: false, }); // Animation Control State const [codeLine, setCodeLine] = useState(''); const [explanation, setExplanation] = useState('Initializing Memory...'); const [activeOperation, setActiveOperation] = useState('IDLE'); // READ, WRITE, MOVE, NULL // Refs for loop control const isRunningRef = useRef(false); // --- Animation Sequence Logic --- useEffect(() => { const runAnimationLoop = async () => { if (isRunningRef.current) return; isRunningRef.current = true; const delay = (ms) => new Promise((r) => setTimeout(r, ms)); while (true) { // --- PHASE 1: Initialization --- setExplanation("Memory allocated. Array 'arr' created."); setCodeLine("int arr[4] = {10, 20, 30, 40};"); setPointer(p => ({ ...p, value: null, targetIndex: -1, active: false })); setMemoryBlock(prev => prev.map(b => ({ ...b, value: b.value === 99 ? (b.address - 0x1000)/4 * 10 + 10 : b.value, highlight: false }))); // Reset values await delay(2000); // --- PHASE 2: Pointer Declaration --- setExplanation("Declaring pointer 'ptr'. Initially NULL."); setCodeLine("int *ptr = NULL;"); setPointer(p => ({ ...p, active: true, value: 0 })); // 0 represents NULL visually here await delay(1500); // --- PHASE 3: Assignment --- setExplanation("Assigning address of arr[0] to ptr."); setCodeLine("ptr = &arr[0];"); setActiveOperation('MOVE'); await delay(800); setPointer(p => ({ ...p, value: 0x1000, targetIndex: 0 })); await delay(1500); // --- PHASE 4: Dereference (Read) --- setExplanation("Dereferencing: Reading value at address 0x1000."); setCodeLine("int val = *ptr; // val is 10"); setActiveOperation('READ'); setMemoryBlock(prev => { const n = [...prev]; n[0].highlight = true; return n; }); await delay(2000); setMemoryBlock(prev => prev.map(b => ({ ...b, highlight: false }))); setActiveOperation('IDLE'); await delay(500); // --- PHASE 5: Pointer Arithmetic (Increment) --- setExplanation("Pointer Arithmetic: ptr++ adds 4 bytes (sizeof int)."); setCodeLine("ptr++; // Address becomes 0x1004"); setActiveOperation('MOVE'); await delay(500); setPointer(p => ({ ...p, value: 0x1004, targetIndex: 1 })); await delay(1500); // --- PHASE 6: Dereference (Write) --- setExplanation("Dereferencing: Writing 99 to address 0x1004."); setCodeLine("*ptr = 99;"); setActiveOperation('WRITE'); await delay(800); setMemoryBlock(prev => { const n = [...prev]; n[1].value = 99; n[1].highlight = true; return n; }); await delay(2000); setMemoryBlock(prev => prev.map(b => ({ ...b, highlight: false }))); setActiveOperation('IDLE'); await delay(500); // --- PHASE 7: Traversal Loop --- setExplanation("Traversing remaining memory..."); setCodeLine("ptr++;"); // Move to index 2 setPointer(p => ({ ...p, value: 0x1008, targetIndex: 2 })); await delay(1000); // Move to index 3 setPointer(p => ({ ...p, value: 0x100C, targetIndex: 3 })); setCodeLine("ptr++; // Pointing to arr[3]"); await delay(1000); // Read last value setCodeLine("val = *ptr; // val is 40"); setActiveOperation('READ'); setMemoryBlock(prev => { const n = [...prev]; n[3].highlight = true; return n; }); await delay(1500); setActiveOperation('IDLE'); setMemoryBlock(prev => prev.map(b => ({ ...b, highlight: false }))); // --- PHASE 8: Reset --- setExplanation("Resetting simulation..."); setCodeLine(""); await delay(2000); } }; runAnimationLoop(); return () => { isRunningRef.current = false; }; }, []); // --- Visual Constants --- const BLOCK_WIDTH = 120; const BLOCK_HEIGHT = 100; const GAP = 40; const ARRAY_START_X = (VIEW_WIDTH - (4 * BLOCK_WIDTH + 3 * GAP)) / 2; const ARRAY_Y = 200; const POINTER_Y = 450; const POINTER_X = VIEW_WIDTH / 2 - BLOCK_WIDTH / 2; // Helper to calculate connector path const getConnectorPath = () => { if (pointer.targetIndex === -1) return ""; const startX = POINTER_X + BLOCK_WIDTH / 2; const startY = POINTER_Y; const endX = ARRAY_START_X + pointer.targetIndex * (BLOCK_WIDTH + GAP) + BLOCK_WIDTH / 2; const endY = ARRAY_Y + BLOCK_HEIGHT; const controlY1 = startY - 80; const controlY2 = endY + 80; return `M ${startX} ${startY} C ${startX} ${controlY1}, ${endX} ${controlY2}, ${endX} ${endY}`; }; return ( ); } ```