11.1.4 Farb-Display programmieren

In der folgenden App kann die Farbe von jedem Pixel geändert werden:

  • Klicken Sie auf eines der Pixel und suchen Sie eine Farbe aus.
  • Klicken Sie danach auf ein anderes Pixel, damit die Änderung in die Codes umgerechnet wird.

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.

Bei einem modernen Farb-Display mit Millionen von Pixeln ist die notwendige Datenmenge, um das Display mit Farbinformationen zu versorgen, unfassbar groß. Es ist nicht praktikabel, die Farben dieser Millionen von Pixeln einzeln anzugeben.

Um Inhalte auf einem modernen Farb-Display anzuzeigen, werden die Farben der Pixel nicht einzeln festgelegt:

  • Man verwendet Programmiersprachen und gibt mit deren Hilfe die Form und Farbe geometrischer Objekte an.
  • Aus dem Programmier-Code erzeugt der Computer automatisch den Binär-Code, sendet diesen an das Display und das Display stellt die gewünschte Grafik dar.

Eine Programmiermethode ist die Block-Programmierung, bei der Anweisungen für den Computer aus grafischen Blöcken zusammengestellt werden. In einer ersten kleinen Übung setzen Sie die vorhandenen Blöcke bitte so zusammen, dass die zusammengestellten Informationen Sinn machen.

In diesem Kurs wird für die Block-Programmierung der p5.js-Blockly-Editor verwendet:

  • 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.

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":

Ö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.

  • 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.

Lassen Sie Ihrer Lehrkraft in der vereinbarten Weise den Quellcode und die Bildschirmkopie zukommen. Dafür gibt es die vereinbarte Menge an XPs.