|
|
| Zeile 1: |
Zeile 1: |
| {{NNavigation}} | | {{NNameAnzeigen}}{{NNavigation}} |
|
| |
|
| Im Zentrum unseres Sonnensystems steht die Sonne. Wir wollen die Sonne in der Mitte des Fensters entfachen. Dazu erstellen wie eine Klasse <code>Sun</code>, die die Sonne zeichnet. | | Im Sonnensystem gibt es eine Menge von astronomischen Körpern, die sich in komplexen Umlaufbahnen bewegen und gegenseitig beeinflussen. |
|
| |
|
| Jede Klasse wird in einer neuen Datei erstellt. Öffne dazu auf dem kleinen Pfeil oben einen neuen Tab und nenne ihn "Sun".
| | [[Datei:Sonnensystem-Grafik.pdf|thumb|center]] |
|
| |
|
| [[Datei:20210322220256 Processing.gif|center|frame|Einen neuen Tab erstellen.]]
| | Für den Anfang beschränken wir uns auf eine stark vereinfachte Version des Sonnensystems. |
|
| |
|
| Unsere Sonne hat zunächst keine "sonnigen" Eigenschaften. Sie befindet sich einfach in der Mitte des Bildschirms und ist gelb. Kopiere folgenden Code in den "Sun"-Tab:
| | {{Rahmen| |
| <syntaxhighlight lang="Java">
| | Ein Sonnensystem besteht aus einer Sonne im Zentrum und einer Reihe von Planeten, die um die Sonne Kreisen.}} |
| class Sun {
| |
| | |
| public float getX() {
| |
| return 0.0;
| |
| }
| |
| | |
| public float getY() {
| |
| return 0.0;
| |
| }
| |
|
| |
| public void draw() {
| |
| noStroke();
| |
| fill(240,200,0);
| |
| ellipse(0,0,50,50);
| |
| }
| |
| | |
| }
| |
| </syntaxhighlight>
| |
| | |
| {{Aufgabe:Start|Icon=Processing_icon.png}}
| |
| # Analysiere den Code der Klasse <code>Sun</code> und versuche zu erklären, was die <code>draw</code>-Methode macht. Welche Bedeutung haben die Befehle und welchen Effekt erzeugen sie wohl in {{Processing}}?
| |
| # Schaue die Befehle in der offiziellen {{Processing}} Referenz nach: https://processing.org/reference/
| |
| {{Aufgabe:End}}
| |
| | |
| == Es werde Licht! ==
| |
| | |
| Noch wird keine Sonne im Programmfenster angezeigt. Wir müssen erst ein Objekt der Klasse <code>Sun</code> erzeugen und in der <code>draw</code>-Methode des Hauptprogramms zeichnen lassen.
| |
| | |
| Wechsele wieder in den ersten Tab und ändere den Code so ab:
| |
| <syntaxhighlight lang="Java">
| |
| Sun sun = new Sun();
| |
| | |
| void setup() {
| |
| size(800, 600);
| |
| }
| |
| | |
| void draw() {
| |
| background(0);
| |
|
| |
| sun.draw();
| |
| }
| |
| </syntaxhighlight>
| |
| | |
| {{Aufgabe:Start|Icon=Processing_icon.png}}
| |
| # '''Bevor Du das Programm startest''', beantworte folgende Frage: Wo wird die Sonne gleich "aufgehen"? Wenn Du eine Vermutung hast, starte das Programm.
| |
| # Hast Du richtig gelegen? Wenn nicht [https://michaelkipp.de/processing/01%20zeichnen.html#sec_1_1 findest Du hier eine Erklärung].
| |
| # Wir möchten den Koordinatenursprung (den Punkt <math>(0|0)</math>) gerne in der Mitte des Fensters haben, wenn wir die Sonne zeichnen. Schau erneut in der [https://processing.org/reference/ offiziellen Referenz] nach, ob Du einen entsprechenden Befehl findest. (Tipp: Schau in der Kategorie "Transform" nach.)
| |
| {{Aufgabe:End}}
| |
| {{Lösung:Start}}
| |
| Der passende Befehl lautet [https://processing.org/reference/translate_.html translate()] und verschiebt das Koordinatensystem des Fensters an eine neue Position. Führe sie direkt zu Beginn der <code>draw</code>-Methode aus:
| |
| <syntaxhighlight lang="Java">
| |
| Sun sun = new Sun();
| |
| | |
| void setup() {
| |
| size(800, 600);
| |
| }
| |
| | |
| void draw() {
| |
| // width und height sind die Breite / Höhe des Programmfensters.
| |
| // Du könntest hier auch einfach 400 und 300 benutzen.
| |
| translate(width/2, height/2);
| |
| background(0);
| |
|
| |
| sun.draw();
| |
| }
| |
| </syntaxhighlight>
| |
| | |
| [[Datei:TheSun_Processing.png|center|600px]]
| |
| {{Lösung:End}}
| |