Processing

Während eines Einführungskurses in die Programmierung mit Processing kreierte ich diverse kleine Programme.

Die meisten dieser sogenannte Sketches behandeln Raum, Klang, Farben und Muster.

Aufgabe für die Abschlussaufgabe

Zeitbasierende Muster:
In den letzten zwei Wochen haben wir uns Musterbeobachtungen genauer angeschaut.
Dies sollte eure Inspiration für einen programmierten Sketch sein. Startet mit euren eigenen Beobachtungen und natürlichen Beschreibungen. Denkt über Muster, die ihr kreieren wollt nach. Das Muster kann auf eingegebenen Daten (z.B. ein Bild oder ein Text) basieren, oder aus komplexeren Formen erstellt sein. Verwandelt dieses Muster in ein zeitbasiertes Muster – eine Animation. Denkt über die verschiedenen Verhaltensweisen eurer Elemente nach. Benutzt eine oder mehrere Funktionen, um das Programm aufzubauen.

Ich versuchte, einige davon via Processing.js im Browser laufen zu lassen. Grundsätzlich funktioniert das gut genug für eine schnelle Demonstration, aber die generelle Performance lässt zu wünschen übrig und es kommt hier und da zu einigen Abweichungen.
Einige der Quellcodes finden sich unter den Beschreibungen der Sketches.

Natürlich lassen sich alle Programme als kompilierte Pakete herunterladen; sie beinhalten ausführbare Dateien und sollten auf den meisten Systemen funktionieren.

 

Soundvirus

Das Soundvirus ist eine dreidimensionale Klangvisualisierung. Es besteht aus vier Ebenen von Zweigen, die aus einem gemeinsamen Ursprung entspringen. Jeder Zweig besitzt mehrere Unterzweige, deren Anzahl in den höheren Ebenen zunimmt. Das komplette System bewegt sich mit der Zeit, während die insgesamt 360 Zweige 90 zufällig generierte Variablen basierend auf ihrer Feldposition abrufen, um ihre Bewegung in drei Dimensionen zu berechnen. Das bedeutet, das die meisten Äste drei Geschwister besitzen, die die gleiche Bewegung teilen, was eine Mischung aus Zufallsarrangement und unterbewusstem Muster zur Folge hat. Die Geschwindigkeit der Evolution des Systems, sowie die Farben basieren auf dem Stereopegel der Tonspur.

Soundvirus

Für die soundvirus_mic-Version wird der Mikrofoneingang verwendet. Die Geräuschsensibilität lässt sich durch das ändern der Variable "volumeadjust" einstellen. Eine kleinere Nummer erhöht die Sensibilität.
Der soundvirus-Sketch benutzt die mitgelieferte Audiodatei zum Auslesen des Pegels.

Soundvirus herunterladen Soundvirus_mic herunterladen

 

Dimension Clock

Die Dimension Clock ist ein Versuch, die Zeit dreidimensional darzustellen. Stunden, Minuten und Sekunden sind als Linien dargestellt, die in Kreisen auf drei verschiedenen Ebenen im Raum angeordnet sind. Mit dem Fortschritt der Zeit ändert sich ihre Anzahl, sowie Länge. Die digitale Zeitanzeige ist aus praktischen Gründen im Ursprung zu finden. Durch das Bewegen der Maus lässt sich der Blickwinkel verändern; ein Klicken vergrößert die Uhr. Nach ein paar Sekunden ohne Eingabe startet ein 'Bildschirmschoner-Modus', bei dem die Kamera automatisch herumschwebt.

Dimensionclock

Die Processing.js-Version stellt in einigen Browsern leider die falsche Zeit dar.

Starte Dimension Clock mit processing.js
Code: Dimension Clock
PFont font;
float timecount = 0;
float zoom=(200.0);
int mousemovefalse = 0;
int mousetimer = 0;
float mouseTestX = 0;
float mouseTestY = 0;

void setup()
{
  size(800, 600, P3D);
  frameRate(30);
  background(255);
  font = createFont("Helvetica", 24);
}
void draw()
{ 
  //Screensaver-Modus
  if (mouseX==mouseTestX&&mouseY==mouseTestY) {
    mousetimer+=1;
  } else {
    mousetimer=0;
    mousemovefalse=0;
  }
  if (mousetimer==120) {
    timecount=0;
  }
  if (mousetimer>=120) {
    mousemovefalse=100;
  }
  timecount+=1;

  smooth();
  background(255);
  camera(mouseX+mousemovefalse*(sin(timecount/100)),
    mouseY+mousemovefalse*(sin((timecount/100)*0.7)),
    zoom, width/2.0, height/2.0, zoom-200, 0, 1, 0);

  //Rasteranpassung für Darstellung
  translate(width/2, height/2, -100);

  //Boden
  rotateX(-PI/2);
  noStroke();
  fill(240);
  rectMode(CENTER);
  translate(0, 0, 250);
  rect(0, 0, 1000, 1000);
  translate(0, 0, -250);
  rotateX(PI/2);  

  //Zeit als Integers für Rechnung und Strings für Textdarstellung
  String s = str(second());
  int sec = second();
  String m = str(minute());
  int minu = minute();
  String h = str(hour());
  int hou = hour();

  //Nullen für einziffrige Zahlen
  if (sec<10) {
    s = '0'+str(sec);
  }
  if (minu<10) {
    m = '0'+str(minu);
  }
  if (hou<10) {
    h = '0'+str(hou);
  }

  //Text
  fill(0);
  textAlign(CENTER, CENTER);
  textFont(font);
  text(h+":"+m+":"+s, 0, 0);

  //Kreisförmige Anzeige für Sekunden
  rotateX(PI/3.0);
  for (int linesecond=0; linesecond<sec; linesecond++)
  {
    strokeWeight(4);
    stroke(0, 220);
    float winkels = radians(linesecond);
    line(cos(winkels*6)*60,
        sin(winkels*6)*60,
        cos(winkels*6)*(200-2*sec),
        sin(winkels*6)*(200-2*sec));
  }
  rotateX(PI/-3.0);
  //Koordinatensystem wird zurückgedreht

  //... Minuten
  rotateY(PI/-4.0); 
  for (int lineminute=0; lineminute<minu; lineminute++)
  {
    strokeWeight(4);
    stroke(255, 0, 0, 220);
    float winkelm = radians(lineminute);
    line(-cos(winkelm*6)*60,
        -sin(winkelm*6)*60,
        -cos(winkelm*6)*(200-2*minu),
        -sin(winkelm*6)*(200-2*minu));
  }
  rotateY(PI/2.0);

  //... Stunden
  for (int linehour=0; linehour<hou; linehour++)
  {
    strokeWeight(4);
    stroke(0, 255, 0, 220);
    float winkelh = radians(linehour);
    line(cos(winkelh*15)*60,
        sin(winkelh*15)*60,
        cos(winkelh*15)*(200-5*hou),
        sin(winkelh*15)*(200-5*hou));
  }
  mouseTestX = mouseX;
  mouseTestY = mouseY;
}

//Zoom per Mausklick
void mousePressed() {
  zoom-=120;
}
void mouseReleased() {
  zoom+=120;
}
Dimension Clock herunterladen

 

Color Pattern

Dieser Sketch visualisiert Sinuswellen auf verschiedene Weisen, basierend auf Zeit. Zwei Sinuswellen werden kombiniert und erzeigen ein sich bewegendes Muster, indem sie Vertex-Formen beeinflussen. Die Farben dieser Formen werden ebenfalls durch zwei Sinuswellen mit unterschiedlichen Frequenzen verändert. Letztendlich erzeugt dieses Programm einen Effekt, der sich mit einer optischen Täuschung vergleichen lässt – rein auf Wellen basierend.

Colorpattern

Es kann durchaus etwas langsam sein (abhängig von Deinem System), aber es funktioniert:

Starte Color Pattern mit processing.js
Code: Color Pattern
int col = 0;
int patternsize = 20;
void setup()
{
  size(800,600);
  background(255);
  frameRate(30);
}

void draw()
{
  background(255);
  smooth();
  col++;
  for(int ex = 0; ex <= width; ex=ex+patternsize)
  {
    for(int yp = 0; yp <= height; yp=yp+patternsize)
    {
      float movex = ex;
      float movey = yp;
      noStroke(); 
      fill(((sin(((movex/10)+col)/12))*100)+150,(sin(((movey/12)+col)/12)*100)+150,100);
      beginShape();
      float wob=col;
      vertex( 2+movex,  2+movey);
      vertex( 7+movex, (3*sin((20*wob+movey-movex)/100))+6+movey);
      vertex(13+movex, (3*sin((20*wob+movey-movex)/100))+6+movey);
      vertex(18+movex,  2+movey);
      vertex(18+movex, 18+movey);
      vertex(13+movex, (-3*sin((20*wob+movey+movex)/100))+14+movey);
      vertex( 7+movex, (-3*sin((20*wob+movey+movex)/100))+14+movey);
      vertex( 2+movex, 18+movey);
      endShape(CLOSE);
    }
  }
}
Color Pattern herunterladen

 

Spectralmandala

Ein weiterer Sketch basierend auf Sinuswellen. Dieses Programm erzeugt neun kreisförmig angeordnete Ellipsen, die herumschweben und ihre Farbe ändern. Die Verformungen und Farbverläufe provozieren eine dreidimensionale, fast halluzinativ wirkende Wahrnehmung.

Spectralmandala

Dieser Sketch leidet mit Processing.js unter mysteriösen Unterbrechungen. Ansonsten funktioniert aber alles.

Starte Spectralmandala mit processing.js
Code: Spectralmandala
float rad=radians(35);
float counter=0;

void setup()
{
  size(800, 600);
  frameRate(60);
  background(255);
}

void draw()
{
  counter=counter+0.01;
  pushMatrix();
  translate(width/2+sin(counter)*100,
    height/2+sin(counter+PI/2)*100);
  for (int i=0; i<10; i++)
  {
    noStroke();
    rotate(sin(counter));
    fill(122+122*sin(i-counter*counter),
        122+122*sin(i+counter),
        122+122*sin(i*i+counter), 30);
    rectMode(CENTER);
    ellipse(60, 60, 100*cos(counter*0.4),
        100*tan(counter*0.6));
  }
  popMatrix();
}
Spectralmandala herunterladen

 

Volumeter

Der Volumeter benutzt den Mikrofoneingang, um Geschwindigkeit, Größe und Farbe eines sich bewegenden Kreises zu bestimmen. Wenn die Lautstärke einen bestimmten Grenzwerde überschreitet, färbt sich die komplette Kreisfläche rot und verdeutlicht, das der Ton 'zu laut' ist.

Volumeter

Code: Volumeter
import ddf.minim.*;
Minim minim;
AudioInput input;
float xmove=width/2;
float ymove=height/2;
int xaccel=1;
int yaccel=1;

float laut = 0;

void setup()
{
  size(800, 600);
  background(0);
  minim = new Minim (this);
  input = minim.getLineIn (Minim.STEREO, 512);
  smooth();
}

void draw()
{
  fill(0, 20);
  noStroke();
  rect(0, 0, width, height);
  laut = input.mix.level()*4000;
  noFill();
  strokeWeight(2);
  if (laut>=600) {
    fill(255, 0, 0, 235);
  }
  xmove=xmove+laut*xaccel/50;
  ymove=ymove+laut*yaccel/50;
  if (xmove<=0) { xaccel=1; } if (xmove>=width) {
    xaccel=-1;
  }
  if (ymove<=0) { yaccel=1; } if (ymove>=height) {
    yaccel=-1;
  } else {
    stroke(195-laut/100, 195-laut/100, 255, 235);
  }
  ellipse(xmove, ymove, laut, laut);
}
Volumeter herunterladen