Lernpfad:Einführung in Processing/5: Unterschied zwischen den Versionen
Jneug (Diskussion | Beiträge) |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
{{NNavigation}} | {{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 == | == Grundformen == | ||
Zeile 106: | Zeile 112: | ||
== Text == | == Text == | ||
Texte lassen sich | 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. | Die Farbe des Textes wird mit dem bekannten {{Processing Ref|fill()}} festgelegt. |
Version vom 20. November 2021, 08:26 Uhr
- Verschiedene Formen zeichnen.
- Definition von Farben (RGB-Farben, Graustufen).
- Text ausgeben und zeichnen.
Grundformen
Neben Rechtecken mit rect() und Linien mit line() können noch eine Reihe weiterer Grundformen gezeichnet werden:
- Probiere die verschiedenen Formen aus. Neben der Processing Referenz findest du bei Michael Kipp eine deutschsprachige Übersicht der Grundformen und der allgemeineren Formen.
- Übernimm das folgende Programm nach Processing und starte es:
- Erstelle ein Programm, das mit den Grundformen möglichst genau das gezeigte Gesicht nachzeichnet:
Notiere dir am besten Stichpunkte zu den Befehlen in Deiner Mappe, damit du sie dir beim Programmieren neben die Tastatur legen kannst.
rect(x, y, breite, höhe)
- Zeichnet ein Rechteck an der Position
x, y
mit der angegebenen Breite und Höhe. square(x, y, kantenlänge)
- Zeichnet ein Quadrat an der Position
x, y
mit der angegebenen Kantenlänge. quad(x1, y1, x2, y2, x3, y3, x4, y4)
- Zeichnet ein Viereck mit den angegebenen Eckpunkten
x1, y1
bisx4, y4
. triangle(x1, y1, x2, y2, x3, y3)
- Zeichnet ein Dreieck mit den angegebenen Eckpunkten
x1, y1
bisx3, y3
. circle(x, y, durchmesser)
- Zeichnet einen Kreis mit
x, y
als Mittelpunkt und dem angegebenen Durchmesser. ellipse(x, y, breite, höhe)
- Zeichnet eine Ellipse mit dem Mittelpunkt
x, y
und der angegebenen Breite und Höhe. arc(x, y, breite, höhe, start, stop)
- Zeichnet einen Kreisbogen um den Mittelpunkt
x, y
und der angegeben Breite und Höhe, angefangen beim Winkelstart
bis zum Winkelstop
. Die Winkel werden in Radian angegeben, können aber einfach mitradians(winkel)
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.
triangle(60, 60, 20, 90, 60, 90);
rect(40, 40, 40, 30);
ellipse(40, 40, 35, 35);
Eine mögliche Lösung für das Gesicht:
size(400,400);
circle(200,200,300);
circle(130,150,30);
circle(270,150,30);
triangle(200,190,180,220,220,220);
ellipse(200,300,160,30);
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.
Außerdem kann auch der Hintergrund der Zeichenfläche individuell eingestellt werden.
Das folgende Programm demonstriert die notwendigen Befehle:
size(400, 400);
background(74, 109, 136);
fill(0);
rect(40,40, 30,30);
fill(128);
rect(80,40, 30,30);
fill(255);
rect(120,40, 30,30);
fill(167, 236, 242);
stroke(98);
rect(40,80, 30,30);
stroke(128);
strokeWeight(4);
rect(80,80, 30,30);
stroke(255, 251, 56);
rect(120,80, 30,30);
fill(242, 109, 80);
noStroke();
rect(40,120, 110,30);
- 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 fill() und 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 RGB-Farbsystem. Erkläre, was die drei Eingaben bedeuten.
Um dir die drei Eingabezahlen für eine bestimmte Farbe zu ermitteln, kannst du eine dieser Seiten benutzen:
Text
Wir haben schon Texte im Ausgabefenster am unteren Rand des Processing-Fensters ausgegeben, indem wir den println()-Befehl benutzt haben.
Texte lassen sich ebenso einfach mit dem Befehl text() auf die Zeichenfläche schreiben. Dazu wird einfach der Text in doppelten Anführungszeichen ("
) und die Position des Textes (x
, y
Koordinaten) angegeben.
Die Farbe des Textes wird mit dem bekannten fill() festgelegt.
size(400, 400);
textSize(32);
fill(33);
text("Informatik ist toll!", 81, 201);
fill(247, 32, 120);
text("Informatik ist toll!", 80, 200);
Übungsaufgaben
- Erstelle ein Programm, das folgendes Bild möglichst exakt nachzeichnet:
- Versuche nur mit fill() und der Einstellung 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 Padlet des Kurses.
Lies bei Michael Kipp über die verschiedenen Zeichenmodi, mit denen du beeinflussen kannst, wie die Befehle der Grundformen funktionieren.
Such dir ein Bild aus dem Padlet aus und reproduziere es so gut du kannst.