Farb-Display programmieren


RGB-Display

In der folgenden App kann die Farbe von jedem Pixel geändert werden, indem man auf das Pixel klickt. Die gewählte Farbe wird im RGB-Code, im Hexdezimal-Code und im Binär-Code angegeben:

In einem neuen Fenster starten: RGB-Display

Das in der App simulierte RGB-Display enthält 100 Pixel. Damit der Computer die Farbe für jedes Pixel darstellen kann, benötigt man bereits eine bemerkenswert große Anzahl von Einsen und Nullen. Die notwendige Datenmenge, um ein modernes Farb-Display mit Farbinformationen zu versorgen, ist unfassbar groß.

Es ist klar, dass es nicht praktikabel ist, die Farben dieser Millionen von Pixeln einzeln anzugeben. Es muss andere Möglichkeiten geben, den darzustellenden Inhalt eines Farbdisplays zu programmieren.


Block-Programmierung

Um Inhalte auf einem modernen Farb-Display anzuzeigen, werden nicht die Farben der einzelnen Pixel festgelegt. Man verwendet Programmiersprachen, mit deren Hilfe man die Form und die Farbe geometrischer Objekte angeben kann. Aus dem Programmier-Code erzeugt der Computer den Binär-Code, sendet diesen an das Display und das Display stellt die gewünschte Grafik dar.

Im folgenden lernen Sie, wie man einem Computer beibringen kann, farbige Objekte auf einem Farbdisplay darzustellen. Dazu verwenden wir die Block-Programmierung, bei der Anweisungen für den Computer aus grafischen Blöcken zusammengestellt werden. Ein Block erzeugt den Programm-Code, den ein Computer verstehen kann, automatisch.

In einer ersten kleinen Übung setzen Sie die vorhandenen Blöcke bitte so zusammen, dass die zusammengestellten Informationen Sinn machen.


Das erste Programm

  • Starten Sie den p5.js-Blockly-Editor in einem eigenen Tab: p5.js-Blockly-Editor starten.
  • Wechseln Sie zwischen diesem Kurs und dem p5.js-Blockly-Editor hin und her, indem Sie oben jeweils auf den entsprechenden Tab klicken.

Im einfachst denkbaren Programm wird eine Zeichenfläche mit einer bestimmten Größe festgelegt und diese mit einer Farbe eingefärbt:

  • Löschen Sie die vorhandenen Blöcke, indem Sie diese auf die Werkzeugleiste oder den Mülleimer ziehen oder indem Sie mit der rechten Maustaste auf den Block klicken und dann "Bausteine löschen" anklicken. Sie können auch einen Block anklicken und die Taste "entf" drücken.

  • Ziehen Sie den Block "setup()" aus der Kategorie "p5-Funktionen" von der Werkzeugleiste in den Block-Editor.

  • Ziehen Sie den Block "Hintergrundfarbe" mit dem Farbauswahlfeld aus der Kategorie "Aussehen" in den Editor.

  • Setzen Sie den Block "Hintergrundfarbe" in den Block "setup()".
  • Geben Sie eine gewünschte "Breite" und "Höhe" der Zeichenfläche ein.
  • Wählen Sie eine Hintergrundfarbe für die Zeichenfläche, indem Sie auf die Farbe im Block "Hintergrundfarbe" klicken und eine Farbe anklicken.

  • Klicken Sie unterhalb der Zeichenfläche auf die Schaltfläche "Code ausführen" und Sie sollten eine Zeichenfläche in der von Ihnen angegebenen Größe, mit der von Ihnen gewählten Farbe sehen.


Farbe mit Farb-Codes festlegen

Die Hintergrundfarbe der Zeichenfläche kann auf vier verschiedene Weisen festgelegt werden:

1.: Man klickt im Block "Hintergrund" im Farbauswahlfeld eine gewünschte Farbe an:

2.: Man wählt in einer Farbauswahl-App (z.B. Color Picker) eine Farbe aus:

und kopiert den RGB-Code in die entsprechenden Felder im RGB-Block "Hintergrundfarbe":

3.: Man wählt in einer Farbauswahl-App (z.B. Color Picker) eine Farbe aus:

und kopiert den Hexadezimal-Code der Farbe in das Textfeld im Text-Block "Hintergrundfarbe":

4.: Man wählt in einer Farbnamen-App (z.B. HTML Color Names) eine Farbe aus:

und kopiert den Farbnamen der Farbe in das Textfeld im Text-Block "Hintergrundfarbe":


Übung 1: Bunte Kreise

  • Öffnen Sie den p5.js-Blockly-Editor durch einen Klick auf den angegebenen Internet-Link: Bunte Kreise

Mit Hilfe dieses Programms werden sechs unterschiedlich gefärbte Kreise gezeichnet.

Hinweis: Zusätzlich zu den Helligkeitswerten der Subpixel (rot, grün und blau) gibt es noch den Wert "Durchsichtigkeit". Mit diesem Wert kann der Grad der Durchsichtigkeit (Transparenz) des Kreises zwischen 0 (voll durchsichtig) und 255 (nicht durchsichtig) eingestellt werden. Die Kreise sollen nicht durchsichtig sein, weswegen überall die Durchsichtigkeit mit "255" angegeben ist.

  • Klicken Sie im geladenen Programm auf ein Fragezeichen und finden Sie so jeweils den Farbnamen der eingestellten Farbe heraus.
  • Tauschen Sie den Block "Füllfarbe" aus, so dass die Farbe mit dem Farbnamen angegeben wird.
  • Verändern Sie leicht die Position und etwas die Größe der Kreise.


Übung 2: Kunst

  • Erstellen Sie im p5.js-Blockly-Editor eine kreative Zeichnung mit geometrischen Objekten, die Sie in der Kategorie "Grundformen" finden.
  • Verwenden Sie für die Farbgebung alle 4 Möglichkeiten (Farbauswahlfeld, RGB-Code, Hexadezimal-Code, Farbnamen), die Sie in diesem Kapitel kennengelernt haben, indem Sie die entsprechenden Blöcke für "Hintergrundfarbe" , "Füllfarbe" und "Linienfarbe" verwenden.
  • Speichern Sie den Quellcode des Programms (Schaltfläche unten links im p5.js-Blockly-Editor).
  • Erstellen Sie eine Bildschirmkopie Ihrer Zeichnung.