Lernpfad Diskussion:Objektorientierte Programmierung mit Processing/4

Aus Informatik-Box
Version vom 27. März 2022, 21:32 Uhr von Jneug (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „Neuer Inhalt (vorher Schritt 3): <pre> {{NNameAnzeigen}}{{NNavigation}} Im Zentrum unseres Sonnensystems steht die Sonne. Wir wollen die Sonne in der Mitte de…“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Zur Navigation springen Zur Suche springen

Neuer Inhalt (vorher Schritt 3):

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

Jede Klasse wird in einer neuen Datei erstellt. Öffne dazu auf dem kleinen Pfeil oben einen neuen Tab und nenne ihn "Sun".

[[Datei:20210322220256 Processing.gif|center|frame|Einen neuen Tab erstellen.]]

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:
<syntaxhighlight lang="Java">
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}}