🖼️ Bildcodierung

Aufgabe: Lege ein Raster über das Bild und wähle die Farben. Klicke am Ende auf "➡️ An Decodierer", um die Ziffernfolge zu übertragen (Auflösung und Palette werden unsichtbar im Hintergrund mitgeschickt!).
📁 Eigenes Bild oder mehrere Bilder gleichzeitig hierher ziehen oder klicken
50%
0

Vorlage mit Raster

Farbpalette

Pixelbild-Vorschau

📝 Ziffernfolge (Code)

Klicke auf Rasterbereiche, um Pixel zu setzen.
Aufgabe: Lies die Ziffernfolge, wähle die passende Farbe aus der Palette und male das Bild aus! (Oder lasse es automatisch decodieren).
📚 Beispiele laden:

Zeichenfläche

Farbpalette

Im Hintergrund geladen
0
-
Auflösung
-
Bit/Pixel

Pixelbild-Vorschau

📊 Fortschritt

Noch kein Code geladen 0%
0 / 0 Pixel ⏳ Warte auf Eingabe
🎉
Perfekt! Alle Pixel sind korrekt!
Du hast das Bild fehlerfrei decodiert. Großartig!

❓ Wie benutze ich die Bildcodierung?

💡 Tipp: Diese Anwendung hilft dir, zu verstehen, wie Computer Bilder speichern. Du kannst Bilder in Zahlencodes umwandeln (codieren) und Zahlencodes wieder in Bilder zurückverwandeln (decodieren)!

🎨 Teil 1: Ein Bild codieren (Bild → Code)

1 Bild auswählen

Wähle ein Vorlagenbild aus der Galerie oder lade dein eigenes Bild hoch:

  • Vorgefertigte Bilder: Klicke auf eines der kleinen Vorschaubilder (Auto, Smiley, Herz, etc.)
  • Eigenes Bild: Klicke auf den grauen Bereich "📁 Eigenes Bild hierher ziehen" oder ziehe mehrere Bilddateien gleichzeitig hinein.
  • 💾 Gespeichert: Deine hochgeladenen Bilder werden im Browser gespeichert und erscheinen unter "📤 Hochgeladen". Du kannst sie mit dem roten X (erscheint beim Hover) wieder löschen.

2 Raster und Farbtiefe einstellen

Stelle ein, wie detailliert dein Pixelbild werden soll:

  • 📐 Raster: Wähle die Auflösung (z.B. 8×8 für 64 Pixel, 16×16 für 256 Pixel)
  • 🎨 Farbtiefe: Wähle, wie viele Farben verwendet werden sollen:
    • 1 Bit = 2 Farben (Schwarz/Weiß)
    • 2 Bit = 4 Farben
    • 3 Bit = 8 Farben
    • 4 Bit = 16 Farben
    • 5 Bit = 32 Farben
  • 👁️ Transparenz: Stelle ein, wie durchsichtig das Originalbild sein soll (hilft beim Abzeichnen)
⚠️ Wichtig: Je höher die Auflösung und Farbtiefe, desto länger wird der Code! Ein 32×32 Bild mit 32 Farben ergibt 1024 Zeichen.

3 Pixel setzen

Jetzt kannst du mit verschiedenen Werkzeugen die Pixel malen:

  • 🖌️ Malen: Klicke auf eine Farbe in der Palette, dann klicke oder ziehe über das Raster
  • 🪣 Füllen: Füllt zusammenhängende Bereiche mit einer Farbe (wie der "Farbeimer" in Paint)
  • 🧹 Radieren: Entfernt Pixel (macht sie wieder leer)
  • 💉 Aufnehmen: Klicke auf ein Pixel, um dessen Farbe auszuwählen
  • 🪄 Auto-Füllen: Füllt automatisch alle Pixel basierend auf dem Originalbild
💡 Schnell-Tipp: Nutze die Transparenz, um das Originalbild durchscheinen zu lassen und präziser zu malen! Deine Zeichnung wird automatisch gespeichert.

4 Code erzeugen

Sobald alle Pixel gesetzt sind, erscheint unten die Ziffernfolge:

0,0,3,3,3,3,0,0,...
↑ Jede Zahl steht für eine Farbe aus der Palette
  • 📋 Kopieren: Kopiert den Code in die Zwischenablage
  • ➡️ An Decodierer: Überträgt den Code direkt zum Decoder (samt Auflösung und Palette!)

🔢 Teil 2: Einen Code decodieren (Code → Bild)

1 Code eingeben oder Beispiel wählen

  • Code einfügen: Füge eine Ziffernfolge ins Textfeld ein (z.B. von jemandem bekommen)
  • Beispiel laden: Klicke auf einen der Beispiel-Buttons (😀 Smiley, ❤️ Herz, etc.)
  • Vom Encoder übertragen: Nutze den Button "➡️ An Decodierer" im Codier-Tab
Format: Die Ziffernfolge sieht so aus:
0,1,2,3,A,B,C,D,...
  • Zahlen 0-9 für die ersten 10 Farben
  • Buchstaben A-V für Farben 11-32
  • Kommas trennen die Werte

2 Decodieren

Du hast zwei Möglichkeiten:

  • ✨ Automatisch decodieren: Klicke auf den Button – das Bild wird sofort angezeigt
  • Manuell malen: Wähle Farben aus der Palette und klicke auf die Pixel, um sie nach und nach auszufüllen (gut zum Lernen!)

3 Fertig!

Das decodierte Pixelbild wird auf der Zeichenfläche angezeigt. Du kannst:

  • Weitere Pixel per Hand malen
  • Die Zeichenfläche leeren (🧹) und neu malen
  • Ein anderes Beispiel laden

📖 Wie funktioniert Bildcodierung? – Einfach erklärt

Jedes digitale Bild auf deinem Smartphone, Computer oder Fernseher besteht aus winzigen eckigen Bausteinen: Den Pixeln (Bildpunkten). Weil ein Computer keine "Farben" versteht, muss er sich jedes dieser Pixel als Zahl merken.

📌 Merksatz: Bildcodierung
Bilder werden im Computer als ein langes Raster aus Pixeln gespeichert. Jedes Pixel erhält eine Zahl, die für eine bestimmte Farbe steht.

1. Die Auflösung: Wie fein ist das Gitter?

Die Auflösung (auf Englisch: Resolution) beschreibt, aus wie vielen Pixeln ein Bild in der Breite und in der Höhe besteht. Je feiner das Gitter (je mehr Pixel), desto mehr Details können dargestellt werden.

4×4 Pixel
Extrem grob.
Insgesamt 16 Pixel.
8×8 Pixel
Erkennbares Symbol.
Insgesamt 64 Pixel.
16×16 Pixel
Deutliche Details.
Insgesamt 256 Pixel.
📌 Merksatz: Auflösung
Je höher die Auflösung, desto schärfer und detailreicher ist das Bild. Allerdings benötigt der Computer dann auch mehr Speicherplatz (der Zahlencode wird länger).

2. Die Farbtiefe: Wie bunt ist das Bild?

Die Farbtiefe gibt an, wie viele verschiedene Farben ein einziges Pixel annehmen kann. In der Informatik wird das in Bit gemessen. Je mehr Bits pro Pixel zur Verfügung stehen, desto mehr Farben können gespeichert werden.

1 Bit (S/W)
Nur 2 Farben:
Schwarz oder Weiß.
2 Bit (Grau)
4 Farben:
Weiß, Hellgrau, Dunkelgrau, Schwarz.
4 Bit (Farbe)
16 Farben:
Bunte Vielfalt möglich.

Hier ist eine Tabelle, die zeigt, wie Bits und Farben zusammenhängen:

Speicherplatz Mathematik Mögliche Farben Beispiel aus der App
1 Bit 2¹ 2 Farben Codes: 0, 1
2 Bit 2² 4 Farben Codes: 0, 1, 2, 3
3 Bit 2³ 8 Farben Codes: 0 bis 7
4 Bit 2⁴ 16 Farben Codes: 0 bis F (Hexadezimal)
8 Bit 2⁸ 256 Farben Klassische Retro-Spiele (Super Nintendo)
24 Bit 2²⁴ 16,7 Millionen Farben Moderne Fotos (True Color)
📌 Merksatz: Farbtiefe
Je höher die Farbtiefe, desto natürlicher und bunter wirkt das Bild. Auch hier gilt: Mehr Farben bedeuten mehr Speicherbedarf für den Computer.

3. Wie wird daraus jetzt ein Code?

Wenn du in der App ein 4×4 Bild malst, gehst du Zeile für Zeile (von links nach rechts, von oben nach unten) durch. Jede Farbe hat eine Nummer.

Palette: 0=Weiß, 1=Rot, 2=Grün

Zeile 1: Weiß, Grün, Weiß, Weiß → 0, 2, 0, 0

Zeile 2: Weiß, Rot, Rot, Weiß → 0, 1, 1, 0

Zeile 3: Rot, Rot, Rot, Rot → 1, 1, 1, 1

Zeile 4: Weiß, Rot, Rot, Weiß → 0, 1, 1, 0

Der Computer speichert das gesamte Bild dann als einen langen String:
0,2,0,0,0,1,1,0,1,1,1,1,0,1,1,0.