Glitch Art Studio Pro

A powerful web-based image glitching application with multiple visual effects and advanced features.

File Structure

The project has been organized into separate, manageable components:

Core Files

• index.html - Main HTML structure and layout
• styles.css - All CSS styling and animations
• app.js - Main application logic, event handling, and user interface
• effects.js - Visual effects engine with all glitch algorithms

Features

Visual Effects

• Digital Corruption: Pixel Sort, Data Bend, Compression artifacts, Color corruption
• Color Manipulation: RGB Shift, Chromatic aberration, Color bleeding, Double exposure
• Analog & Retro: VHS distortion, CRT monitor effects, Scan lines, Film burn
• Advanced Effects: Datamosh, ASCII art, 3D Anaglyph, Pixel drift
• Texture & Noise: Digital noise, Light leaks, Mosaic, Frame shifting

Controls

• Global Parameters: Intensity, Chaos Factor, Block Size, Displacement
• Presets: Subtle, Vaporwave, Cyberpunk, Retro TV, Horror, Extreme, Matrix, Chaos Mode
• History: Undo/Redo functionality with keyboard shortcuts
• Export: Multiple formats (PNG, JPEG, WebP, GIF animation)
• Batch Processing: Apply effects to multiple images at once

Keyboard Shortcuts

• Ctrl/Cmd + Z - Undo
• Ctrl/Cmd + Shift + Z - Redo
• Ctrl/Cmd + S - Export
• R - Randomize effects
• Space - Toggle preview

Usage

1. Open index.html in a modern web browser
2. Upload an image using the upload button or drag & drop
3. Select effects from the control panel
4. Adjust parameters with the sliders
5. Use presets for quick styling
6. Export your glitched artwork

Technical Notes

• Built with vanilla JavaScript and HTML5 Canvas
• Modular architecture for easy maintenance and extension
• Real-time image processing with visual feedback
• Responsive design for different screen sizes

Browser Support

Works in modern browsers that support:

• HTML5 Canvas
• ES6 Classes
• File API
• ImageData manipulation