In diesem Kapitel werden die olympischen Ringe nachgebaut und du übst dabei den Umgang mit Variablen.
Schau dir die olympischen Ringe einmal an: klicke dazu mit der rechten Maustaste auf olympische Ringe und wähle dann 'Link in neuem Tab öffnen'. Dann siehst du die Ringe auf einer neuen Seite und kannst zwischen diesem Kurs und den Ringen hin und her wechseln.
Um die olympischen Ringe zu bauen, brauchen wir erst einmal einen Kreis.
Wir verwenden die Funktionen setup(){...}
und draw(){...}
in unserem Programm. Innerhalb von setup(){...}
stehen Anweisungen, die ein einziges Mal nach dem Programmstart ausgeführt werden. Innerhalb von draw(){...}
stehen Anweisungen, die 60 Mal pro Sekunde ausgeführt werden.
Zurück zum Kreis. Die Anweisung, die wir dafür benutzen können, ist
ellipse(xKoordinate, yKoordinate, breite, hoehe);
.
Wenn man 4 Zahlen einsetzt, zeichnet das Programm eine Ellipse an den Punkt P(xKoordinate/yKoordinate) mit der angegebenen Breite und Höhe.
Versuche aus der Ellipse einen Kreis zu machen. Verändere dazu die richtige/n Zahl/Zahlen im folgenden Programmcode.
Lösung: wie du sicher selbst leicht herausgefunden hast, müssen Breite und Höhe der Ellipse gleich sein, dann entsteht aus der Ellipse ein Kreis. Also z.B. ellipse(80, 80, 100, 100);
.
Der nächste Kreis soll hellblau werden. Bei der JavaScript-Bibliothek p5.js kann man die Farbe der Kreislinie mit stroke(rot, grün, blau);
festlegen.
Für rot, grün und blau müssen Zahlen eingesetzt werden. Welche Zahlen das sind, kannst du herausfinden, indem Du in der Google-Suchmaschine colorpicker eingibst und dann mit Hilfe des Schiebereglers und der Maus eine Farbe aussuchst.
Wenn du den Chrome-Browser verwendest, kannst du z.B. folgende Erweiterung installieren: ColorZilla und mit Hilfe dieser Erweiterung die Farbe herausfinden, indem du die olympischen Ringe anzeigen lässt, dann auf das ColorZilla-Symbol klickst, dann auf den ersten Eintrag des Menüs klickst: Page Color Picker Active und mit der Maus auf die gewünschte Farbe gehst. Oben werden dann bei rgb(0, 134, 200); die drei Zahlen angezeigt, die du eingeben musst.
Der blaue Ring hat also die Werte: rot = 0, grün = 134 und blau = 200. Versuchen wir es mal damit.
Da wir nur die Kreislinie wollen, sagen wir mit der Anweisung noFill();
, dass der Kreis nicht ausgemalt werden sollen.
Fast geschafft. Der Rand sollte noch etwas kräftiger sein: strokeWeight(linienbreite);
Zeichne auf die folgende Zeichenfläche untereinander 5 Ringe in den Farben der olympischen Ringe. Versuche dazu die Farbcodes der olympischen Farben herauszufinden.
Eine mögliche Lösung könnte wie folgt aussehen:
Die Ringe sind noch etwas zu dünn und klein. Hmm, wenn du das ändern willst, musst du jetzt wirklich alle Zahlen einzeln verändern?
Sicher nicht!
Aus dem Mathematikunterricht kennst du vielleicht schon Variablen (Platzhalter).
Für die Variable a oder b oder x kann man jeweils ganz unterschiedliche Zahlen einsetzen.
Solche Variablen wollen wir jetzt nutzen, damit wir nicht so viel Schreibarbeit haben, wenn wir z.B. die Größe der Kreise verändern wollen.
kreis_durchmesser
. Markiere dazu den Variablennamen kreis_durchmesser
mit der Maus und drücke strg-c auf der Tastatur. Markiere dann jeweils die Breite und Höhe der Ellipse und ersetze diese, indem du auf der Tastatur strg-v drückst.kreis_durchmesser
und beobachte die VeränderungDeine Lösung könnte dann wie folgt aussehen:
Wir müssen nicht mehr alle gefühlt eine Millionen Zahlen per Hand ändern, sondern wir ändern ganz oben beim Programmanfang eine Zahl und schon ändert sich die Größe aller Kreise.
Jetzt wollen wir die olympischen Ringe in Ihre Position bringen.
Schau dir nochmals die olympischen Ringe an. Wir wollen unsere Ringe jetzt genauso bauen. Nur wie groß sind die Ringe und wie muss ich diese anordnen?
Dafür gibt es z.B. wieder eine Erweiterung für den Chrome-Browser: Page-Ruler . Es gibt aber auch viele andere Möglichkeiten, eine Strecke auf dem Bildschirm auszumessen. Versuche mit Hilfe einer Suchmaschine eine Methode herauszufinden, die dir gefällt.
Meine Messergebnisse:
kreis_position_x
und kreis_position_y
fest und ersetzte die x- und y-Werte in der ellipse-Anweisung des ersten Kreises damit.kreis_abstand_x
und kreis_abstand_y
und berechne die neue Position der weiteren Kreise damit.ring_breite
fest und ändere damit die Breite der Ringe auf 20 Pixel.Eine mögliche Lösung:
So, geschafft! Na ja, fast. Das Original-Bild hat noch weisse Lücken zwischen den Ringen, aber ich glaube wir können mit unserem Ergebnis zufrieden sein.
Wie du siehst, wurde die Position der Ringe mit Hilfe einfacher Mathematik berechnet. Überlege dir in Ruhe, wie der Computer das gemacht hat.
Und denke immer daran: die Mathematik ist der beste Freund des Programmierers.
Zum Schluss des Kapitels kannst du dir selbst beweisen, dass du alles kannst, was du hier gelernt haben solltest.