Processing – Links

projektseite: http://processing.org/

hier findest du neben dem programm selbst auch noch viele anwendungsbeispiele, die programm – referenz und einige gute tutorials für den einstieg in processing.

Processing verwenden

Processing kann von der Projektseite heruntergeladen werden. Einfach Auspacken und starten.

Die Export-Funktion erzeugt eine index.html mit den dazugehörigen Java Applett. Das ganze kann dann ganz leicht in eine Homepage eingebaut werden.

Der Programmcode wird im Programmfenster geschrieben und kann über die Play-Taste ausgeführt werden.  Bei der Ausführung eines Programm wird dieses in einem separaten Fenster geöffnet.

Das Terminal-Fenster unten kann für Textausgaben benutzt werden.

Die Programmstruktur

Ein klassisches Processing-Programm besteht aus 2 Funktionen. setup() und draw(), wobei der Code in setup() einmalig und der Code in draw() kontinuierlich ausgeführt wird. Jeder Durchlauf von draw() zeichnet ein Frame in das Anwendungsfenster.

Beispiel: hier klicken um das Applett zu starten

void setup()
{
size(300,300);
/*legt dir größe
des anwendungsfensters fest*/

}

void draw()
{
rect(50,50,100,100); // zeichnet ein rechteck auf den schirm
}

Processing basiert auf Java und übernimmt auch vieles von dessen Syntax.  Es wurde aber für die bessere Usability bei grafischen Aufgaben um einige Elemente erweitert.

Kommentare: // einzeiliger Kommentar, /* */ mehrzeiliger Kommentar siehe Beispiel oben

Anweisungstrennzeichen: “;” – jede Programmanweisung sollte mit einem Strichpunkt abgeschlossen werden.

Funktionen: über sie kann man bestimmte Aktionen ausführen. Bsp: size(300,300). Funktionen werden immer von zwei runden Klammern gefolgt, innerhalb derer verschiedene Parameter zu finden sein können. Parameter können aber auch fehlen, Bsp: smooth();. Es ist auch möglich eigene Funktionen zu schreiben und diese dann in anderen Teilen des Programms aufzurufen, was die Übersichtlichkeit des Programmcodes deutlich erhöht.

Ausdrücke: Sind vielleicht aus der Mathematik bekannt und auch mit diesen zu Vergleichen. Ein Operator kombiniert dabei verschiedene Werte.

Bsp:

Ausdruck                    Wert
7                                       7
3+8                                 11
(12,8+179)*8         1534,4
7>5                               true
6<3                               false

Konsolenfenster: Um wichtige Werte auszugeben, die sich z.B. im Anwendungsfenster zu schnell ändern, kann man die Konsole benutzen. Bsp.: print(), oder println()

Das folgende Beispiel gibt eine 10 im Konsolenfenster aus.

int x=10;
println(x);

Zusätzliche Leerzeichen sind egal. Siehe Beispiel oben.

Groß- Klein- Schreibung beachten!!!

Das Koordinatensystem

In Processing wird von jeder Anwendung ein Fenster erzeugt, dessen Größe von der Funktion size(x,y) bestimmt wird. Der erste Wert x steht für die Anzahl der horizontalen Pixel, der 2. Wert y für die Anzahl der vertikalen.

size(640,480); //erzeugt somit eine Fenster mit 640*480 Bildpunkten

Auch alle anderen Funktionen, nutzen ein Koordinatensystem. Jeder Punkt wird von einer x- und einer y- Koordinate bestimmt.

point(200,200); //zeichnet einen Punkt auf 200 horizontal und 200 vertikal

Einfache Formen

Punkt:

point(x,y);

Ein Punkt ist 1 Pixel gr0ß und durch seine Position auf der x- und der y-Achse bestimmt.

Beispiel: Applett starten

point(10,20); //erster Punkt links oben, letzer
point(20,30);//rechts unten
point(30,40);
point(40,50);
point(50,60);

Punkte außerhalb des Displays werden nicht als Fehler behandelt, sondern einfach nicht angezeigt.

Übung: Schreibe ein Programm, das eine vertikale Linie aus Punkten von (10,10) bis (10,20) ausgibt.

Linie

line(x1,y1,x2,y2);

Zeichnet eine Linie von einem Anfangspunkt zu einem Endpunkt. Die Strichdicke kann nicht direkt in der Funktion line() eingestellt werden. Dafür gibt es die Funktion strokeWeight().

Beispiel: Applett starten

strokeWeight(2);//legt die Linienstäre auf 2 Pixel fest
line(10,10,90,90); // zeichnet eine Line von (10,10) nach (90,90)
strokeWeight(4);
line(90,10,10,90);

Dreieck

triangle(x1,y1,x2,y2,x3,y3);

Zeichnet ein Dreieck zwischen den 3 Eckpunkten. Dieses kann, wie auch andere 2-dimensionale Objekte gefüllt werden.  Dafür wird die Funktion fill() verwendet. Als Parameter für fill() kann entweder ein Grauwert (fill(255) wäre weiß), oder eine beliebige Farbe lt. RGB-Modell verwendet werden. fill(r,g,b), wobei r,g und für Werte von 0-255 stehen. Es können aber auch 2 Parameter angegeben werden, wobei der 2. für die Transparenz steht (0 – nicht durchsichtig, 255 völlig durchsichtig).

Beispiel: Applett starten

fill(227,16,16); //legt dir Füllfarbe für das
// hintere Dreieck fest
triangle(10,10,90,10,70,70); //hinten
fill(255,230);//der 2. Wert definiert die Transparenz
triangle(10,40,90,40,70,100);//vorne

Das Beispiel zeigt gut, dass jene Objekte, die im Code weiter unten generiert werden dann in der Darstellung im Vordergrund zu finden sind.

Viereck

quad(x1,y1,x2,y2,x3,y3,x4,y4);

Mit dieser Funkton lassen sich alle Arte von Vierecken erzeugen, auch Parallelogramme und irreguläre Vierecke.

Rechtecke

rect(x,y,width,height);

Rechtecke werden mit Hilfe des linken oberen Eckpunktes (x – und y- Koordinaten), der Breite und der Höhe bestimmt.

Übung: Erstelle ein Bild wie das unten. Verwende dafür die Funktionen size(), fill(), und rect().

Ellipse

ellipse(x,y,width,height);

Zeichnet Ellipsen und Kreise. Kreise entstehen dann, wenn widht und height gleich groß sind.

Übung: Erweitere die Abblidung oben mit ein paar runden Elementen.

Bezier

bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2);

Mit der Bezier- Funktion kann man Kurven erzeugen. Dies erfordert aber einige Übung. Prinzipiell funktioniert es wie die Verktor-Linienfunktion in Grafikprogrammen. Man definiert einen Punkt und lenkt durch einen 2. Punkt, der nicht Teil der Kurve ist die Linie ab.

Beispiel: Applet starten

void setup () {
size(640,480);
}
void draw (){
bezier(100,100,mouseX,mouseY,mouseX,mouseY,400,100);
}

Hier kann mit der Maus cx1,cy1, cx2 und cy2 verändern und bekommt so einen Eindruck wie Bezier- Kurven entstehen.

Hintergrund

background();

Diese Funktion legt die Hintergrundfarbe fest. Kann genau wie fill() als Parameter einen Graustufenwert oder aber Werte nach RGB-Modell beinhalten.

Hinweis: Wenn man die RGB- Werte von bestimmten Farben sucht, kann man unter Tools>ColorSelektor ein Fenster aufrufen, dass die RGB Werte von individuell ausgewählten Farben anzeigt.

Sonstiges:

nofill() verhindert das Füllen von 2 und 3-D Objekten, es werden nur die Konturen angezeigt.

nostroke() verhindert das Anzeigen der Ränder von Objekten.

smooth() aktiviert das Antialiasing – Kanten werden geglättet.

nosmooth() deaktiviert Antialiasing

Variablen und Datentypen

Alle Daten im Computer werden irgendwann einmal in eine Folge 0er und 1er übersetzt. In Software sind Daten meist Buchstaben und Zahlen, aber auch Bilder, Musik und Video. In Processing kann man viele dieser verschiednen Daten verarbeiten, aber nicht alle auf die gleiche Weise.

Datentypen

Sie legen fest, wie Daten in Sprache des Computers (eine Reihe aus 0 und 1) übersetzt werden. Es gibt sog. primitive Datentypen, die in den meisten Programmiersprachen schon festgelegt sind. Darüber hinaus, kann man aber auch seine eigenen Datentypen erstellen.

Primitive Datentypen sind:

• int – 32 bit – ganzzahlen von ca. -2 Mrd. bis ca. +2Mrd.
• float – 32 bit – Gleitkommazahl mit 8 Stellen Genauigkeit
• boolean – 1 bit – true oder false
• byte – 8 bit – -128 bis+127
• char – 16 bit  – 0 bis 65535
• color – 32 bit – 1.6777.216 Farben

Variablen

Variablen sind Platzhalter im Speicher und können mit entsprechenden Werten beschrieben werden. Bevor ein Wert in einer Variablen gespeichert werden kann, muss diese “deklariert” werden. Dabei wird ein entsprechender Datentyp für die Variable definiert. Bsp:

• int x; // deklariert die Variable x
• x=12; //weist der Variablen x den Wert 12 zu
• float z; //deklariert die Variable z
• z=3,14 //weist der Variablen z den Wert 3,14 zu
• boolean wahr;//deklariert die Variable wahr
• wahr=true;//weist der Variablen wahr den Wert true zu

Man kann das ganze etwas abkürzen und Deklaration und Wertzuweisung in einem Schritt durchführen.

• int x=12;
• float z=3,14;

Eine Variable darf nur einmal deklariert werden, kann dann aber nacheinander verschiedenste Werte enthalten.

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

Mathematische Operationen

Da alles was in einer Anwendung gezeigt wird auf Nummern basiert, ist es unerlässlich, dass wir uns zumindest kurz ausschließlich mit diesen beschäftigen.

Beispiel: starte Applett

size(250,250);
int grau=50;
fill(grau);
rect(20,20,100,100);
grau=grau+50;
fill(grau);
rect(40,40,100,100);
grau=grau+50;
fill(grau);
rect(60,60,100,100);
grau=grau+50;
fill(grau);
rect(80,80,100,100);
grau=grau+50;
fill(grau);
rect(100,100,100,100);

Hier wird mit Hilfe einer Variable der Grau-Wert der Quadrate definiert.

Beispiel: starte Applett

size(300,300);
int x=2; //x ist jetzt 2
line(x,0, x,height);
x=x*2;//x ist jetzt 4
line(x,0, x,height);
x=x*2;//x ist jetzt 8
line(x,0, x,height);
x=x*2;//x ist jetzt 16
line(x,0, x,height);
x=x*2;//x ist jetzt 32
line(x,0, x,height);
x=x*2;//x ist jetzt 64
line(x,0, x,height);
x=x*2;//x ist jetzt 128
line(x,0, x,height);
x=x*2;//x ist jetzt 256
line(x,0, x,height);

Hier werden Parameter der Funktion line() durch die Variable x kontrolliert.

Übung: Verändere das Programm Variablen so, dass es horizontale statt  vertikale Linien zeichnet und lass die Linien immer um 2 Pixel dicker werden.

Modulo

In einem Programm kann man also ganz leicht alle Grundrechnungsarten anwenden. Oft ist es aber auch nötig den Rest einer Berechnung mit Ganzzahlen zu ermitteln. Dafür gibt es einen eigenen Operator. Dieser wird Modulo genannt und mit einem % geschrieben.

10 % 3 = 1
6 % 2 = 0
29 % 9 = 2

Natürlich können solche Berechnungen nur mit Zahlen des Datentyps int durchgefürht werden.

Datentypen können nicht beliebig kombiniert werden. Ein Ausdruck in der Form int x=4.0/3 liefert eine Fehlermeldung. float x=4.0/3 würde hingegen 1,3333334 ergeben. Die gleichen Ergebnisse kommen auch zustande, wenn die Zahlen durch Variablen mit den gleichen Werten ersetzt werden. Man muss also eigentlich immer genau wissen, welche Werte eine Variable annehmen kann.

Punktrechnung vor Strichrechnung

… gilt auch in Processing. Zudem kann man, wie auch in der Mathematik, Klammern setzen.

In der Kürze liegt die Würze

x++ steht für x=x+1;
y– für y=y-1;
x+=5 für x=x+5;
y-=5 für y=y-5;

usw.

Mathematische Funktionen

ceil();

Berechnet die nächste Ganzzahl aus einer Gleitkommazahl und rundet dabei immer auf.

floor();

Berechnet die nächste Ganzzahl aus einer Gleitkommazahl und rundet dabei immer ab.

round();

Berechnet eine Ganzzahl aus einer Gleitkommazahl. Dabei wird gerundet.

min(); und max();

Geben von beliebig vielen Zahlen als Parameter jeweils die größte oder die kleinste zurück.

Mouse Input

Position des Mauszeigers

Natürlich kann Processing auch auf Benutzereingaben reagieren.  Die Variablen mouseX und mouseY geben die aktuellen x- und y- Koordinaten des Mauszeigers zurück. Zu Beginn sind die beiden 0, das bleiben sie auch, wenn die draw()- Funktion nicht aufgerufen, oder mit noLoop() nur ein mal ausgeführt wird.

Beispiel: starte Applett

void setup(){
 size(200,200);
 smooth();
 noStroke();
}
void draw(){
 background(50);
 ellipse(mouseX,mouseY,30,30);
}

Übung: Erstelle ein Programm, in dem man mit einem weißen Stift einen dunklen Hintergrund anmalen kann.

Um festzustellen, ob die Maus sich bewegt hat, kann man die Variablen pmouseX und pmouseY verwenden. Sie haben den Wert des Mauszeigers des vorangegangenen Frames. Wenn die Maus sich nicht bewegt sind also mouseX und pmouseX gleich. Bewegt sich die Maus, sind sie unterschiedlich.

Beispiel: starte Applett

void setup(){
 size(200,200);
 smooth();
 strokeWeight(12);
 background(50);
}
void draw(){
 background(50);
 stroke(255);
 line(mouseX,mouseY,pmouseX,pmouseY);
}

Übung: Mit der Funktion frameRate() kann man festlegen, wie schnell der Bildschirminhalt erneuert wird. Wert steht für Bilder/sek. Probiere das Programm mit verschiedenen FrameRate – Werten aus.

Mausbuttons

Hier gibt in Processing die Variable mousePressed, die bei gedrückem Mausbutton true, sonst false rückmeldet. Außerdem ist es möglich bis zu 3 Mausbuttons abzufragen. Das geht mit mouseButton und liefert die Werte LEFT, CENTER oder RIGHT.

Beispiel: starte Applett

void setup(){
 size(200,200);
 smooth();
}
void draw(){
 background(120);
 if (mousePressed) {
 if (mouseButton == LEFT){
 fill(0);
 }
 else if (mouseButton == RIGHT){
 fill(255);  
 }
 else {
 fill(120);
 }
ellipse(100,100,100,100);
 }
}

Mauszeiger

Mit den Funktionen noCursor() und cursor() kann der Mauszeiger ein- und ausgeblendet werden. Ein individueller Mauszeiger kann mit Hilfe eines beliebigen Objekts und der Variablen mouseX und mouseY als Koordinatenangabe erstellt werden.

Aufgabe: Verändere das obige Programm so, dass es den Mauszeiger nicht mehr anzeigt.

Aufgabe: Schreibe ein Programm, das den Mauszeiger anzeigt und die Maus gleichzeitig ein Objekt bewegt, das aber in X und Y-Richtung nur immer 1/3 des Weges des Mauszeigers zurücklegt.

if – Anweisung

Bis jetzt sind unsere Programm immer von vorne nach hinten durchgelaufen, ohne auf irgend etwas zu reagieren.

Die if – Anweisung gibt uns die Möglichkeit Bedingungen für den weiteren Verlauf des Programms einzusetzen. Das können true/false -Abfragen oder der Vergleich zweier Zahlen sein. Es sollten bei Zahlen immer nur Ganzzahlen (int) miteinander verglichen werden.

Vergleichsoperatoren können sein:

> größer als, < kleiner als, >= größer oder gleich, <= kleiner oder gleich, == ist gleich (als Vergleich, einfaches = ist ein Zuweisungsoperator!!!),  != ist nicht gleich, || logisches oder, && logisches und und ! logisches nicht.

Für Anweisungen, die nur ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind, empfiehlt sich folgende Schreibweise:

if (test) {
Anweisungen
}

Wobei test für die Bedingung steht.

Beispiel: starte Applett

void setup(){
 size(203,203);
 smooth();
}
void draw(){
 background(255);
 stroke(5);
 fill(150);
 if (mouseX<100 && mouseY<100){
 rect(0,0,100,100);
 }
 else if (mouseX>100 && mouseY<100){
 rect(100,0,100,100);
 }
 else if (mouseX<100 && mouseY>100){
 rect(0,100,100,100);
 }
 else if (mouseX>100 && mouseY>100){
 rect(100,100,100,100);
 }   
}

Viele Möglichkeiten ergeben sich dann,wenn man versucht mehrere Bedingungen ineinander zu verschachteln.

Logische Operationen

In Processing kann man 3 logische Operationen verwenden (&& logisches UND, || logisches ODER und ! logisches NICHT).

Diese Operationen kann man nun beliebig miteinander verknüpfen. Man nennt dies die Boolsche Algebra. Hier einige wichtige Ausdrücke:

lejos auf lego nxt

projektseite: http://lejos.sourceforge.net/

installationsanleitung für ubuntu: http://wiki.ubuntuusers.de/LeJOS_f%C3%BCr_Lego_NXT

unterlagen: http://wwwiaim.ira.uka.de/legowiki/doku.php?id=unterlagen_und_downloads