OS Process Lifecycle Simulator

Stop reading about OS processes. Start watching them think.

A zero-install, browser-native sandbox where you spawn real processes, trigger I/O events, preempt the CPU, call fork() and exec() — and watch every state transition happen live, down to the register level.

🌐 Open Live Demo →

Project Preview

---

Live demo

🌐 process-lifecycle-simulator-os.netlify.app

Open the link in any modern browser — no login, no install, works instantly.

How to run this project locally

Since this is a static HTML, CSS, and JavaScript project, you only need a browser.

• Quickest option: Visit the live link above.
• Run locally: Download simulator.html and open it directly in your browser.
• Best experience: Use VS Code with Live Server for smooth reload on changes.

# Clone the repository
git clone https://github.com/Rushit004/os-process-lifecycle-simulator.git
 
# Open the file
open simulator.html

---

✨ Features

🔁 All 7 Process States

Fully interactive simulation of every OS-defined process state:

State	Color	Description
NEW	🟣 Purple	Process just created, awaiting admission
READY	🟢 Green	In memory, waiting for CPU time
RUNNING	🟠 Amber	Currently executing on CPU
BLOCKED	🔴 Red	Waiting for I/O or an event
TERMINATED	⚫ Gray	Execution complete, resources freed
SUSPENDED_READY	🩵 Teal	Swapped to secondary storage from READY
SUSPENDED_BLOCKED	🟣 Magenta	Swapped to secondary storage while BLOCKED

🧠 Process Control Block (PCB) Viewer

Live PCB panel updates on every state transition, showing:

• PID, Process Name, Current State, Priority
• Program Counter (hex, increments each tick)
• Registers: EAX, EBX, ECX
• Memory Base & Limit addresses
• Arrival Time, Burst Time, Wait Time
• Context-switch animation on dispatch

📋 State Transitions Supported

Transition	From → To	Trigger
Admit	NEW → READY / S-READY	Memory check; swaps to secondary if full
Dispatch	READY → RUNNING	Manual or auto scheduler
Timeout	RUNNING → READY	Preemption / time quantum expiry
I/O Wait	RUNNING → BLOCKED	I/O request; auto-resolves after 3s
I/O Done	BLOCKED → READY	I/O completion
Exit	RUNNING → TERMINATED	Process finishes; logs Turnaround Time
Suspend	READY → S-READY	Swapped to secondary memory
Resume	S-READY → READY	Swapped back to main memory
Suspend (Blocked)	BLOCKED → S-BLOCKED	Swapped while waiting
Resume (Blocked)	S-BLOCKED → BLOCKED	Swapped back
I/O Done (secondary)	S-BLOCKED → S-READY	I/O completes while in secondary
fork()	RUNNING → child NEW	Creates child process (inherits PCB)
exec()	RUNNING → (same)	Loads new program image, resets PC

🧩 Other Features

• Ready Queue Visualizer — live FIFO strip with priority badges
• Live Memory Map — color-coded bar of 256 KB RAM usage
• Transition Event Log — timestamped, color-coded log (last 100 events)
• Auto Run Mode — automatic admit, dispatch, and priority-preemptive scheduling
• Preemptive Toggle — switch between preemptive and non-preemptive scheduling
• Dark / Light Theme — full glassmorphism UI in both modes
• Spawn Modal — configure name, priority (1–10), burst time, memory size
• Demo Processes — init, chrome, vscode pre-loaded on startup

---

🎮 How to Use

Step 1 — Spawn a Process

Click ＋ New Process in the top bar. Fill in:

• Process Name
• Priority (1–10, higher = more important)
• Burst Time (CPU units)
• Memory Requirement (16/32/64/128 KB)

Step 2 — Walk Through the Lifecycle

Each process card in the left panel shows context-appropriate action buttons:

NEW       → [Admit ▶]
READY     → [Dispatch ▶] [Suspend ⤓]
RUNNING   → [Timeout ↺] [I/O Wait ⏸] [Exit ✕] [fork() ⑂] [exec() ↻]
BLOCKED   → [Suspend ⤓]   (auto-resolves after 3s)
S-READY   → [Resume ⤒]
S-BLOCKED → [Resume ⤒]

Step 3 — Watch the Diagram

The center panel shows the 7-state diagram with animated dashed arrows. Token badges on each state node show which processes are currently in that state.

Step 4 — Inspect the PCB

Click any process card to load its PCB data in the right panel. A sweep animation fires whenever a context switch occurs.

Step 5 — Try Auto Mode

Hit Auto Run: OFF to enable the automatic scheduler. It will:

• Auto-admit NEW processes
• Dispatch by highest priority
• Preempt lower-priority processes (if Preemptive is ON)
• Swap-in suspended processes when memory is free

---

🧪 OS Concepts Demonstrated

This simulator covers the following concepts typically taught in Operating Systems courses:

• Process states and lifecycle
• Process Control Block (PCB) structure
• CPU scheduling (manual + priority-based preemptive)
• Context switching
• Ready Queue management
• I/O blocking and event-driven unblocking
• Memory management (fixed partition, 256 KB)
• Process swapping (suspend/resume to secondary storage)
• fork() and exec() system calls
• Turnaround Time (TAT) calculation

---

🗂️ Project Structure

os-process-lifecycle-simulator/
│
├── simulator.html          # Entire app — single self-contained file
├── screenshots/            # Screenshots for README documentation
│   ├── 01_dashboard_overview_dark.png
│   ├── 02_dashboard_overview_light.png
│   ├── 03_state_diagram_closeup.png
│   ├── 04_spawn_process_modal.png
│   ├── 05_process_cards_panel.png
│   ├── 06_pcb_viewer_live.png
│   ├── 07_process_running_state.png
│   ├── 08_io_blocked_countdown.png
│   ├── 09_ready_queue_strip.png
│   ├── 10_transition_log.png
│   ├── 11_memory_map_usage.png
│   ├── 12_suspended_states.png
│   ├── 13_fork_exec_syscall.png
│   └── 14_auto_run_mode.png
│
└── README.md

---

🛠️ Tech Stack

Technology	Role
HTML5	Structure and layout
CSS3 (Custom Properties + Grid + Glassmorphism)	Styling and theming
Vanilla JavaScript (ES6+)	Simulation logic, DOM manipulation
SVG	State transition diagram and arrows
Google Fonts (Orbitron, JetBrains Mono, Inter)	Typography

No frameworks. No build tools. No dependencies.

---

About the Author

Rushit Tholiya
LinkedIn Profile

GitHub Profile