Olympia!


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.

Zur Erinnerung:

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.

Aufgabe

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);.


Ein blauer Ring

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);


Fünf Ringe

Aufgabe

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:


Große Ringe

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).

  • z.B. wenn du die Fläche von einem Rechteck ausrechnen sollst: A = a b
  • wenn du eine Gleichung wie 3x + 4 = 7 lösen sollst
  • wenn du den Graphen einer Funktion mit der Gleichung f(x) = 3x² - x + 5 zeichnen sollst

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.

Aufgabe

  • Ersetze bei der ersten Ellipse die Zahlen für die Breite und Höhe mit der Variablen 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.
  • Wiederhole das für alle anderen farbigen Kreise
  • Verändere dann den Zahlenwert für kreis_durchmesserund beobachte die Veränderung

Deine Lösung könnte dann wie folgt aussehen:

Was für eine Erleichterung!

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.


Die olympischen Ringe

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:

  • Durchmesser der Ringe: 180 Pixel,
  • Abstand benachbarter Ringe: 220 Pixel,
  • Abstand der beiden Reihen: 90 Pixel,
  • Breite der Ringe: 20 Pixel.

Aufgabe 2

  • Versuche die Kreise so zu bauen, dass sie die Größe und Position der olympischen Ringe haben.
  • Lege neue Variablen kreis_position_x und kreis_position_y fest und ersetzte die x- und y-Werte in der ellipse-Anweisung des ersten Kreises damit.
  • Lege neue Variablen kreis_abstand_x und kreis_abstand_y und berechne die neue Position der weiteren Kreise damit.
  • Lege eine neue Variable 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.


Audi

Zum Schluss des Kapitels kannst du dir selbst beweisen, dass du alles kannst, was du hier gelernt haben solltest.

Aufgabe

  • Baue das Logo des Autoherstellers Audi