update information
This commit is contained in:
124
README.md
124
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:
|

|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
## Overview
|
||||||
- [@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
|
|
||||||
|
|
||||||
## 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
|
||||||
|
|||||||
@ -5,9 +5,14 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "A hex editor for corrupting image files with cosmic randomness",
|
"description": "A hex editor for corrupting image files with cosmic randomness",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Raphaël Forment",
|
"name": "Raphaël Forment (BuboBubo)",
|
||||||
"email": "raphael.forment@gmail.com"
|
"email": "raphael.forment@gmail.com"
|
||||||
},
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.raphaelforment.fr/BuboBubo/cosmique.git"
|
||||||
|
},
|
||||||
|
"homepage": "https://git.raphaelforment.fr/BuboBubo/cosmique",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
|
|||||||
Reference in New Issue
Block a user