Kategorie: Tutorials

Processing ist eine Open-Source-Programmierumgebung, die speziell dafür entwickelt wurde, Programmierung für Künstler:innen, Designer:innen, Kreative und alle Interessierten zugänglich zu machen.

Ursprünglich wurde es 2001 von Casey Reas und Ben Fry an der MIT Media Lab entwickelt und ist heute ein beliebtes Werkzeug für kreative und visuelle Projekte.

Hier gibt es jetzt einen kleinen Programmiereinstig in diese nice Software.

Starte mit dem Download und der Installation:

Erledigt? Dann kann es ja los gehen 🙂

---

Die wichtigsten Teile der Processing-Umgebung (IDE)

1. Der Editor:
   • Hauptbereich, in dem du deinen Code schreibst.
   • Code-Highlighting erleichtert das Lesen und Verstehen deines Programms.
   • Einfacher „Play“-Button, um dein Programm direkt auszuführen.
2. Die Toolbar:
   • Oben in der IDE findest du Buttons für häufige Aktionen:
     • Play (▶): Führt dein Programm aus.
     • Stop (■): Stoppt die Programmausführung.
     • Open/Save: Öffnet oder speichert Projekte.
3. Das Ausgabefenster:
   • Hier wird dein Programm als interaktive oder grafische Anwendung angezeigt.
   • Standardmäßig ist das Fenster eine weiße Leinwand, die du mit deinen Ideen füllst.
4. Die Konsole:
   • Ein Bereich unterhalb des Editors, der Textausgaben zeigt.
   • Wird verwendet, um Debugging-Informationen oder Fehlermeldungen anzuzeigen.
5. Sketches:
   • Processing-Projekte werden „Sketches“ genannt. Jeder Sketch ist ein einzelnes Programm und wird in einem eigenen Ordner gespeichert.

---

„Hello, Canvas!“ – Deine erste Zeichnung

Willkommen in der Welt der kreativen Programmierung

Lerne die Grundlagen von Processing, indem du einfache Formen zeichnest und Farben hinzufügst.

Neue Befehle

• size(width, height): Definiert die Größe des Zeichenfensters.
• background(color): Legt die Hintergrundfarbe fest.
• fill(color): Setzt die Füllfarbe für Formen.
• ellipse(x, y, w, h): Zeichnet einen Kreis oder eine Ellipse.
• rect(x, y, w, h): Zeichnet ein Rechteck.

Code

void setup() {
  size(400, 400); // Fenstergröße
  background(255); // Weißer Hintergrund
}

void draw() {
  fill(255, 0, 0); // Rote Füllfarbe
  ellipse(200, 200, 100, 100); // Kreis in der Mitte
  fill(0, 255, 0); // Grüne Füllfarbe
  rect(150, 150, 100, 50); // Rechteck über dem Kreis
}

„Lass es bewegen!“ – Interaktive Animation

Neue Befehle

• mouseX und mouseY: Speichern die aktuelle Position der Maus.
• draw(): Wiederholt kontinuierlich den Zeichenprozess (Animationsloop).

Code

void setup() {
  size(400, 400); // Fenstergröße
  background(255); // Weißer Hintergrund
}

void draw() {
  fill(255, 0, 0); // Rote Füllfarbe
  ellipse(200, 200, 100, 100); // Kreis in der Mitte
  fill(0, 0, 255); // Blaue Füllfarbe
  rect(150, 150, 100, 50); // Rechteck über dem Kreis
}

„Farbexplosion“ – Dynamische Farben

Neue Befehle

• random(max): Gibt eine Zufallszahl zwischen 0 und max zurück.
• mousePressed(): Wird aufgerufen, wenn die Maus gedrückt wird.

Code

void setup() {
  size(400, 400);
}

void draw() {
  background(0);
}

void mousePressed() {
  fill(random(255), random(255), random(255));
  ellipse(mouseX, mouseY, 100, 100); // Zufällige Farben bei Klick
}

„Das Tanzende Netz“ – Linien und Muster

Neue Befehle

• stroke(color): Legt die Farbe für Linien und Umrandungen fest.
• line(x1, y1, x2, y2): Zeichnet eine Linie von Punkt (x1, y1) zu Punkt (x2, y2).
• for: Eine Schleife, um wiederholte Aktionen auszuführen.

Code

void setup() {
  size(400, 400);
}

void draw() {
  background(20);
  stroke(255);
  for (int i = 0; i < width; i += 20) {
    line(i, 0, mouseX, mouseY); // Linien laufen auf Mauszeiger zu
  }
}

„Pixel-Art“ – Dein kreatives Raster

Neue Befehle

• Verschachtelte for-Schleifen: Zwei Schleifen in Kombination, um ein Raster zu erstellen.

Code

void setup() {
  size(400, 400);
}

void draw() {
  for (int x = 0; x < width; x += 20) {
    for (int y = 0; y < height; y += 20) {
      fill(random(255), random(255), random(255));
      rect(x, y, 20, 20); // Farbige Quadrate
    }
  }
}

„Partikel-Tanz“ – Simulationen verstehen

Neue Befehle und Konzepte

• Klassen: Eine Struktur, um Objekte wie Partikel zu erstellen.
• Arrays: Speichern mehrere Objekte in einer Liste.
• random(min, max): Gibt eine Zufallszahl im Bereich von min bis max zurück.

Code

Particle[] particles = new Particle[100];

void setup() {
  size(400, 400);
  for (int i = 0; i < particles.length; i++) {
    particles[i] = new Particle(random(width), random(height));
  }
}

void draw() {
  background(0);
  for (Particle p : particles) {
    p.update();
    p.display();
  }
}

class Particle {
  float x, y, vx, vy;
  Particle(float x, float y) {
    this.x = x;
    this.y = y;
    vx = random(-2, 2);
    vy = random(-2, 2);
  }

  void update() {
    x += vx;
    y += vy;
    if (x < 0 || x > width) vx *= -1;
    if (y < 0 || y > height) vy *= -1;
  }

  void display() {
    fill(255);
    ellipse(x, y, 5, 5);
  }
}

„Kaleidoskop-Magie“ – Symmetrie und Spiegelung

Neue Befehle

• translate(x, y): Verschiebt den Ursprung des Koordinatensystems.
• rotate(angle): Rotiert die Zeichnung um einen Winkel.
• TWO_PI: Eine Konstante für 360° in Radiant.

Code

void setup() {
  size(400, 400);
  background(0);
}

void draw() {
  translate(width / 2, height / 2);
  for (int i = 0; i < 6; i++) {
    rotate(TWO_PI / 6);
    ellipse(mouseX - width / 2, mouseY - height / 2, 20, 20);
  }
}

„Soundvisualisierung“ – Musik trifft auf Kunst

Neue Befehle und Bibliotheken

• import processing.sound.*: Importiert die Sound-Bibliothek.
• SoundFile: Lädt und spielt Sounddateien ab.
• FFT: Analysiert Frequenzen eines Audiosignals.

Code

import processing.sound.*;

SoundFile file;
float[] spectrum = new float[512];
FFT fft;

void setup() {
  size(400, 400);
  file = new SoundFile(this, "dein_sound.mp3");
  file.loop();
  fft = new FFT(this, spectrum.length);
  fft.input(file);
}

void draw() {
  background(0);
  fft.analyze(spectrum);

  for (int i = 0; i < spectrum.length; i++) {
    stroke(255);
    line(i, height, i, height - spectrum[i] * 100);
  }
}