116 lines
4.0 KiB
Markdown
116 lines
4.0 KiB
Markdown
# 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
|
||
```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
|