Erste Hilfe
› Processing Tutorials
› Processing Referenz (Tipp: Ausdruck markieren und [STRG]+[SHIFT]+T oder [CMD]+[SHIFT]+T)
› Processing Forum
Befehle und Sequenzen
Zeilenweise Befehle erteilen...
point(30,35); line(10,70,80,30); ellipse(60,65,20,20);
... bei tückischer Syntax (Worte zusammen, viele Leerzeichen oder Zeilenumbrühe entsprechen einem Leerzeichen) ...
point(30,35);
point (30,35);
point ( 30, 35);
point ( 30, 35);
(nicht:)
poi nt(30,35);...und Reihenfolge.
line(10,70,80,30); ellipse(60,40,20,20);
ellipse(60,40,20,20); line(10,70,80,30);↑
Canvas: Position, Form und Farbe
Größe variabel. Positionen: Von oben links (0,0) nach unten rechts (width, height).
size(200,200); rect(0,0,10,10);
rect(190,190,10,10);
bzw.
rect(width-10,height-10,10,10);
Farbe: R,G,B jeweils 0-255 (für Graufstufen nur ein Wert 0-255), Alpha für Transparenzen.
Background (Hintergrundfarbe), Stroke (Linien und Ränder) und Fill (Füllfarbe).
size(200,200); background(255,255,255); strokeWeight(5); stroke(255,0,0); fill(0,0,255); rect(20,20,100,100); noStroke(); fill(0,255,0,128); rect(80,80,100,100);
Dazu: strokeWeight, etc.
size(160,200); background(255,255,255); line(10,10,10,height-10); strokeWeight(2); line(20,10,20,height-10); strokeWeight(4); line(30,10,30,height-10); strokeWeight(10); line(50,10,50,height-10); strokeCap(ROUND); line(100,10,100,height-10); strokeCap(SQUARE); line(120,10,120,height-10); strokeCap(PROJECT); line(140,10,140,height-10);
Form: rect, ellipse, line, point, curves, 3D, ... Aber auch: ellipseMode, rectMode, ... Siehe: Reference: Shape
background(255); noStroke(); fill(221,89,123, 128); ellipseMode(CENTER); ellipse(50,50,20,20); ellipseMode(RADIUS); ellipse(50,50,20,20); ellipseMode(CORNER); ellipse(50,50,20,20); ellipseMode(CORNERS); ellipse(50,50,20,20);
Und schließlich: Shapes
size(400,400); background(128); fill(0); stroke(255); strokeWeight(8); strokeJoin(MITER); beginShape(); vertex(40, 40); vertex(width/2, 160); vertex(340, width/2); vertex(120, 360); endShape(CLOSE);
Aber auch: size() legt den Renderer fest. Beispiel: PDF
(Sketch, Import Library..., pdf)
import processing.pdf.*; size(200,200,PDF,"dateiname.pdf"); background(255,255,255); strokeWeight(5); stroke(255,0,0); fill(0,0,255); rect(20,20,100,100); noStroke(); fill(0,255,0,128); rect(80,80,100,100);↑
Kommentare
...werden von Processing ignoriert und sind nur für Menschen interessant.
// kurze Kommentare
/* lange ... Kommentare */↑
Variablen
Deklarieren: es gibt etwas mit einem Namen und einem Typ, z.B. mit Komma (float) oder ohne (int).
int px; float py;
initialisieren (Wert zuweisen/speichern), ...
px = 30; py = 35.0;
benutzen.
point(px,py); ellipse(px+30,py+30,20,20);
Mit dem Ergebnis einer Funktion füllen.
float px; px = random(100); float py = random(100); ellipse(px,py,20,20);
Variablen müssen nicht zwangsläufig reine Zahlen sein. Beispiel: Farbe
color hintergrund = color(255,100,0); background(hintergrund); color vordergrund = color(random(255),random(255),random(255)); noStroke(); fill(vordergrund); rect(10,10,80,80);↑
Debug: Textausgabe
Variablen ausgeben und anschauen. Mit und ohne Zeilenende.
float px;
px = random(100);
println(px);
println(" ist der Wert von px.");
print(px);
println(" ist der Wert von px.");
↑
Verhalten: Setup und Draw
Zwei Blöcke. Und die Zeilen davor (außerhalb der Blöcke). Zunächst werden Variablen festgelegt (deklariert und eventuell initialisiert).
Im setup werden Einstellungen vorgenommen.
Im draw-Loop wird gezeichnet (oder alles andere gemacht, was sich wiederholt).
float y = 150; void setup() { size(400,300); frameRate(25); background(255); } void draw() { strokeWeight(12); point(200,y); }
Durch das wiederholte Zeichnen wird Bewegung möglich.
float y = 150; void setup() { size(400,300); frameRate(25); background(255); } void draw() { y = random(0,height); strokeWeight(12); point(200,y); }
Das Übermalen des Hintergrunds löscht die Leinwand.
float y = 150; void setup() { size(400,300); frameRate(25); } void draw() { background(255); y = random(0,height); strokeWeight(12); point(200,y); }↑
Interaktion: Maus/Touch
Interaktion entsteht durch den Zugriff auf Nutzereingaben. Am einfachsten durch das Nutzen fertiger Variablen - z.B. mouseX und mouseY.
void setup() { size(400,300); frameRate(25); } void draw() { background(255); strokeWeight(12); point(mouseX,mouseY); }
void setup() { size(400,300); frameRate(25); } void draw() { background(255); strokeWeight(12); point(mouseX,mouseY); strokeWeight(1); line(mouseX,0,mouseX,height); }
Mausposition aus dem letzten Frame: pmouseX, pmouseY
void setup() { size(400,300); frameRate(25); background(255); } void draw() { strokeWeight(2); line(mouseX,mouseY,pmouseX,pmouseY); }
Klicks einfach: mousePressed (dazu die Frage: if).
void setup() { size(400,300); frameRate(25); background(255); } void draw() { strokeWeight(12); if (mousePressed) { point(mouseX,mouseY); } }
Interaktion speichern:
float lastClickX; float lastClickY; void setup() { size(400,300); frameRate(25); background(255); } void draw() { if (mousePressed) { strokeWeight(12); point(mouseX,mouseY); strokeWeight(1); line(mouseX,mouseY,lastClickX,lastClickY); lastClickX = mouseX; lastClickY = mouseY; } }↑
Fallunterscheidungen - Entweder: if...
Fragen stellen
if (Ja/Nein-Frage)
Es folgt eine Sequenz mit Anweisungen. Damit kenntlich ist, dass die Sequenz zur Frage gehört, wird sie in {} eingeschlossen.
if (Ja/Nein-Frage)
{
Anweisung1;
Anweisung2;
Anweisung3;
}
Zum Beispiel
float zahl = random(100);
if (zahl < 50)
{
point(30,35);
line(10,70,80,30);
ellipse(60,65,20,20);
}
↑
...oder: else
Wenn die Frage mit ja beantwortet wird, führe den ersten Block aus, ansonsten den zweiten.
if (Ja/Nein-Frage) { Anweisung1; Anweisung2; Anweisung3; } else { AndereAnweisung1; AndereAnweisung2; AndereAnweisung3; }
Zum Beispiel
float zahl = random(100); if (zahl < 50) { ellipse(60,65,20,20); } else { rect(60,65,20,20); }...oder interaktiv:
void setup() { size(400,300); frameRate(25); background(255); } void draw() { if (mouseX < width/2) { line(mouseX,0,mouseX,mouseY); } else { line(mouseX,height,mouseX,mouseY); } }↑
Mehrere Alternativen: if, else if, else
Wenn die Frage mit ja beantwortet wird, führe den ersten Block aus, ansonsten den zweiten, aber nur, wenn eine weitere Frage mit ja beantwortet wird. Usw.
if (Ja/Nein-Frage) { Anweisung1; Anweisung2; Anweisung3; } else if (neue Frage) { AndereAnweisung1; AndereAnweisung2; AndereAnweisung3; }Zum Beispiel
float zahl = random(100); if (zahl < 30) { ellipse(60,65,20,20); } else if (zahl < 60) { rect(60,65,20,20); } else { line(60,70,60,60); line(55,65,65,65); }↑
Schleifen: Wiederholung
Statt:
size(400, 200); background(255); line(5,5,5,195); line(15,5,15,195); line(25,5,25,195); line(35,5,35,195); line(45,5,45,195); line(55,5,55,195); // usw...
...eine Sequenz, die wiederholt wird:
for (Variable zum Zählen; Frage wann Ende; Art des Zählens)
{
Anweisung1;
Anweisung2;
Anweisung3;
}
size(400, 200);
background(255);
for (int i=0; i < 400; i = i+10)
{
line(5+i,5,5+i,195);
}
↑