Pacman zeichnen (Kreis)
In dieser Lektion zeichnen wir Pacman. Zuerst als einfachen gelben Kreis.
Last updated
Was this helpful?
In dieser Lektion zeichnen wir Pacman. Zuerst als einfachen gelben Kreis.
Last updated
Was this helpful?
Für das Zeichnen eines gelben Kreises lernen wir neue Funktionen kennen:
Wir führen die Funktion color() ein, mit der wir eine beliebige RGB-Farbe definieren und auf einer Variable speichern können. Dabei lernen wir auch das Konzept der Variable kennen.
Wir lernen die Funktion fill() kennen, mit der wir die Füllfarbe eines geometrischen Objekts auf dem Canvas-Element bestimmen können.
Wir verwenden noStroke(), um für unser geometrisches Objekt die Umrandung wegzulassen und nur die Füllung anzuzeigen.
Wir zeichnen einen Kreis mit der Funktion circle().
Für die Definition und Darstellung von Farben wird in der Programmierung die sogenannte RGB-Farbcodierung verwendet. Eine Farbe wird hier über die Anteile Rot, Grün und Blau definiert, die einen Wert zwischen 0 und 255 annehmen können. Dieser etwas merkwürdige Wert errechnet sich durch die Reservierung von je 8 Bits pro Farbanteil. Das entspricht einem Byte und erlaubt uns Zahlen zwischen 0 und 255 abzubilden. Insgesamt benötigt eine RGB-Farbangabe somit 24 Bits oder 3 Bytes.
Die 3 Farbanteile lassen sich kompakter als Hexadezimalzahl, also als Zahl zur Basis 16, darstellen. In dieser Schreibweise benötigen wir für jede Zahl zwischen 0 und 255 nur 2 Ziffern. Die Farbe Rot wäre in Hexadezimalschreibweise die FF 00 00. Die beiden Ziffern FF stehen für den Rotanteil von 255 und alle anderen Farbanteile sind 0. Analog wäre die Farbe Grün 00 FF 00 in Hexadezimal und Blau 00 00 FF. Die Farben Weiß und Schwarz sind die Extremwerte an den Enden der Skala. Weiß ist definiert als FF FF FF (alle Farben mit vollem Anteil) und Schwarz als 00 00 00 (keine Farbe).
Um zu verdeutlichen, dass es sich um einen RGB-Code in Hexadezimalschreibweise handelt, wird normalerweise die Schreibweise mit dem Hashtag-Präfix verwendet, also beispielsweise: #009EE3, was dem Blau der Hochschule Osnabrück entspricht.
Um eine Farbe für unser Spiel zu definieren, verwenden wir die Funktion color() aus der p5.js-Bibliothek. Wir übergeben der Funktion beim Aufruf die gewünschte Farbe, in diesem Fall Gelb, als Hexadezimalschreibweise:
Was aber bedeutet der Teil vor der Funktion color()? Um die Farbe später an verschiedenen Stellen wiederverwenden zu können, speichern wir die Farbe auf einer sogenannten Variable. Eine Variable ist ein Platzhalter für einen Wert, dem wir einen Namen geben. In dem Fall oben hat die Variable den Namen yellow. Das Schlüsselwort var zeigt an, dass wir eine neue Variable deklarieren.
Variablen werden uns in der Programmierung überall begegnen. Letztendlich ist ein Programm eine Abfolge von Anweisungen, die Daten verändern und das Ergebnis Zwischenspeichern, um es im weiteren Verlauf des Programms wieder verwenden zu können. So können wir uns Variablen auch als Behälter vorstellen, dem wir einen Namen geben und in dem wir (fast) beliebige Dinge aufbewahren können.
Neben Objekten wie einer Farbe können Variablen auch Zahlen, Zeichenfolgen, Wahrheitswerte (wahr/falsch), Listen und sogar Funktionen enthalten. Um einer Variable einen Wert zuzuweisen, verwenden wir das einfache Gleichheitszeichen. Ich betone hier das Wort einfach, weil es in JavaScript auch das doppelte bzw. dreifache Gleichheitszeichen gibt, was für den Vergleich zweier Werte verwendet wird. Das lernst du später in diesem Kurs noch kennen.
In dieser Lektion zeichnen wir Pacman. Für den Anfang stellen wir ihn als einfachen gelben Kreis dar. .
