Memory Allocation Visualizer

Author: Sanidhya Bhandari Course Project: Operating Systems — Dynamic Memory Allocation (DA1) Mode: Offline, Browser-Based Visualization

📝 Overview

The Memory Allocation Visualizer is an interactive, browser-based tool designed to simulate and visualize memory allocation algorithms — First Fit, Best Fit, and Worst Fit — side-by-side under a unified global control system.

It helps learners understand how memory blocks are allocated to processes dynamically, with animated visualizations, real-time comparison, and intuitive UI controls — all in a dark-themed modern interface.

The project runs entirely offline (no dependencies or servers required).

🚀 Features 🎬 Real-Time Animation

Smooth visual representation of block allocation and fragmentation.

Stepwise or automated animation modes for better conceptual clarity.

🧩 Algorithm Comparison

Displays First Fit, Best Fit, and Worst Fit simultaneously.

Uses a unified control panel to run, pause, or step all algorithms in sync.

Enables learners to visually compare efficiency and fragmentation in one view.

🧱 Interactive Input

Add or remove memory blocks and processes dynamically.

Adjustable animation speed and reset functionality for experimentation.

📸 Export Visualization

Capture and download a labeled PNG snapshot showing the three algorithms’ final states side by side.

💡 Educational Focus

Built to enhance understanding of memory partitioning and allocation strategies in Operating Systems.

Clean, modular JavaScript architecture with comprehensive comments for learning and reuse.

⚙️ How to Run Locally 1️⃣ Setup

Download or unzip the provided source package.

Open the folder and locate index.html.

Double-click index.html to open in your preferred browser (Chrome, Edge, or Firefox).

No internet or installation required.

2️⃣ Input Data

In the Memory Blocks section, enter sizes (in KB) one at a time and click Add Block.

In the Processes section, enter process sizes and click Add Process.

Example input:

Blocks: 100, 500, 200, 300, 600 Processes: 212, 417, 112

3️⃣ Run Simulation

Click Run All Fits to instantly compute and visualize allocations.

Use:

▶️ Play — Run global animation for all algorithms.

⏸️ Pause — Stop ongoing animation.

⏩ Step Forward — Move one allocation step manually.

⏪ Step Backward — Undo last allocation.

🔁 Reset — Clear all data and start over.

🖼️ Export PNG — Save final visualization as an image.

🧮 Algorithms Implemented 🔹 First Fit

Allocates the first available memory block that is large enough for the process.

🔹 Best Fit

Finds the smallest available block that fits the process, minimizing wasted space.

🔹 Worst Fit

Allocates the largest available block to maximize leftover space for future processes.

Each algorithm operates independently through isolated state managers, ensuring accurate side-by-side comparison.

🎨 Visualization Details Element Meaning 🟩 Colored Block Allocated memory block (color-coded per process ID) ⚫ Dark Block Free/unallocated block 🧾 Label Format Process → Block (Size) 📊 Canvas Layout Three synchronized views: First Fit, Best Fit, Worst Fit

Color Coding: Each process is assigned a unique color dynamically for clear differentiation.

Animation Logic: Blocks fill from left to right, visually representing the allocation step progression.

🧰 File Structure memory-visualizer/ │ ├── index.html # Main application UI ├── style.css # Dark theme and layout styling │ ├── js/ │ ├── utils.js # Shared helper utilities │ ├── algorithms.js # Core allocation logic (First/Best/Worst Fit) │ ├── animation.js # Rendering and canvas-based animation logic │ ├── ui.js # User interface event binding and DOM rendering │ ├── app.js # Main controller connecting UI, logic, and animation │ ├── README.md # Project documentation (this file) └── Execution_Guide.md # Setup & usage documentation

🌐 Browser Compatibility Browser Minimum Version Tested Google Chrome 90+ ✅ Microsoft Edge 90+ ✅ Mozilla Firefox 88+ ✅ Safari 15+ ⚠️ Partial Support

✅ Recommended: Google Chrome (latest) for best performance and animation smoothness.

🧭 Learning Outcomes

Understand dynamic memory allocation strategies.

Observe internal fragmentation and allocation efficiency.

Analyze the trade-offs between allocation methods interactively.

Gain hands-on experience in modular JS architecture and canvas-based visualization.

📷 Example Demonstration Input: Memory Blocks: 100, 500, 200, 300, 600 Processes: 212, 417, 112,426

Expected Visualization:

Each algorithm successfully allocates processes into different block arrangements.

“Run All Fits” instantly generates a three-column visual comparison.

The PNG Export will display all three labeled panels (First, Best, Worst Fit) in one image.

🧑‍💻 Developer Notes

Developed and tested by Sanidhya Bhandari, VIT Vellore.

Designed for educational and demonstration purposes under Operating Systems - Dynamic Allocation.

Modular, maintainable, and compatible with modern browsers.