|
NEU von www.schaltungen.at downloadbarhttp://sites.schaltungen.at/arduino-uno-r3/processing/einstieg-in-processing/computer-fuer-alleWels, am 2015-01-06BITTE nützen Sie doch rechts OBEN das Suchfeld [ ] [ Diese Site durchsuchen]DIN A3 oder DIN A4 quer ausdrucken ********************************************************************************** DIN A4 ausdrucken
********************************************************* Programmieren mit Processing-Computer für alle_1a.doc Programmieren mit Processing-Computer für alle (47Seiten)_1a.pdf Processing
Von Thomas Koberger
Dieses Weblog gibt eine Einführung in die Programmierung mit Processing. Alle Artikel inkl. Quellcode werden gerade für Processing 2.0 überarbeitet https://lernprocessing.wordpress.com/2010/01/18/processing-verwenden/ 033_c_fritz-x_Processing-Tutorial 1 - Basics (46 Seiten)_1b.pdf Basics:
Advanced:
Div. Skripts
Android Apps mit Processing erstellen:
Kinect mit SimpleOpenNI: Projekte:
Libraries
********************************************************* 704_c_fritz-x_Computer füralle! - Programmieren mit Processing (47 Seiten)_1a.doc Computer für alle! Grafik programmieren mit ProcessingLinks
EinführungDas Projekt Processing wurde von Ben Fry und Casey Reas 2001 am MIT (Massachusetts Institute of Technology) in Boston ins Leben gerufen.
Die einfache Schreibweise erleichtert den Einstieg für Programmieranfänger. Die Programm Anweisungen (Syntax) ist stark an aktuelle Programmiersprachen angelehnt und wird in Processing Sketch genannt. Deshalb fällt der Umstieg auf Java leicht. Processing eignet sich vor allem für Grafikanwendungen. Auch 3D Objekte sind schon implementiert. Der Editor für Processing kann von der Webseite "http://processing.org" für Linux, Mac und Windows heruntergeladen werden. Eine Java Umgebung "JDK" wird vorausgesetzt. Processing ist Open Source. Die PDE (Processing Development Environment) wird unter der GNU GPL (General Public License) veröffentlicht. Programm
Das Programmfenster stellt einen Texteditor dar.
Oben befindet sich die Menüleiste mit File, Edit, Sketch, Tools und Help.
Gleich darunter befinden sich die wichtigsten Befehle als Icons.
Über dem Editierbereich ist eine Tab-Leiste. Damit lassen sich Programme aufteilen. Dazu später mehr.  Im Programmeditor werden die Anweisungen geschrieben. Automatisch werden die Anweisungen verschiedenfarbig dargestellt, und die Programmzeilen entsprechend eingerückt. Dies erleichtert die Lesbarkeit des Programm-Code. Mit der Tastenkombination [Ctrl] + [t] kann der Code nachträglich Automatisch eingerückt werden. Starten lässt sich das Programm mit [Ctrl] + [r]. Probiere es aus. Darunter befindet sich eine Statuszeile, ein Direktausgabefenster und noch eine Statuszeile. Das Direktausgabefenster wird mit dem Befehl print() bzw. println() angesprochen. Die unterste Statusleiste zeigt die Zeilennummer an. Dein erstes ProgrammGib im Editorfenster folgende Zeile ein: ellipse (50, 50, 80, 80);
achte darauf die Zeile mit einem Semikolon (Strich-Punkt) abzuschliessen. Im nun erscheinenden Fenster wird ein weisser Kreis auf grauen Grund mit einem Durchmesser von 80-pixel dargestellt. Quell-Code • Anleitung (cfa_000_programm.pdf)  nach oben Programm Struktur
Ein Processing Programm kann ohne Programmstrukturen gestartet werden. Dann werden die Befehle im Sketch einmalig ausgeführt. Syntax: /* Programmstruktur_001.pde */ size(200, 200); // Grösse des Ausgabefenster rect(70, 40, 60, 150); // Ein Rechteck zeichnen ... ellipse(100, 100, 200, 60); // und eine Ellipse In diesem Fall wird zuerst ein Rechteck gemalt und darüber eine Ellipse. Man sieht, dass die Reihenfolge der Funktionsaufrufe wichtig ist. Ein kontinuierlicher Programmablauf wird mit den beiden Funktionen setup() und draw(). Die Funktion setup() wird einmalig beim Programmstart aufgerufen, hier werden die ersten Funktionen und Einstellungen geschrieben. Die Funktion draw() wird kontinuierlich ausgeführt. Jeder Durchlauf von draw() zeichnet ein Frame in das Anwendungsfenster. Standardmässig wird draw() 60 mal in der Sekunde aufgerufen. Die Aufrufrate kann aber vom Programmierer mit frameRate(zahl) vorgegeben werden. Beispiel: /* Processing basiert auf Java und übernimmt dessen Syntax.
Um einen einfacheren Einstieg in die Grafikprogrammierung zu erlauben, wurde Processing um einige Elemente erweitert. Processing eignet sich sowohl für Programmieranfänger und Grafiker.
Einzeilige Kommentare beginnen mit // und mehrzeilige Kommentare werden zwischen /* und */ geschrieben.
Anweisungen werden mit einem Strichpunkt (Semikolon) abgeschlossen.
Funktionen werden immer mit zwei Klammern aufgerufen, in diesen Klammern können verschiedene Parameter stehen.
Bsp.: size(200, 200); .
Parameter können auch fehlen wie zum Beispiel bei smooth() .
Du kannst auch eigene Funktionen schreiben und diese dann in anderen Teilen von Sketch aufrufen. Sketch ist übrigens die Bezeichnen eines Programms in Processing.
Processing besitzt ein Konsolenfenster in der Direktausgaben möglich sind.
Dies kann beim probieren eines Programms vorteilhaft sein. Mit print(); und println(); wird die Ausgabe im Konsolenfenster angesprochen. Beispiel: int x = 10 * 5; println(x); gibt eine 50 im Konsolenfenster aus. Im Programmcode sind zusätzliche Leerzeichen egal, wichtig ist dagegen: Gross- und Kleinschreibung muss unbedingt eingehalten werden. Anleitung (programm_struktur.pdf)Schleifenfor() Schleife
Steuert eine Abfolge von Wiederholungen.
Eine for() Schleife besteht aus den drei Teilen Initialisieren, Test und Update.
Diese Abschnitte werden mit einem ; Strich-Punkt von einander getrennt.
Die Schleife wird solange ausgeführt bist der Test unwahr ist. Diese Schleife wird überall dort verwendet wo die Anzahl der Durchgänge zum vornherein bekannt ist oder sich berechnen lässt. for() Schleifen lassen sich verschachteln Die for() Schleife läuft folgendermassen ab:
Syntax: for (initialisiere, testen, update) { // Anweisungen } Wir skizzieren auf unsere Zeichenfläche ein Quadratisches Raster von 10 mal 10 Pixel mit grauen Linien und im Raster von 50 mal 50 Pixel weisse Linien: size(200, 200); stroke(220); for (int x = 10; x < width; x += 10) line(x, 0, x, height); for (int y = 10; y < height; y += 10) line(0, y, width, y); stroke(255); for (int x = 50; x < width; x +=50) line(x, 0, x, height); for (int y = 50; y < height; y += 50) line(0, y, width, y); Beschreibung (cfa_015_forSchleife.pdf) nach oben while() Schleife
Im Gegensatz zur for() Schleife, bei der wir die Bedingungen zum Ablauf der Schleife vor dem Start festlegen, übergeben wir der while() Schleife nur eine Bedingung.
Solange diese Bedingung wahr ist wird die Schleife abgearbeitet.
Deshalb muss sich innerhalb der Schleife mindestens eine Anweisung befinden, die den Wahrheitswert der Bedingung beeinflusst. Sonst erzeugen wir eine Endlosschleife. Die while() Schleife läuft folgendermassen ab:
Syntax: while(Bedingung) { // Anweisung(en) }
Wir basteln uns einen Quadratischen Tunnel: size(200, 200); noFill(); int i = 2; while (i < height - i * 2) { // Bedingung stroke(255 - (60 + i * 2)); // Strichfarbe rect(i, i, i * 2, i * 2); // Rechteck malen i +=2; // Variable erhöhen }a  nach oben break BefehlFür die beiden Schleifen – for() und while() – besteht die Möglichkeit innerhalb der Schleife eine zusätzliche Abbruchbedingung zu schaffen. Syntax: if(Abbruchbedingung == wahr) { break; } Nach Aufruf von break wird mit der Anweisung gleich nach der Schleife fortgefahren. Beschreibung(cfa_016_whileSchleife.pdf)
Funktionen
|
|
bit |
Byte | Bezeichnung |
| 8 |
1 |
Byte |
| 16 | 2 | Word |
| 32 | 4 | Double Word |
| 64 | 8 | Quadruple Word |
| 128 | 16 | Double Quadruple Word |
Datentypen
Die Datentypen definieren wie die Daten im Computer verarbeitet werden.
| Bezeichner | BIT | Beschreibung |
| int | 32 | Ganzzahlen von ca. -2 Mrd. bis ca. 2 Mrd. |
| float | 32 | Gleitkommazahl mit 8 Stellen Genauigkeit |
| boolean | 1 | wahr oder falsch (true or false) |
| byte | 8 | -128 bis 127 |
| char | 16 | einzelne ASCII-Zeichen |
| String |
|
Texte (siehe unten) |
| color | 32 | 16'777'216 Farben |
Variablen sind Platzhalter und können mit den entsprechenden Werten beschrieben werden für die sie definiert worden sind.
Variablen müssen in Processing vorher deklariert werden, das heisst sie müssen in Sketch angemeldet werde.
Bei der Deklaration wird der entsprechende Datentyp bestimmt.
Syntax und Beispiel:
int x; // deklariert die Variable x x = 12; // weist der Variablen x den Wert 12 zu
int x = 12;
float z; // deklariert die Variable z z = 3.14 // weist der Variablen z den Wert 3.14 zu
float z = 3.14;
boolean wahr; // deklariert die Variable wahr wahr = true; // weist der Variablen wahr den Wert true zu char c; // deklariert die Variable c (ASCII-Zeichen) c = 'f'; // weist der Variable das ASCII-Zeichen f zu
String txt; // deklariert die Variable txt txt = 'Hallo'; // weist der Variable den Text Hallo zu String txt = "Hallo";
Deklarationen und Wertzuweisungen können auch zusammengefasst werden:
int x = 12; float z = 3.14; String txt = "Hallo"; Variablen können nur einmal deklariert werden, hingegen kann der Inhalt der Variablen immer wieder geändert werden.Variablennamen sind frei wählbar, dürfen allerdings kein reservierter Ausdruck sein (int, null,false und so weiter).
In Processing sind einige vordefinierte Variablen vorhanden wie width, height, PI usw.
Variablenname dürfen frei gewählt werden, allerdings keine reservierten Ausdrücke sein (int, null, true, false usw.).
Processing hat einige vordefinierte Variablen, nämlich in size(): width and height.
Wenn diese nicht anders definiert werden, haben sie den Wert 100.
Deshalb ist das Anwendungsfenster in einem Programm ohne size(x,y) – Anweisung 100*100 px groß.
println(width + ", " + height);
//gibt 100, 100 im Terminalfenster aus
|
|
Wenn man ein Programm für verschiedene Auflösungen schreiben will, ist es gut die Variablen width und height zu verwenden,
da man dann allein mit der size() – Funktion die ganze Anwendung skalieren kann.
Beispiel:
size(300,300);
rect(width/10,height/10,width/2,height/2);
rect(width/4,height/4,width/2,height/2);
ellipse(width/2,height/2,width/4, height/4);
|
|
Aufgabe: Schreibe ein Programm, das einige Variablen von den Typen char
und String erzeugt und gibt diese mit der Funktion println im Konsolenfenster aus.
Gültigkeit von Variablen
Variablen die im obersten Block deklariert werden sind Globale Variablen.
Diese stehen überall im Programm zu Verfügung.
Variablen die in Funktionen oder in Blöcke initialisiert werden sind Lokale Variablen und nur innerhalb des entsprechenden Block und niedrigeren Blöcke verfügbar.
Blöcke werden durch geschweifte Klammern { } gebildet.
Beschreibung (variablen_datentyp.pdf)
Bild: ODER Verknüpfungen nach oben
Strings
Der Datentyp String kann Zeichenketten aufnehmen. Zeichenketten sind Buchstaben und Zahlen, zusammengefasst als Wort oder Satz.
Zeichenketten werden in Anführungszeichen " " gesetzt.
String ist kein 'primitiver' Datentype wie int, char, float.
Hier handelt es sich um ein Objekt (siehe Objekte und Klassen).
Der Datentyp char kann nur ein Zeichen enthalten das in Apostrophen ' ' gesetzt wird.
Für String dagegen werden normalen Anführungszeichen " " benötigt.
Beispiel:
String txt = "Hallo Welt... oder so!"; println(txt);Gibt Hallo Welt... oder so! im Terminalfenster aus.
String besitzt viele Methoden. Damit lassen sich die Daten im Objekt manipulieren.
Methoden von String
stringVariable.length(); // Anzahl Zeichen
Beispiel:
String txt = "Hallo Welt... oder so!"; println(txt.length());
23 Wichtig sind die runden Klammern nach length().
stringVariable.startsWith(); /* true oder false je nach Übereinstimmung */ stringVariable.endsWith(); /* true oder false je nach übereinstimmung */
Beispiel:
String txt ="Hallo Welt... oder so!"; println(txt.startsWith("Hallo")); println(txt.endsWith("Welt")); println(txt.endsWith("so!"));
Ausgabe:
truefalsetrue
Rückgabe von true oder false wenn am Anfang oder am Ende der Zeichenkette die Abfrage mit textVar.startsWith(" ")
oder textVar.endsWith(" ") übereinstimmt oder nicht.
stringVariable.charAt(); /* gibt das Zeichen an der in Klammer angegebenen Position zurück (beginnt mit 0) */
Beispiel:
String txt ="Hallo Welt... oder so!"; println(txt.charAt(6));
Gibt ein W im Terminalfenster aus.
stringVariable.toLowerCase(); /* wandelt den String in Kleinbuchstaben um */ stringVariable.toUpperCase(); /* wandelt den String inGrossbuchstaben um */
Beispiel:
String txt ="Hallo Welt... oder so!"; println(txt.toLowerCase()); println(txt.toUpperCase());
Ausgabe am Terminal:
hallo welt... oder so!HALLO WELT... ODER SO!
stringVariable.substring(); /* gibt den String ab der in Klammer angegebenen Stelle, oder zwischen diesen Stellen zurück */
Beispiel:
String txt = "Hallo Welt... oder so!"; println(txt.substring(14)); println(txt.substring(6, 13));
Ausgabe:
oder so!Welt...
stringVariable.equals(); /* vergleicht 2 Strings und gibt wahr oder falsch zurück. Bei Strings ist kein Vergleich mit == möglich */
Beispiel:
String passwort = "HW3os!"; String eingabe = "hW3os!"; if (passwort.equals(eingabe)) println("OK"); else println("falsche Eingabe");
Ausgabe:
falsche Eingabe
stringVariable.toCharArray(); /* legt die Zeichen des Strings in einem Array ab. */
Beispiel:
String txt ="Hallo Welt... oder so!"; char[] txtArray = txt.toCharArray(); println(txtArray[0]); println(txtArray[6]);
Ausgabe:
H WBeschreibung (strings.pdf)
Mathematische Operationen
Beim Programmieren müssen wir immer wieder Rechnen.Processing versteht die üblichen Grundrechenarten und besitzt ein Unmenge von Rechen Funktionen.
Fangen wir mit den Grundrechenarten an.
Addition
mit + werden zwei Werte zusammen gerechnet.
Beispiel:
resultat = zahl_1 + zahl_2; /* die beiden Werte in zahl_1 und zahl_2 werden zusammengezählt und das Ergebnis wandert in die Variable resultat */ zahl_x += 100; // die Variable zahl_x wird um 100 erhöht zahl_n ++; // hier wird die Variable zahl_n um eins erhöht (eng. increment)
Hinweis: Das plus Zeichen wird auch bei der String Verarbeitung benutzt. Hier werden zwei Teil Strings zusammengenommen, in gewisser weise ist dies auch addieren.
Subtraktion
mit - (minus) wird ein Wert vom anderen abgezogen.
Beispiel:
resultat = zahl_1 - zahl_2; /* der Inhalt von zahl_2 wird vom Inhalt der zahl_1 abgezogen und in die Variable resultat geschrieben */ zahl_y -= 50; // der Inhalt von zahl_y wird um 50 erniedrigt zahl_n --; // der Wert von zahl_n wird um 1 erniedrigt (eng. decrement)
Multiplikation
mit dem Asterisk (Stern) * werden Werte multipliziert.
Beispiel:
resultat = zahl_1 * zahl_2 /* die beiden Werte von zahl_1 und zahl_2 werden Mal genommen und in die Variable resultat geschrieben */ zahl_a *= 2; // zahl_a wird mit 2 multiplizier
Division
der Schrägstrich / (eng. slash) dient zur Division von zwei Zahlen.
Beispiel:
resultat = zahl_1 / zahl_2 // der Inhalt von zahl_1 wird durch den Inhalt von zahl_2 gerechnet und in die Variable resultat geschrieben zahl_b /= 3; // zahl_b wird durch 3 gerechnet
Modulo
berechnet den Rest einer Division und wird mit
dem Prozentzeichen % dargestellt.
Beispiel:
for (int i = 0; i < 100; i++) { if (i % 20 == 0) print(nf(i, 2) + " " ); }
Gibt 00 20 40 60 80 im Terminalfenster aus.
Anleitung (mathematische_operationen.pdf)Rechen Funktionen
abs()
Berechnet den Absolutwert (Betrag) einer Zahl. Der absolute Wert einer Zahl ist immer positiv.
Beispiel:
int a = abs(153); int b = abs(-15); float c = abs(12.234); float d = abs(-9.23); print(a + " / " + b + " / " + c + " / " + d);
Gibt 153 / 15 / 12.234 / 9.23 im Terminalfenster aus.
ceil()
Berechnet den nächsten integer-Wert, der grösser oder gleich dem Wert des Parameters ist. Zum Beispiel gibt ceil(9.03) den Wert 10.
Beispiel:
float x = 8.22; int a = ceil(x); print("ceil(" + x + ") = " + a);
Am Terminalfenster erscheint ceil(8.22) = 9
constrain()
Schränkt einen Wert um eine maximale und minimale Grösse ein.
Beispiel:
void draw() { background(204); float mx = constrain(mouseX, 30, 70); rect(mx -10, 40, 20, 20); }
Syntax:
constrain(Wert Maximum, Minimum);
Die Werte können vom Typ int oder float sein.
dist()
Berechnet den Abstand zwischen zwei Punkten.
Beispiel:
// Setzt die graue Hintergrundfarbe abhängig // von der Entfernung der Maus zur der Mitte void draw() { float d = dist(50, 50, mouseX, mouseY); fill(d * 4); rect(0, 0, 99, 99); }
exp()
Gibt die Eulersche Zahl e (2,71828 ...) potenziert mit dem Parameter zurück.
Beispiel:
float v1 = exp(1); println(v1);
Zeigt den Wert 2.7182817 im Terminalfenster.
floor()
Berechnet den nächsten integer Wert, der kleiner oder gleich dem Wert des Parameters ist.Zum Beispiel gibt floor(9.03) den Wert 9.
Beispiel:
float x = 8.22; int a = floor(x); print("floor(" + x + ") = " + a);
Am Terminalfenster erscheint floor(8.22) = 8
lerp()
Ermittelt einen Wert zwischen zwei Zahlen zu einem bestimmten Schrittwert.
Dieser Schrittwert ist eine Fliesskommazahl zwischen 0.0 und 1.0.
Sie dient zum Interpolieren zwischen den beiden Werten, wobei 0.0 gleich dem ersten Punkt,
0.1 liegt sehr nahe an dem ersten Punkt, 0.5 auf halbem Weg dazwischen, usw.
Mit der lerp() Funktion lassen sich Bewegung entlang einer geraden Bahn erstellen,
Auch zum Zeichnen von gestrichelten Linien ist diese Funktion geignet.
Beispiel:
smooth(); int x1 = 5, y1 = 5; int x2 = 95, y2 = 95; line(x1, y1, x2, y2); for(int i = 0; i <= 10; i++) { strokeWeight(7); float x = lerp(x1, x2, i / 10.0); float y = lerp(y1, y2, i / 10.0); point(x, y); }
Syntax:
lerp(startWert, endWert, SchrittWert);
log()
Berechnet den natürlichen Logarithmus einer Zahl. Diese Funktion benötigt Werte die grösser als 0,0 sind.
Beispiel:
println(log(12));
Zeigt 2.4849067 im Terminalfenster.
mag()
Berechnet den Abstand zwischen zwei Punkten.
Die Startposition ist hier immer 0.0,
mag(x, y) ist die Abkürzung von dist(0, 0, x, y).
Beispiel:
line(0, 0, 20, 30); println(mag(20, 30));
Gibt 36.05551 im Terminalfenster aus.
map()
Mit der map() Funktion lassen sich zwei beliebige Zahlenbereiche aneinander anpassen.
Beispiel:
print(map(25, -50, 50, 0, 1000));
Zeigt 750.0 im Terminalfenster.
Syntax:
map(wert, niedrig_1, hoch_1, niedrig_2, hoch_2);
max()
Bestimmt den grössten Wert in einer Folge von Zahlen.
Beispiel:
float a = max( 45.2, 8.56); int x = max(5, 67, 96); int[] liste = { 9, -4, 45, 69, 36, 12 }; println(a); println(x); println(max(liste));
Ausgabe am Terminal:
45.2 96 69
min()
Bestimmt den kleinsten Wert in einer Folge von Zahlen. Funktioniert wie max(), nur im umgekehrten Sinn.
Syntax:
min(wert_1, wert_2); min(wert_1, wert_2, wert_3); min(array_liste);
norm()
Wandelt eine Zahl von einem anderen Bereich in einen Wert zwischen 0 und 1. Identisch mit map(wert, niedrig, hoch, 0, 1).
Beispiel:
println(map(25, -50, 50, 0, 1)); println(norm(25, -50, 50));
Ausgabe im Terminalfenster:
0.750.75
Syntax:
norm(wert, niedrig, hoch);
pow()
Erleichtert exponentielle Ausdrücke.
Die pow() Funktion ist eine effiziente Möglichkeit der Multiplikation von Zahlen mit sich selbst.
Zum Beispiel ist pow(3, 5) gleichbedeutend mit dem Ausdruck 3^5 oder 3 * 3 * 3 * 3 * 3
und pow(3, -5) ist äquivalent zu 3^(-5)1 / (3 * 3 * 3 * 3 * 3)
Syntax:
pow(wert, exponent);
round()
Rundet eine Fliesskommazahl auf den nächsten Ganzzahlen Wert.
Werte zwischen n.1 und n.4 werden abgerundet und Werte von n.5 bis n.9 aufgerundet. Zum Beispiel gibt:
round(9.2) den Wert 9 und
round(9.6) = 10.
Syntax:
round(wert);
sq()
Multipliziert eine Zahl mit sich selbst.Das Ergebnis ist immer eine positive Zahl, sowie die Multiplikation zweier negativer Zahlen immer ein positives Ergebnis liefern.
sq() steht für engl. square, in deutsch Quadrat.
Beispiel:
println(" 3 x 3 = " + 3 * 3); println(" sq(3) = " + sq(3)); println("-3 * -3 = " + -3 * -3); println(" sq(-3) = " + sq(-3));
Die Ausgabe dazu:
3 x 3 = 9 sq(3) = 9.0 -3 * -3 = 9 sq(-3) = 9.0
sqrt()
Gibt die Quadratwurzel einer Zahl zurück.
Nur aus positiven Zahlen kann die Quadratwurzel gezogen werden. sqrt() ist das Gegenteil von sq().
Die Funktion sqrt() setzt sich aus square und root auf deutsch Quadrat und Wurzel zusammen.
Beispiel:
println(" sqrt(3) = " + sqrt(9)); println("sqrt(-3) = " + sqrt(-9));
Ausgabe am Terminal:
sqrt(3) = 3.0sqrt(-3) = NaNAnleitung(mathematische_operationen.pdf)
nach oben
Trigonometrische Funktionen
cos()
Berechnet den Kosinus eines Winkels.Diese Funktion erwartet, dass die Werte der Winkel im Bogenmass angegeben werden (Werte von 0 bis PI * 2).
Das Ergebnis wird im Bereich -1 bis 1 zurückgegeben.
Beispiel:
float a = 0; float inc = TWO_PI / 25; for(int i = 0; i < 25; i++) { line(i * 4, 50, i * 4, 50 + cos(a) * 40); a = a + inc; }
acos()
Der Arkuskosinus ist die Umkehrfunktion von Kosinus.Diese Funktion erwartet Zahlen im Bereich von -1 bis 1 und liefert Werte im Bereich von 0 bis PI (3.1415927) zurück.
Beispiel:
float a = PI; float c = cos(a); float ac = acos(c); println(" PI = " + a + "\n cos(PI) = " + c + "\ncos(acos(PI)) = " + ac);
Ausgabe am Terminal:
PI = 3.1415927 cos(PI) = -1.0 cos(acos(PI)) = 3.1415927
sin()
Berechnet den Sinus eines Winkels.
Diese Funktion erwartet, dass die Werte der Winkel im Bogenmass angegeben werden (Werte von 0 bis PI * 2).
Das Ergebnis wird im Bereich -1 bis 1 zurückgegeben.
Beispiel:
float a = 0; float inc = TWO_PI / 25; for(int i = 0; i < 100; i += 4) { line(i, 50, i, 50 + sin(a) * 40); a += inc; }
asin()
Die Umkehrung der Sinusfunktion ist der Arkussinus.
Diese Funktion erwartet Zahlen im Bereich von -1 bis 1 und liefert Werte im Bereich von -PI /2 (-1.5707964) bis PI / 2 (1.5707964) zurück.
Beispiel:
float a = PI / 3; float s = sin(a); float as = asin(s); println(" PI / 3 = " + a + "\n sin(PI / 3) = " + s + "\nasin(sin(PI / 3)) = " + as);
Ausgabe am Terminal:
PI / 3 = 1.0471976 sin(PI / 3) = 0.86602545 asin(sin(PI / 3)) = 1.0471976
tan()
Der Tangens berechnet das Verhältnis des Sinus und Kosinus eines Winkels.
Diese Funktion erwartet Werte in Bogenmass (von 0 bis PI * 2) und liefert Werte im von unendlich bis -unendlich zurück.
Beispiel:
float a = 0; float inc = TWO_PI / 50; for (int i=0; i < 100; i += 2) { line(i, 50, i, 50 + tan(a) * 2); a = a + inc; }
atan()
Der Arkuskotangens ist die Umkehrfunktion von Tangens.Diese Funktion erwartet Zahlen im Bereich von -unendlich bis unendlich und liefert Werte im Bereich von -PI / 2 bis PI / 2 zurück.
Beispiel:
float a = PI / 3; float t = tan(a); float at = atan(t); println(" PI / 3 = " + a + "\n tan(PI / 3 = " + t + "\natan(tan(PI / 3)) = " + at);
Ausgabe am Terminal:
PI / 3 = 1.0471976 tan(PI / 3 = 1.7320509 atan(tan(PI / 3)) = 1.0471976
atan2()
Berechnet den Winkel (in Bogenmass) von einem bestimmten Punkt zum Koordinatenursprung.
Die Werte werden als Fliesskommazahl im Bereich von PI bis minus PI zurückgegeben.
Die atan2() Funktion wird häufig zum Ausrichten der Mausposition genutzt.
Hinweis: Die y-Koordinate ist der erste und die x-Koordinate der zweite Parameter.
Beispiel:
void draw() { background(204); translate(width / 2, height / 2); float a = atan2(mouseY – height / 2, mouseX – width / 2); rotate(a); rect(-12, -5, 24, 10); }
radians()
Konvertiert eine Grad Angabe zu seinem entsprechenden Wert in Bogenmass.
Bogenmass und Grad sind zwei Möglichkeiten für Winkelangaben.
Grad ist uns geläufiger und wird im Bereich von 0 bis 360 angegeben.
Bogenmass wird in Processing für alle Trigonometrische Funktionen benötigt.
Sein Bereich geht von 0 bis 2 mal PI (0 bis 6.2831855...).
Beispiel:
String txt = ""; void setup() { for (float i = 0; i < 360; i += 90) { txt = txt + nf(i, 3, 0) + "° ≃ " + nf(radians(i), 1, 7) + " Radiant (Bogenmass)\n"; } println(txt); }
Ausgabe am Terminal:
000° ≃ 0.0000000 Radiant (Bogenmass) 090° ≃ 1.5707964 Radiant (Bogenmass) 180° ≃ 3.1415927 Radiant (Bogenmass) 270° ≃ 4.7123890 Radiant (Bogenmass)
degrees()
Wandelt ein Bogenmass zu seinem entsprechenden Wert in Grad um.
Bogenmass und Grad sind zwei Möglichkeiten für Winkelangaben.
Grad ist uns geläufiger und wird im Bereich von 0 bis 360 angegeben.
Bogenmass wird in Processing für alle Trigonometrische Funktionen benötigt.
Sein Bereich geht von 0 bis 2 mal PI (0 bis 6.2831855...).
Beispiel:
for(float i = 0; i < PI * 2; i += PI / 2) { print(round(degrees(i))); print("° / "); }
Ausgabe am Terminal:
0° / 90° / 180° / 270°Anleitung (mathematische_operationen.pdf)
nach oben
Zufallszahlengenerator
random()
Mit random() (eng. für zufällig) werden Zufallszahlen innerhalb vom angegebenen Bereich generiert.
Die Funktion random() liefert einen Fliesskommazahl zurück.
Der Aufruf random(5) gibt eine Zahl zwischen 0 und 5 (beginnend bei 0.0 bis 4.9.....).
Bei zwei Parametern wird eine Fliesskommazahl mit einem Wert zwischen den beiden Angaben zurück geliefert.
Beispiel:
println("Deine heutigen Lotto Zahlen ;-)"); for (int i = 0; i < 6; i++) { int r = int(random(1, 50)); print(" " + r); }
Ausgabe am Terminal:
Deine heutigen Lotto Zahlen ;-) 49 32 17 14 4 45
randomSeed()
Setzt den Startwert für random() .
Normalerweise erzeugt random() bei jedem Programmstart eine andere Zufallszahl.
Mit dieser Funktion wird immer die gleiche Zufallszahlenfolge erzeugt.
Der Sinn und Zweck dieser Funktion ist mir nicht bekannt ;-)
Syntax:
randomSeed(eine Festpunktzahl);
noise()
Die Funktion noise() basiert auf die Theorie des Perlin Noise, 1982 von Ken Perlin für den legendären Film Tron entwickelt.
Im Gegensatz zu random() ist noise() eine kontrollierbare Methode um einen Zufallswert zu erzeugen.
noise() nimmt das vorhergehende Ergebnis um eine neue Zufallszahl zu generieren.
Dieses Resultat weicht vom vorherigen nur leicht ab.
Natürlich wirkende Computergrafiken von Texturen, Gelände, Wolken und so weiter werden mit dieser Funktion erzeugt.
Beispiel:
size(300, 170); background(200); noStroke(); fill(0, 0, 255); float v = 0; for (int i = 0; i < width; i += 3) { float n = 90 + noise(v) * 40; rect(i, n, 2, 20); v = v + 0.15; } for (int i = 0; i < width; i += 3) { float r = random(10, 30); rect(i, r, 2, 20); } textAlign(CENTER); text("random() Funktion", width / 2, 65); text("noise() Funktion", width / 2, height – 10);Anleitung (mathematische_operationen.pdf)
nach oben
Zeichenfläche
Die Zeichenfläche wird in Processing im kartesischem Koordinatensystem dargestellt.
Die Ecke oben-links ist dabei der Ursprung (x=0, y=0).
Von diesem Punkt aus führt die X Achse in waagrechter Richtung nach rechts und die Y Achse in senkrechter Richtung nach unten.
Die Positionen und Grössen werden in Pixel Angegeben.
Grösse der Zeichenfläche
Mit dem Befehl size(breite, hoehe) wird die Grösse der Zeichenfläche festgelegt.
Die Grösse wird dabei in Pixel (Bildpunkte) angegeben. Ohne den Aufruf von size() wird die Ausgabefläche mit 100x100 Pixel dargestellt.
Syntax:
size(breite, hoehe)
Das unten dargestellte Beispiel legt einen Bereich von 400 x 400 Pixel im Ausgabefenster an.
size(400, 400); Quell-Code Anleitung (cfa_001_zeichenFlaeche.pdf)
Zeichen Elemente
Punkt
Ein Punkt ist das einfachste Zeichen Element.
Mit nur einer x- und einer y-Koordinate nimmt er – ohne spezielle Angaben – die Fläche eines Pixels ein.
Die Farbe wird mit stroke() festgelegt.
point(x, y) zeichnet einen Punkt auf die Zeichenfläche.
Bestimmt wird dieser durch x- und y-Koordinate.
Beispiel:
point(0, 0); //obere-linke Ecke point(43, 89);
Bild: Applet Punkt
Linie
Eine Linie ist eine Reihe von Punkten zwischen dem Anfangspunkt und dem Endpunkt.
In Processing verwendet man die Funktion line (x1, y1, x2, y2).
Diese Funktion benötigt dringend vier Parameter, zwei Werte für den Startpunkt und weiter zwei Werte für den Endpunkt.
Diese Werte können eine Fliesskommazahl oder eine Ganzzahl sein.
Beispiel:
line(80.5, 20.1, 10.3, 60.7); line(50, 50, 100, 100);
Bild: Applet Linie
Rechteck
Die rect() Funktion zeichnet eine rechteckige Fläche.
Sie benötigt die Start-Position rechts‑oben sowie die Breite und die Höhe.
Syntax:
rect(posX, posY, width, height)
Beispiel:
/* Rechteck 60x40 Pixel an Position 20/20 */ rect(20, 20, 60, 40)Die Aussenkanten von rect() sind immer parallel zur x- bzw. zur y-Achse. um dies zu umgehen kann mit quad() eine freie viereckige Fläche gezeichnet werden.
Mit der Funktion rectMode(MODE) kann die Start-Position und die End-Position angepasst werden.
Dazu später mehr.
Bild: Applet Rechteck
Viereck
Mit quad() kann ein Viereck gezeichnet werden dessen Ecken nicht rechtwinklig und keine parallele Seitenlinien haben müssen.
Diese Funktion benötigt die Positionsangaben für die vier Ecken
Syntax:
quad(x1, y1, x2, y2, x3, y3, x4, y4).
Beispiel:
quad(38, 31, 86, 20, 69, 63, 30, 76);
Bild: Applet Viereck
Dreieck
ähnlich wie beim Viereck wird die Funktion triangle() mit den Positions Daten für die drei Ecken gefüttert.
Beispiel:
triangle (30, 75, 58, 20, 86, 75);
Bild: Applet Dreieck
Kreis
Die Funktion ellipse(x, y, breite, hoehe) zeichnet eine Ellipse bzw. einen Kreis.
Standardmässig befindet sich der mit x und y angegebene Punkt in der Mitte des Kreises.
Die beiden anderen Werte geben die Breite und die Höhe an.
Dies entspricht dem Durchmesser des Kreises oder die Breite und Höhe der Ellipse.
Beispiel:
ellipse (56, 46, 55, 55);
Bild: Applet Kreis
Bogen
Zeichnet einen Bogen. Bögen sind Kreis- bzw. Ellipsensegmente.
Die Funktion benötigt den Startpunkt x und y, breite und hoehe der Ellipse.
Die start und stop Parameter geben die Winkel des Segmentes an.
Der Ursprung des Bogens oder Ellipse kann mit der ellipseMode() Funktion geändert werden.
Syntax:
arc(x, y, breite, hoehe, start, stop)
Beispiel:
arc (50, 55, 50, 50, 0, radians (90)); noFill (); arc (50, 55, 60, 60, radians (90), radians (180)); arc (50, 55, 70, 70, radians (180), radians (270)); arc (50, 55, 80, 80, radians (270), radians (360));
Bild: Applet Bogen
Farben Farben Farben
Wenn wir in der Computerwelt über Farbe sprechen wollen ist eine präzise Angabe gefragt.
Einfach mal sagen, "...färbe diese Figur senf-gelb..." funzt nicht.
Du musst dem Compi in in Zahlen sagen welche Farbe gewünscht wird.
Dazu stehen mehrere Verfahren zur Verfügung.
In Processing sind das RGB und HSB. Standardmässig wird in Processing RGB verwendet.
Der RGB Farbraum ist ein additiver Farbraum.
Die Farben werden durch additives mischen der drei Grundfarben rot, grün und blau dargestellt.
Jede einzelne Farbe wird mit einer Zahl zwischen 0 und 255 angegeben.
Die drei Farben zusammen gemischt ergeben ca. 16 Mio. Farbabstufungen.
In Processing steht dir ein Farbwähler zur Verfügung.
Dieser wird über [Tools] -> [Color Selector] aufgerufen.
Hier kannst du die gewünschte Farbe suchen um dann die Zahlen für dein Sketch zu übernehmen.
Die Angabe unten rechts ist die Hexadezimale Schreibweise.
Zusätzlich zu rot, grün und blau für jede Farbe, kann eine vierte Angabe gemacht werden.
Dieser vierte Wert wird "alpha" genant und ist die Transparenz.
Die kann nützlich sein wenn du Elemente teilweise durchsichtig darstellen willst.
Auch der Alpha-Wert wird in einem Bereich von 0 bis 255 angegeben, wobei 0 vollständig transparent und 255 völlig undurchsichtig ist.
Additive Farbmischung (aus Wikipedia)
Graustufen
Im RGB Farbraum (siehe oben) werden Graustufen aus gleiche Anteilen von rot, grün und blau gemischt.
In Processing ist es möglich die Graustufen in gekürzter Form anzugeben. Anstelle von fill(128, 128, 128) reicht die Angabe fill(128).
Auch für die Graustufen kann die Transparenz angegeben werden.
Dies sieht dann so aus: fill(128, transparenz) wobei transparenz eine Wert zwischen 0 und 255 haben kann.
Neun verschiedene Grautöne mit 90 bis 10 Prozent Helligkeit (aus Wikipedia)
Hintergrund
Die Funktion background() setzt die Farbe für den Hintergrund.
Standardmässig ist der Hintergrund hellgrau (200);.
In der draw() Funktion wird die Hintergrundfarbe verwendet um die Zeichnungsfläche zu löschen
Anstelle einer Farbe kann auch ein Bild verwendet werden.
Allerdings muss die Bildgrösse genau gleichgross wie das Programmfenster sein.
Entspricht die Bildgrösse nicht der Fenstergrösse kann mit der bild.resize(breite, hoehe) die Bildgrösse angepasst werden.
Bilder müssen sich im ”data” Verzeichnis befinden.
Wenn ein Bild als Hintergrund verwendet wird, wird die aktuelle tint() Einstellung ignoriert.
Es ist nicht möglich die Transparenz für den Hintergrund zu verwende.
Beispiel:
// grauer Hintergrund background (127); // farbiger Hintergrund background (225, 204, 0); // Hintergrund mit Bild PImage bild; bild = loadImage ("comic-lustig.jpg"); background (bild);
Syntax:
background(grau) background(rot, gruen, blau) background(color) background(hex)
Parameter:
grau ein Wert von 0 bis 255 rot ein Wert von 0 bis 255 gruen ein Wert von 0 bis 255 blau ein Wert von 0 bis 255 color ein ”color” Datatyp hex ein Hex-Wert
Applet Hintergrund grau
Applet Hintergrund farbig
Vordergrund
fill() Legt die Farbe fest mit der geschlossene Formen ausgefüllt werden.
Zum Beispiel mit fill(204, 102, 0), werden alle folgende Objekte in orange gefüllt.
Wenn keine Farbe angewendet werden soll, kannst du mit noFill() die Farbfüllung deaktivieren.
Die Funktion fill() hat auch einen Einfluss auf text().
Beispiel:
// grauer Vordergrund fill(153); rect(30, 20, 55, 55); // farbiger Vordergrund fill(204, 102, 0); rect(30, 20, 55, 55);
Syntax:
fill(grau) fill(grau, alpha) fill(rot, gruen, blau) fill(rot, gruen, blau, alpha)
Parameter:
grau Grauwert von 0 bis 255 rot Farbe rot von 0 bis 255 gruen Farbe grün von 0 bis 255 blau Farbe blau von 0 bis 255 alpha Transparenz von 0 bis 255a
Applet fill()
nach oben
Linienfarbe
Mit der Funktion stroke() wird die Linienfarbe für alle darauf folgende Elemente gesetzt.
Willst du keine Linie sehen kannst du mit noStroke() die Linienfarbe deaktivieren.
Beispiel:
// Linienfarbe grau stroke(153); rect(30, 20, 55, 55); // Linienfarbe orange stroke(204, 102, 0); rect(30, 20, 55, 55);
Syntax:
stroke(grau) stroke(grau, alpha) stroke(rot, gruen, blau) stroke(rot, gruen, blau, alpha)
Parameter:
grau Grauwert von 0 bis 255 rot Farbe rot von 0 bis 255 gruen Farbe grün von 0 bis 255 blau Farbe blau von 0 bis 255 alpha Transparenz von 0 bis 255a
Applet stroke()
nach oben
Eigenschaften
smooth()
Mit der Funktion smooth() werden die Grafischen Elemente mit glatten Ränder (Anti Aliasing) gezeichnet.Der visuelle Eindruck wird dadurch stark verbessert.
Mit der Benutzung von smooth() wird aber die Verarbeitungsgeschwindigkeit verlangsamt.
Beispiel:
size(200, 200); background(0); ellipse(50, 100, 72, 72); textAlign(CENTER); text("ohne smooth()", 50, 150); smooth(); ellipse(150, 100, 72, 72); text("mit smooth()", 150, 150);a
Beispiel smooth()
nach oben
strokeWeight()
Definiert die Breite von Linien, Punkte und Umrandungen. Die Grösse wird in Pixel angegeben.
Beispiel:
smooth(); strokeWeight(1); // Standard 1px line(20, 20, 80, 20); strokeWeight(4); // Dicker 4px line(20, 40, 80, 40); strokeWeight(10); // Dick 10px line(20, 70, 80, 70);
strokeCap()
Legt den Stil für die Darstellung der Linienenden fest.
Die Enden werden mit SQUARE (eckig), PROJECT (eckig verlängert) und ROUND (abgerundet) angegeben.
Standardmässig wird ROUND vorgegeben.
Diese Funktion ist nicht verfügbar, mit dem P2D, P3D, oder OpenGL‑Renderer.
Beispiel:
stroke(0); strokeWeight(12.0); strokeCap(ROUND); line(20, 30, 80, 30); strokeCap(SQUARE); line(20, 50, 80, 50); strokeCap(PROJECT); line(20, 70, 80, 70);
strokeJoin()
Definiert wie sich Liniensegmente an den Enden verbinden.
Die Verbindungen sind MITER (eckig), BEVEL (abgeschrägt) und ROUND (abgerundet).
Standardmässig wird MITER vorgegeben.
Diese Funktion ist nicht verfügbar, mit dem P2D, P3D, oder OpenGL‑Renderer.
Beispiel:
strokeJoin(MITER); beginShape(); vertex(35, 20); vertex(65, 50); vertex(35, 80); endShape(); strokeJoin(BEVEL); beginShape(); vertex(35, 120); vertex(65, 150); vertex(35, 180); endShape(); strokeJoin(ROUND); beginShape(); vertex(35, 220); vertex(65, 250); vertex(35, 280); endShape();
rectMode()
Legt den Zeichenmodus für ein Rechteck fest. Standardmässig wird rectMode(CORNER) vorgegeben.
Das Rechteck wird in diesem Fall mit dem Eckpunkt oben/rechts und mit der Breite und Höhe angegeben.
Mit rectMode(CORNERS) werden die Ecken oben/rechts und unten/links als Parameter definiert.
Und schliesslich mit rectMode(CENTER) wird der Startpunkt für ein Rechteck in den Mittelpunkt gesetzt
und die beiden anderen Parameter bedeuten Breite und Höhe.
Beispiel:
rectMode(CENTER); rect(35, 35, 50, 50); rectMode(CORNER); fill(102); rect(35, 35, 50, 50);
ellipseMode()
Wie bei rectMode() wird der Zeichenmodus festgelegt, in diesem Fall für eine Ellipse.
Standardmässig ist ellipseMode(CENTER) vorgegeben.
Mit CENTER werden der Mittelpunkt sowie die Breite und Höhe als Parameter benötigt.
Mit dem RADIUS‑Modus wird anstelle vom Durchmesser der Radius des Kreises bzw. der Ellipse angegeben.
Mit CORNER und CORNERS werden die Ecken der Ellipse analog zu rectMode() definiert.
Beispiel:
ellipseMode(CENTER);ellipse(35, 35, 50, 50);ellipseMode(CORNER);fill(102);ellipse(35, 35, 50, 50);noFill();ellipseMode(RADIUS);ellipse(50, 50, 50, 50);Beschreibung (eigenschaften.pdf)
Freie Formen vertex()
Ein Vertex ist eine Ecke eines Polygons.Zwei Vertices ergeben zusammen die Endpunkte einer Linie, drei Vertices definieren ein Dreieck, usw.
Mit der Funktion vertex() lassen sich frei definierbare Formen erstellen.
In Processing werden diese Punkte durch den Aufruf von vertex() erzeugt.
Begonnen und beendet wird das Zeichnen mit beginShape() und endShape().
beginShape()
Mit beginShape() wird eine frei definierbare Form begonnen.
Ein Parameter wird nicht dringend benötigt.
Mögliche Parameter sind POINTS (Punkte), LINES (Linien), TRIANGLES (Dreiecke),
TRIANGLE_FAN (im Kreis, Fan ist ein Propeller), TRIANGLE_STRIP (als Streifen),
QUADS (Rechtecke) und QUAD_STRIP (als Streifen).
Allerdings wird die Form dadurch eingeschränkt.
endShape()
Processing erhält die Anweisung mit den Punkten die seit beginShape() angegebenen wurden ein Umriss zu erzeugen.Je nach Farbanweisung und stroke() ist die Form gefüllt und sichtbar.
Mit endShape(CLOSE) wird die Form geschlossen.
vertex()
Mit vertex() werden die Eckpunkte der freien Form definiert.Mögliche Parameter sind X-, Y- und Z-Koordinaten.
Weitere Koordinaten werden für Texturen benötigt. Uns interessieren vorläufig nur die X- und Y-Koordinaten.
Quadrat gefüllt:
beginShape(); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape(CLOSE);
Quadrat leer:
noFill(); beginShape(); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape(CLOSE);
freie Form:
beginShape(); vertex(20, 20); vertex(40, 20); vertex(40, 40); vertex(60, 40); vertex(60, 60); vertex(20, 60); endShape(CLOSE);
Dreiecke:
beginShape(TRIANGLES); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); endShape();
Dreieck-Streifen:
beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape();
Rechteck:
beginShape(QUADS); vertex(30, 20); vertex(30, 75); vertex(50, 75); vertex(50, 20); vertex(65, 20); vertex(65, 75); vertex(85, 75); vertex(85, 20); endShape();
alle Beispiele aus: http://processing.org/reference/
Beschreibung (vertex.pdf)curveVertex()
Bestimmt die Vertex-Koordinaten für Kurven.
Diese Funktion kann nur zwischen beginShape() und endShape() verwendet werden.
Parameter in beginShape() sind nicht erlaubt.
Die ersten und letzten Punkte in einer Reihe von curveVertex() werden verwendet, um den Anfang und das Ende einer der Kurve zu steuern.
Ein Minimum von vier Punkten sind erforderlich, um eine winzige Kurve zwischen den zweiten und dritten Punkt zu zeichnen.
curveVertex:
smooth(); noFill(); beginShape(); curveVertex(99, 99); // 1. Führungspunkt curveVertex(84, 91); // 1. Punkt curveVertex(68, 19); // 3. Punkt curveVertex(21, 17); // 3. Punkt curveVertex(32, 95); // 4. Punkt curveVertex(1, 95); // letzter Führungspunkt endShape(); stroke(255, 0, 0); // rote Markierung ellipse(99, 99, 5, 5); // 1. Führungspunkt ellipse(1, 95, 5, 5); // letzter Führungspunkt stroke(0, 0, 255); // blaue Markierung ellipse(84, 91, 5, 5); // 1. Punkt ellipse(68, 19, 5, 5); // 2. Punkt ellipse(21, 17, 5, 5); // 3. Punkt ellipse(32, 95, 5, 5); // 4. Punkt
DIN A4 ausdrucken
*********************************************************
Impressum: Fritz Prenninger, Haidestr. 11A, A-4600 Wels, Ober-Österreich, mailto:[email protected]
ENDE