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

← Zum vorherigen Versionsunterschied

Lernpfad:Einführung in Processing/5 (Quelltext anzeigen)

Version vom 16. Februar 2022, 21:18 Uhr

584 Bytes hinzugefügt , 21:18, 16. Feb. 2022

keine Bearbeitungszusammenfassung

Jneug

8.581

Bearbeitungen

@@ Zeile 1: / Zeile 1: @@
-{{NNavigation}}
+{{NNameAnzeigen}}{{NNavigation}}
+{{Tldr:Start|Was du in diesem Schritt lernst|Icon=Icon Chalk board.png}}
+* Verschiedene Formen zeichnen.
+* Definition von ''Farben'' (RGB-Farben, Graustufen).
+* Text ausgeben und zeichnen.
+{{Tldr:End}}
 == Grundformen ==
@@ Zeile 22: / Zeile 28: @@
 {{Aufgabe:End}}
 {{Lösung:Start|Hinweise zu Aufgabe 1}}
-Notiere dir am besten Stichpunkte zu den Befehlen in Deiner Mappe, damit du sie dir beim Programmieren neben die Tastatur legen kannst.
+Notiere dir am besten Stichpunkte zu den Befehlen in deiner Mappe, damit du sie dir beim Programmieren neben die Tastatur legen kannst.
 ; <code>rect(x, y, breite, höhe)</code>
@@ Zeile 37: / Zeile 43: @@
 ; Zeichnet eine Ellipse mit dem Mittelpunkt <code>x, y</code> und der angegebenen Breite und Höhe.
 ; <code>arc(x, y, breite, höhe, start, stop)</code>
-: Zeichnet einen Kreisbogen um den Mittelpunkt <code>x, y</code> und der angegeben Breite und Höhe, angefangen beim Winkel <code>start</code> bis zum Winkel <code>stop</code>. Die Winkel werden in Radian angegeben, können aber einfach mit <code>radians(winkel)</code> aus einem berechnet werden.
+: Zeichnet einen Kreisbogen um den Mittelpunkt <code>x, y</code> und der angegebenen Breite und Höhe, angefangen beim Winkel <code>start</code> bis zum Winkel <code>stop</code>. Die Winkel werden in Radian angegeben, können aber einfach mit <code>radians(winkel)</code> aus einem berechnet werden.
-: Dies ist der komplizierteste Befehle. Du musst ihn nicht vollständig verstehen. Durch ausprobieren kannst du eine Idee bekommen, wie er funktioniert.
+: Dies ist der komplizierteste Befehl. Du musst ihn nicht vollständig verstehen. Durch Ausprobieren kannst du eine Idee bekommen, wie er funktioniert.
 {{Lösung:End}}
 {{Lösung:Start|Lösung Aufgabe 2}}
@@ Zeile 61: / Zeile 67: @@
 == Farben ==
-{{Processing}} bietet verschiedene Möglichkeiten, mit Farben zu zeichnen. Dazu werden bei einem Zeichenobjekt zwei Bereiche unterschieden: Die ''Kontur'' und die ''Füllung''. Beide Bereiche können unterschiedlich eingefärbt werden. Neben der Farbe kann für die Kontur auch noch eine ''Dicke'' eingestellt werden.
+{{Processing}} bietet verschiedene Möglichkeiten, mit Farben zu zeichnen. Dazu werden bei einem Zeichenobjekt zwei Bereiche unterschieden: die ''Kontur'' und die ''Füllung''. Beide Bereiche können unterschiedlich eingefärbt werden. Neben der Farbe kann für die Kontur auch noch eine ''Dicke'' eingestellt werden.
 Außerdem kann auch der Hintergrund der Zeichenfläche individuell eingestellt werden.
@@ Zeile 96: / Zeile 102: @@
 # Schau dir das Programm zunächst an, ohne es in Processing auszuprobieren. Stelle Vermutungen auf, wofür die einzelnen Befehle gut sind. Welche Ausgabe erwartest du?
 # Übernimm das Programm in Processing und führe es aus. Entspricht das Bild deiner Erwartung? Wo ergeben sich unterschiede?
-# Die Befehle {{Processing Ref|fill()}} und {{Processing Ref|stroke()}} haben im Programm entweder einen oder drei Zahlen als Eingabe. Diese Zahlen legen die Farbe fest, mit der gezeichnet wird. Welchen unterschied macht es, ob ein oder drei Eingaben angegeben werden?
+# Die Befehle {{Processing Ref|fill()}} und {{Processing Ref|stroke()}} haben im Programm entweder einen oder drei Zahlen als Eingabe. Diese Zahlen legen die Farbe fest, mit der gezeichnet wird. Welchen Unterschied macht es, ob ein oder drei Eingaben angegeben werden?
 # Informiere dich unter dem Link über das [https://lehrerfortbildung-bw.de/st_digital/medienkompetenz/gestaltung-farbe/systeme/pc/rgb/ RGB-Farbsystem]. Erkläre, was die drei Eingaben bedeuten.
 {{Aufgabe:End}}
@@ Zeile 106: / Zeile 112: @@
 == Text ==
-Texte lassen sich sehr einfach mit dem {{Processing Ref|text()}} Befehl auf die Zeichenfläche schreiben. Dazu wird einfach der Text in doppelten Anführungszeichen (<code>"</code>) und die Position (<code>x</code>, <code>y</code> Koordinaten) angegeben.
+Wir haben schon Texte im ''Ausgabefenster'' am unteren Rand des {{Processing}}-Fensters
+ausgegeben, indem wir den {{Processing Ref|println()}}-Befehl benutzt haben.
+Texte lassen sich ebenso einfach mit dem Befehl {{Processing Ref|text()}} auf die Zeichenfläche schreiben. Dazu wird einfach der Text in doppelten Anführungszeichen (<code>"</code>) und die Position des Textes (<code>x</code>, <code>y</code> Koordinaten) angegeben.
 Die Farbe des Textes wird mit dem bekannten {{Processing Ref|fill()}} festgelegt.
@@ Zeile 126: / Zeile 135: @@
 #: Versuche nur mit {{Processing Ref|fill()}} und der Einstellung {{Processing Ref|noStroke()}} zu arbeiten und achte auf die Reihenfolge der Objekte beim Zeichnen.
 # Benutze die neu gelernten Befehle, um ein Bild deiner Wahl zu gestalten.
-#: Fertige ein Bildschirmfoto deines Bildes an und speichere es im [https://helmholtz.padlet.org/ngb/lj9jr59emdjd9s8u Padlet des Kurses].
+#: Fertige ein Bildschirmfoto deines Bildes an und speichere es im [{{Project URL|https://helmholtz.padlet.org/ngb/%y_processing_bilder}} Padlet des Kurses].
-# Such dir ein Bild aus dem Padlet aus und reproduziere es so gut du kannst.
 {{Aufgabe:End}}
 {{Zusatzaufgabe:Start|Icon=Processing_2021_logo.svg}}
 Lies bei Michael Kipp über die verschiedenen [http://michaelkipp.de/processing/01%20erste-schritte.html#sec_1_1_5 Zeichenmodi], mit denen du beeinflussen kannst, wie die Befehle der Grundformen funktionieren.
+{{Zusatzaufgabe:End}}
+{{Zusatzaufgabe:Start|Sprinteraufgabe|Icon=Processing_2021_logo.svg}}
+Such dir ein Bild aus dem [{{Project URL|https://helmholtz.padlet.org/ngb/%y_processing_bilder}} Padlet] aus und reproduziere es so gut du kannst.
 {{Zusatzaufgabe:End}}