Pixel-Cover aus Code: wie die Bilder dieses Blogs entstehen
Jeder Beitrag in diesem Blog hat sein eigenes animiertes Pixel-Art-Cover, und keins davon ist eine Bilddatei. Wie sie gezeichnet werden: ein 128×128-Raster, vier Grüntöne, Dithering, eine winzige Schrift und eine Szene als Funktion der Zeit.
KI-Zusammenfassung anfordern
Jeder Beitrag in diesem Blog hat eine kleine animierte Szene als Cover: ein Umzugswagen mit der Aufschrift 301, ein Rennwagen im Sonnenuntergang, ein Kassettendeck, das eine Kassette kopiert. In jeder spielt das Onigiri aus dem Spiel der Website die Hauptrolle. Keins dieser Cover ist ein Bild oder Video. Jedes ist ein paar Dutzend Zeilen Code, die die Szene Pixel für Pixel zeichnen, während du zuschaust.
So funktioniert das, und darum ist es so gebaut.
1. Die Leinwand: 128 mal 128 Pixel
Jedes Cover wird in ein Raster aus 128 mal 128 Pixeln gezeichnet, die Auflösung eines kleinen Handheld-Bildschirms aus den 90ern. Der Browser skaliert es auf die Größe des Covers hoch, mit scharfen, quadratischen Pixeln, statt sie zu verwischen. So bleibt die Grafik auf jedem Bildschirm scharf, vom Handy bis zum großen Monitor, ohne eine größere Datei zu brauchen.
2. Die Palette: vier Grüntöne
Jedes Cover nutzt dieselben vier Farben: das Schwarz und die Grüntöne aus dem Design der Website, von fast Schwarz bis zum hellen Hero-Grün. Vier Töne waren die ganze Palette klassischer Handheld-Konsolen, und die Grenze gibt allen Covern einen gemeinsamen Look, so wie eine Markenpalette es für eine Website tut.
3. Dithering: mehr Abstufungen aus vier Farben
Vier Farben klingen nach sehr wenig für Himmel, Lichtschein und Schatten. Der Trick heißt Dithering: Ein festes Pixelmuster entscheidet für jede Stelle, ob sie den helleren oder dunkleren von zwei benachbarten Tönen bekommt. Aus normalem Abstand mischt das Auge sie zu Zwischentönen. Ein Sonnenuntergang bekommt seinen Verlauf, eine Lampe ihren Schein, alles aus vier Farben.
4. Der Stift: eine Handvoll Werkzeuge
Alle Szenen werden mit denselben wenigen Werkzeugen gezeichnet, wie in einem alten Malprogramm:
- Rechtecke und Ovale für Bildschirme, Knöpfe, Räder und Sonnen.
- Linien für Antennen, Griffe und Bögen.
- Schattierung, die eine Fläche mit einem berechneten Ton füllt, per Dithering auf die Palette gebracht.
- Sprites: kleine Pixelbilder, als Ziffernreihen geschrieben, etwa das Onigiri selbst, 16 mal 16 Pixel.
- Eine 3×5-Pixelschrift für Beschriftungen wie „PASS“, „301“ oder „RESTORE OK“.
5. Zeit: jeder Frame ist eine Funktion
Jede Szene ist eine reine Funktion der Zeit: Aus der Anzahl Sekunden, seit das Cover erschienen ist, zeichnet sie genau einen Frame. Zwischen den Frames wird nichts gespeichert. Das hält jede Szene überschaubar und ermöglicht drei nützliche Dinge:
- Die Geschichte beginnt neu, jedes Mal, wenn das Cover ins Bild scrollt.
- Ein Klick oder Tippen lässt das Onigiri springen, weil auch die Zeit seit dem letzten Klick übergeben wird.
- Reduzierte Bewegung ist abgedeckt: Wer weniger Bewegung eingestellt hat, sieht einen ausgewählten Moment der Szene, ein Standbild, das die Geschichte allein erzählt.
Die Animation läuft nur, solange das Cover auf dem Bildschirm ist.
6. Größe: Code statt Dateien
Eine ganze Szene sind ein paar Kilobyte Code, weniger als ein einzelnes komprimiertes Foto, und alle Cover teilen sich dieselben Zeichenwerkzeuge. Für sie müssen keine Bilddateien geladen werden, und trotzdem bewegen sie sich. Für einen Blog, dessen Beiträge von schnellen Websites handeln, fühlte sich das richtig an.
7. Die Regeln: allgemein und wiedererkennbar
Die Szenen folgen ein paar Regeln. Jede zeigt das Thema ihres Beitrags auf einfache Weise, mit Geräten und Spielen aus den 80ern und 90ern, die die meisten kennen: ein Kassettendeck, eine Wahrsagekugel, eine Levelkarte. Sie bleiben allgemein, ohne Markennamen, Logos oder echte Figuren. Und das Onigiri ist immer dabei.
Die Kurzfassung
- 128×128 Pixel, mit scharfen Kanten hochskaliert.
- Vier Grüntöne, die Palette der Website und die klassische Handheld-Grenze.
- Dithering macht aus vier Farben Verläufe und Lichtschein.
- Ein kleiner Stift: Rechtecke, Ovale, Linien, Schattierung, Sprites und eine 3×5-Schrift.
- Eine Funktion der Zeit: startet beim Erscheinen neu, reagiert auf Klicks, ein Standbild bei reduzierter Bewegung.
- Ein paar Kilobyte Code pro Szene, keine Bilddateien.
Wenn deine Marke eigene, verspielte Visuals gebrauchen kann, melde dich.