diff --git a/README.md b/README.md index 7059a96..6e29aea 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,122 @@ -# React + Vite +# Rayon Cosmique -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +**A hex editor for corrupting image files with cosmic randomness** -Currently, two official plugins are available: +![Rayon Cosmique Interface](docs/screenshot.png) -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## Overview -## Expanding the ESLint configuration +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. -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +## 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 diff --git a/package.json b/package.json index 67fcffa..cc970f4 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,14 @@ "type": "module", "description": "A hex editor for corrupting image files with cosmic randomness", "author": { - "name": "Raphaël Forment", + "name": "Raphaël Forment (BuboBubo)", "email": "raphael.forment@gmail.com" }, + "repository": { + "type": "git", + "url": "https://git.raphaelforment.fr/BuboBubo/cosmique.git" + }, + "homepage": "https://git.raphaelforment.fr/BuboBubo/cosmique", "scripts": { "dev": "vite", "build": "tsc && vite build",