Projektlabor Robotik MINTgrün

Processing ist eine Programmierumgebung, in der mit der Programmiersprache Processing sehr leicht graphische Ausgaben realisiert werden können. Die Programmiersprache Processing ähnelt sehr stark Java. Processing kann zum Beispiel genutzt werden um am Computer ein Interface zu erstellen, mit dem man dem Arduino Befehle übermitteln kann oder um Kamerabilder zu verarbeiten.

void setup(){
  size(400, 400); //Größe des Grafikfensters
  background(255); //Farbe des Hintergrundes
}
 
void draw(){
  for (int i = 0; i < 400; i++) { //überprüfen ob Rand des Fensters erreicht wurde
    point(i, i);// Zeichnen eines Punktes
  }
  rect(100, 100, 50, 50); //Quadrat
  ellipse(200, 200, 50, 50); //Kreis
}

Die setup-Funktion wird, wie bei Arduino, nur einmal am Anfang des Programms ausgeführt während die draw-Funktion unendlich oft ausgeführt wird. Die size-Funktion bestimmt die Größe des Grafikfensters in Pixeln, wird sie weg gelassen, hat das Fenster standardmäßig eine Größe von 100×100 Pixeln. Mit der background-Funktion wird die Farbe des Hintergrunds bestimmt, wobei zum Beispiel 255 der RGB-Code für Weiß ist. Die Funktion point(x,y) zeichnet einen Punkt bei den Koordinaten x und y, Mit den Funktionen rect(x, y, Breite, Höhe) und Ellipse(x, y, Breite, Höhe) werden Rechtecke bzw. Ellipsen mit einer gewissen Breite und Höhe an den Koordinaten x und y gezeichnet.

Für eine detaillierte Erklärung von Klassen besucht bitte den Artikel zur Vorlesung. Im Folgenden befinden sich die beiden Beispiele zu Klassen aus dem Tutorium.

In dem Spiel „falling Balls“ fallen Bälle vom oberen Bildschirm Rand und man kann diese durch Anklicken „abschießen“. Das Programm besteht aus der Klasse und dem Hauptprogramm. Die Funktion mouseClicked ist Teil von Processing, also schon vordefiniert, und wird aufgerufen, nachdem die linke Maustaste gedrückt und wieder losgelassen wurde. Die beiden Variablen mouseX und mouseY sind ebenfalls vordefiniert und geben immer die Aktuelle x- bzw. y-Koordinate der Maus wieder.

class Ball {
  float SIZE = 30; //Durchmesser
  float xMax; //Max. x-Koordinate für die Generierung mit random()
  float speedMax; //Max. Geschwindigkeit für die Generierung mit random()
  float x; //aktuelle x-Koordinate
  float y; //aktuelle y-Koordinate
  float speed; //Geschwindigkeit
 
  Ball(float xMax, int speedMax) {
    this.xMax = xMax;
    this.speedMax = speedMax;
    x = random(xMax); //generiere die Position "zufällig"(Zufallszahl von 0 bis xMax)
    y = 0;
    speed = random(speedMax); //generiere die Geschwindigkeit "zufällig"
  }
 
  //Zeichnet den Ball:
  void draw() {
    ellipse(x, y, SIZE, SIZE);
  }
 
  void fall() {
    y = y + speed; //y-Koordinate in jedem Durchlauf um die Konstante speed erhöhen -> konstante Bewegung
    if (y>=400) {
      //falls die untere Seite erreicht wurde, "werfe" den Ball neu:
      restart();
    }
  }
 
  //"Wirft" den Ball wieder:
  void restart() {
    y = -200; //eine kleine Pause einbauen, bevor der Ball wieder auf der Zeichenfläche erscheint
    x = random(xMax); //neue x-Koordinate zuweisen
    speed = random(speedMax); //neue Geschwindigkeit zuweisen
  }
 
  //Löscht den Ball und "wirft" ihn neu, falls Ball angeklickt wurde
  void clicked() {
    if (sqrt(sq(mouseX - x) + sq(mouseY - y)) < SIZE/2) { //überprüfen ob Länge des Verbindungsvektors zwischen Mauszeiger und Kugelmittelpunkt kleiner als der Radius der Kugel ist(Vektorgeometrie)
      restart();
    }
  }
}

Ball ball1 = new Ball(600, 3);//erzeuge 5 "globale" Bälle mit random-Position und -geschwindigkeit
Ball ball2 = new Ball(600, 3);
Ball ball3 = new Ball(600, 3);
Ball ball4 = new Ball(600, 3);
Ball ball5 = new Ball(600, 3);
 
void setup() {
  size(600, 400);
}
 
void draw() {
  clear(); //Löschen des Grafikfensters bei jedem Durchgang um eine Bewegung der Bälle zu erzeugen
  ball1.draw(); //Zeichnen des Balls
  ball2.draw();
  ball3.draw();
  ball4.draw();
  ball5.draw();
  ball1.fall();
  ball2.fall();
  ball3.fall();
  ball4.fall();
  ball5.fall();
}
 
//Wird beim Klicken aufgerufen:
void mouseClicked() { //wird aufgerufen nachdem die linke Maustaste gedrückt und wieder losgelassen wurde
  ball1.clicked(); //Aufrufen der clicked-Funktion der Objekte
  ball2.clicked();
  ball3.clicked();
  ball4.clicked();
  ball5.clicked();
}

Mit dem Programm werden bei Klick auf das Grafikfenster Quadrate mit zufälliger Größe bei den Koordinaten der Maus gezeichnet.

class Quadrat {
  float size; //Größe
  float x; //aktuelle x-Koordinate
  float y; //aktuelle y-Koordinate
 
  Quadrat (float x, float y) {
    this.x = x; //x-Koordinate zuweisen
    this.y = y; //y-Koordinate zuweisen
    this.size = random(100); //zufällige Größe zuweisen
  }
 
  void draw() {
    rect(x,y,size,size); //Quadrat zeichnen
  }
}

void setup() {
  size(600, 400); //Grafikfenstergröße festlegen
}
 
void draw() { //draw() ist zwar leer muss aber stehen bleiben, da das Programm sonst nach einmaligem Durchführen der Setup-Funktion nicht weiter laufen würde
}
 
void mouseClicked() { //wird aufgerufen nachdem die linke Maustaste gedrückt und wieder losgelassen wurde
  Quadrat quadrat = new Quadrat(mouseX, mouseY); //neues Objekt der Klasse Quadrat erstellen
  quadrat.draw(); //auf die Funktion draw des Objektes zugreifen
}