Form I
Erste Hilfe, Processing PDE, Befehle und Sequenzen, Kommentare, Canvas und Koordinaten, Grundformen, Farbe/Transparenz/Strichstärke, Komplexe Formen: shape, Kurven, Output: Renderer, Bilder, PDF
Erste Hilfe
› Processing Tutorials
› Processing Referenz (Tipp: Ausdruck markieren und [STRG]+[SHIFT]+T oder [CMD]+[SHIFT]+T)
› Processing Forum
Processing PDE
Siehe auch: Tutorials: Getting started, Reference: Environment
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);↑
Kommentare
...werden von Processing ignoriert und sind nur für Menschen interessant.
// kurze Kommentare
/* lange ... Kommentare */↑
Canvas und Koordinaten
Größe variabel (in Pixeln). Erst die Breite (x oder auch: width), dann die Höhe (y, oder auch: height). Siehe auch: Tutorials: Drawing
size(400,300);
Z.B so groß wie der Bildschirm.
size(displayWidth,displayHeight);
Positionen: Von oben links (0,0) nach unten rechts (width, height).
size(200,200); line(10,10,190,190);
bzw.
line(10,10,width-10,height-10);↑
Grundformen
Punkt, Linie, Rechteck, Ellipse. Definiert über Startpunkt (x,y) und dann Endpunkt (Linie) oder Länge und Breite (Rechteck, Ellipse).
size(400,300); point(50,150); line(110,10,90,height-10); rect(150,50,50,200); ellipse(300,150,100,100);
Dreieck und Viereck: triangle und quad.
size(400,300); triangle(50,50,150,250,150,50); quad(250,50,350,50,350,250,250,250);
Kreisbögen: arc, definiert wie Ellipse plus zwei Winkel (start/stop). Achtung: Winkel im Bogenmaß (von 0 bis zwei PI), umwandeln von Gradzahlen (0 bis 360) mit radians()
arc(width/2,height/2,40,40,0,radians(45)); arc(width/2,height/2,60,60,radians(45),radians(120)); arc(width/2,height/2,90,90,radians(120),radians(340));
(Siehe auch: schließen des Kreisbogens mit OPEN, CHORD oder PIE in arc.)
Modes legen fest, von wo aus die Form gezeichnet wird.
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);↑
Farbe, Transparenz, Strichstärke
Farbe: R,G,B (später auch andere Farbmodelle), jeweils 0-255 (für Graustufen 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);
strokeWeight für die Strichstärke...
size(200,200); background(255); line(10,20,width-10,30); strokeWeight(2); line(10,60,width-10,70); strokeWeight(4); line(10,110,width-10,120); strokeWeight(10); line(10,160,width-10,170);
...strokeCap für die Strichenden...
size(200,200); background(255); strokeWeight(12); strokeCap(ROUND); line(10,60,width-10,70); strokeCap(SQUARE); line(10,110,width-10,120); strokeCap(PROJECT); line(10,160,width-10,170);
...und strokeJoin für deren Verbindung.
size(200,200); background(255); strokeWeight(12); strokeJoin(BEVEL); rect(20,20,width-40,height-40);
strokeJoin(MITER);
strokeJoin(ROUND);↑
Komplexe Formen: shape
Shapes: definiert über Punkte (vertex), von beginShape zu endShape...
size(400,400); background(128); fill(0); stroke(255); strokeWeight(8); beginShape(); vertex(40, 40); vertex(width/2, 180); vertex(360, 160); vertex(120, 360); endShape();
...endShape(CLOSE) macht die Form zu.
size(400,400); background(128); fill(0); stroke(255); strokeWeight(8); beginShape(); vertex(40, 40); vertex(width/2, 180); vertex(360, 160); vertex(120, 360); endShape(CLOSE);
beginShape legt die Art der Form fest:
beginShape(POINTS);
beginShape(LINES);
beginShape(TRIANGLES);
beginShape(TRIANGLE_STRIP);
beginShape(TRIANGLE_FAN);
beginShape(QUADS);
beginShape(QUAD_STRIP);↑
Kurven
Runde Formen: Bögen, Kurven, etc.
curve (Spline): definiert über zwei Kontrollpunkte (erster und letzter), Start und Ende (in der Mitte).
background(255); strokeWeight(4); stroke(0); curve(5,5,20,50,80,50,95,95);Die Krümmung hängt von Start, Ende und Kontrollpunkten ab.
background(255); strokeWeight(4); stroke(0); curve(5,5,20,50,80,50,95,95); // Kontrollpunkte strokeWeight(8); stroke(255,0,0); point(5,5); point(95,95); // Start und Ende stroke(0,0,255,128); point(20,50); point(80,50);
bezier (Bezier-Kurve): andere Reihenfolge der Punktdefinition (Startpunkt, Kontrollpunkt, Endpunkt, Kontrollpunkt), andere Form.
background(255); strokeWeight(4); stroke(0); bezier(20,50,5,5,95,95,80,50);
Komplexere Kurven wieder über Shape:
background(255); strokeWeight(4); stroke(0); beginShape(); curveVertex(5,5); curveVertex(10,5); curveVertex(20,50); curveVertex(80,50); curveVertex(95,95); curveVertex(85,95); endShape();
bzw.
background(255); strokeWeight(4); stroke(0); beginShape(); vertex(10,5); bezierVertex(5,5,50,0,20,50); bezierVertex(50,0,50,100,80,50); bezierVertex(50,100,95,95,85,95); endShape();↑
Output: Renderer, Bilder, PDF
size() legt den Renderer fest. Z.B. 3D (mehr zu translate/rotate/etc. später):
size(150, 200, P3D); background(153); line(0, 0, 0, width, height, -100); line(width, 0, 0, width, height, -100); line(0, height, 0, width, height, -100); translate(width/2, height/2); rotateX(PI/6); rotateY(PI/6); box(35);
Oder 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);
Bilddateien abspeichern über saveFrame:
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); saveFrame();↑