CrumbMatrix v2 - Waldwächter 8-Bit Icon Editor

Desktop-Tool für Pixel-Art 🖥️ (Optimiert für Bildschirme ≥1400px)

🌲 Features

  • 30x30 Pixel Grid - Perfekt für 8-bit Icons
  • 7-Farben-Palette - Pro Rolle individuell anpassbar
  • Crew Library - 9 vorinstallierte Waldwächter mit 8-bit Designs
  • 🔄 Array Transformer (0→1) - Verstehe den Aufbau ohne Zeit
  • JSON Import/Export - Speichere und teile deine Templates
  • PNG Export - Exportiere fertige Icons (400x400px)
  • Live-Vorschau - Sieh dein Icon in Echtzeit
  • Tools - Mirror, Flip, Random, Clear
  • Hover-Feedback - Grüner Rahmen zeigt exaktes Pixel

🔄 Array Transformer - Der Wald kennt keine Zeit

Statt "Playback" oder "Speed" gibt's den 0→1 Transformer:

Philosophie:

  • ❌ Keine Zeit im Wald
  • ✅ Nur der Weg durch's Array
  • ✅ Der Krümel bestimmt das Tempo selbst
  • ✅ Vor, zurück, pausieren - volle Kontrolle

4 Aufbau-Modi:

  1. Zeile für Zeile - Links→Rechts, Zeile für Zeile
  2. Spalte für Spalte - Oben→Unten, Spalte für Spalte
  3. Spirale - Von außen nach innen (perfekt für Strudel 🌀)
  4. Farbverlauf - Sortiert nach Farbwert (Dunkel→Hell) 🔥

Verwendung:

  1. Template laden (z.B. DumboSQL 🐘)
  2. Aufbau-Modus wählen
  3. Slider bewegen (0% bis 100%)
  4. Verstehen wie Farben aufgebaut werden
  5. ↺ Zurück zu Null

Beispiel: Flip Y + Farbverlauf-Modus = Siehst genau wie sich die Farben von dunkel zu hell transformieren!

🎨 Crew Templates - Alle 21 Waldwächter!

Komplett enthalten:

Analysten & Guides

  • 🦉 Krümeleule (Tiefe & Richtung) - Lila/Gelb/Weiß
  • 🧭 Vektor (Orientierung) - Rot/Grün/Gelb/Blau Kompass
  • 🐙 DeepBit (Bash-Analyse) - Lila/Multi

Flow & Balance

  • 🦊 FunkFox (Bash-Flow) - Rot/Orange/Gelb
  • 🕊️ Taichi Taube (Balance) - Weiß/Grau/Grün
  • 🐼 BashPanda (Terminal-Dojo) - Schwarz/Weiß/Grün

Daten & Struktur

  • 🐘 DumboSQL (Daten) - Blau/Weiß
  • 📄 Templatus (Struktur) - Weiß/Grau/Grün
  • 🐍 SnakePy (Logik) - Grün/Gelb

Energie & Mechanik

  • ⚡ CapaciTobi (Energie) - Gelb/Orange/Grün
  • 🔧 Schraubbär (Mechanik) - Orange/Gelb/Grau

Web & Design

  • 🐿️ Schnippsi (CSS) - Orange/Gelb/Grün
  • 🌶️ PepperPHP (Struktur-Mentor) - Rot/Grün/Gelb

Sicherheit & Debugging

  • 🐞 Bugsy (Debug-Empath) - Rot/Schwarz/Gelb
  • 🦀 CrabbyRust (Security) - Rot/Orange/Schwarz

Infrastruktur

  • 🐌 Schnecki (Verkabelung) - Grün/Weiß
  • 🕷️ Spider (Netzwerk) - Lila/Schwarz/Grün
  • ☁️ CloudCat (DevOps) - Blau/Weiß/Grau

Kreativ & Meta

  • 👾 ASCII-Monster (Zeichenpoet) - Grün/Schwarz Matrix-Style
  • 🟢 OZM Crumb-Navigator (Resonanz-Interface) - Grün/Gelb Resonanz-Kreise
  • 🦡 GitBadger (Versionskontrolle) - Schwarz/Weiß Streifen

Jeder Krümel findet seine Rolle wieder! 🌲💚

📋 JSON Theme Format

{
  "version": "2.0",
  "name": "FunkFox",
  "emoji": "🦊",
  "type": "Bash-Flow",
  "gridSize": 30,
  "colors": {
    "0": "#1a1a2e",  // Background (immer)
    "1": "#ff6b6b",  // Hauptfarbe
    "2": "#ff9a3c",  // Sekundärfarbe
    "3": "#ffd93d",  // Akzent 1
    "4": "#ffffff",  // Akzent 2
    "5": "#000000",  // Schwarz
    "6": "#ee6c4d"   // Akzent 3
  },
  "matrix": [
    [0,0,0,...],  // 30 Zeilen
    [0,1,1,...],
    ...           // 30 Spalten
  ],
  "timestamp": "2026-02-13T12:00:00Z"
}

🔧 Verwendung

Template laden

  1. Klicke auf eine Rolle in der Crew Library
  2. Das Icon und die Farben werden geladen
  3. Transformer zeigt Aufbau bei 0%

Icon erstellen

  1. Wähle eine Farbe aus der Palette (click)
  2. Klicke im Editor-Grid auf Pixel
  3. Jeder Klick setzt die gewählte Farbe
  4. Grüner Hover-Rahmen zeigt exaktes Pixel

Transformer nutzen

  1. Wähle Aufbau-Modus (Zeile/Spalte/Spirale/Farbverlauf)
  2. Bewege Slider von 0% bis 100%
  3. Beobachte wie Icon sich aufbaut
  4. Scrubben = Verstehen!

Tools nutzen

  • Clear - Leere das komplette Grid
  • Random - Zufälliges Muster generieren
  • Mirror X - Horizontal spiegeln
  • Flip Y - Vertikal spiegeln (dann Transformer!)

Export

  • JSON Export - Speichert Icon + Farben + Metadata
  • PNG Export - Speichert 400x400px Bild (pixelated)

Import

  1. Klicke auf "📥 JSON Importieren"
  2. Wähle eine .json Datei
  3. Template wird geladen + Transformer initialisiert

💡 Tipps für 8-Bit Icons

  1. Symmetrie nutzen - Verwende Mirror für symmetrische Designs
  2. Kontrast - Dunkle und helle Farben für Lesbarkeit
  3. Einfachheit - 30x30 ist klein, weniger ist mehr
  4. Charakter - Betonung auf charakteristische Merkmale (Ohren, Schnabel, etc.)
  5. Farbschema - Max. 4-5 Farben pro Icon für Klarheit
  6. Transformer nutzen - Farbverlauf-Modus zeigt dir die Farblogik!

🌲 Crumbforest Integration

Diese Icons werden verwendet für:
- Rolle-Avatare in der Crew-Seite
- Chat-Interfaces
- Vektor-Visualisierung (Populous-Style)
- Dokumentation
- Badges & Achievements

🖥️ Technische Specs

  • Canvas-Größen: 900x900px Editor, 400x400px Preview
  • Pixel-Größe: 30px pro Grid-Pixel im Editor
  • Min. Bildschirmbreite: 1400px empfohlen
  • Layout: 3-Spalten (Crew | Preview+Editor | Controls)
  • Browser: Modernes HTML5 Canvas (Chrome, Firefox, Edge)

📦 Dateistruktur

/
├── crumbmatrix_v2.html     # Hauptdatei (standalone)
├── README.md               # Diese Datei
└── templates/              # JSON Templates (optional)
    ├── funkfox.json
    ├── maya.json
    └── ...

🌀 Transformer für Strudel

Die Spirale (Außen→Innen) ist perfekt als Basis für späteren Strudel-Code:
- Sequenz zeigt exakte Reihenfolge
- Von Matrix zu Animation
- Zeitlos = Resonanz-basiert

🚀 Roadmap

  • [x] Alle 21 Waldwächter-Templates ✅
  • [ ] Spritesheet-Export (alle Icons in einem)
  • [ ] Import von PNG → Matrix (OCR)
  • [ ] Keyboard-Shortcuts (Pfeiltasten, Zahlen für Farben)
  • [ ] Undo/Redo Stack
  • [ ] Gradient-Tool (automatischer Farbverlauf)
  • [ ] Template-Variationen (verschiedene Posen pro Rolle)
  • [ ] Animation-Export (GIF aus Transformer-Sequenz)

Made with 💚 in the Crumbforest

Der Wald kennt keine Zeit - nur Transformation. 🌲✨