Schleife

In diesem Kapitel soll dem Computer beigebracht werden, in einer Schleife fortlaufend per Zufall die Farben eines Kreises zu ändern. Wie Sie bereits gesehen haben, gibt es für Farben, die der Computer darstellen kann, Farbnamen. Die Liste der Farbnamen ist aber ziemlich begrenzt.

Wenn man ein Video auf dem Computer ansieht, werden sehr viele verschiedene Farben dargestellt. Deutlich mehr als die paar, die Sie in der Farbtabelle gesehen haben. Es muss also eine Methode geben, diese vielen Farben darzustellen, ohne dass es für jede Farbe einen eigenen Namen gibt.

RGB-Farben

Sehen Sie sich bitte folgendes Video an:

Eine Farbe kann durch die Angabe von 3 Zahlen festgelegt werden:

Die Zahl gibt an, wie hell das Pixel leuchten soll. Dabei gilt:

• Bei 0 ist das Pixel dunkel
• Bei 255 ist das Pixel hell

Beispiele:

• Die Farbe Rot wird mit den drei Zahlen (255, 0, 0) festgelegt, da das rote Pixel maximal hell leuchten soll und das blaue und grüne Pixel nicht leuchten sollen.
• Die Farbe Grün wird mit den drei Zahlen (0, 255, 0) festgelegt, da das grüne Pixel maximal und die anderen nicht leuchten sollen.
• Die Farbe Blau wird mit den drei Zahlen (0, 0, 255) festgelegt, da das blaue Pixel maximal und die anderen nicht leuchten sollen.
• Die Farbe Gelb wird mit den drei Zahlen (255, 255, 0) festgelegt, da das rote und grüne Pixel maximal leuchten soll und blau nicht.
• Die Farbe Weiß wird mit den drei Zahlen (255, 255, 255) festgelegt, da alle drei Pixel maximal leuchten sollen.
• Die Farbe Schwarz wird mit den drei Zahlen (0, 0, 0) festgelegt, da alle drei Pixel nicht leuchten sollen.
• Und so weiter...

Die Farben, die der Computer darstellen kann, können durch die Angabe von 3 Zahlen festgelegt werden. Wenn jedes Pixel 256 Helligkeitsstufen hat (0 bis 255), können auf diese Weise also 256x256x256 = 16.777.216 Farben dargestellt werden.

Beispiel:

('lemonchiffon') = (255, 250, 205)
('steelblue') = (70, 130, 180)
('lightskyblue') = (135, 206, 250)

Anstelle der Farbnamen werden im folgenden Programm Zahlen zur Festlegung der Farben verwendet. Wenn man wissen möchte, welche Farbe hinter den 3 Zahlen steckt, muss man die Zahlen in den RGB Calculator eintragen.

Zufallsfarben

Der Computer kann Farben mit Hilfe von Zahlen darstellen. Wenn er das zufällig machen soll, muss ihm beigebracht werden, eine Zahl zufällig zu wählen. Dafür gibt es die Anweisung random

Folgende Anweisung wählt zufällig eine Zahl zwischen 0 und 255:

random(255);

Damit man eine Farbe als RGB-Farbe angeben kann, benötigt man 3 Zufallszahlen. In der folgenden Anweisung wird der Hintergrund mit einer zufälligen Farbe gefärbt, da jeder RGB-Wert zufällig vom Computer gewählt wird:

background(random(255), random(255), random(255));

Im folgenden Beispiel wird bei jedem Mausklick auf Play der Hintergrund in einer anderen Farbe gefärbt.

Schleife

Wir sind dem Ziel des Kapitel schon näher gekommen, denn der Computer kann bei jedem Klick auf Play die Farbe automatisch wechseln. Jetzt soll der Mausklick noch ersetzt werden.

In dem hier verwendeten Programmiersystem p5.js kann man sehr leicht Anweisungen in einer Schleife ablaufen lassen. Dazu unterteilt man das Programm in zwei Teile:

function setup() {

}

und

function draw() {

}

Zwischen den geschweiften Klammern bei setup() stehen Anweisungen, die genau einmal beim Programmstart ausgeführt werden.

Zwischen den geschweiften Klammern bei draw() stehen Anweisungen, die immer wieder ausgeführt werden.

Mit der Anweisung frameRate(Anzahl); kann man beim Programmstart festlegen, wie oft die Anweisungen in draw() pro Sekunde ausgeführt werden.

Beispiel:

function setup() {
  createCanvas(300, 300);  
  background('LightGray');      
  frameRate(5);
}

function draw() {
  stroke('steelblue');
  strokeWeight(8);
  fill('lightskyblue');
  ellipse(150, 150, 180, 180);
}

Erklärung:

In setup() legt man fest, dass

• createCanvas(300, 300);: der Zeichenbereich 300 mal 300 Pixel groß sein soll
• background('LightGray');: der Hintergrund Grau sein soll
• frameRate(5);: die Anweisungen in draw() 5 Mal pro Sekunde ausgeführt werden sollen.

In draw() stehen die Anweisungen, die 5 Mal pro Sekunde ausgeführt werden. Da hier immer das gleiche steht, sieht man auf dem Bildschirm auch keine Veränderung.

Das ändert sich dramatisch, wenn man die Farbnamen mit Zufallsfarbwerten ersetzt. Klicken Sie auf Play. Probieren Sie aus, was passiert, wenn Sie die Werte der frameRate() verändern.

Ziel erreicht!

Die Farben ändern sich automatisch. Verändern Sie einmal die Zahl in frameRate(5);, damit können Sie festlegen, wie oft pro Sekunde die Schleife in draw() durchlaufen wird und die Farben zufällig gewählt werden.

Nur der Hintergrund ändert sich nicht mit den Farben des Kreises. Warum?

Lösung (bitte erst nachsehen, wenn Sie die Aufgabe selbst gelöst haben):

Antwort: die Anweisung steht in setup() und wird deswegen nur ein einziges Mal nach dem Klick auf Play aufgerufen.

Die Anweisung background(random(255), random(255), random(255)); muss in draw() stehen, damit sie auch in der Schleife ausgeführt wird.

Wenn Sie das Farbflackern stört, können Sie Ihr visuelles System entlasten, indem Sie auf Stopp klicken. Ihnen soll ja nicht übel werden!

Damit sind Sie bereit für die nächste Aufgabe.