Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:processing:start [2021/01/23 19:42] – Martin Pabst
+++ api:documentation:processing:start [2021/01/23 20:00] – [Zustandsorientiertes Zeichnen von grafischen Objekten] Martin Pabst
@@ Zeile 47: / Zeile 47: @@
 </HTML>
-<WRAP left round info 80%>
+<WRAP left round tip 80%>
 Die Programmierung mit Processing unterscheidet sich von der Grafikprogrammierung, die Du bisher kennengelernt hast, in drei wesentlichen Punkten:
   * Es gibt nur ein kurzes Hauptprogramm, das ein ''HelloWorld''-Objekt instanziert und dann die Methode ''main'' der Oberklasse ''PApplet'' aufruft. Danach übernimmt diese die Kontrolle und ruft immer bei bestimmten Ereignissen Methoden von ''PApplet'' auf, die Du überschreiben kannst.
@@ Zeile 53: / Zeile 53: @@
   * Das ''PApplet''-Objekt "merkt" sich die aktuelle Füllfarbe, Linienfarbe, Transformation, Schriftgröße usw. Beim Zeichnen einer Figur wendet sie diese Einstellungen einfach an. Will man als nächstes eine Figur mit einer anderen Füllfarbe zeichnen, so ändert man zuerst durch Aufruf von ''fill()'' die Füllfarben-Eigenschaft des ''PApplet''-Objekts und zeichnet erst dann.
 </WRAP>
+===== Zustandsorientiertes Zeichnen von grafischen Objekten =====
+<WRAP left round info 80%>
+Diese Methoden kannst Du verwenden, um die Einstellungen für Füllfarbe, Rahmenfarbe usw. des ''PApplet''-Objekts zu ändern:
+  * ''fill(30, 40, 120)'' legt die neue Füllfarbe fest auf rot == 30, grün = 40, blau = 120. Es gibt noch viele andere Varianten zur Festlegung einer Farbe, siehe unten!
+  * ''stroke(120, 0, 20)'' ändert entsprechend die Linienfarbe
+  * ''noFill()'' sorgt dafür, dass ab jetzt ohne Füllung gezeichnet wird,
+  * ''noStroke()'' entsprechend ohne Linien,
+  * ''textSize()'' legt die neue Schriftgröße fest.
+Hier eine Auswahl der Methoden zum Zeichnen:
+  * ''rect(20, 20, 400, 300)'' zeichnet ein achsenparalleles Rechteck mit der linken oberen Ecke bei (20, 20), der Breite 400 und der Höhe 300,
+  * ''rect(20, 20, 400, 300, 40)'' zeichnet dasselbe mit abgerundeten Ecken (Eckenradius 40),
+  * ''circle(300, 200, 100)'' zeichnet einen Kreis mit Mittelpunkt bei (300, 200) und Radius 100,
+  * ''ellipse(300, 200, 100, 150)'' zeichnet eine Ellipse, deren Boundingbox die linke obere Ecke bei (300, 200) hat. Die Ellipse ist 100 breit und 150 hoch.
+  * ''line(20, 30, 400, 500)'' zeichnet eine Strecke von (20, 30) nach (400, 500).
+</WRAP>
+<HTML>
+<div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'ProcessingDrawinPrimitives'}">
+<script type="text/plain" title="DrawingPrimitives.java">
+new HelloWorld().main();         // startet das Applet; main() ruft dann gleich setup() auf!
+public class HelloWorld extends PApplet {
+   /**
+    * Die Methode setup wird nach dem Initialisieren des Grafiksystems von main aufgerufen.
+    */
+   public void setup() {
+      createCanvas(800, 600);    // definiert das Koordinatensystem: 800 nach rechts, 600 nach unten
+      background(80, 80, 255);            // füllt den Hintergrund hellblau
+      strokeWeight(10);
+      for(int i = 0; i < 10; i++) {
+         stroke(50);
+         fill(i * 25, 255 - i * 25, 0, 100);    // der viere Wert (100) ist der Alpha-Wert ( = Undurchsichtigkeit)
+         circle(50 + i * 60, 200, 100);
+         stroke(0, 100, 0);
+         noFill();
+         rect(i * 100, 300, 100, 200 + i * 10, 40);
+      }
+   }
+}</script>
+</div>
+</HTML>