A premium, single-file OS Memory Visualizer that runs four page replacement algorithms
simultaneously with 3D backgrounds, real-time charts, step-by-step traces, and Belady's Anomaly demo.
🚀 Quick Start • ✨ Features • 🎮 Interactive Experience • 🌐 Live Demo • ⚙️ How It Works • 🛠 Tech Stack • 🤝 Contributing
# No npm. No build. No server. Just open.
git clone https://github.com/Pravesh0005/Page-Replacement-Algorithm-Simulator-PRAS-
cd Page-Replacement-Algorithm-Simulator-PRAS-
open index.html # macOS
start index.html # Windows
xdg-open index.html # Linux⚡ Single HTML file. 110KB. Works completely offline in any modern browser.
| Algorithm | Full Name | Eviction Policy | Optimal? |
|---|---|---|---|
| FIFO 🟣 | First In, First Out | Oldest page in memory | ❌ |
| LRU 🔵 | Least Recently Used | Page not used for longest time | ✅ Practical best |
| LFU 🟡 | Least Frequently Used | Page with fewest accesses | ❌ |
| OPT 🟢 | Optimal (Belady's) | Page not needed for longest future | ✅ Theoretical best |
- ✅ Live 3D animated background — Three.js floating geometry
- ✅ Animated hero section — Spinning orbital rings with algorithm pills
- ✅ Dual theme — Light
#f5f4f1and ultra-dark#050505with one-click toggle - ✅ Glassmorphism UI — Frosted glass cards with specular highlights
- ✅ Film grain texture — Subtle SVG noise overlay for premium feel
- ✅ Cursor glow — Radial gradient follows mouse movement
- ✅ Smooth animations — 60fps spring physics on cards, cells, and buttons
- ✅ Confetti winner reveal — Canvas-based confetti when algorithm wins 🎊
- ✅ Tilt cards — 3D perspective tilt on hover for stat cards
- ✅ Scroll reveal — Elements animate in as they enter viewport
- ✅ All 4 algorithms run simultaneously — compare side-by-side
- ✅ Step-by-step mode — pause at every page reference, see exactly what changes
- ✅ Auto-play with speed control — slow-motion to blazing fast
- ✅ Page fault/hit animations — cells shake on fault, glow on hit
- ✅ Eviction highlighting — evicted page highlighted in amber
- ✅ Step progress bar — visual timeline of simulation progress
- ✅ Real-time fault counter — hits and faults update live
- ✅ Bar chart — total page faults comparison across all 4 algorithms
- ✅ Line chart — cumulative page faults over time (step-by-step)
- ✅ Stat cards — hits, faults, fault rate, efficiency score per algorithm
- ✅ Best algorithm badge — winner card highlighted with green border + badge
- ✅ Export PNG — html2canvas snapshot of entire results section
- ✅ Export CSV — full trace data (step, page, algorithm states)
- ✅ Dedicated Belady demo — auto-detects when FIFO shows the anomaly
- ✅ Visual explanation — shows how MORE frames = MORE faults in FIFO
- ✅ Educational card — explains WHY Belady's anomaly occurs
- ✅ Accordion section — expandable explanations for each algorithm
- ✅ Algorithm properties — Optimal tag, Theoretical tag, tooltips
- ✅ Tooltips — hover over terms for instant definitions
- ✅ Toast notifications — non-intrusive feedback messages
User Input:
┌─────────────────────────────────────────┐
│ Page Reference String: 7 0 1 2 0 3 0 4 │
│ Number of Frames: 3 │
│ Preset Examples (Belady's, Random-20) │
└─────────────────────────────────────────┘
↓
Algorithm Engine runs all 4 simultaneously:
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ FIFO │ │ LRU │ │ LFU │ │ OPT │
│ Queue │ │Timestamp│ │Counter │ │ Future │
│ based │ │ based │ │ based │ │ lookup │
└─────────┘ └─────────┘ └─────────┘ └─────────┘
↓
Outputs per step:
• Frame state (which pages are in memory)
• Hit ✅ or Fault ❌
• Which page was evicted (if fault)
• Running fault count
↓
Visualizations:
• Animated page tables (cell-by-cell)
• Real-time bar + line charts
• Stat cards with efficiency metrics
• Belady's anomaly detection
• Winner reveal with confetti 🎊
| Control | Description |
|---|---|
| Page String input | Enter any space/comma-separated page reference sequence |
| Frame Slider | Drag to set 1–10 memory frames |
| Preset dropdown | Belady's Anomaly demo, Random 20-page sequence |
| 🎲 Random button | Generate a new random page reference string |
| ▶ Run / Reset | Start or clear simulation |
| 🦶 Step-Through | Enter step-by-step mode |
| ⏩ Auto Play | Auto-advance through steps |
| ☀️/🌙 Toggle | Switch between light and dark theme |
| 📷 PNG | Export results as PNG image |
| 📄 CSV | Download full trace as CSV |
Glassmorphism card with 3D spinning rings, algorithm pills, and frame slider
4 algorithms running side-by-side with hit/fault cell animations
Bar chart (total faults) + Line chart (cumulative faults over time)
Auto-detected and highlighted when FIFO demonstrates the anomaly
Best algorithm gets confetti 🎊, green border badge, and highlighted stat card
Experience PRAS directly in your browser.
No installation • No setup • Instant access
- 📊 Compare FIFO, LRU, LFU & OPT simultaneously
- 🎯 Visualize Belady's Anomaly in real time
- 📈 Interactive memory and page fault charts
- ⚡ Step-by-step page replacement tracing
- 🌌 Animated 3D background environment
- 💾 Export results as PNG snapshots
- 📄 Export analytics as CSV reports
- 📊 Compare FIFO, LRU, LFU & OPT simultaneously
- 🎯 Visualize Belady's Anomaly in real time
- 📈 Interactive memory and page fault charts
- ⚡ Step-by-step page replacement tracing
- 🌌 Animated 3D background environment
- 💾 Export results as PNG snapshots
- 📄 Export analytics as CSV reports
Core: Vanilla HTML5 + CSS3 + JavaScript (ES6+)
3D Engine: Three.js r128 — floating background geometry
Charts: Chart.js 4.4.0 — bar + cumulative line charts
Screenshot: html2canvas 1.4.1 — PNG export
Fonts: Sora (UI) + JetBrains Mono (code/data)
No framework. No bundler. No npm. Single file.
| Library | Version | Usage |
|---|---|---|
| Three.js | r128 | Animated 3D background particles/geometry |
| Chart.js | 4.4.0 | Bar chart + cumulative line chart |
| html2canvas | 1.4.1 | Export results section as PNG |
| Google Fonts | — | Sora (body) + JetBrains Mono (mono) |
/* Dual theme via CSS custom properties */
:root → Light theme tokens
[data-theme="dark"] → Dark theme tokens
/* Key design tokens */
--fifo: #7c3aed /* Purple */
--lru: #0891b2 /* Cyan */
--lfu: #d97706 /* Amber */
--opt: #059669 /* Green */page-replacement-simulator/
│
├── 📄 LICENSE
|
├── 📄 README.md ← You are here
│
└── 📄 index.html ← Entire app (HTML + CSS + JS, self-contained)
💡 Everything in one file — the CSS, JavaScript, Three.js setup, Chart.js config, algorithm engines, animation system, export logic, and UI are all contained in
index.html. Share it by sending just this file.
🟣 FIFO — First In, First Out
Policy: Evict the page that has been in memory the longest.
Frames = 3, Reference = 7 0 1 2 0 3 0 4
Step 1: Page 7 → FAULT [7, -, -]
Step 2: Page 0 → FAULT [7, 0, -]
Step 3: Page 1 → FAULT [7, 0, 1]
Step 4: Page 2 → FAULT [2, 0, 1] ← evict 7 (oldest)
Step 5: Page 0 → HIT [2, 0, 1]
...
Pros: Simple to implement
Cons: Suffers from Belady's Anomaly
🔵 LRU — Least Recently Used
Policy: Evict the page that was accessed least recently (longest time ago).
Implemented via timestamps updated on every access.
On fault: evict page with smallest timestamp.
Pros: No Belady's Anomaly, good practical performance
Cons: Requires tracking access history (hardware support needed)
🟡 LFU — Least Frequently Used
Policy: Evict the page that has been accessed the fewest times.
Implemented via per-page frequency counters.
On fault: evict page with lowest frequency count.
Pros: Good for skewed access patterns
Cons: Old popular pages can persist too long (frequency bias)
🟢 OPT — Optimal (Belady's Optimal)
Policy: Evict the page that will NOT be used for the longest time in the future.
Requires knowledge of the ENTIRE future reference string.
This is why it's called "theoretical" — impossible in practice.
Implementation: look ahead in reference string to find
which current frame page appears latest (or never).
Pros: Minimum possible page faults (theoretical lower bound)
Cons: Cannot be implemented in a real OS (future unknown)
Use: Benchmarking other algorithms
⚠️ Belady's Anomaly
What: With FIFO, adding MORE frames can cause MORE page faults — counterintuitive!
Classic example: Reference string = 1 2 3 4 1 2 5 1 2 3 4 5
With 3 frames: 9 page faults
With 4 frames: 10 page faults ← MORE faults!
This anomaly ONLY affects FIFO and similar non-stack algorithms.
Stack algorithms (LRU, OPT) are immune to Belady's Anomaly.
- 📖 OS Course Students — Visualize what textbooks describe abstractly
- 🎓 Professors — Use in lectures to demonstrate algorithms live
- 💻 Interview Prep — Understand page replacement for system design interviews
- 🔬 Algorithm Comparison — Quickly see which algorithm performs best on your input
- 📊 Lab Assignments — Export CSV for analysis reports
# Fork & clone
git clone https://github.com/Pravesh0005/Page-Replacement-Algorithm-Simulator-PRAS-
cd Page-Replacement-Algorithm-Simulator-PRAS-
# Make your changes to index.html
# Test in browser
# Commit with conventional commits
git commit -m "feat: Add Clock algorithm (NRU variant)"
git commit -m "fix: LFU tie-breaking now uses FIFO order"
git commit -m "docs: Add NFU algorithm explanation in accordion"
# Push & PR
git push origin your-branch- Add Clock / NRU algorithm (5th algorithm)
- Add Working Set model visualization
- Add custom animation speed slider
- Add side-by-side Belady's anomaly comparison (3 frames vs 4 frames)
- Add mobile swipe gestures for step navigation
- Add algorithm race mode — visual horse race between algorithms
- Internationalization (i18n) support
MIT License
Copyright (c) 2026 Pravesh
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Built with obsessive attention to detail 🎨
From Three.js 3D backgrounds to confetti winner reveals —
every pixel crafted for the best possible learning experience.
⭐ If this helped you understand page replacement algorithms, drop a star! ⭐