Mit Hilfe der Anweisung
ellipse(30, 40, 60, 60);wird ein Kreis am Punkt(30/40) mit dem Durchmesser d = 60 Pixel gezeichnet. Wenn du Veränderungen an dem Kreis vornehmen möchtest, musst du diese Zahlen ändern. Wenn der Durchmesser größer werden soll, dann sieht die Anweisung z.B. so aus:
ellipse(30, 40, 120, 120);Und wenn der Kreis an einer anderen Stelle der Zeichenfläche gezeichnet werden soll, dann sieht es vielleicht so aus:
ellipse(80, 210, 120, 120);Einen Kreis auf diese Weise zu verändern ist einfach, aber stelle dir vor, du möchtest nicht nur einen sondern ein paar, vielleicht sogar hunderte Kreise erzeugen. Es wäre dann sehr mühsam, wenn du die Werte für jeden einzelnen Kreis einzeln eingeben müsstest.
Um diesem Problem aus dem Weg zu gehen, kannst du am Anfang eines Programms Variablen anlegen, die dann die Werte in der Anweisung
ellipse(80, 210, 120, 120);ersetzen. Das sieht am Anfang etwas komplizierter aus, aber je mehr du programmierst, desto mehr wirst du diese Möglichkeit schätzen lernen.
Die Anweisung, mit der ein Kreis mit Hilfe von Variablen gezeichnet wird, sieht dann wie folgt aus:
var xKoord = 100;
var yKoord = 100;
var durchmesser = 80;
ellipse(xKoord, yKoord, durchmesser, durchmesser);Die Werte werden nicht mehr direkt in die Klammer geschrieben, sondern einer Variablen zugeordnet. Im Programm liest die Anweisung
ellipse(xKoord, yKoord, durchmesser, durchmesser);diese Werte aus den Variablen aus und zeichnet mit den aktuellen Werten einen Kreis. Verändert man den Wert einer Variablen, so wird ein Kreis mit dem neuen Wert gezeichnet.
var xKoord = 100;
var yKoord = 100;
var durchmesser = 80;
ellipse(xKoord, yKoord, durchmesser, durchmesser);
durchmesser = 150;
ellipse(xKoord, yKoord, durchmesser, durchmesser);Der erste Kreis wird mit dem Durchmesser 80 Pixel gezeichnet, der zweite mit dem Durchmesser 150 Pixel. In den folgenden Beispielen wirst du sehen, dass der Einsatz von Variablen die Programmierung deutlich beschleunigen kann.
Es werden vier Kreise mit unterschiedlichen Durchmessern gezeichnet. Klicke auf Play, um die Kreise zu sehen. Verändere dann den Wert der Variablen und beobachte die Wirkung. Wie du siehst, kannst du z.B. den Wert der Variablen durchmesser ändern und alle Kreise verändern ihr Aussehen. Oder du veränderst den Wert von xKoord und alle Kreise verändern ihre Position.
function setup() {...} wird beim Programmstart einmal ausgeführt.createCanvas(400, 450); erzeugt einen Zeichenbereich der Breite 400 Pixel und der Höhe 450 Pixel.noLoop(); verhindert, dass die Funktion function draw(){...} 60 Mal pro Sekunde ausgeführt wird. Wenn man keine Animationen oder Interaktionen programmieren möchte, kann man damit den Prozessor schonen, der nicht so viel Arbeit hat.function draw(){...} wird normalerweise 60 Mal pro Sekunde ausgeführt, es sei denn du hast in function setup() {...} die Anweisung noLoop(); eingetragen.background(255); färbt den Hintergrund weiss.fill(255); färbt den Inhalt der folgenden Objekte weiss.stroke(100); setzt die Linienfarbe auf grau und strokeWeight(6); setzt die Liniendicke auf 6 Pixel.Alle Befehle der Funktionsbibliothek p5.js kannst du auf folgender Seite nachlesen:
Oft ist es hilfreich, den Wert einer Variablen mit Hilfe einer anderen Variablen zu berechnen.
Es soll ein Rechteck gezeichnet werden, das doppelt so hoch wie breit ist. Und die Position der Rechtecke soll an die Größe angepasst werden. Dazu wird die Breite = 80 Pixel gesetzt und die Höhe und die anderen Werte werden berechnet. Änderst du jetzt die Breite des Rechtecks, musst du dich nicht mehr um die Höhe oder die Position kümmern. Das macht jetzt der Computer so, dass die 4 Rechtecke ganz gut aussehen.
Verändere den Wert der Variablen breite und beobachte die Wirkung. Wie du siehst, werden die Höhe und alle anderen Koordinaten aus der Breite berechnet.
In Zukunft werden wir zunehmend versuchen so wenige Werte wie möglich direkt zu setzen, sondern wir lassen die meisten Werte den Computer ausrechnen.
Mit Hilfe solcher Variablen kannst du Objekte platzieren, aber auch deren andere Eigenschaften verändern.
Bei einigen Kreisen sollen die Farbe und der Ort in der Zeichenebene allmählich geändert werden. Verändere den Wert der Variablen und beobachte die Wirkung.
Wie du siehts, kannst du am Anfang des kleinen Programms die Variablen verändern und die Kreise verändern sich. So macht Programmieren mehr Spaß!. Stell dir vor, du müsstest im Programm an gefühlt 1000 Stellen alle Zahlen einzeln ändern.
Mit Hilfe von Variablen kannst leicht einige Kreise zeichnen lassen, die symmetrisch angeordnet sind. Dazu wird die x-Koordinate mit Hilfe einer kleinen Rechnung verändert:
//xKoord wird um xDelta größer, der Kreis um xDelta nach rechts verschoben
xKoord + xDelta
//xKoord wird um xDelta*2 größer, der Kreis um zwei xDelta nach rechts verschoben
xKoord + (xDelta * 2)
//xKoord wird um xDelta*3 größer, der Kreis um drei xDelta nach rechts verschoben
xKoord + (xDelta * 3)
//usw...Klicke auf Play und versuche den Programmcode zu verstehen.
Wenn du jetzt aber 20 Kreise zeichnen lassen möchtest, kannst du dir vorstellen, dass das recht schnell viel Schreibarbeit werden kann. Zum Glück kann der Computer dir diese Arbeit abnehmen. Dazu müssen wir den Programmcode noch vorbereiten:
Jetzt sieht jede Zeile, mit der ein Kreis gezeichnet wird, bis auf eine einzige Zahl genau gleich aus. Diese Zahl lassen wir jetzt den Computer verändern. Dazu gibt es die for-Schleife. Wenn du auffrischen möchtest, wie eine for-Schleife funktioniert, schaue nochmal im Kapitel JavaScript > Schleifen nach.
Die Variable i soll jetzt die Zahlen 0 bis 4 ersetzen. Mit Hilfe der for-Schleife wird die Variable i verändert, so dass sie automatisch alle gewünschten Werte annimmt.
Was mit 5 Kreisen funktioniert, müsste doch auch mit viel mehr Kreisen gehen.
Verändere den Programmiercode so, dass 20 kleine Kreise nebeneinander gezeichnet werden
Natürlich kannst du auch alle anderen Eigenschaften der Kreise durch den Computer verändern lassen.
for-SchleifenEs sollen jetzt 5 Zeilen mit jeweils 10 Kreisen gezeichnet werden. Dazu können wir 5 for-Schleifen hintereinander ausführen.
Eleganter wäre es, wenn auch die 5 Schleifen automatisiert werden. Dazu schreibt man in die for-Schleife, welche die 5 Kreise nebeneinander zeichnet eine weitere for-Schleife, welche nach 5 Kreisen eine neue Zeile beginnt, in der die y-Koordinate verändert wird.
In der ersten for-Schleife ist yKoord = 30;, in der zweiten Schleife wird yKoord um yDelta vergrößert. Das programmiert man, indem man eine zweite for-Variable mit einem anderen Namen definiert und diese mit einer zweiten for-Schleife verändert.
Wenn i = 0 ist (1. Schleife), wird j von 0 bis 4 vergrößert. Überlege dir, ob dann die erste Zeile oder die erste Spalte gezeichnet wird.
Richtig! Es wird zuerst die erste Spalte gezeichnet.
Dann wird i um eins größer, so dass die x-Koordinate vergrößert wird und es wird die zweite Spalte gezeichnet. Damit du das Nachvollziehen kannst, wird im folgenden Programm vor jeder Spalte die Farbe geändert.
Verändere folgenden Programmcode so, dass zuerst die Zeilen und dann die Spalten gezeichnet werden.
Wenn du die Reihenfolge der for-Schleifen veränderst, kannst du steuern, ob zuerst eine Spalte oder eine Zeile gezeichnet wird.
Der Computer kann so schnell rechnen, dass er auch problemlos hunderte oder tausende Kreise zeichnen würde, wenn du ihn darum bittest.
Verändere folgenden Programmcode so, dass 15 Zeilen mit jeweils 10 Kreisen gezeichnet werden.
Verändere folgenden Programmcode so, dass 40 Zeilen mit jeweils 20 Kreisen gezeichnet werden. Hinweis: Wenn du den Radius verkleinerst, passen mehr Kreise neben- und untereinander.
Schleifen können dir viel Tipp-Arbeit abnehmen. Wenn du feststellst, dass du beim Programmieren viele Zeilen schreibst, die sich sehr ähneln, überlege dir, ob man diese vielen Zeilen vielleicht durch ein Schleife ersetzen könnte.
Wie wäre es mit 60 x 500 = 30.000 Kreisen... Klick mal auf Play.