Mesh Circular Shift Visualizer

An interactive React application that simulates a circular q-shift on a 2-D √p × √p mesh of p nodes using the classical two-stage algorithm:

1. Stage 1 — Row Shift: every node shifts data within its row by q mod √p positions.
2. Stage 2 — Column Shift: every node shifts data within its column by ⌊q / √p⌋ positions.

A live mesh is animated step-by-step, the three key snapshots (initial, after row shift, final) are shown side-by-side, and a complexity panel compares the mesh algorithm against a naive 1-D ring shift.

---

Features

• Control panel with live validation of p (perfect square, 4 – 64) and q (1 ≤ q < p).
• Animated mesh grid — row-by-row for Stage 1, column-by-column for Stage 2, with active-cell highlighting and motion arrows.
• Simulation steps panel showing initial, post-row, and final states.
• Complexity analysis — numeric breakdown plus CSS bar chart comparing mesh steps vs. ring steps; the faster algorithm is highlighted.
• Playback controls — Play/Pause and a 200 ms – 1500 ms speed slider.
• Modular pure logic in src/utils/shiftLogic.js (no React dependency, easy to unit-test).
• Modern responsive UI with dark glassmorphism styling.

---

Project structure

.
├── index.html
├── package.json
├── vite.config.js
├── vercel.json
├── run.bat                     # One-click Windows launcher
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── index.css
    ├── components/
    │   ├── ControlPanel.jsx
    │   ├── MeshGrid.jsx
    │   ├── SimulationSteps.jsx
    │   └── ComplexityPanel.jsx
    └── utils/
        └── shiftLogic.js

---

Run locally

Option A — One-click (Windows)

Double-click run.bat. It will:

1. Verify Node.js / npm are installed.
2. Run npm install on the first launch.
3. Start the Vite dev server on http://localhost:5173.

Option B — Manual

Requires Node.js 18+.

npm install
npm run dev

Open http://localhost:5173 in your browser.

To build a production bundle:

npm run build
npm run preview

---

Deploy on Vercel

1. Push this folder to a GitHub repository.
2. On https://vercel.com click Add New → Project and import the repo.
3. Vercel auto-detects Vite. Accept the defaults:
   • Framework preset: Vite
   • Build command: npm run build
   • Output directory: dist
4. Click Deploy. Your site will be live in ~30 s.

The included vercel.json adds a SPA fallback rewrite so client-side routes always resolve to index.html.

---

Algorithm notes

Given p = side² and 0 < q < p:

Quantity	Formula
Row shift amount	q mod side
Column shift amount	⌊q / side⌋
Mesh total steps	(q mod side) + ⌊q / side⌋
Ring total steps	min(q, p - q)

The mesh variant is asymptotically cheaper than the ring when p is large, because the cost grows as O(√p) instead of O(p).