Skip to content

Commit c4f186d

Browse files
cu-sanjaycu-sanjay
authored
Merge pull request #441 from Shrutiii01/NPR
feat: implemented networl Packet Routig Simulator
2 parents 4316714 + 7343318 commit c4f186d

6 files changed

Lines changed: 2560 additions & 0 deletions

File tree

‎Projects/Network Packet Routing Simulator/README.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# NET-SPROUT // Packet Routing Simulator
2+
3+
An interactive browser-based educational platform for modeling dynamic network topologies, autonomous packet transmissions, and path-finding optimization matrices. Built with a premium light botanical UI theme, this platform transforms abstract computer networking concepts into real-time interactive node graphs and animated packet flows.
4+
5+
---
6+
7+
## Network Topologies and Packet Switching Foundations
8+
9+
In modern computer networks, **packet switching** enables data to be fragmented into discrete packets, each routed independently from source to destination across shared infrastructure. The path each packet takes is determined by **routing protocols** that maintain topological maps and compute optimal pathways.
10+
11+
Network topology defines the physical or logical arrangement of nodes (routers, hosts) and the links connecting them. Common topologies include **star**, **mesh**, and **ring** configurations, each with distinct performance and redundancy characteristics.
12+
13+
### Key Performance Metrics
14+
15+
The efficiency of a routing strategy is evaluated by its ability to minimize end-to-end delay:
16+
17+
$$C_{path} = \sum_{e \in \text{Path}} \left( \text{Metric Cost}(e) + \frac{\text{Current Traffic}(e)}{\text{Bandwidth Capacity}(e)} \right)$$
18+
19+
Total network transit delay comprises four components:
20+
21+
$$D_{total} = D_{proc} + D_{queue} + D_{trans} + D_{prop}$$
22+
23+
Where transmission and propagation delays are computed as:
24+
25+
$$D_{trans} = \frac{L}{R} \quad \text{and} \quad D_{prop} = \frac{d}{v}$$
26+
27+
- $L$ = Packet size (bits)
28+
- $R$ = Link bandwidth (bps)
29+
- $d$ = Link distance (meters)
30+
- $v$ = Signal propagation speed ($2 \times 10^8$ m/s in copper)
31+
32+
---
33+
34+
## Comparative Analysis of Routing Paradigms
35+
36+
### Link-State (Dijkstra) — Shortest Path First
37+
38+
Dijkstra's algorithm computes the shortest path from a source node to all destinations using a weighted graph where each link carries a **metric cost** (typically based on bandwidth, delay, or administrative weight). The algorithm maintains a set of unvisited nodes, iteratively selecting the node with the smallest known distance, relaxing its neighbors, and repeating until all destinations are reached.
39+
40+
**Properties:** Produces the globally optimal path for the given static metric; converges quickly in stable topologies; requires complete topology knowledge at each router.
41+
42+
### Hop-Count Minimization
43+
44+
Also known as the shortest-path in terms of node transitions, this algorithm uses **Breadth-First Search (BFS)** over the unweighted graph to find the path with the fewest intermediate nodes. Link bandwidth and propagation delays are ignored entirely.
45+
46+
**Properties:** Minimizes the number of store-and-forward operations; simple to compute; may select paths with poor throughput if low-bandwidth links are involved.
47+
48+
### Dynamic Traffic-Aware Routing
49+
50+
A variant of Dijkstra where link costs are dynamically adjusted based on real-time queue occupancy and congestion levels. Links approaching saturation receive inflated cost values, steering new flows away from bottlenecks.
51+
52+
**Properties:** Adapts to changing traffic patterns; improves overall network utilization; can oscillate if not carefully dampened; requires continuous path recomputation.
53+
54+
---
55+
56+
## Graph Data Structures and Pathfinding Topologies
57+
58+
The simulator maintains a **single-source-of-truth graph state** tracking:
59+
60+
- **Node objects** with identifier, type (Router/Host), and canvas coordinates
61+
- **Link objects** with source/destination endpoints, bandwidth capacity, physical length, and dynamic packet queue
62+
- **Packet objects** with source, destination, computed path sequence, current position interpolation state, accumulated delay, and delivery status
63+
64+
### Routing Algorithm Pipeline
65+
66+
1. **Topology Discovery** — Node and link data structures are built from the active configuration.
67+
2. **Adjacency Construction** — An adjacency list is generated from the link set, with edge weights varying by algorithm:
68+
- *Dijkstra:* `1 + length / 1000`
69+
- *Hop-Count:* Uniform weight of 1 (BFS)
70+
- *Traffic-Aware:* `1 + length / 1000 + queueLoad * 5`
71+
3. **Path Computation** — The selected algorithm runs against the weighted adjacency list, returning an ordered array of node IDs.
72+
4. **Packet Injection** — New packets are created with the computed path, positioned at the source node, and added to each traversed link's queue.
73+
5. **Animation Loop** — A `requestAnimationFrame` loop advances packet positions along link slopes, handles queue congestion, and triggers delivery or drop events.
74+
75+
### Queuing and Congestion Model
76+
77+
Links maintain a queue of in-transit packets. When the queue length exceeds a threshold proportional to the link bandwidth, excess packets are flagged as **Dropped** due to buffer overflow. The congestion index metric reflects the proportion of links with elevated queue occupancy.
78+
79+
---
80+
81+
## Interface User Operations
82+
83+
1. **Select Routing Protocol** — Choose Dijkstra, Hop-Count, or Traffic-Aware via the tabbed selector.
84+
2. **Build Topology** — Add nodes (Routers or Hosts) and links (with bandwidth and length) using the topology console. Drag nodes on the canvas to rearrange layout.
85+
3. **Load Presets** — Quick-load pre-built topologies: Star, Mesh Core, or Bottleneck Loop.
86+
4. **Initialize Network** — Validate and activate the current topology, computing routing tables.
87+
5. **Inject Packets** — Configure source/destination, packet size (64-1500 bytes), and burst count, then dispatch.
88+
6. **Observe Animation** — Watch packets travel along computed paths, with live telemetry updating:
89+
- *Diagnostic Header:* In-flight count, average latency, delivery rate.
90+
- *Route Path Display:* Active path node sequence.
91+
- *Delay Matrix:* Total calculated serialization and propagation delay.
92+
- *Congestion Index:* Percentage of congested links.
93+
- *Latency Chart:* Rolling convergence of average per-packet latency.
94+
- *Telemetry Log:* Tabular view of all packets with status.
95+
7. **Clean Up** — Clear all traffic or export routing trace data to CSV.
96+
97+
---
98+
99+
## Standalone Local Setup Instructions
100+
101+
This application runs entirely client-side with no server dependencies, build steps, or compilation tools.
102+
103+
### Requirements
104+
105+
- A modern web browser (Chrome, Firefox, Edge, Safari)
106+
- Internet connection for first load (Chart.js is fetched from CDN)
107+
108+
### Setup
109+
110+
1. Clone or download the repository containing the six project files.
111+
2. Open `index.html` in any modern web browser.
112+
3. No installation or build step required.
113+
114+
### File Structure
115+
116+
```
117+
network-packet-routing-simulator/
118+
index.html — Main application structure
119+
style.css — Botanical theme stylesheet
120+
script.js — Simulation engine and UI controllers
121+
thumbnail.svg — Vector preview graphic
122+
project.json — Project metadata
123+
README.md — This documentation
124+
```
125+
126+
---
127+
128+
## License
129+
130+
MIT — Free for educational and personal use.

‎Projects/Network Packet Routing Simulator/index.html‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>NET-SPROUT // Packet Routing Simulator</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<aside id="left-panel">
13+
<div class="brand">
14+
<svg class="brand-icon" viewBox="0 0 32 32" width="32" height="32">
15+
<circle cx="16" cy="16" r="12" fill="none" stroke="#1b3a24" stroke-width="1.5"/>
16+
<circle cx="16" cy="16" r="4" fill="#2e7d32"/>
17+
<line x1="16" y1="4" x2="16" y2="12" stroke="#1b3a24" stroke-width="1.5" stroke-linecap="round"/>
18+
<line x1="16" y1="20" x2="16" y2="28" stroke="#1b3a24" stroke-width="1.5" stroke-linecap="round"/>
19+
<line x1="4" y1="16" x2="12" y2="16" stroke="#1b3a24" stroke-width="1.5" stroke-linecap="round"/>
20+
<line x1="20" y1="16" x2="28" y2="16" stroke="#1b3a24" stroke-width="1.5" stroke-linecap="round"/>
21+
<line x1="7.5" y1="7.5" x2="13" y2="13" stroke="#a5d6a7" stroke-width="1.5" stroke-linecap="round"/>
22+
<line x1="24.5" y1="7.5" x2="19" y2="13" stroke="#a5d6a7" stroke-width="1.5" stroke-linecap="round"/>
23+
<line x1="7.5" y1="24.5" x2="13" y2="19" stroke="#a5d6a7" stroke-width="1.5" stroke-linecap="round"/>
24+
<line x1="24.5" y1="24.5" x2="19" y2="19" stroke="#a5d6a7" stroke-width="1.5" stroke-linecap="round"/>
25+
</svg>
26+
<div class="brand-text">
27+
<span class="brand-name">NET-SPROUT</span>
28+
<span class="brand-sub">// Packet Routing Simulator</span>
29+
</div>
30+
</div>
31+
32+
<div class="panel-section">
33+
<div class="section-title">Routing Protocol Selection</div>
34+
<div class="algo-tabs" id="algo-tabs">
35+
<button class="algo-tab active" data-algo="dijkstra">
36+
<span class="algo-indicator" style="background:#4caf50"></span>
37+
<span class="algo-label">Dijkstra</span>
38+
<span class="algo-desc">Link-State Shortest Path</span>
39+
</button>
40+
<button class="algo-tab" data-algo="hopcount">
41+
<span class="algo-indicator" style="background:#009688"></span>
42+
<span class="algo-label">Hop-Count</span>
43+
<span class="algo-desc">Minimal Node Transitions</span>
44+
</button>
45+
<button class="algo-tab" data-algo="traffic">
46+
<span class="algo-indicator" style="background:#795548"></span>
47+
<span class="algo-label">Traffic-Aware</span>
48+
<span class="algo-desc">Dynamic Bottleneck Avoidance</span>
49+
</button>
50+
</div>
51+
</div>
52+
53+
<div class="panel-section">
54+
<div class="section-title">Topology Manipulation Console</div>
55+
<div class="control-group">
56+
<label>Add Node</label>
57+
<div class="form-row">
58+
<input type="text" id="node-id-input" placeholder="ID (e.g. A or 192.168.1.1)" class="form-input">
59+
<select id="node-type-select" class="form-select">
60+
<option value="router">Router</option>
61+
<option value="host">Host</option>
62+
</select>
63+
<button class="btn btn-small" id="btn-add-node">+</button>
64+
</div>
65+
</div>
66+
<div class="control-group">
67+
<label>Add Link</label>
68+
<div class="form-row">
69+
<select id="link-src-select" class="form-select"><option value="">From</option></select>
70+
<span class="form-arrow">&rarr;</span>
71+
<select id="link-dst-select" class="form-select"><option value="">To</option></select>
72+
</div>
73+
<div class="form-row">
74+
<input type="range" id="link-bw-slider" min="10" max="1000" value="100" class="form-slider">
75+
<span id="link-bw-display" class="form-value">100 Mbps</span>
76+
</div>
77+
<div class="form-row">
78+
<input type="number" id="link-length-input" value="100" min="1" max="10000" class="form-input form-input-sm">
79+
<span class="unit-label">m</span>
80+
<button class="btn btn-small" id="btn-add-link">+ Link</button>
81+
</div>
82+
</div>
83+
<div class="control-group">
84+
<label>Remove</label>
85+
<div class="form-row">
86+
<select id="delete-select" class="form-select"><option value="">Select item...</option></select>
87+
<button class="btn btn-small btn-remove" id="btn-delete">Delete</button>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<div class="panel-section">
93+
<div class="section-title">Packet Injection</div>
94+
<div class="control-group">
95+
<div class="form-row">
96+
<select id="pkt-src-select" class="form-select"><option value="">Source...</option></select>
97+
<span class="form-arrow">&rarr;</span>
98+
<select id="pkt-dst-select" class="form-select"><option value="">Dest...</option></select>
99+
</div>
100+
<div class="form-row">
101+
<input type="range" id="pkt-size-slider" min="64" max="1500" value="1024" class="form-slider">
102+
<span id="pkt-size-display" class="form-value">1024 B</span>
103+
</div>
104+
<div class="form-row">
105+
<input type="number" id="pkt-burst-input" value="1" min="1" max="20" class="form-input form-input-sm">
106+
<span class="unit-label">burst</span>
107+
<button class="btn btn-primary btn-small" id="btn-dispatch">DISPATCH</button>
108+
</div>
109+
</div>
110+
</div>
111+
112+
<div class="panel-section">
113+
<div class="section-title">Infrastructure Presets</div>
114+
<div class="presets">
115+
<button class="preset-btn" data-preset="star">Star Topology</button>
116+
<button class="preset-btn" data-preset="mesh">Mesh Core</button>
117+
<button class="preset-btn" data-preset="bottleneck">Bottleneck Loop</button>
118+
</div>
119+
</div>
120+
121+
<div class="panel-section">
122+
<div class="section-title">System Action Nodes</div>
123+
<div class="action-buttons">
124+
<button class="btn btn-primary" id="btn-init">INITIALIZE NETWORK</button>
125+
<div class="btn-row">
126+
<button class="btn btn-danger" id="btn-clear">CLEAR ALL TRAFFIC</button>
127+
<button class="btn btn-accent" id="btn-export">EXPORT CSV</button>
128+
</div>
129+
</div>
130+
</div>
131+
</aside>
132+
133+
<main id="right-panel">
134+
<div class="diag-header">
135+
<div class="diag-item">
136+
<span class="diag-label">In-Flight</span>
137+
<span class="diag-value" id="diag-inflight">0</span>
138+
</div>
139+
<div class="diag-item">
140+
<span class="diag-label">Avg Latency</span>
141+
<span class="diag-value" id="diag-latency">0 <span class="diag-unit">&mu;s</span></span>
142+
</div>
143+
<div class="diag-item">
144+
<span class="diag-label">Delivery Rate</span>
145+
<span class="diag-value" id="diag-delivery">100%</span>
146+
</div>
147+
<div class="diag-item">
148+
<span class="diag-label">Algorithm</span>
149+
<span class="diag-value diag-algo" id="diag-algo">Dijkstra</span>
150+
</div>
151+
<div class="diag-item">
152+
<span class="diag-label">Status</span>
153+
<span class="diag-value diag-status" id="diag-status">
154+
<span class="status-dot awaiting"></span>
155+
AWAITING
156+
</span>
157+
</div>
158+
</div>
159+
160+
<div class="main-content">
161+
<div class="canvas-section">
162+
<div class="section-header">
163+
<span class="section-title">Interactive Network Topology Viewport</span>
164+
<span class="section-badge" id="canvas-info">Drag nodes to rearrange</span>
165+
</div>
166+
<div class="canvas-wrapper">
167+
<canvas id="network-canvas"></canvas>
168+
</div>
169+
</div>
170+
171+
<div class="telemetry-section">
172+
<div class="metric-cards">
173+
<div class="metric-card metric-card-wide">
174+
<span class="metric-label">Selected Route Path</span>
175+
<span class="metric-value metric-path" id="metric-path">No active route</span>
176+
</div>
177+
<div class="metric-card">
178+
<span class="metric-label">Total Delay (D_total)</span>
179+
<span class="metric-value" id="metric-delay">0 <span class="diag-unit">&mu;s</span></span>
180+
</div>
181+
<div class="metric-card">
182+
<span class="metric-label">Congestion Index</span>
183+
<span class="metric-value" id="metric-congestion">0%</span>
184+
</div>
185+
</div>
186+
<div class="chart-wrapper">
187+
<canvas id="latency-chart"></canvas>
188+
</div>
189+
</div>
190+
191+
<div class="log-section">
192+
<div class="section-header">
193+
<span class="section-title">Packet Telemetry Log</span>
194+
<span class="section-badge" id="log-info">0 entries</span>
195+
</div>
196+
<div class="log-container">
197+
<table id="log-table">
198+
<thead>
199+
<tr>
200+
<th>Packet ID</th>
201+
<th>Source</th>
202+
<th>Dest</th>
203+
<th>Protocol</th>
204+
<th>Current Node</th>
205+
<th>Delay (&mu;s)</th>
206+
<th>Status</th>
207+
</tr>
208+
</thead>
209+
<tbody id="log-body">
210+
</tbody>
211+
</table>
212+
</div>
213+
</div>
214+
</div>
215+
216+
<div class="status-banner" id="status-banner">
217+
<span class="status-dot awaiting"></span>
218+
<span class="status-text">AWAITING TOPOLOGY DISCOVERY</span>
219+
</div>
220+
</main>
221+
</div>
222+
<script src="script.js"></script>
223+
</body>
224+
</html>

‎Projects/Network Packet Routing Simulator/project.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"title": "Network Packet Routing Simulator",
3+
"description": "An ultra-premium, light botanical-themed interactive network architecture simulation workspace modeling Dijkstra Link-State, Hop-Count, and Dynamic Traffic-Aware routing protocols with live draggable graph canvas maps, continuous packet transmission animations, microsecond delay tracking matrices, buffer queues, and raw CSV metric data exporters.",
4+
"entry": "index.html",
5+
"tags": [
6+
"Computer-Networks",
7+
"Routing-Algorithms",
8+
"Dijkstra-Shortest-Path",
9+
"Packet-Switching",
10+
"Simulation"
11+
],
12+
"author": {
13+
"name": "Shruti Narsulwar",
14+
"github": "shrutiii01"
15+
}
16+
}

0 commit comments

Comments
 (0)