Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

skript:grafikmitprocessing

Dies ist eine alte Version des Dokuments!




Processing

Processing ist eine Programmierumgebung für Java, die für bildende KünstlerInnen entwickelt wurde. Sie glänzt insbesondere mit einer übersichtlichen Oberfläche, einfachen Funktionen zur Grafikausgabe und einem Haufen per Mausklick installierbarer Libraries, die alle möglichen interessanten Funktionen zur Verfügung stellen.

Damit ist Processing ideal geeignet, um ein graphisches Interface zu eurem Roboter zu bauen.

Installation

  • Ladet euch hier https://processing.org/download/ die Software herunter. Nehmt am besten die 32bit-Version, egal was für ein Betriebsystem oder Computer ihr habt. (Die macht weniger Probleme mit externen Libraries)
  • entpackt das .zip-Datei an einen Ort, wo ihr sie haben wollt
  • Startet Processing mit einem Doppelclick auf die Entpackte „.exe“ Datei.

Erste Schritte: Ein wandernder Punkt

Das, was in Arduino setup und loop sind, heisst in Processing setup und draw

So zeichnet z.B. das folgende Programm einen Kreis um den Koordinatenursprung:

Kreiszeichnen.pde
float angle=0;
float diameter=50;
void setup(){
 
}
 
void draw(){
  point(cos(angle)*diameter,sin(angle)*diameter);
  angle+=0.01;
}

Damit die Bewegung kontinuierlich angezeigt wird, muss in jedem „draw“ Aufruf ein Punkt gezeichnet werden (also keine Schleife).

Erste Schritte: Eine diagonale Linie

Dieses Programm zeichnet eine Linie, die diagonal einmal quer durch das Bild geht:

Liniezeichnen.pde
void setup(){
  size(400, 400);
  background(255);
}
 
void draw(){
  for (int i = 0; i < 400; i++) {
    point(i, i);
  }
}

Eine Sinuskurve

Jetzt wollen wir eine aus Punkten zusammengesetzte Sinuskurve zeichnen, die das Fenster genau ausfüllt. Auf der x-Achse sollen die Winkelwerte zwischen 0 und 2π angezeigt werden. Auf der y-Achse die Sinuswerte zwischen -1 und 1. Die x-Koordinate wird in die Zahl zwischen 0 und 2π umgerechnet:

float angle = xCoordinate * TWO_PI / windowWidth;
Sinuskurvezeichnen.pde
void setup() {
  size(600, 400);
  background(255);
}
 
void draw() {
  for (int i = 0; i < 600; i++) {
    float angle = i * TWO_PI / 600;
    float xValue = i;
    float yValue = sin(angle) * 200 + 200; 
    // der Koordinatenursprung wird um die halbe Hoehe verschoben, 
    // damit der Wertebereich <0 auch sichtbar ist. 
    point(xValue, yValue);
  }
}
skript/grafikmitprocessing.1510084294.txt.gz · Zuletzt geändert: 2017/11/07 20:51 von d.golovko