The Small Lab: Messing Around With Hexadecimal Quantum Cryptography (Visualizer)

An interactive web-based simulation of Quantum Key Distribution (QKD) with a novel twist—Hexadecimal Quantum Cryptography. This project visualizes how quantum mechanics can be used to establish secure communication channels, complete with detection of eavesdropping attempts.

Project Overview

This React-based application demonstrates quantum cryptography principles through an engaging 3D visualization powered by Three.js. Instead of traditional binary quantum cryptography, this project explores a hexadecimal variant that theoretically increases data transmission efficiency by encoding 16 possible values (0-F) per symbol instead of just 2 (0-1).

Key Scenario: Watch Alice and Bob securely exchange cryptographic keys while Eve attempts to eavesdrop—and discover how the system detects her interference in real-time.

Features

• Interactive 3D Visualization: Three.js-powered scenes showing the quantum key exchange process
• Alice-Bob-Eve Scenario: Classic cryptographic scenario with real-time detection of eavesdropping
• Quantum Key Distribution (QKD) Simulation: Demonstrates basis selection and key agreement protocols
• Manual Hexadecimal Encryption: Custom encryption algorithm (no external crypto libraries) operating in hexadecimal
• True Random Number Generator (TRNG): Purpose-built hexadecimal random value generator
• Live Logging: Track the entire key exchange process with detailed logs
• Interactive Controls: Start/stop encryption, toggle eavesdropping detection, visualize quantum states

Technology Stack

Frontend

• React 19 - Component-based UI framework
• TypeScript - Type-safe development
• Three.js - 3D graphics and visualization
• TailwindCSS - Utility-first styling
• Material-UI - Component library

Core Implementation

• Manual Quantum Cryptography - Custom implementation without external crypto libraries
• Hexadecimal Encoding - Alternative to traditional binary quantum protocols
• TRNG (True Random Number Generator) - Custom random value generation

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/IkkeYannick/The-Small-Lab.git
cd The-Small-Lab

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open your browser and navigate to http://localhost:3000

Building for Production

npm run build

This creates an optimized production build in the build/ directory.

How It Works

Quantum Cryptography Basics

Quantum cryptography uses fundamental principles of quantum mechanics to ensure communication security:

1. Basis Selection: Alice and Bob randomly choose measurement bases (rectilinear + or diagonal ×)
2. Entangled Photons: Quantum-entangled photons are used to transmit information
3. Secure Key Agreement: Only matching basis selections contribute to the final shared key
4. Eavesdropper Detection: Eve's measurement attempts introduce detectable errors

Hexadecimal Quantum Cryptography

Instead of binary (0-1), this project uses hexadecimal values (0-F):

• Traditional approach: 1 bit per photon → 2 possible values
• Hexadecimal approach: 4 bits per symbol → 16 possible values

This theoretical enhancement increases data transmission efficiency while maintaining quantum security principles.

True Random Number Generator (TRNG)

A custom implementation that generates cryptographically useful random hexadecimal values:

export function HexadecimalTrueRandomNumberGeneration(): string {
    const seed = Math.random();
    const random = Math.sin(seed) * 16;
    return Math.abs(Math.floor(random)).toString(16);
}

Note: While not a true quantum RNG (which costs ~€1000+), this implementation provides sufficient entropy for simulation purposes.

Using the Application

1. Start the Simulation: Click the start button to begin the quantum key exchange
2. Toggle Eavesdropping: Enable Eve's eavesdropping attempt to see how the system detects interference
3. Monitor the Process: Watch the 3D visualization and live logs showing:
   • Basis selections by Alice and Bob
   • Photon measurements
   • Key agreement results
   • Error detection (if eavesdropping is detected)
4. View Results: Check the live logs for detailed information about each step

Learning Resources

This project is designed as an educational tool to understand:

• Quantum Key Distribution (QKD) principles
• Quantum entanglement and superposition
• Eavesdropping detection mechanisms
• Custom encryption implementations
• 3D visualization with Three.js

Development

Available Scripts

• npm start - Run development server
• npm test - Run tests

Code Style

The project uses TypeScript for type safety and follows React best practices with functional components and hooks.

Key Takeaways

This project demonstrates:

1. How quantum mechanics provides unbreakable encryption
2. Custom implementation of cryptographic systems
3. Interactive 3D visualization of complex concepts
4. Integration of multiple cutting-edge technologies
5. Innovation in traditional quantum cryptography (hexadecimal approach)

---

Built by Yannick Vandenbulcke