Lernpfad:Einführung in Processing/4: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(15 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{NNavigation}} | {{NNameAnzeigen}}{{NNavigation}} | ||
{{Tldr:Start|Was du in diesem Schritt lernst|Icon=Icon Chalk board.png}} | |||
* Die ''Befehlsreferenz'' benutzen. | |||
* Aufbau des ''Koordinatensystems''. | |||
{{Tldr:End}} | |||
{{Aufgabe:Start|Icon= | == Die Befehle von Processing == | ||
# Lies in der Dokumentation des {{Processing Ref|rect()}} Befehls nach wie dieser benutzt wird. Schreibe dann das Rechteckprogramm aus dem letzten Schritt mit seiner Hilfe neu. | Auf der [https://processing.org Webseite von {{Processing}}] gibt es eine Übersicht aller Befehle: [https://processing.org/reference Die Referenz]. (Leider momentan nur auf Englisch verfügbar.) | ||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | |||
# Lies in der Dokumentation des {{Processing Ref|rect()}} Befehls nach, wie dieser benutzt wird. Schreibe dann das Rechteckprogramm aus dem letzten Schritt mit seiner Hilfe neu. | |||
# Platziere das Rechteck genau in der Mitte des Fensters. (Das Fenster ist 100x100 Pixel groß.) | # Platziere das Rechteck genau in der Mitte des Fensters. (Das Fenster ist 100x100 Pixel groß.) | ||
{{Aufgabe:End}} | {{Aufgabe:End}} | ||
{{Lösung:Start|Benutzung von rect()}} | {{Lösung:Start|Lösung: Benutzung von rect()}} | ||
Rechteckprogramm mit Hilfe des <code>rect()</code> Befehls: | Rechteckprogramm mit Hilfe des <code>rect()</code> Befehls: | ||
Zeile 17: | Zeile 23: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{Lösung:End}} | {{Lösung:End}} | ||
{{Lösung:Start|Mittig platzieren}} | {{Lösung:Start|Lösung: Mittig platzieren}} | ||
Die Mitte des Fensters liegt bei <code>(50, 50)</code>. Wir müssen auf der x-Achse die Hälfte der Breite (<code>a</code>) abziehen, auf der y-Achse die Hälfte der Höhe (<code>b</code>). | Die Mitte des Fensters liegt bei <code>(50, 50)</code>. Wir müssen auf der x-Achse die Hälfte der Breite (<code>a</code>) abziehen, auf der y-Achse die Hälfte der Höhe (<code>b</code>). | ||
Zeile 25: | Zeile 31: | ||
rect(50-(a/2),50-(b/2), a,b); | rect(50-(a/2),50-(b/2), a,b); | ||
</syntaxhighlight> | |||
{{Lösung:End}} | |||
== Das Koordinatensystem von Processing == | |||
Das Koordinatensystem von {{Processing}} verhält sich etwas anders als das System, das du aus der Mathematik gewohnt bist. | |||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | |||
Das folgende Programm hat die Definition | |||
<pre> | |||
Eingabe: zwei Zahlen (x und y) | |||
Ausgabe: ein schwarzer Punkt an der Koordinate (x,y) | |||
</pre> | |||
<syntaxhighlight lang="java" line="1"> | |||
int x = 20; | |||
int y = 40; | |||
size(400, 400); | |||
fill(0); | |||
circle(x, y, 4); | |||
</syntaxhighlight> | |||
Du kannst die neuen Befehle in der Referenz nachlesen: | |||
* {{Processing Ref|size()}} | |||
* {{Processing Ref|fill()}} | |||
* {{Processing Ref|circle()}} | |||
# Verändere die Eingabe (<code>x</code> und <code>y</code>) und beobachte, wie der Punkt wandert. | |||
# Ermittle aus deinen Beobachtungen, wie das Koordinatensystem von Processing aufgebaut ist. Wo befindet sich der Ursprung? In welche Richtung gehen die Achsen? | |||
# Zeichne zu deinen Beobachtungen ein Koordinatensystem, das dem System von {{Processing}} entspricht. | |||
{{Aufgabe:End}} | |||
{{Zusatzaufgabe:Start|Icon=Processing_2021_logo.svg}} | |||
Versuche mit dem bekannten {{Processing Ref|line()}} Befehl das Koordinatensystem in Processing darzustellen. (Setze die Fenstergröße wie oben auf 400x400 Pixel.) | |||
'''Tipp:''' Mit {{Processing Ref|text()}} kannst du den Text für die Achsenbezeichnungen auf den Bildschirm schreiben. | |||
{{Zusatzaufgabe:End}} | |||
{{Lösung:Start|Lösung Zusatzaufgabe}} | |||
Eine mögliche Lösung: | |||
<syntaxhighlight lang="java" line="1"> | |||
size(400, 400); | |||
fill(0,0,0); | |||
// x-Achse | |||
line(4,4, 396,4); | |||
line(396,4, 394,2); | |||
line(396,4, 394,6); | |||
text("x", 390, 16); | |||
// y-Achse | |||
line(4,4, 4,396); | |||
line(4,396, 2,394); | |||
line(4,396, 6,394); | |||
text("y", 16, 390); | |||
</syntaxhighlight> | </syntaxhighlight> | ||
{{Lösung:End}} | {{Lösung:End}} |
Aktuelle Version vom 16. Februar 2022, 20:52 Uhr
Was du in diesem Schritt lernst
- Die Befehlsreferenz benutzen.
- Aufbau des Koordinatensystems.
Die Befehle von Processing
Auf der Webseite von Processing gibt es eine Übersicht aller Befehle: Die Referenz. (Leider momentan nur auf Englisch verfügbar.)
Arbeitsauftrag
- Lies in der Dokumentation des rect() Befehls nach, wie dieser benutzt wird. Schreibe dann das Rechteckprogramm aus dem letzten Schritt mit seiner Hilfe neu.
- Platziere das Rechteck genau in der Mitte des Fensters. (Das Fenster ist 100x100 Pixel groß.)
Lösung: Benutzung von rect()
Rechteckprogramm mit Hilfe des rect()
Befehls:
int a = 40;
int b = 80;
rect(0,0, a,b);
Lösung: Mittig platzieren
Die Mitte des Fensters liegt bei (50, 50)
. Wir müssen auf der x-Achse die Hälfte der Breite (a
) abziehen, auf der y-Achse die Hälfte der Höhe (b
).
int a = 40;
int b = 80;
rect(50-(a/2),50-(b/2), a,b);
Das Koordinatensystem von Processing
Das Koordinatensystem von Processing verhält sich etwas anders als das System, das du aus der Mathematik gewohnt bist.
Arbeitsauftrag
Das folgende Programm hat die Definition
Eingabe: zwei Zahlen (x und y) Ausgabe: ein schwarzer Punkt an der Koordinate (x,y)
int x = 20;
int y = 40;
size(400, 400);
fill(0);
circle(x, y, 4);
Du kannst die neuen Befehle in der Referenz nachlesen:
- Verändere die Eingabe (
x
undy
) und beobachte, wie der Punkt wandert. - Ermittle aus deinen Beobachtungen, wie das Koordinatensystem von Processing aufgebaut ist. Wo befindet sich der Ursprung? In welche Richtung gehen die Achsen?
- Zeichne zu deinen Beobachtungen ein Koordinatensystem, das dem System von Processing entspricht.
Lösung Zusatzaufgabe
Eine mögliche Lösung:
size(400, 400);
fill(0,0,0);
// x-Achse
line(4,4, 396,4);
line(396,4, 394,2);
line(396,4, 394,6);
text("x", 390, 16);
// y-Achse
line(4,4, 4,396);
line(4,396, 2,394);
line(4,396, 6,394);
text("y", 16, 390);