Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

start:skript:tut4

Dies ist eine alte Version des Dokuments!




Inhaltsverzeichnis

Processing

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.

Basics

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 Breit und Höhe an den Koordinaten x und y gezeichnet.

Klassen

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.

Falling Balls

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.

Klasse Ball
class Ball {
  float SIZE = 30; // Durchmesser
  float xMax; // Max. x-Koordinate fuer die Generierung mit random()
  float speedMax; // Max. Geschwindigkeit fuer 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 "zufaellig"
    y = 0;
    speed = random(speedMax); // generiere die Geschwindigkeit "zufaellig"
  }
 
  // Zeichnet den Ball
  void draw() {
    ellipse(x, y, SIZE, SIZE);
  }
 
  void fall() {
    y = y + speed;
    if (y>=400) {
      // falls die untere Seite erreicht wurde, "werfe" den Ball neu:
      restart();
    }
  }
 
  // "Wirft" den Ball wieder
  void restart() {
    // eine kleine Pause einbauen, bevor der Ball wieder auf der Zeichenflaeche erscheint:
    y = -200;
    x = random(xMax);
    speed = random(speedMax);
  }
 
  // Loescht den Ball und "wirft" ihn neu, falls am Ball geklickt wurde
  void clicked() {
    if (sqrt(sq(mouseX - x) + sq(mouseY - y)) < SIZE/2) {
      restart();
    }
  }
}
Hauptprogramm falling_balls
Ball ball1 = new Ball(600, 3);// erzeuge 5 "globale" Baelle 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();
  ball1.draw();
  ball2.draw();
  ball3.draw();
  ball4.draw();
  ball5.draw();
  ball1.fall();
  ball2.fall();
  ball3.fall();
  ball4.fall();
  ball5.fall();
}
 
// Wird beim Klicken aufgerufen:
void mouseClicked() {
  ball1.clicked();
  ball2.clicked();
  ball3.clicked();
  ball4.clicked();
  ball5.clicked();
}

Quadrat

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

Klasse Quadrat
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
  }
}
Hauptprogramm Quadrat
void setup() {
  size(600, 400); //Grafikfenstergröße festlegen
}
 
void draw() {
}
 
void mouseClicked() {
  Quadrat quadrat = new Quadrat(mouseX, mouseY); //neues Objekt der Klasse Quadrat erstellen
  quadrat.draw(); //auf die Funktion draw des Objektes zugreifen
}
start/skript/tut4.1542039059.txt.gz · Zuletzt geändert: 2018/11/12 17:10 von luismeixner