Repository navigation
Expand file tree
/
Copy pathllms.txt
More file actions
111 lines (82 loc) · 6.42 KB
/
Copy pathllms.txt
File metadata and controls
111 lines (82 loc) · 6.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# Algorithm Visualizer - LLM & Technical Documentation
> This file (`llms.txt`) provides structured documentation for Language Models (LLMs) and developers detailing the visualizer engines in this project, focusing specifically on Sorting, Graph Traversal, and Dynamic Programming engines.
---
## 1. Project Architecture Overview
Algorithm-Visualizer is a zero-dependency, browser-native interactive learning platform for classic computer science algorithms.
- **Frontend Tech Stack**: Native HTML5, CSS3 (Tailwind CSS CDN), Vanilla JavaScript ES6+.
- **Animation Framework**: Async/await execution loops with variable delay `sleep(ms)` combined with DOM class modifications.
- **Engine Architecture**: Each algorithm module (`*-algorithms.js`) manages its own DOM elements, state variables, asynchronous execution routines, step logging, and real-time statistics updating.
---
## 2. Sorting Visualizer Engine (`sorting-algorithms.js`)
The Sorting Visualizer Engine visualizes array sorting algorithms through real-time DOM bar height and background color manipulations.
### Key Algorithms Implemented
- **Bubble Sort (`bubbleSortVisualization`)**: Pairwise comparisons and adjacent swaps.
- **Selection Sort (`selectionSortVisualization`)**: Unsorted region scan and minimum element swapping.
- **Insertion Sort (`insertionSortVisualization`)**: Shifting elements to position key values in sorted sub-arrays.
- **Merge Sort (`mergeSortVisualization`, `mergeSortHelper`, `merge`)**: Recursive divide-and-conquer array merging.
- **Quick Sort (`quickSortVisualization`, `quickSortHelper`, `partition`)**: Pivot selection and array partitioning.
- **Heap Sort (`heapSortVisualization`, `heapify`)**: Binary max-heap construction and root extraction.
### Core Engine State
- `currentArray`: Global array holding current integer values.
- `isSorting`: Boolean flag preventing concurrent algorithm executions.
- `comparisons`: Counter tracking total element comparison operations.
- `swaps`: Counter tracking total element swap/move operations.
- `startTime`: Timestamp tracking total sorting duration.
### Visual & Control Mechanics
- **Animation Timing**: Derived via `getAnimationDelay() = 1010 - speed * 10` ms (range 10ms - 1000ms).
- **DOM Manipulations**:
- `highlightBars(indices, type)`: Applies state-based CSS classes (`comparing`, `swapping`, `sorted`, `pivot`).
- `resetBarColors(indices)`: Reverts elements to default visual state.
- `updateArrayDisplay(array)`: Updates bar heights and value labels in real-time.
- `updateStatistics()`: Dynamically updates comparison, swap counters, and execution time display.
- `markAllSorted()`: Triggers end-of-sort completion animation across all elements.
---
## 3. Graph Traversal Visualizer Engine (`graph-algorithms.js`)
The Graph Engine handles graph creation, layout positioning, adjacency representations, edge weight management, and node/edge traversal animations.
### Key Algorithms Implemented
- **Breadth-First Search (`bfsVisualization`)**: Queue-based layer-by-layer graph traversal.
- **Depth-First Search (`dfsVisualization`)**: Stack/recursion-based deep traversal.
- **Dijkstra's Algorithm (`dijkstraVisualization`)**: Weighted shortest path calculation using greedy minimum-distance selection.
### Core Engine State & Data Models
- `graphNodes`: Array of node objects (`{ id, x, y, label }`).
- `graphEdges`: Array of edge objects (`{ id, from, to, weight }`).
- `graphAdjacencyList`: Object mapping node IDs to neighboring edge arrays (`{ node_id: [{ to, weight, edgeId }] }`).
- `isGraphRunning`: Execution lock flag.
- `visitedNodes`: Counter tracking total visited nodes.
### Visual & Rendering Mechanics
- **Canvas & Graph Rendering**: Nodes and weighted edges are rendered into `#graphCanvas` using positioned HTML elements or SVG edge overlays.
- **Visual Highlighting**:
- `highlightGraphNode(nodeId, type)`: Updates node CSS classes (`visiting`, `visited`, `current`, `path`).
- `highlightEdge(from, to, type)`: Colorizes active edges during traversal (`active`, `path`).
- `highlightPath(parent, start, end)`: Reconstructs and highlights the shortest path from target node back to source.
- **Step Logging**: `addAlgorithmStep(step)` appends human-readable textual step records to `#algorithmSteps`.
---
## 4. Dynamic Programming Visualizer Engine (`dp-algorithms.js`)
The Dynamic Programming (DP) Visualizer Engine renders DP state tables, arrays, state transition logic, and memoization progress.
### Key Algorithms Implemented
- **Fibonacci Sequence (`fibonacciDPVisualization`)**: Bottom-up 1D DP array construction for $F(n) = F(n-1) + F(n-2)$.
- **0-1 Knapsack Problem (`knapsackDPVisualization`)**: 2D DP matrix calculation evaluating maximum value under weight capacity bounds $W$.
- **Longest Common Subsequence (`lcsDPVisualization`)**: 2D matrix matching characters between two strings.
- **Longest Increasing Subsequence (`lisDPVisualization`)**: 1D DP tracking longest strictly increasing sub-array sequence.
### Core Engine State
- `dpTable`: 1D or 2D array storing computed DP cell values.
- `dpProblemSize`: Problem parameter length or element count.
- `knapsackCapacity`: Maximum weight allowance for knapsack problem.
- `computationCount`: Counter tracking total state evaluation steps.
- `isDPRunning`: Execution lock flag.
### Visual & Table Rendering Mechanics
- **Dynamic Table Generation**:
- `displayDPTabel(rows, cols, data, str1, str2)`: Constructs 2D matrix grids inside `#dpTableContainer` with row/column string headers.
- `displayDPArray(dp)`: Constructs 1D linear cell representations.
- **Cell Highlighting**:
- `highlightDPCell(index, type)`: Marks target cells (`current`, `dependency`, `computed`).
- `resetDPCell(index)`: Restores cells to neutral state.
- **Step-by-Step State Explanation**: Updates `#dpSteps` with formula evaluation details for each cell computation.
---
## 5. Other Visualizer Engines Quick Reference
- **Search Engine (`search-algorithms.js`)**: Linear Search, Binary Search, Jump Search, Interpolation Search.
- **Greedy Engine (`greedy-algorithms.js`)**: Activity Selection, Coin Change, Fractional Knapsack, Huffman Coding.
- **String Engine (`string-algorithms.js`)**: Naive Search, KMP (Knuth-Morris-Pratt), Rabin-Karp, Z-Algorithm.
---
## 6. Integration and Usage
All visualizer HTML pages (`sorting.html`, `graph.html`, `dp.html`, etc.) share common styling and control layouts driven by `main.js`. Algorithms are executed directly in browser without server build requirements.