Lernpfad:Einführung in Processing/3: Unterschied zwischen den Versionen

Aus Informatik-Box
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(12 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}}
* Grundstruktur eines Processing-Programms.
* Verwendung von Befehlen in Java.
{{Tldr:End}}


Wir definieren einen Algorithmus durch seine Eingabe und die erwartete Ausgabe. Zum Beispiel
Wir definieren einen Algorithmus durch seine Eingabe und die erwartete Ausgabe. Zum Beispiel


<pre>
<syntaxhighlight lang="java">
Eingabe: zwei ganze Zahlen (a und b)
Eingabe: zwei ganze Zahlen (a und b)
Ausgabe: die Summe der Zahlen
Ausgabe: die Summe der Zahlen
</pre>
</syntaxhighlight>


Dieser Algorithmus lässt sich in einer ersten Version in {{Processing}} so programmieren:
Dieser Algorithmus lässt sich in einer ersten Version in {{Processing}} so programmieren:


<syntaxhighlight lang="java" line="1">
<syntaxhighlight lang="java" line="1">
// Eingabe: zwei ganze Zahlen (a und b)
int a = 5;
int a = 5;
int b = 3;
int b = 3;


// Ausgabe: die Summe der Zahlen
print(a + b);
print(a + b);
</syntaxhighlight>
</syntaxhighlight>


{{Aufgabe:Start|Icon=Logo_Processing4.png}}
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}}
# Probier den Algorithmus in {{Processing}} aus.
# Probier den Algorithmus in {{Processing}} aus.
{{Aufgabe:End}}
{{Aufgabe:End}}


Du siehst die Ausgabe der Summe im Textfenster unten. Verändere die Zahlen für <code>a</code> und <code>b</code> und starte das Programm erneut.
Du siehst die Ausgabe der Summe im Textfenster unten. Verändere die Zahlen für <code>a</code> und <code>b</code> und starte das Programm erneut.
 
{{Hinweis|
Zeilen, die mit <code>//</code> beginnen werden von {{Processing}} ignoriert. Sie dienen als Kommentare, um das Programm besser zu verstehen. }}
Die ist sicher aufgefallen, dass sich beim Start ein kleines Fenster geöffnet hat. {{Processing}} ist auf Grafikprogrammierung ausgelegt. In dieses Fenster kannst du mit den Befehlen von {{Processing}} zeichnen und so "grafische Algorithmen" programmieren. Hier ist ein Beispiel:
Die ist sicher aufgefallen, dass sich beim Start ein kleines Fenster geöffnet hat. {{Processing}} ist auf Grafikprogrammierung ausgelegt. In dieses Fenster kannst du mit den Befehlen von {{Processing}} zeichnen und so "grafische Algorithmen" programmieren. Hier ist ein Beispiel:


<pre>
<syntaxhighlight lang="java">
Eingabe: keine
Eingabe: keine
Ausgabe: Zeichne ein Quadrat der Kantenlänge vierzig
Ausgabe: Zeichne ein Quadrat der Kantenlänge vierzig
</pre>
</syntaxhighlight>


<syntaxhighlight lang="java" line="1">
<syntaxhighlight lang="java" line="1">
// Zeichne ein Quadrat der Kantenlänge vierzig
line(0,0, 40,0);
line(0,0, 40,0);
line(40,0, 40,40);
line(40,0, 40,40);
Zeile 37: Zeile 46:
</syntaxhighlight>
</syntaxhighlight>


{{Aufgabe:Start|Icon=Logo_Processing4.png}}
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}}
# Probier den Algorithmus in {{Processing}} aus.
# Probier den Algorithmus in {{Processing}} aus.
# Mach dir klar, was die Zahlen in den <code>line</code>-Befehlen bedeuten. Wofür stehen die Zahlenpaare?
# Mach dir klar, was die Zahlen in den <code>line</code>-Befehlen bedeuten. Wofür stehen die Zahlenpaare?
# Erstelle einen Algorithmus zu dieser Definition:
# Erstelle einen Algorithmus zu dieser Definition: <syntaxhighlight lang="java">
<pre>Eingabe: zwei Zahlen
Eingabe: zwei Zahlen
Ausgabe: ein Rechteck mit den angegebenen Kantenlängen</pre>
Ausgabe: ein Rechteck mit den angegebenen Kantenlängen
</syntaxhighlight>
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Lösung:Start}}
{{Lösung:Start}}
Zeile 50: Zeile 60:


<syntaxhighlight lang="java" line="1">
<syntaxhighlight lang="java" line="1">
// Breite / Höhe des Rechtecks
int a = 40;
int a = 40;
int b = 80;
int b = 80;


// Zeichne ein Rechteck der Kantenlängen a und b
line(0,0, a,0);
line(0,0, a,0);
line(a,0, a,b);
line(a,0, a,b);
line(a,b, 0,b);
line(a,b, 0,b);
line(0,b, 0,0);
line(0,b, 0,0);
</syntaxhighlight>
{{Lösung:End}}
{{Zusatzaufgabe:Start|Icon=Processing_2021_logo.svg}}
Modifiziere das Programm so, dass das Rechteck nicht oben links gezeichnet wird, sondern an der Position <code>(x, y)</code>, die auch eine Eingabe des Algorithmus ist.
{{Zusatzaufgabe:End}}
{{Lösung:Start|Lösung Zusatzaufgabe}}
<syntaxhighlight lang="java" line="1">
// Breite / Höhe des Rechtecks
int a = 40;
int b = 80;
// Position des Rechtecks
int x = 10;
int y = 20;
// Zeichne ein Rechteck der Kantenlängen a und b
// an der Position (y|y)
line(x,y, x+a,y);
line(x+a,y, x+a,y+b);
line(x+a,y+b, x,y+b);
line(x,y+b, x,y);
</syntaxhighlight>
</syntaxhighlight>
{{Lösung:End}}
{{Lösung:End}}

Aktuelle Version vom 16. Februar 2022, 20:51 Uhr

Button Back.png Vorheriger Schritt
Icon Chalk board.png
Was du in diesem Schritt lernst
  • Grundstruktur eines Processing-Programms.
  • Verwendung von Befehlen in Java.


Wir definieren einen Algorithmus durch seine Eingabe und die erwartete Ausgabe. Zum Beispiel 

Eingabe: zwei ganze Zahlen (a und b)
Ausgabe: die Summe der Zahlen

Dieser Algorithmus lässt sich in einer ersten Version in Processing so programmieren: 

// Eingabe: zwei ganze Zahlen (a und b)
int a = 5;
int b = 3;

// Ausgabe: die Summe der Zahlen
print(a + b);
Processing 2021 logo.svg
Arbeitsauftrag
  1. Probier den Algorithmus in Processing aus.


Du siehst die Ausgabe der Summe im Textfenster unten. Verändere die Zahlen für a und b und starte das Programm erneut.

Icon Info.png

Zeilen, die mit // beginnen werden von Processing ignoriert. Sie dienen als Kommentare, um das Programm besser zu verstehen.

Die ist sicher aufgefallen, dass sich beim Start ein kleines Fenster geöffnet hat. Processing ist auf Grafikprogrammierung ausgelegt. In dieses Fenster kannst du mit den Befehlen von Processing zeichnen und so "grafische Algorithmen" programmieren. Hier ist ein Beispiel: 

Eingabe: keine
Ausgabe: Zeichne ein Quadrat der Kantenlänge vierzig

// Zeichne ein Quadrat der Kantenlänge vierzig
line(0,0, 40,0);
line(40,0, 40,40);
line(40,40, 0,40);
line(0,40, 0,0);
Processing 2021 logo.svg
Arbeitsauftrag
  1. Probier den Algorithmus in Processing aus.
  2. Mach dir klar, was die Zahlen in den line-Befehlen bedeuten. Wofür stehen die Zahlenpaare?
  3. Erstelle einen Algorithmus zu dieser Definition: 
    Eingabe: zwei Zahlen
Ausgabe: ein Rechteck mit den angegebenen Kantenlängen
Lösung

Die Zahlenpaare stehen für die Anfangs- und Endkoordinaten der zu zeichnenden Linie. Das Zeichenfenster besitzt also ein Koordinatensystem, in dem die Koordinaten Punkte im Fenster darstellen.

Mit diesem Wissen lässt sich das Programm umschreiben, indem die passenden Koordinaten gegen die Eingaben a bzw. b getauscht werden. 

// Breite / Höhe des Rechtecks
int a = 40;
int b = 80;

// Zeichne ein Rechteck der Kantenlängen a und b
line(0,0, a,0);
line(a,0, a,b);
line(a,b, 0,b);
line(0,b, 0,0);


Processing 2021 logo.svg
Zusatzaufgabe

Modifiziere das Programm so, dass das Rechteck nicht oben links gezeichnet wird, sondern an der Position (x, y), die auch eine Eingabe des Algorithmus ist.

Lösung Zusatzaufgabe
// Breite / Höhe des Rechtecks
int a = 40;
int b = 80;
// Position des Rechtecks
int x = 10;
int y = 20;

// Zeichne ein Rechteck der Kantenlängen a und b
// an der Position (y|y)
line(x,y, x+a,y);
line(x+a,y, x+a,y+b);
line(x+a,y+b, x,y+b);
line(x,y+b, x,y);
Abgerufen von „http://ngb.schule/hgwiki/index.php?title=Lernpfad:Einführung_in_Processing/3&oldid=9324“