Einstieg in die Programmierung mit Processing

Processing Logo

Processing Logo

In den letzten Jahren habe ich mich intensiv mit der visuellen Programmierumgebung Processing beschäftigt. Gestandene Programmierer und Informatiker werden die Nase rümpfen, doch meiner Meinung nach, bietet Processing, basierend auf Java, den idealen Einstieg in die Programmierung – besonders für die Gilde der Designer. Es lassen sich Anwendungen für verschiedene Betriebssysteme und Plattformen entwickeln:

  • Windows / Linux / OS
  • Andorid
  • JavaScript

Daraus bieten sich eine Vielzahl an Anwendungsmöglichkeiten. Wie zum Beispiel im Header dieser Seite. Mit Hilfe des kleinen, WordPress Plugins Processing.js lassen sich Sketches auch sehr leicht in einen Post einfügen. Mit Hilfe des canvas-Elements (HTML5) lässt sich ein Processing-Sketch leicht in eine HTML-Seite einbinden. Mit „Sketch“ (engl. Entwurf, Konzept, Skizze) wird der Code einer mit Processing erstellten Anwendung bezeichnet.

Hier ein kleines Beispiel, ähnlich dem Sketch im Header der Seite:

Your browser does not support the HTML5 canvas tag.

Processing Code

// Variablen
float x, y, targetX, targetY, easing;
int d;
// setup() - Wird einmalig zu Beginn ausgeführt
void setup() {
  // Größe des Processing-Fensters (width, height)
  size(1500, 150);
  // Startwerte der Variablen
  x = 10, y = 10, targetX = 75, targetY = 75, mouseX = 75, mouseY = 75, d = 20, easing = 0.05; 
}
// draw() - Wird in Endlosschleife (einmal pro Frame) ausgeführt
void draw() {
  // Zeichne Hintergrund
  background(242);
  // Falls Maustaste gedrückt, dann übernehme Koordinaten des Mauszeigers
  if (mousePressed) {
    targetX = mouseX;
    targetY = mouseY;
  }
  // Berechne Differenzwerte für x und y
  float dx = targetX - x;
  float dy = targetY - y;
  // Berechne neue x- und y_Werte
  if (abs(dx) > 0.1) x += dx * easing;
  if (abs(dy) > 0.1) y += dy * easing;
  // Zeichne großen Kreis an x, y mit Durchmesser d
  noStroke();
  if (mousePressed != true) fill(28);
  else fill(175, 25, 25);
  ellipse(x, y, d, d);
  // Zeichne Linie zwischen Kreis und Mausposition
  stroke(153);
  line(x, y, mouseX, mouseY);
  // Zeichne kleinen Kreis an Mausposition
  stroke(255);
  fill(175, 25, 25);
  ellipse(mouseX, mouseY, 10, 10);
}

Aktualisiert am 24.02.2014.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.