Lego Selfie

Bau ein Selfie von dir aus Legos! Dabei lernst du Pixel kennen, die kleinen Bausteine, aus der digitale Bilder gemacht sind. Und du erfährst, woher Computer wissen, welche Pixel sie in welcher Farbe darstellen müssen: die haben nämlich einen Code, das ist so etwas wie eine Geheimsprache.

Bist du schon einmal Bildern begegnet, die aussehen als wären sie aus Klötzchen gemacht? Diese Klötzchen heissen Pixel, und alle Bilder auf dem Computer sind daraus gemacht. Nur sind sie heute meist so klein, dass wir sie von Auge gar nicht mehr sehen können.

Wenn wir heute Bilder von alten Computersystemen ansehen, können wir die Pixel deutlich sehen, zum Beispiel Supermario:

Links der alte Supermario, der mit 16 x 12 Pixeln ausgekommen ist, und rechts der aktuelle Supermario, der so kleine Pixel hat, dass wir sie gar nicht mehr sehen können.

Natürlich kann man mit mehr Pixeln viel mehr Details in einem Bild unterbringen. Aber es ist doch ganz erstaunlich, wie viel wir auch mit ganz wenigen Pixeln zeigen können: der alte Supermario hatte z.B. etwas stärkeren Bartwuch als der neue ;-).

Für die Lego-Selfies machen wir das umgekehrte: wir machen aus den vielen Pixeln eines Selfies vom Handy ein Bild mit nur wenig Pixeln aus Lego. Dafür brauchst du:

Anleitung: 1) Vorbereitung:

2) Rastern:

Zuerst überträgst du dein Gesicht ganz grob in den Raster.

Schau dein Selfie zuerst gut an: hast du ein eher rundes oder schmales Gesicht? Wo sind die Haare: stehen sie nach aussen, oder hängen sie ins Gesicht? Sind viele Haare oder nur ganz wenige zu sehen? Wo im Gesicht stehen die Augen und der Mund?

Der schwierige Teil kommt jetzt: wir müssen entscheiden, welches Viereck welche Farbe bekommt.
Schau mal: wo ist es ganz klar? Welche Vierecke sind komplett in den Haaren oder im Gesicht?
Male diese mit den Buntstiften ganz aus.

Bei den Vierecken, wo die Linien mittendurch gehen, muss man etwas überlegen und abwägen. Die Faustregel ist: die Mehrheit gewinnt. Also wo mehr als die Hälfte der Fläche Haar ist, wird das ganze Viereck Haar.

Aber pass auf: die Augen sollten nicht verschwinden, und auch der Mund nicht. Hier musst du etwas improvisieren.

3) Codieren

Du hast jetzt schon ein schönes Pixelbild von dir gemacht! Im nächsten Schritt schreibst du für jede Zeile daneben, wie viele Legosteine du von jeder Farbe brauchst. Das wird der Code unseres Bildes.

Alle Computerbilder haben auch so einen Code. Er sagt dem Computer, welche Pixel auf dem Bildschirm welche Farbe bekommen.

Die Namen des Codes steht immer am Ende der Datei nach dem Punkt: “.jpg” bedeutet, dass für das Bild der JPG-Code verwendet wird.

Wenn du ein Bild mit einem Textprogramm aufmachst, zeigt es dir den Code an. Du kannst das Bild auf Mac aufmachen, indem du rechts-klickst darauf, “öffnen mit…” wählst, und im Untermenü ganz unten “Anderem Programm” auswählst. Dann geht ein Fenster auf, scrolle darin runter bis du die TextEdit.app findest, und wähle diese aus.
Auf Windows geht es ganz ähnlich, das Programm heisst “Notepad”.

So sieht der Anfang des Codes des Titelbildes dieses Artikels aus:

Man kann sehr wenig darin lesen, weil dieser Text nicht für Menschen geschrieben ist, sondern für Computer.

4) in Lego nachbauen:

Bau nun deinen Code mit Lego-Steinen nach.

Es kann Probleme geben, wenn du farbige Teile nirgends befestigen kannst (manchmal bei den Haaren, bei mir beim T-Shirt).
Dann musst du etwas tricksen und eine Brücke finden.

Wenn du keine Legos hast, kannst du auch das Pixelbild in Papier nachbauen: einfach viele Quadrate aus farbigem Papier ausschneiden und zusammenkleben. Oder vielleicht hast du eine andere Idee, aus was deine Pixel bestehen könnten?

Was du jetzt machst, ist dasselbe was ein Programm macht, wenn es eine Datei darstellt. Man nennt dies “Interpretation”. Alle Programme machen das, sogar dein Betriebssystem.

Wenn du diese Zeilen liest, dann hat dein Browser ganz viel Code interpretieren müssen, um dir diese Infos so anzuzeigen.

Der Code von Webseiten heisst HTML (HyperText Markup Language). Du kannst dir den Code dieser Webseite im Browser selber ansehen: in Chrome gehst du unter “Anzeigen” > “Entwickler” > “Quelltext anzeigen”. In Firefox ist es unter “Extras” > “Web-Entwickler” > “Seitenquelltext” anzeigen.
Hier gibt es viel zu sehen! Findest du den Text, den du gerade hier liest?

5) ein Selfie machen mit dem Lego-Selfie

Mach ein Selfie mit deinem Lego-Selfie! Erkennst du dich noch?
Schick uns Dein Selfie: vermittlung@hek.ch.