Architecture

Technical overview of our image generation system

System Architecture

Our project is built as a static web application using client-side JavaScript for interactive demonstrations. The architecture is simple, efficient, and requires no backend infrastructure.

User Browser
Static HTML/CSS/JS
Client-side Generation
Visual Display

Core Components

🎨 HTML Structure

Semantic HTML pages for each section: landing page, 3x3 demo, 100x100 simulation, upload tool, citations, and architecture documentation.

🎭 CSS Styling

Custom CSS with cosmic theme, animations, and responsive design. Includes glassmorphism effects and interactive hover states.

⚡ JavaScript Logic

Client-side JavaScript for image generation algorithms, canvas rendering, and interactive UI controls. No server-side processing required.

�️ Canvas API

HTML5 Canvas for real-time image rendering and manipulation in both 3x3 and 100x100 simulation modes.

Technical Stack

🛠️ Technologies Used

  • HTML5 (Structure)
  • CSS3 (Styling & Animations)
  • Vanilla JavaScript (Logic)
  • HTML5 Canvas API (Rendering)
  • Tailwind CSS (Utility Classes)
  • Cropper.js (Image Upload Tool)

Algorithm Design

Our generation algorithms use deterministic mathematical approaches based on combinatorics. The 3x3 demo uses base-7 number system for rainbow colors, while the 100x100 simulation uses base-8 for RGB quantization.

Generation Algorithms

🌈 3x3 Rainbow Algorithm

Base-7 conversion: 7^9 = 40,353,607 possible combinations. Each pixel takes values 0-6 representing the rainbow spectrum.

🎨 100x100 RGB Algorithm

Base-8 conversion: 8^24000 possible combinations. Each pixel uses 3 channels (R,G,B) with values 0-7 for quantized colors.

� Reverse Lookup

Mathematical algorithm to convert any uploaded image back to its corresponding index in the generation sequence.

⏰ Time Synchronization

Fixed genesis epoch for consistent global time-based generation across all viewers.