Glitch Studio

Browser-basierte Digital Art Applikation für Glitch-Effekte. Think Pixelmator, but for glitch art.

Status

🟡 Pausiert

Ziel

Eine intuitive Browser-App zur Erstellung von Glitch Art. Bilder hochladen, modulare Effekte stapeln und als PNG exportieren. Experimentierfeld für Canvas API, Svelte 5 und modulare Architektur.

Was es macht

Load any image, apply modular glitch effects, and export the result. Effects are stackable -- the output of one module feeds into the next.

Core Modules

• Channel Shift -- Shift RGB color channels independently for chromatic distortion
• Pixel Sort -- Sort pixels by brightness, hue or saturation for classic glitch streaks
• Databend -- Manipulate raw pixel data at byte level for chaotic effects
• Scan Lines / CRT -- Retro CRT monitor effects with scanlines, noise and vignette

Tech Stack

• Svelte 5 + SvelteKit (SPA mode)
• Vite
• TypeScript
• Native Canvas API for image processing
• No external runtime dependencies

Schnellstart

# Dependencies installieren
npm install

# Dev-Server starten
npm run dev

# Build für Produktion
npm run build

Open http://localhost:5173

Verwendung

1. Drag-and-drop an image or click Import
2. Activate modules via checkboxes in the left panel
3. Click a module name to adjust its parameters
4. Sliders update the preview in real-time
5. Click Export to download the result as PNG

Projektstruktur

glitch_studio/
├── src/
│   ├── lib/
│   │   ├── types/       # GlitchModule interface, parameter types
│   │   ├── state/       # Svelte 5 reactive app state
│   │   ├── modules/     # Effect modules (channel-shift, pixel-sort, databend, scanlines)
│   │   ├── engine/      # Image loading, processing pipeline, export
│   │   └── components/  # UI components (panels, controls, canvas)
│   └── routes/          # SvelteKit page
├── docs/                # Konzepte, Architektur
├── assets/              # Bilder, Designs
├── .claude/             # Claude Code Kontext
│   └── instructions.md
├── BACKLOG.md
├── CHANGELOG.md
└── README.md

Neues Modul hinzufügen

1. Neues File in src/lib/modules/ erstellen mit GlitchModule Interface
2. In src/lib/modules/index.ts registrieren
3. Fertig – UI-Controls werden automatisch aus den Parameter-Definitionen generiert

Lernziele

• Canvas API und Pixel-Level Image Manipulation
• Svelte 5 Runes und Reactive State Management
• Modulare Architektur mit Registry Pattern
• Real-time Image Processing im Browser

Funktionale Ziele

• Intuitive UI für kreative Bildmanipulation
• Modulares Effekt-System, einfach erweiterbar
• Real-time Preview mit Debounced Processing
• Export als PNG

Kategorie

Creative & Web

Links

• Code-Repo: pixelfreund-labs/glitch_studio (noch zu erstellen)
• CLAUDE.md: .claude/instructions.md

Lizenz

MIT – Experimental lab.pixelfreund.ch project