Rayon Cosmique

A hex editor for corrupting image files with cosmic randomness

Overview

Rayon Cosmique is a specialized hex editor designed for artistic image corruption. It provides an intuitive interface for modifying binary image data and immediately visualizing the results.

Features

🎨 Real-time Visual Feedback

• Dual Image View: Side-by-side comparison of original and modified images
• Live Updates: See corruption effects immediately as you edit
• Synchronized Navigation: Pan and zoom across both images simultaneously

🔧 Advanced Hex Editing

• Virtual Scrolling: Efficiently handle large image files with smooth scrolling
• Inline Editing: Click any hex byte or ASCII character to edit directly
• Smart Pagination: Navigate through files using chunk-based or address-based jumping
• Raw Hex Input: Bulk edit hex data in a dedicated text area

⚡ Corruption Tools

Local Corruption (Orange Buttons)

• Random 1: Modify 1 random byte in the visible area
• Random 10: Modify 10 random bytes in the visible area
• Random 100: Modify 100 random bytes in the visible area

Global Corruption (Purple Buttons)

• Global Random 1: Modify 1 random byte anywhere in the entire file
• Global Random 10: Modify 10 random bytes anywhere in the entire file
• Global Random 100: Modify 100 random bytes anywhere in the entire file

🔄 Workflow Management

• Undo System: 50-level undo history for safe experimentation
• Reset Function: Instantly revert to original image
• Export: Save corrupted images as proper PNG files
• Auto-compilation: Automatic image regeneration after modifications

Interface

Top Bar

• Rayon Cosmique: Application title with author credit
• Load Image: Upload image files for corruption
• Export: Download the corrupted image as a PNG file

Action Buttons (32×32px squares)

• ↻ (Blue): Update/compile the modified image
• 1, 10, 100 (Orange): Local random corruption
• 1, 10, 100 (Purple): Global random corruption
• ↶ (Gray): Undo last modification
• ⟲ (Red): Reset to original image

Navigation

• Jump to Chunk: Navigate to specific 512-byte sections
• Jump to Address: Go directly to any hex address
• Virtual Scrolling: Smooth navigation through large files

Technical Details

Architecture

• Frontend: React + TypeScript + Vite
• State Management: Nanostores for reactive state
• File Handling: Binary data manipulation with Uint8Arrays
• Image Processing: Canvas-based fault-tolerant image decoder
• Virtual Scrolling: Efficient rendering of large datasets

Supported Formats

• Input: All common image formats (JPEG, PNG, GIF, WebP, etc.)
• Output: PNG format for maximum compatibility
• File Size: Optimized for files up to several megabytes

Performance Features

• Chunked Loading: 512-byte chunks for memory efficiency
• Virtual Scrolling: Only renders visible hex rows
• Smart Buffering: Preloads adjacent data for smooth scrolling
• Canvas Optimization: Efficient image rendering and export

Installation

Development

npm install
npm run dev

Production Build

npm run build
npm run preview

Docker Deployment

docker build -t rayon-cosmique .
docker run -p 3000:3000 rayon-cosmique

Usage

1. Load an Image: Click "Load Image" and select your image file
2. Explore: Use the hex editor to examine the binary structure
3. Corrupt: Use the random buttons to introduce controlled corruption
4. Navigate: Jump to specific addresses or scroll through the data
5. Experiment: Try different corruption patterns and intensities
6. Export: Save your cosmic creations as PNG files

Keyboard Shortcuts

• Enter: Apply hex/ASCII edits
• Escape: Cancel current edit
• Mouse Wheel: Scroll through hex data
• Click: Edit individual bytes or ASCII characters