An enterprise-grade, infinitely-generating educational dashboard designed to demystify the theoretical limits of parallel computing through real-time mathematical visualizations.
Understanding the theoretical maximum speedup of parallel computing is crucial for systems architecture and performance engineering. Parallel Mastery transforms abstract mathematical formulas—specifically Amdahl's Law (fixed problem size) and Gustafson's Law (scaled problem size)—into an immersive, gamified visual experience.
Designed with a premium "Midnight Cyber" glassmorphism aesthetic, the application procedurally generates unlimited challenges, tracks user performance streaks, and provides animated, step-by-step visual breakdowns of how multiple processors divide parallel workloads.
The application relies on a custom Generator module that algorithmically randomizes sequential/parallel fractions (
Built purely with Vanilla CSS, the interface features enterprise-level design systems:
- Deep Glassmorphism: Blurred backdrop filters, glowing interactive borders, and floating background orbs.
- Real-world Interactions: Tactile input fields with inset shadows, button depress states, and staggered layout entry animations.
- Distraction-Free Focus: Removed unnecessary iconography in favor of clean, readable typography using Inter and JetBrains Mono.
Instead of standard text-based solutions, the application features an animated step-by-step visualizer:
- Step 1: Dynamically draws the original program's execution time, highlighting Sequential vs. Parallel workloads.
- Step 2: Visually shrinks (Amdahl) or scales (Gustafson) the parallel CSS blocks in real-time to demonstrate the processor's impact.
- Step 3: Overlays the final mathematical formula mapped directly to the visual blocks.
Features local streak tracking, rolling number animations, and dynamic difficulty scaling. A persistent "Skip Question" mechanic allows users to freely navigate challenges without penalty.
- Core Languages: HTML5, CSS3, JavaScript (ES6+)
- Architecture: Vanilla SPA (Single Page Application)
- Icons & Assets: Lordicon (Animated SVGs)
- Typography: Google Fonts (
Interfor UI,JetBrains Monofor math,Outfitfor headers) - Design Paradigm: Vanilla CSS Variables (
:root), Flexbox/Grid, Keyframe Animations
The application is encapsulated within a lightweight, zero-dependency, single-file architecture (index.html) utilizing the Module Pattern:
-
GeneratorObject (Logic Layer):-
generateAmdahl(): Calculates$Speedup = \frac{1}{(1-P) + \frac{P}{N}}$ -
generateGustafson(): Calculates$Speedup = N + (1 - N) \times s$ - Responsible for generating the question text, formatting parameters, and calculating the strict float tolerance for the correct answer.
-
-
QuizObject (State & Controller Layer):- Manages user
streak,totalSolved, andisAnsweredstates. - Handles DOM manipulation, triggering CSS animations (
slideUpFade,pulseStat), and rendering the dynamic visual solver viarevealSolution().
- Manages user
-
Visual Engine (Presentation Layer):
- CSS-driven visualizer bars (
.v-seq,.v-par) that use dynamic inline styling (width: X%) injected by the Controller to visually represent hardware scaling.
- CSS-driven visualizer bars (
Because this is a Vanilla JS application with no build steps, deployment and local running are instantaneous.
- Clone the repository or download the ZIP file.
- Extract the folder.
- Double-click
index.htmlto open it in your default web browser.
- Open the project folder in Visual Studio Code.
- Install the Live Server extension by Ritwick Dey.
- Right-click
index.htmland select "Open with Live Server".
- Analyze the Prompt: Read the dynamically generated question. The UI will indicate whether you are solving for Amdahl's or Gustafson's Law via the top-left badge.
-
Calculate: Determine the theoretical speedup using the provided Parallel/Sequential fractions and Processor (
$N$ ) count. -
Submit: Enter your answer (e.g.,
4.25) into the input field and pressEnteror click Verify Answer. (The system accepts a tolerance of$\pm0.05$ ). - Review Visuals: If you are stuck, or simply want to review the math, click Reveal Solution to watch the animated breakdown of how the processors scale the workload.
- Continue: Click Next Challenge to generate a new scenario and build your streak.
📦 Amdahls-and-Gustafsons
┗ index.html # Core application (HTML, CSS, JS Engine)
┗ README.md # Project Documentation
- Zero Dependencies: No React, Vue, or heavy JS libraries. The application loads instantaneously.
- Hardware-Accelerated Animations: Uses
transformandopacityfor all CSS animations (slideUpFade,slideInRight) to ensure smooth 60FPS rendering without triggering expensive browser repaints. - Event Delegation: Keyboard listeners are bound to the global window object to provide seamless
Enterkey support without requiring input focus.
- Persistent Storage: Implement
localStorageAPI to save high scores and long-term streaks across browser sessions. - Confetti Canvas Integration: Upgrade the
launchConfetti()stub with a particle physics engine for enhanced positive reinforcement. - Additional Architectures: Introduce formulas for the Sun-Ni Law (memory-bounded scaling) to complete the parallel computing trifecta.
Contributions are welcome! If you have ideas for improving the visualizer algorithms, adding new parallel computing laws, or enhancing the CSS animations:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Designed and developed for Professional Parallel Computing Analysis.
- LinkedIn: Affan Nexor
- Email: maffan2830@gmail.com