Dynamic C++ Matrix Simulator

Interactive C++ matrix simulator with a visual grid, online code execution, and matrix output visualization.

This project allows users to generate a matrix grid, write or edit C++ code, execute the code online, and visualize the resulting matrix directly in the browser.

---

Live Demo

https://bilalzamilahmed.page/matrix-simulator/

If the project is hosted under the original GitHub Pages domain, use:

https://bilalcodes1.github.io/matrix-simulator/

---

Project Overview

Dynamic C++ Matrix Simulator is an educational web application designed to help students understand matrix operations in C++ through visual interaction.

The user can choose the number of rows and columns, generate an initial matrix, edit the C++ code, run it using an online compiler API, and then see the output matrix visually.

The project is useful for learning how matrix data changes after applying C++ logic.

---

Main Idea

The simulator connects three learning parts together:

1. Visual Grid Shows the matrix as colored cells.

2. C++ Code Editor Allows the user to write or modify C++ code.

3. Output Visualization Reads the program output and displays the final matrix visually.

---

Features

• Dynamic matrix size control
• Custom rows and columns
• Automatic initial matrix generation
• Visual grid display
• Built-in C++ code editor
• Default C++ starter code generation
• Online C++ execution
• Matrix output parsing
• Result matrix display
• Initial matrix display
• Error handling for compile/runtime issues
• Reset button
• Responsive design
• Footer with developer information and social links
• Built using HTML, CSS, and JavaScript
• Uses Wandbox API for online C++ compilation

---

How It Works

1. The user chooses the matrix size.
2. The app generates a matrix filled with values starting from 1.
3. A default C++ code template is inserted into the editor.
4. The user edits the C++ logic.
5. The app sends the code to the Wandbox online compiler API.
6. The program output is parsed.
7. The first expected matrix values are extracted from the output.
8. The result is displayed as a visual matrix.

---

Example Matrix

For a 3 × 3 matrix, the initial matrix is:

1 2 3
4 5 6
7 8 9

The user can modify the C++ code to change the values, reorder them, rotate the matrix, reverse rows, or apply any custom logic.

---

Default C++ Code Template

The simulator automatically creates a starter C++ program based on the selected matrix size.

Example:

#include <iostream>
#include <vector>
#include <utility>

int main() {
    const int ROWS = 3;
    const int COLS = 3;
    int matrix[ROWS][COLS];

    int counter = 1;
    for (int i = 0; i < ROWS; i++) {
        for (int j = 0; j < COLS; j++) {
            matrix[i][j] = counter++;
        }
    }

    // Your logic here

    for (int i = 0; i < ROWS; i++) {
        for (int j = 0; j < COLS; j++) {
            std::cout << matrix[i][j] << " ";
        }
        std::cout << std::endl;
    }

    return 0;
}

---

Educational Use

This project can be used to practice:

• 2D arrays in C++
• Matrix traversal
• Nested loops
• Matrix transformations
• Row and column operations
• Array indexing
• Output formatting
• Debugging matrix logic
• Visualizing algorithm results

---

Tech Stack

Category	Technology
Structure	HTML5
Styling	CSS3
Logic	JavaScript
Online Compiler	Wandbox API
Language Executed	C++
Hosting	GitHub Pages

---

Main Components

Visual Grid

Displays the matrix as colored cells. Each value is shown inside a grid cell, making the matrix easier to understand visually.

Size Controls

Allows the user to choose:

• Number of rows
• Number of columns

The app then generates a new matrix based on the selected size.

C++ Code Editor

A text area where the user can edit the generated C++ code.

Execute Button

Sends the C++ code to the online compiler and waits for the result.

Reset Button

Resets the simulator to a fresh generated matrix and default C++ code.

Output Section

Displays:

• Initial matrix
• Result matrix
• Compile errors
• Runtime errors
• Output parsing errors

---

Project Structure

matrix-simulator/
├── index.html
└── README.md

The current version is built as a single-page static web application.

---

How to Run Locally

1. Clone the repository:

git clone https://github.com/bilalcodes1/matrix-simulator.git

2. Open the project folder:

cd matrix-simulator

3. Open index.html in your browser.

No installation or build step is required.

Note: Code execution requires internet access because the project uses the Wandbox API.

---

API Used

This project uses the Wandbox online compiler API:

https://wandbox.org/api/compile.json

The code is sent as JSON, compiled online, and the program output is returned to the browser.

---

Limitations

• Requires internet access for code execution.
• Output must contain enough numbers to fill the selected matrix.
• The simulator reads the first expected amount of numbers from the program output.
• It is intended for educational examples, not secure production code execution.
• Large or complex programs may fail depending on API limitations.

---

Suggested Repository Topics

cpp
matrix-simulator
javascript
html
css
online-compiler
wandbox-api
code-visualizer
matrix-visualization
university-project
github-pages

---

Future Improvements

• Add predefined matrix algorithms
• Add rotation examples
• Add transpose visualization
• Add row/column swap animation
• Add matrix search visualization
• Add step-by-step execution mode
• Add syntax highlighting
• Add dark mode
• Add Arabic interface option
• Add local examples library
• Add explanation panel for each algorithm

---

Purpose

The purpose of this project is to make C++ matrix practice more visual and interactive.

It helps students see how their code changes the matrix instead of only reading console output.

This makes it useful for:

• Programming practice
• University exercises
• C++ 2D array learning
• Matrix algorithm visualization
• Beginner-friendly coding demonstrations

---

Author

Bilal Zamil Ahmed Computer Science Student University of Anbar

GitHub: @bilalcodes1 YouTube: Bilal Codes

---

License

Educational project — All rights reserved © 2026 Bilal Zamil Ahmed.