Bild von Coordinate System and Shapes, processing.org
Eingeführte Befehle und Variablen: size(breite, hoehe); width, height.
Das Koordinatensystem beim Zeichnen mit dem Computer hat den Nullpunkt, die Koordiante (0,0), nicht in der Mitte des Bildschirmes, sondern links oben:
Bild von Coordinate System
and Shapes, processing.org
Mit dem Befehl size(breite, hoehe) wird die initiale Grösse des Ausgabefensters von Processing gesetzt. Initiale Grösse, weil der Benutzer die Grösse des Fenster selber verändern kann. Die aktuelle Grösse des Fensters speichert Processing in den Variablen width (Breite) und height (Höhe).
Siehe auch Coordinate System and Shapes (processing.org).
Eingeführte Befehle: background(r,g,b), stroke(r,g,b), noStroke(), fill(r,g,b), noFill().
Farben werden in sehr vielen Programmen wie Adobe Photoshop, Microsoft Powerpoint u.v.m. häufig als Mischung von Rot-, Grün- und Blau-Bestandteilen angegeben (RGB). Jeder Farbwert liegt dabei im Bereich 0..255. Das ergibt 2^8 * 2^8 * 2^8 = 2^24 = 16’777’216 mögliche Farben. Grauwerte haben jeweils den gleichen Anteil rot, grün und blau, so dass 0..255 verschiedene Grauwerte (inkl. schwarz und weiss) dargestellt werden können. Siehe auch RGB-Farbraum (Wikipedia).
Farben können auch in Processing in der sogenannten RGB-Darstellung angegeben werden (siehe auch Color, processing.org). In Processing können folgende Farben gesetzt werden:
Eingeführte Befehle: point(x,y), line(x1,y1,x2,y2), rect(x,y,breite,hoehe), ellipse(x,y,breite,hoehe), triangle(x1,y1,x2,y2,x3,y3); strokeWeight(gewicht), smooth(), noSmooth().
Processing unterstützt die typischen Grundformen der zweidimensionalen Darstellung:
Als Linienfarbe wird die zuletzt mit stroke(r,g,b) gesetzte Farbe verwendet. Als Füllfarbe wird die zuletzt mit fill(r,g,b) gesetzte Farbe verwendet.
Die Art der Darstellung kann zudem über folgende Methoden beeinflusst werden:
Das Programm zeichnet ein Gitter aus Punkten:
Die Punkte werden dabei eingefärbt in Abhängigkeit ihrer (x,y)-Koordinate:
for (int x = ABSTAND; x < BREITE; x = x + ABSTAND) {
for (int y = ABSTAND; y < HOEHE; y = y + ABSTAND) {
stroke(0, x, y);
point(x, y);
}
}
Source Code: PunktGitter.java
Eine Variation des Programms verändert fortlaufend die Grösse der Punkte, so dass der Eindruckt entsteht, die Punkte würden pulsieren:
Die Grösse der Punkte wird als Funktion des frameCount berechnet. frameCount gibt an, zu wievielten Mal draw() aufgerufen wird:
// punktStaerke wird die Werte 0, 1, ..., 2*ABSTAND, 0, 1, ... // 2*ABSTAND, 0, 1, ... annehmen (% = Rest ganzzahliger Division) int punktStaerke = frameCount % (2 * ABSTAND); strokeWeight(punktStaerke);
Wie genau der Wert der Variable punktStaerke in Abhängigkeit der Zeit (Variable frameRate) berechnet wird, ist der Fantasie überlassen. Das folgende Beispiel verwendet trigonometrische Funktionen, um einen zyklisches Zu- und Abnehmen der Punktstärke zu erzeugen:
punktStaerke = (int) (ABSTAND + sin(radians(frameCount)) * ABSTAND);
Source Code: PunktGitterPulsierend.java
Das Programm zeichnet ein Reihe von Kreuzen in X-Form:
Die doppelt verschachtelte Schleife lässt die Variable x nicht grösser werden als die Variable y; dadurch entsteht die Dreiecksstruktur:
for (int y = 1; y < HOEHE - ABSTAND / 2; y = y + ABSTAND) {
for (int x = ABSTAND / 2; x < y; x = x + ABSTAND) {
line(x, y, x + ABSTAND / 2, y + ABSTAND / 2);
line(x + ABSTAND / 2, y, x, y + ABSTAND / 2);
}
}
Source Code: LinienKreuze.java
Das Programm zeichnet ein Serie von Rechtecken:
Die Rechtecke werden dabei abwechselnd halb-transparent gezeichnet, und ihre Füllfarbe sowie die Rahmenfarbe von einer Zählvariable abhängig gemacht:
// mache die Fläche der Rechtecke abwechselnd transparent
if (transparent) {
fill(i, 0, i, 125); // 125 => mittlere Transparenz
} else {
fill(i, 0, i);
}
transparent = !transparent;
stroke(255 - i, 255 - i, 0);
rect(i, i, SEITEN_LAENGE, SEITEN_LAENGE);
Source Code: LinienKreuze.java
Lassen Sie es mit Hilfe des Zufalls farbige Punkte regnen:
Processing stellt die Methode random(maximalWert) zur Verfügung, um Zufallszahlen zu berechnen. So kann eine zufällige X-Koordinate innerhalb der aktuellen Fensterbreite wie folgt erzeugt werden:
float x = random(width);
Source Code-Gerüst für Ihre Lösung: AufgabePunkteRegen.java
Variation: Sie können auch Ellipsen oder Rechtecke regnen lassen, gefüllt, nicht-gefüllt, transparent, nicht-transparent, die Farben über die Zeit blasser werden lassen – Ihrer Phantasie setzt Processing nur wenig Grenzen!
Schreiben Sie ein Programm, das einen Ball durch das Programmfenster springen lässt:
Für Ihr Programm müssen Sie dem Ball eine Geschwindigkeit in X-Richtung und in Y-Richtung geben. Bei jedem Aufruf von draw() aktualisieren Sie die aktuelle Position (x,y) des Balls basierend auf der aktuellen Geschwindigkeit. Dabei müssen Sie berücksichtigen, dass der Ball das Programmfenster mit Breite width und height (Processing-Variablen) nicht verlassen darf. Wenn der Ball also auf einen Fensterrand trifft, müssen Sie die Geschwindigkeit in X-Richtung und in Y-Richtung anpassen.
Source Code-Gerüst für Ihre Lösung: AufgabeSpringBall.java
Sie können Ihr Programm beliebig variieren. Sie können zum Beispiel bei draw() jedes Mal den Hintergrund mit background setzen; so sieht man immer nur den Ball an der aktuellen Position. Sie können aber auch die Spur stehen lassen, indem Sie den Hintergrund nicht jedes Mal setzen. Sie können den Hintergrund statt mit background auch mit rect mit einem halbtransparenten Rechteck zeichnen. So verblassen die Bälle der letzten Aufrufe von draw immer mehr, und es entsteht ein Schweif-Effekt:
Schreiben Sie ein Programm, das irgendwelche geomtrischen Figuren zeichnet: Konzentrische Kreise (Kreise mit gleichem Mittelpunkt, aber grösser werdendem Radius), vielleicht mit Farbverlauf, Gitternetze aus Linien, gestapelte Rechtecke, ... irgendein Programm, das die oben eingeführten Grundformen verwendet und ansprechend aussieht – und vielleicht animiert darstellt!