Variablen
Im folgenden Beispiel sehen Sie eine kleine Computergrafik, die in einem Trainingsprogramm für Fahrschüler eingesetzt werden soll. Da sich im Programm nichts während des Programmablaufs verändern soll, werden die Anweisungen in die setup()-Funktion geschrieben und werden damit nur einmal ausgeführt.
Dem Auftraggeber gefällt die Grafik schon ganz gut, aber die Ampel soll noch nach rechts verschoben werden und die Straße soll breiter werden. Der Programmierer denkt: "Hätte er das nicht vorher sagen können, jetzt muss ich alles nochmal durchrechnen!". Und tatsächlich müssen die meisten Koordinaten angepasst werden.
Haben Sie mit den langjährigen Erfahrungen aus dem Mathematikunterricht eine Idee, wie man das Verschieben der Ampel ohne großen Aufwand hinbekommen könnte?
Die Lösung sind Variablen!
Eine Variable ist ein Name, der dem Computer mitgeteilt wird. Der Variablen wird ein Wert zugeordnet und überall im Programm, wo die Variable steht, ersetzt der Computer den Variablennamen mit der Wert der vorher festgelegt wurde.
Die Ampel soll an einem bestimmten Punkt im Zeichenbereich stehen. Ein Punkt wird durch seine x- und y-Koordinate festgelegt, die jetzt in jeweils einer Variablen gespeichert werden kann. Damit der Computer weiss, dass man eine Variable festlegen möchte, muss man noch das kleine Wort 'var' davor setzen.
Schritt 1: Man legt für die x-Koordinate und die y-Koordinate des Ampelmastes eine Variable fest:
var Ampel_xKoord = 254;
var Ampel_yKoord = 282;Schritt 2: Man ersetzt den x- und y-Wert des Startpunkts für den Ampelmast mit diesen Variablen.
rect(Ampel_xKoord, Ampel_yKoord, 12, -100);Das sieht dann wie folgt aus. Klicken Sie auf Play um zu testen, ob das Programm immer noch funktioniert.
Es funktioniert!
Wenn man es jetzt schafft, alle anderen Koordinaten der Ampelelemente aus den Koordinaten des Startpunktes zu berechnen, kann man durch Änderung des Startpunkts die Ampel verschieben, ohne dass man sich Gedanken über die anderen Werte machen muss.
Schritt 3:
Der Startpunkt der schwarzen Ampel ist bei x = 242 und y = 184. Das wollen wir aus dem Startpunkt des Ampelmasts berechnen.
- 254-242 = 12. Also ist der x-Wert des Startpunkts der schwarzen Ampel:
Ampel_xKoord - 12(Minus, weil die Ampel ja links vom Ampelmast beginnt) - 282-184 = 98. Also ist der y-Wert des Startpunkts der schwarzen Ampel:
Ampel_yKoord - 98. (Minus, weil die Ampel ja oberhalb des Ampelmasts beginnt)
Mal schauen, ob das auch funktioniert:
Klappt!
So jetzt sind Sie dran!
Aufgabe 1:
Berechnen Sie die Koordinaten der 3 Kreise in der Ampel aus Ampel_xKoord und Ampel_yKoord und ersetzen Sie diese geeignet. Sehen Sie bitte erst in der Lösung nach, wenn Sie es selbst geschafft haben, sonst wird Ihr Gehirn nicht trainiert.
Hinweis: Ein Taschenrechner könnte hilfreich sein.
Lösungsvorschlag:
Finale: die Ampel wird verschoben.
Nachdem die Ampel relativ zu einem Punkt gezeichnet wurde, können Sie versuchen diese zu verschieben, indem Sie den Wert von Ampel_xKoord und von Ampel_yKoord verändern. Schieben Sie die Ampel etwas in der Gegend herum!
Der erste Wunsch des Auftraggebers ist erfüllt. Jetzt fehlt noch die Anpassung der Strasse.
Aufgabe 2:
Verändern Sie das Programm so, dass man die Breite der grauen Straße durch Veränderung einer weiteren Variablen anpassen kann.
Kopieren Sie den Programmiertext in einen Texteditor (z.B. Notepad++).
Speichern Sie die Datei unter dem Namen ampel_name.js und lassen Sie Ihre Lösung der Lehrkraft zukommen.
(Wert: 10 XP)
Blinkende Ampel
Nachdem Sie gelernt haben, wie man eine Ampel mit Hilfe von Variablen leicht in der Zeichenebene platzieren kann, soll die Ampel jetzt animiert werden. Sie kennen sicher Ampeln, deren gelbes Licht nachts blinkt, da zuwenig Verkehr ist.
Unsere Ampel soll jetzt gelb blinken.
Wir brauchen eine Schleife, da die Farbe der mittleren Lampe zwischen Gelb und Schwarz automatisch wechseln soll. Am Ende des Programms wird die Funktion draw() eingefügt, die Sie im letzten Kapitel kennengelernt haben.
function draw() {
}Jetzt verschieben wir den Kreis für die gelbe Lampe von setup() nach draw(), damit die Lampe animiert werden kann. Die Ampel soll jede halbe Sekunde die Farbe ändern, also setzen wir frameRate(2); so dass die Anweisungen in draw() zwei Mal pro Sekunde ausgeführt werden. Die rote und grüne Lampe leuchtet nicht, also wird die Farbe auf schwarz gesetzt.
Nach einer halben Sekunde leuchtet die gelbe Lampe, aber sie wird nicht mehr schwarz. Um das hinzubekommen, brauchen wir das nächste Grundelement eines Algorithmus: die Verzweigung. Im nächsten Kapitel geht es weiter.