# Rayon Cosmique

**A hex editor for corrupting image files with cosmic randomness**

![Rayon Cosmique Interface](docs/screenshot.png)

## 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
```bash
npm install
npm run dev
```

### Production Build
```bash
npm run build
npm run preview
```

### Docker Deployment
```bash
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

## Development

## Author

**Raphaël Forment (BuboBubo)**
Email: raphael.forment@gmail.com