Grundlegende Grafikbefehle

Processing stellt eine Reihe von Grafikbefehlen zur Verfügung:

point(x,y) – zeichnet einen Punkt an den Koordinaten x und y
→ Reference
 
line(x1, y1, x2, y2) – zeichnet eine Linie. Hierzu müssen zwei Punkte mit x,y und x2, y2 angegeben werden
→ Reference
 
triangle(x1, y1, x2, y2, x3, y3) – zeichnet ein Dreieck an den drei übergebenen Punkten → Reference
 
rect(x, y, width, height) – zeichnet ein Rechteck ausgehend vom Punkt x,y (linke obere Ecke) mit der Breite width und Höhe height → Reference
 
rectMode() – ändert die Weise, wie Rechtecke gezeichnet werden. CENTER gibt beispielsweise an, dass dass er Mittelpunkt des Rechtecks angegeben wird und nicht linke obere Ecke → Reference
 
ellipse(x, y, width, height) – zeichnet ausgehend von den Koordinaten x,y eine Ellipse mit der Breite width und der Höhe height → Reference
 
ellipseMode() – erfüllt für die Ellipse die gleiche Funktion wie rectMode() für das Rechteck → Reference
 
strokeWeight() – legt die Strichstärke für das Zeichnen von Formen in Pixeln fest → Reference
 

Hierbei muss zunächst verstanden werden wie das Koordinatensystem von Processing funktioniert.

Das kartesische Koordinatensystem

Um Positionen von Linien, Bezierkurvenpunkten, Objekten, Vektoren etc. zu definieren werden Koordinaten verwendet. Der Ursprung liegt dabei links oben. Das heißt also, die Koordinate 0,0 befindet sich links oben und rechts unten entspricht der eingestellten Ausgabefenstergröße. Haben wir also im setup() size(800,800) eingestellt, dann befindet sich die rechte untere Ecke bei 800,800. Beachtenswert ist, dass Koordinaten Nachkommastellen aufweisen können und nicht auf ganze (Pixel)-Werte beschränkt sind.
Die Grafikbefehle weißen unterschiedliche Parameter auf. Das liegt daran, dass man unterschiedliche Werte benötigt um sie zu generieren. Ein Punkt ist die einfachste Form und benötigt lediglich x- und y-Koordinate des Ursprungs. Ein Rechteck benötigt neben x- und y-Koordinate auch noch eine Länge und Breite.

Übungen

Übung: Überkreuzende Linien
Erzeuge ein 600×600 Pixel großes Ausgabefenster und kreiere zwei sich überschneidende Linien.
Verwende unterschiedliche Farben.

Lösung

void setup(){
  size(600, 600);
  background(255);
}

void draw(){
  fill(45, 221, 245);

  
  stroke(255, 14, 81);
  strokeWeight(10);
  line(0, width/2, height, width/2);
  
  stroke(45, 221, 245);
  strokeWeight(10);
  line(height/2, 0, height/2, width);
}

Übung: Unterteile ein Bild in Viertel
Erzeuge ein 800×800 Pixel großes Ausgabefenster und versuche das abgebildete Ausgabefenster nachzubauen. Farben kannst du dabei frei wählen. Versuche absolute Werte zu vermeiden und relative Werte zu verwenden (width, height).

Lösung

void setup(){
  size(600, 600);
  background(255, 14, 81);
}

void draw(){
  fill(45, 221, 245);
  rect(width/2,height/2, width/2, height/2);
  
  stroke(45, 221, 245);
  strokeWeight(1);
  line(0, width/2, height, width/2);
  line(height/2, 0, height/2, width);
  rect(width/2,height/2, width/2, height/2);
}

Übung: Lasse bunte Kreise erscheinen.
Erzeuge dazu ein Ausgabefenster mit 800×800 Pixel und lasse Kreise mit unterschiedlicher Größe und Farbe an beliebigen Positionen entstehen. Nutze dazu die random()-Funktion. Hier kann in der Klammer ein Wert angegeben werden, der die Obergrenze der zufällig gewählten Werte darstellt. Erfahre mehr
→ Reference

Lösung

float r,g,b,a = 0;
float x,y = 0;
float radius = 0;

void setup() {
  size(800, 800);
  background(0);
  noStroke(); 
}

void draw() {
  r = random(255);
  g = random(255);
  b = random(255);
  a = random(255);
  
  x = random(width);
  y = random(height);
  radius = random(40);
   
  fill(r, g, b, a);
  ellipse(x, y, radius, radius);
}