Your privacy is important to us!

We use cookies to improve our website for you. No hidden trackers. You decide what you allow.

Essential cookies enable basic functions and are necessary for the website to function properly.
Statistics cookies collect information anonymously. This information helps us to understand how our visitors use our website.
Marketing cookies are used by third parties or publishers to display personalized advertisements. They do this by tracking visitors across websites.

Jump to main content

Pixelbilder mit Calliope

Vom Pixel zum Bild

In der Unterrichtseinheit erkunden die Kinder analoge und digitale Anzeigetafeln. Sie erstellen analoge Pixelbilder und programmieren diese anschließend auf mit dem Calliope Mini. Wie funktionieren frühe Anzeigetafeln und wie kommt ein Bild bei modernen Computern auf den Bildschirm? In der Einheit entdecken die Kinder, dass allen digitalen Oberflächen Raster zugrunde liegen und wie sie mittels dieser Raster Bilder gestalten können. Die Kinder entwerfen eigene Pixelbilder, die sie mit Hilfe der einfachen Programmierumgebung MakeCode auf der LED-Anzeige des Mikrocontrollers Calliope Mini erzeugen.

Das Bild zeigt eine Nahaufnahme des Mikrocontrollers Calliope mini.
Der Mikrocontroller Calliope Mini zeigt spielerisch die Prinzipien des Programmierens. SDTB / C. Kirchner 1/1

Material

  • Vorlage analoge Pixelbilder
  • Vorlage Vom Pixel zum Bild
  • Buntstifte
  • farbige Zettel, so groß wie das Pixelraster oder Haftnotizettel
  • optional: Calliope Mini und Gerät, um diesen zu programmieren
Ein aus 49 quadratischen Karten gebildetes Raster zeigt einen stilisierten Smiley. Blaue Karten bilden den Hintergrund, orangefarbene Karten Augenbrauen und Mund; zwei magentafarbene Karten markieren die Augen.
Ein Smiley aus Karten: Aus einzelnen Farbfeldern entsteht ein fröhlicher Gesichtsausdruck. 1/1

Aktivität

Welche digitalen Anzeigen findet ihr?

Als Einstimmung auf das Thema beobachtet ihr in eurem Alltag, wo ihr überall von Anzeigen und Displays umgeben seid. Sucht digitale Anzeigen in eurer Nähe: Bildschirm, Handy-Display, Bus-Anzeige-Tafel. Untersucht diese, wenn ihr habt, gerne mit einer Lupe. Geht einmal ganz nah ran an einen Bildschirm und dann weiter weg. Seht ihr, dass das Bild aus ganz vielen Bildpunkten, sogenannten Pixeln, besteht?

Pixelbilder selbst erstellen

Jeder Pixel hat eine eigene Farbe. Sucht euch genau eine Farbe aus, die eure Pixel haben sollen. Wie viele Pixel benötigt ihr, damit ihr ein Bild zeichnen könnt? Probiert mal: 1×1 Pixel, 2×2 Pixel, 5×5 Pixel. 5×5 geht schon ganz gut, oder? Zeichnet 5×5 Pixel Bilder und zeigt sie euch gegenseitig und erratet, was der oder die andere gezeichnet hat.

Impulsfragen

Kann ich mit 5×5 Pixeln alles darstellen? Wie können mehr Details dargestellt werden? Wie viele Pixel benötige ich, um die Ziffern von 0 bis 9 darzustellen? Wie viele Pixel hat heutzutage ein Handy Bildschirm?

Codieren und Decodieren: analoge Pixelbilder versenden

Die weißen Kästchen können mit einer 0  dargestellt werden, die schwarzen mit einer 1. Und alle Zahlen schreibt man dann in einer langen Schlange, siehe Vorlage vom Pixel zum Bild. Zeichnet ein 5×5 Pixel Bild und übersetzt es in eine Zahlenschlange. Gebt jemand anderem eure Zahlenschlange. Kann die andere Person sie zurück übersetzen in ein Bild?

Schematische Darstellung der Umwandlung eines fünf mal fünf Felder großen Smiley-Rasters in Binärdaten: Schwarze Felder werden als „1", weiße Felder als „0" dargestellt. Pfeile zeigen zunächst die zeilenweise und anschließend die fortlaufende Anordnung der Zahlen.
Vom Smiley zum Binärcode: So wird ein Bild für den Computer in Nullen und Einsen übersetzt. 1/1

Optional: Programmiert die 5×5 LED Matrix des Calliope Mini

Programmiert den Calliope Mini so, dass ihr mit den 5×5 Pixeln ein Bild anzeigen könnt. Nutzt MakeCode aus der Calliope App und den abgebildeten Codeblock dazu. Wählt verschiedene Eingaben und lasst euch so, je nach Eingabe, unterschiedliche Bilder ausgeben. Könnt ihr mit den Bildern vielleicht sogar eine kurze Geschichte erzählen? Oder eine kleine Animation erstellen?

Screenshot einer blockbasierten Programmieroberfläche. Der pinke Steuerblock lautet „wenn Knopf A gedrückt" und enthält den türkisfarbenen Block „zeige LEDs" mit einem Punktmuster. Am oberen Rand stehen „Zurück" und „Hilfe!"; links und oben sind weitere Programmierwerkzeuge und Symbole zu sehen.
Ein Knopfdruck, ein neues Muster: Mit wenigen Programmierblöcken wird eine LED-Anzeige zum Leben erweckt. 1/1

Mehr Farben

Wenn ihr nur 0 und 1 habt, wie könnt ihr damit mehrfarbige Bilder codieren? Richtig, ihr könnt die beiden Ziffern kombinieren! So könnt ihr mit den Paaren 00, 01, 10 und 11 vier verschiedene Farben darstellen. Im Beispiel bedeutet 00 weiß, 01 blau, 10 gelb und 11 rot.

Grafik zur Codierung eines farbigen Drei-mal-drei-Rasters. Die vier Farben werden jeweils zweistelligen Binärcodes zugeordnet: Weiß steht für „00", Blau für „01", Gelb für „10" und Magenta für „11". Rechts ist der entsprechende Code für jedes Rasterfeld angegeben.
Vier Farben, vier Codes: Das Raster zeigt, wie sich Farbinformationen mit nur zwei Bits darstellen lassen. 1/1