Computer für alle!

NEU

http://sites.prenninger.com/arduino-uno-r3/processing/einstieg-in-processing/computer-fuer-alle

http://www.linksammlung.info/

http://www.schaltungen.at/

                                                                                             Wels, am 2015-01-06

BITTE 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
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




*********************************************************


von www.schaltungen.at downloadbar
704_c_fritz-x_Computer für alle! - Programmieren mit Processing (47 Seiten)_1a.doc

Computer für alle!


QUELLE: http://www.computerfueralle.ch/programmieren/cfa_kurs/cfa_000_start.html

Links



Einführung

Das Projekt Processing wurde von Ben Fry und Casey Reas 2001 am MIT (Massachusetts Institute of Technology) in Boston ins Leben gerufen.

 





Processing basiert auf der Programmiersprache Java.
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.
nach oben

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.


Menüzeile / Werkzeugleiste

Über dem Editierbereich ist eine Tab-Leiste. Damit lassen sich Programme aufteilen. Dazu später mehr.

Editor Bereich

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 Programm

Gib im Editorfenster folgende Zeile ein:

 ellipse (50, 50, 80, 80);
			

achte darauf die Zeile mit einem Semikolon (Strich-Punkt) abzuschliessen.
Hast du alles korrekt eingegeben klicke auf das Icon mit dem nach rechts zeigendem Dreieck.
Alternativ kann ein Sketch auch über das [Sketch] -> [Run] Menü oder mit der Tastenkombination [Ctrl] + [r] gestartet werden.

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)

a





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:

/*
Programmstruktur_001.pde
*/

 void setup() { size(200, 200); //legt die Grösse des Ausgabefenster fest } void draw() { rect(70, 40, 60, 150); // ein Rechteck zeichnen ellipse(100, 100, 200, 60); // Eine Ellipse zeichnen }

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)

Schleifen

for() 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:

  • Eine Zähl-Variable wird initialisiert.
  • Diese Variable wird auf den Wahrheitswert geprüft.
  • Ist der Test wahr wird der folgende Anweisungsblock ausgeführt, sonst wird die Schleife verlassen.
  • Die Update-Anweisung wird durchgeführt.

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)

a




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:

  • Die Bedingung wird auf den Wahrheitswert geprüft.
  • Ist der Test wahr wird/werden die Anweisung(en) innerhalb der Schleife abgearbeitet sonst wird die Schleife verlassen.

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 Befehl

Fü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)
 
nach oben



Funktionen
Mit Funktionen können immer wieder benötigte Programmcodes, Berechnungen oder Formen programmiert werden.
Sie müssen nur einmal geschrieben und können dann immer wieder aufgerufen werde.
Den Funktionen lassen sich Werte übergeben oder können auch solche zurück liefern.
Wenn eine Funktion einen Wert zurückgeben soll muss sie einem Datentyp zugewiesen werden.
Ohne Rückgabewert wird eine Funktion mit void deklariert. Die beiden wichtigsten Funktionen sind:

Syntax:

 void setup() {
	// Anweisungen
 }

 void draw() {
	// Anweisungen
 } 
			
Die Funktion setup() wird einmalig beim Programmstart aufgerufen, hier werden die ersten Funktionen und Einstellungen geschrieben.
Die Funktion draw() wird kontinuierlich ausgeführt.

Beispiel für eine Funktion mit Rückgabewert:

 void setup() {
	float erg;
	println("Division 15 / i");
	println("---------------");
	for (float i = 2; i < 7; i++) {
		erg = divi(15, i);
	println("15 / " + int(i) + " = " + erg);
	}
 }

 float divi(float z1, float z2) {
	if (z2 == 0) return 0;
	else return z1 / z2;
}
			

Ausgabe im Terminalfenster:

			
 Division 15 / i
 ---------------
 15 / 2 = 7.5
 15 / 3 = 5.0
 15 / 4 = 3.75
 15 / 5 = 3.0
 15 / 6 = 2.5
			
Anleitung (funktionen.pdf)

a





nach oben

Variablen und Datentypen

Der Computer versteht nur EIN und AUS, das heisst entweder ist Strom da oder nicht.
Die kleinste Speichereinheit ist 1bit.
Dieses Bit hat zwei mögliche zustände 0 und 1.
Wobei 0 kein Strom und 1 Strom bedeutet.
Nimmt man mehrere Bits zusammen können mehr Zustände dargestellt werden.
Zwei Bit gleich vier, drei Bit gleich acht, vier Bit gleich 16 Zustände und so weiter.

Die heutigen Computer arbeiten mit 32 oder 64 Bit.
Dies entspricht einem Informationsinhalt von 4'294'967'296 oder 18'446'744'073'709'551'616 Zustände.

In Software bestehen Daten meist aus Buchstaben und Zahlen. Bilder, Video und Musik sind im Compi schlussendlich auch nur Zahlen.

Processing kann viele dieser verschiedenen Daten verarbeiten.
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:

true
false
true
			

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 
W
 			
Beschreibung (strings.pdf)
 
nach oben





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)
 
nach oben


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.75
0.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.0
sqrt(-3) = NaN    
			
Anleitung(mathematische_operationen.pdf)


a



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)


a








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)

a





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)
nach oben

Zeichen Elemente

Punkt

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
Bild: Applet Punkt
nach oben

Linie

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
Bild: Applet Linie
nach oben

Rechteck

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
nach oben

Viereck

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
nach oben

Dreieck

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
Bild: Applet Dreieck
nach oben

Kreis

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
Bild: Applet Kreis
nach oben

Bogen

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
Bild: Applet Bogen
nach oben

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)
Additive Farbmischung (aus Wikipedia) Farbwähler in Processing
nach oben

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)
Neun verschiedene Grautöne mit 90 bis 10 Prozent Helligkeit (aus Wikipedia)
nach oben

Hintergrund

Hintergrund grau







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 grau
Applet Hintergrund farbig
Applet Hintergrund farbig
nach oben

Vordergrund

Vordergrund grau Vordergrund farbig







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 255
			
a



Applet fill()

nach oben

Linienfarbe

Linienfarbe farbig Linienfarbe grau


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 255
			
a



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()

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();
			
nach oben

rectMode()

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);
			
nach oben

ellipseMode()

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)
nach oben

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

Quadrat gefüllt:

 beginShape();
 vertex(30, 20);
 vertex(85, 20);
 vertex(85, 75);
 vertex(30, 75);
 endShape(CLOSE);
			
Quadrat leer

Quadrat leer:

 noFill();
 beginShape();
 vertex(30, 20);
 vertex(85, 20);
 vertex(85, 75);
 vertex(30, 75);
 endShape(CLOSE);
			
freie Form

freie Form:

 beginShape();
 vertex(20, 20);
 vertex(40, 20);
 vertex(40, 40);
 vertex(60, 40);
 vertex(60, 60);
 vertex(20, 60);
 endShape(CLOSE);
			
Dreiecke

Dreiecke:

 beginShape(TRIANGLES);
 vertex(30, 75);
 vertex(40, 20);
 vertex(50, 75);
 vertex(60, 20);
 vertex(70, 75);
 vertex(80, 20);
 endShape();
			
Dreieck-Streifen

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();
			
Rechtecke

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)
nach oben

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

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:schaltungen@schaltungen.at
ENDE



Comments