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