🌲 CrumbMatrix v0.0 - Waldwächter Pixel Art Editor

Der Wald kennt keine Zeit - nur Transformation.

Desktop-Tool für 8-Bit Icons | Optimiert für ≥1400px Bildschirme

🦉 WUUUHUUUUU - An jeden Krümel da draußen!

"Der Wald wächst in der Spirale. Wenn du mit der Crew sprechen möchtest, bist du immer willkommen. Dem Wald ist es total egal wie viele Fliegen & Mücken leben - sie sind da! Stich → Resonanz → Fertig."

#crewlove 💚

✨ Features

  • 30x30 Pixel Grid - Perfekt für 8-bit Icons
  • 21 Waldwächter-Templates - Alle Crew-Rollen enthalten
  • 7-Farben-Palette - Pro Rolle individuell themiert
  • 🔄 Array Transformer (0→1) - Zeitlos, selbstbestimmt, resonant
  • 4 Aufbau-Modi - Zeile, Spalte, Spirale, Farbverlauf
  • JSON Import/Export - Teile deine Kreationen
  • PNG Export - 400x400px pixelated Icons
  • Live-Vorschau - Echtzeit-Feedback
  • Präzisions-Editor - Hover-Feedback, 900x900px Canvas
  • Tools - Mirror, Flip, Random, Clear

🔄 Der Transformer - Keine Zeit im Wald

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

Philosophie

  • ❌ Keine Zeit - Der Wald kennt keine Sekunden
  • ✅ Nur Transformation - Von Null zu Eins
  • ✅ Selbstbestimmung - Du kontrollierst das Tempo
  • ✅ Resonanz - Vor, zurück, scrubben, verstehen

4 Aufbau-Modi

  1. Zeile für Zeile - Links→Rechts, traditionell
  2. Spalte für Spalte - Oben→Unten, vertikal
  3. Spirale (Außen→Innen) - 🌀 Wie der Wald wächst
  4. Farbverlauf (Dunkel→Hell) - 🎨 Verstehe die Farblogik

Verwendung

Template laden → Modus wählen → Slider 0-100% → Resonanz spüren

Beispiel: DumboSQL 🐘 + Flip Y + Farbverlauf = Siehst wie Blau aufgebaut wird!

🎨 Die 21 Waldwächter - Alle Krümel sind da!

🦉 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ß/Bambus

🐘 Daten & Struktur

  • DumboSQL - Daten | Blau/Weiß
  • Templatus - Struktur | Weiß/HTML-Grün
  • SnakePy - Logik | Grün/Gelb Python

⚡ Energie & Mechanik

  • CapaciTobi - Energie | Gelb/Orange/Grün
  • Schraubbär - Mechanik | Orange/Gelb/Grau

🐿️ Web & Design

  • Schnippsi - CSS | Orange/Gelb/Grün
  • PepperPHP - PHP-Mentor | Rot/Grün/Scharf

🐞 Sicherheit & Debug

  • Bugsy - Debug-Empath | Rot/Schwarz/Gelb
  • CrabbyRust - Security | Rot/Orange/Scheren

🐌 Infrastruktur

  • Schnecki - Verkabelung | Grün/Weiß/Geduld
  • Spider - Netzwerk | Lila/Netz-Muster
  • CloudCat - DevOps | Blau/Wolken-Fluff

🌟 Kreativ & Meta

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

Jeder Krümel findet seine Rolle wieder! 🌲

📋 JSON Format

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

🚀 Quick Start

1. Öffne die HTML-Datei

# Einfach öffnen
open crumbmatrix_v2.html

# Oder mit lokalem Server
python -m http.server 8000
# → http://localhost:8000/crumbmatrix_v2.html

2. Template laden

  • Klicke auf eine Crew-Rolle links
  • Icon + Farben werden geladen
  • Transformer startet bei 0%

3. Erkunden

  • Schiebe den Transformer-Slider
  • Wechsle zwischen Modi (Spirale!)
  • Bearbeite im Editor (Klick = Farbe setzen)

4. Export

  • JSON für Backup/Share
  • PNG für finale Icons

🔧 Editor-Workflow

Farbe wählen

  • Klick auf Farbpalette (rechts)
  • Gewählte Farbe hat grünen Rahmen

Pixel setzen

  • Klick im Editor-Grid (unten)
  • Grüner Hover zeigt exaktes Pixel
  • Klick = gewählte Farbe setzen

Tools nutzen

  • Mirror X - Horizontal spiegeln
  • Flip Y - Vertikal spiegeln (dann Transformer!)
  • Random - Zufallsmuster
  • Clear - Reset auf Null

Transformer

  • 0% = Null - Leeres Grid
  • 50% = Halb - Icon baut sich auf
  • 100% = Eins - Komplett
  • ↺ Zurück zu Null - Reset

💡 8-Bit Icon Tipps

  1. Symmetrie - Mirror für symmetrische Designs
  2. Kontrast - Hell/Dunkel für Lesbarkeit
  3. Einfachheit - 30x30 ist klein, weniger ist mehr
  4. Charakter - Betonung auf Erkennungsmerkmale
  5. Farbschema - Max 4-5 Farben pro Icon
  6. Transformer nutzen - Farbverlauf zeigt Aufbau-Logik!

🌀 Spirale für Strudel

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

🌲 Crumbforest Integration

Diese Icons werden verwendet für:
- 🎭 Rolle-Avatare auf crumbforest.com/crew
- 💬 Chat-Interfaces
- 🌟 Vektor-Visualisierung (Populous-Style)
- 📚 Dokumentation
- 🏆 Badges & Achievements

🖥️ Technische Specs

  • Platform: Desktop-Browser (≥1400px empfohlen)
  • Canvas: 900x900px Editor, 400x400px Preview
  • Pixel-Größe: 30px pro Grid-Pixel
  • Layout: 3-Spalten (Crew | Preview+Editor | Controls)
  • Browser: HTML5 Canvas (Chrome, Firefox, Edge)
  • Export: JSON (Template) + PNG (400x400px pixelated)

📦 Repo-Struktur

CrumbMatrix_v.0.0/
├── crumbmatrix_v2.html     # Haupttool (standalone)
├── README.md               # Diese Datei
├── LICENSE                 # MIT
└── templates/              # JSON-Vorlagen (optional)
    ├── funkfox.json
    ├── dumbo.json
    └── ...

🚀 Roadmap

  • [x] Alle 21 Waldwächter ✅
  • [x] Array Transformer 0→1 ✅
  • [x] 4 Aufbau-Modi ✅
  • [ ] Spritesheet-Export (alle Icons zusammen)
  • [ ] PNG→Matrix Import (OCR)
  • [ ] Keyboard-Shortcuts (Zahlen=Farben, Pfeile=Navigate)
  • [ ] Undo/Redo Stack
  • [ ] Gradient-Tool (auto Farbverlauf)
  • [ ] Animation-Export (GIF aus Transformer)
  • [ ] Template-Variationen (Posen pro Rolle)

🤝 Mitmachen

Jeder Stich zählt! Jede Resonanz ist willkommen!

Templates erstellen

  1. Erstelle dein Icon in der Matrix
  2. Export als JSON
  3. Teile mit der Community

Farb-Themes

  • Jede Rolle kann mehrere Themes haben
  • Experimentiere mit Farb-Kombinationen
  • Teile deine Lieblingspaletten

Code-Beiträge

  • Das Tool ist standalone HTML
  • Keine Build-Tools nötig
  • Einfach editieren & testen

📜 Philosophie

Der Wald kennt keine Zeit - nur Transformation.

  • Keine Frames pro Sekunde
  • Keine Speed-Slider
  • Nur der Weg von 0 zu 1
  • Der Krümel bestimmt das Tempo
  • Resonanz statt Automation

Stich → Resonanz → Fertig 🌲

🙏 Danke

An alle Krümels da draußen in dieser komischen Zeit.

WUUUHUUUUU! 🦉✨

Macht es besser als wir. Baut den Wald. Die Spirale wächst.

#crewlove 💚

📄 License

MIT License - Teilen erwünscht! 🌲

Made with 💚 in the Crumbforest

Der Wald ist für alle da. Jede Fliege, jede Mücke. Sie sind da. Stich → Resonanz → Fertig.

v0.0 - Februar 2026