Toolbox Interactiondesign


Parametrisierbares Raster

Aufgabe Parametrisierbares Raster

Transparenz als visueller Parameter

Ann-Cathrin Zogbaum, 02.09.2013 | Generative Gestaltung Goes Analog bei Prof. Dr. Christine Goutrié

Bei der Aufgabe „parametrisierbares Raster“ soll ein Raster so gestaltet werden, dass davon verschiedene Varianten erzeugen werden können, welche durch unterschiedliche Parametern beeinflusst werden. Dabei sollten wir überlegen, aus welchen grafischen Elementen unsere Rasterzellen bestehen und wie die in Beziehung zueinander stehen können.

Meine Anspruch an diese Aufgabe war es, die Rasterzelle so schlicht wie möglich zu halten und durch das Zusammenspiel der einzelnen Zellen ein interessantes Muster zu erzeugen.
Dieses gelingt mir durch Kreise oder Quader, die halbtransparent gefüllt sind und sich durch die Parameter Größenverstellbarkeit und Drehbarkeit immer unterschiedlich überlagern.

Der Weg zur Vielfalt

Die Rasterzelle besteht aus einer einfachen geometrischen Form, zunächst ein Kreis. Diese Form wird in X- und Y-Richtung gerastert und je nach Größe der Form überlagert diese sich und es entstehen unterschiedliche Varianten. Neben der Größe ist die Darstellung der Form ein weiterer Parameter. Zu Beginn arbeitet ich mit einer weißen Kontur auf schwarzem Hintergrund. Das Ergebnis waren Linienmuster, die auf dem ersten Blick ziemlich anprechend waren. Bei genauerer Untersuchung entdeckte ich jedoch, dass die Variationen schnell ausgeschöpft waren. Daher generierte ich weitere Raster, indem die Kreise halbtransparent gefüllt sind. So erhielt ich durch die Überlagerung dieser Flächen unterschiedliche Helligkeitsstufen und sehr interessante und vielfältige Ergebnisse.

Im ersten Schritt konnten die Parameter nur händisch in den Code eingetragen werden. Später integrierte ich passende Slider um die Anzahl, der Kreise, sowie der Durchmesser darüber bestimmen zu können.

Eine weitere geometrische Form, die ich untersucht habe, ist der Quader. Nach dem gleichen Prinzip schrieb ich einen Code, in dem gleich Slider integriert waren. Diese steuerten nicht nur die Anzahl und Größe der Quader, sondern auch die Rotation der Form um den eigenen Mittelpunkt. Das Ergebnis war ein noch größeres Spektrum an Mustern.

Programmcode

Der Code ist relativ simpel aufgebaut, so dass ich ihn auf beide geometrischen Formen anwenden konnte. Dabei ist zu beachten, dass bei der Bennenung der Slider und die zugehörigen Parameter alles übereinstimmt.

Zu Beginn werden die Libary für die Slider importiert und alle Parameter angegeben – der Durchmesser, die Anzahl der Kreise in X- und Y-Richtung und bei dem Quader-Raster der Winkel für die Drehbarkeit.
Danach werden im „void setup“ die Angabe der Bühnengröße und Benennung, sowie Eigenschaften der Slider eingetragen. Im „void draw“ erfolgt die Gestaltung des Hintergundes und der Rasterzelle.

Das Wichtige bei den Sketchen ist der richtige Umgang mit pushMatrix() und popMatrix(). Da das Raster nicht von 0,0 aufgebaut werden sollten, musste ich den Nullpunkt für die for-Schleife durch pushMatrix() + translate() verschieben. Nach dieser Schleife darf man nicht vergessen, mit Hilfe von popMatrix() den Nullpunkt wieder auf 0,0 zurückzusetzen. Da er sonst mit jeder neuen Schleife wieder um das angegebene Maß verschoben wird.
Bei dem Sketch für das Quader-Raster müssen diese Funktion jeweils zweimal verwendet werden, da die Funktion rotate() immer um den Nullpunkt erfolgt.

 

//Kreis-Raster mit Slider


//Import Slider
import controlP5.*;
ControlP5 MyController;

//Variablen für die Slider
int durchmesser=65;
int anzahl_X=1;
int anzahl_Y=1;


void setup() {

  size(490,400);

  //Slider
  MyController = new ControlP5(this);
  MyController.addSlider("durchmesser",10,100,65,25,50,20,100); 
  MyController.addSlider("anzahl_X",1,10,1,25,210,20,50);
  MyController.addSlider("anzahl_Y",1,10,1,25,300,20,50);
}


void draw() {

  background(40);
  
  //Ellipsen Rasterzelle
  pushMatrix();
  translate(140,50);
  for (int i=15; i< anzahl_X*30; i+=30) {
    for (int j=15; j< anzahl_Y*30; j+=30) { 
      fill(255,50);
      noStroke();
      ellipse(i, j, durchmesser, durchmesser);
    }
  }
  popMatrix();
}
//Quader-Raster mit Slider


//Import Slider
import controlP5.*;
ControlP5 MyController;

//Variablen für die Slider
int kantenlaenge=50;
int anzahl_X=1;
int anzahl_Y=1;
int winkel=30;



void setup() {

  size(490,400);

  //Slider
  MyController = new ControlP5(this);
  MyController.addSlider("kantenlaenge",10,100,50,25,50,20,80); 
  MyController.addSlider("anzahl_X",1,5,1,25,170,20,30);
  MyController.addSlider("anzahl_Y",1,5,1,25,230,20,30);
  MyController.addKnob("winkel",0,90,0,25,290,50);
}


void draw() {
 
  background(40);

  pushMatrix();
  translate(155,65);
  for (int i=15; i< anzahl_X*60; i+=60) {
    for (int j=15; j< anzahl_Y*60; j+=60) { 
        pushMatrix();   
        translate(i, j);    
        rotate(radians(winkel));   
        fill(255,50);
        noStroke();
        rect(-(kantenlaenge/2), -(kantenlaenge/2), kantenlaenge, kantenlaenge);
        popMatrix (); 
    }
  }
  popMatrix();
}
02.09.2013 | Ann-Cathrin Zogbaum |