Toolbox Interactiondesign


Parametrisierbares Raster

Bezierkurven

Arina Fix, Generative Gestaltung Goes Analog bei Prof. Dr. Christine Goutrié

In diesem Programm basierend auf einer einfachen BezierKurve können  die vier Parameter Krümmung und Anzahl der Bezierkurven (wobei die Anzahl die Krümmung direkt beeinflusst), sowie die Rasterung in horizontaler und vertikaler Richtung Einfluss nehmen. Faszinierend zu sehen ist die große Veränderung des Rasters durch minimale Veränderung eines oder mehrerer Parameter. Das Ineinandergreifen der Bezierkurven lässt zusätzlich neue Muster entstehen.

Aufbau Raster

Durch die Komplexität, die ein sich wiederholendes Muster annehmen kann ist die Grundform, aus dem heraus sich alles aufbaut und entwickelt, kaum noch zu erkennen. Die obere Bildabfolge zeigt dies sehr gut. Das grün markierte Kästchen zeigt die Kurve, auf der alles basiert. Durch einfache Spiegelung und Wiederholung der Grundform entstehen diese schönen Muster.

Experimente

Bevor ich mich an die Bezierkurven gewagt habe, experimentierte ich mit einfachen Linien. Durch Spiegelung und Vervielfachung in horizontaler und vertikaler Richtung auf Grundlage von nur einer einzigen Linie entstanden sehr interessante Muster.

Programmcode

Bei der Erstellung von Rastern ist es sinnvoll mit den Funktionen pushMatrix() und popMatrix() sowie mit der Funktion translate() zu arbeiten. pushMatrix() merkt sich die Position des aktuellen Koordinatensystems bzw dessen Ursprungs, popMatrix() stellt das vorherige Koordinatenssystem wiederher. Mit der Funktion translate() kann die Position eines vorher gezeichneten Objektes verändert werden.

// Parametrisierbares Raster
// Bezierkurven
// Arina Fix

import controlP5.*;
ControlP5 cp5;


int anzGridX = 5;
int anzGridY = 5;
int musterGrX = 400;
int musterGrY = 400;
int anzBezier=1;

// Interface
int zoom = 0;
Textlabel myTextlabelA;
Textlabel myTextlabelB;
Textlabel myTextlabelC;
Textlabel myTextlabelD;

void setup() {
  size(800, 480);
  background(255);
  stroke(0);
  noFill();
  //interface();
  smooth();

  gui();
}
void draw() {

  fill(255);
  rect(0,0,800,500);
  noStroke();
  fill(255);
  rect( 0, 0,35+480,38+480);
  
  noFill();
  stroke(0);
  
  int z = zoom;

  int sizeGridX = 400/anzGridX; 
  int sizeGridY = 400/anzGridY;

  pushMatrix();
  translate(35, 38 );
  for (int i=-1; i<anzGridX+1; i++) {
    for (int j=-1; j<anzGridY+1; j++) {
      //Abfrage Spalte
      if (i%2==0) {
        //Abfrage Zeile

      pushMatrix();
      translate(0,-sizeGridY*0.5);
       
        bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+(sizeGridX/2)-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+(sizeGridX/2)+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
        // bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+(sizeGridX/2)-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+(sizeGridX/2)+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          if(anzBezier==2){
          pushMatrix();
          translate(-sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
        }

           if(anzBezier==3){
          
          pushMatrix();
          translate(-sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();   
          
          pushMatrix();
          translate(-sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
           }
      
           if(anzBezier==4){
             pushMatrix();
          translate(-sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();   
          
          pushMatrix();
          translate(-sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
             
             
          pushMatrix();
          translate((-sizeGridX/8)*3,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)-0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+1.25*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
           }


          //rechts
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+(sizeGridX/2)+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+(sizeGridX/2)-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          
          if(anzBezier==2){
          pushMatrix();
          translate(sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }

          if(anzBezier==3){
            
            pushMatrix();
          translate(sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate(sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }
      
          if(anzBezier==4){
            
              pushMatrix();
          translate(sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate(sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate((sizeGridX/8)*3,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+1.25*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)-0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }
         
        popMatrix();

      }
      else {
       
          //bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+z, (j*sizeGridY)+sizeGridY/4, (i*sizeGridX)+z, (j*sizeGridY)+(sizeGridY/4)*3, (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          //bezier((i*sizeGridX)+sizeGridX/4, (j*sizeGridY)+0, (i*sizeGridX)+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+z, (j*sizeGridY)+(sizeGridY/4)*3, (i*sizeGridX)+sizeGridX/4, (j*sizeGridY)+sizeGridY);
          

          //links
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+(sizeGridX/2)-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+(sizeGridX/2)+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          
          if(anzBezier==2){
          pushMatrix();
          translate(-sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }

          if(anzBezier==3){
            
            pushMatrix();
          translate(-sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate(-sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }
          
          
          if(anzBezier==4){
            
               pushMatrix();
          translate(-sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate(-sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate((-sizeGridX/8)*3,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)-0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+1.25*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }
          
          if(anzBezier==5){
            
                  pushMatrix();
          translate(-sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate(-sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate((-sizeGridX/8)*3,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)-0.25*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+1.25*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate((-sizeGridX*0.5),0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)-0.5*sizeGridX+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+1.5*sizeGridX-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }


          //rechts
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+(sizeGridX/2)+z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+(sizeGridX/2)-z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          
          if(anzBezier==2){
         pushMatrix();
          translate(sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }
          
          if(anzBezier==3){
            
             pushMatrix();
          translate(sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate(sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }
          
          if(anzBezier==4){
            
                pushMatrix();
          translate(sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate(sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate((sizeGridX/8)*3,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+1.25*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)-0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }
          
          if(anzBezier==5){
            
                   pushMatrix();
          translate(sizeGridX/8,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+0.75*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate(sizeGridX/4,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate((sizeGridX/8)*3,0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+1.25*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)-0.25*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
            
          pushMatrix();
          translate((sizeGridX*0.5),0);
          bezier((i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+0, (i*sizeGridX)+1.5*sizeGridX-z, (j*sizeGridY)+sizeGridY/2, (i*sizeGridX)-0.5*sizeGridX+z, (j*sizeGridY)+(sizeGridY/2), (i*sizeGridX)+sizeGridX/2, (j*sizeGridY)+sizeGridY);
          popMatrix();
          }
        
       
      }
    }
  }
 
  popMatrix();
  fill(255);
  noStroke();
   fill(255);
  rect(0,0,800,38);
  fill(255);
  rect(0,480-38,800,480);
  rect(0,0,35,480);
  rect(400+35,0,400+35,480);
 // noLoop();
}



// Interface

void gui() {

  cp5 = new ControlP5(this);

  /* PFont p = createFont("Courier",12);
   cp5.setControlFont(p,12);*/

  //cp5.valueLabel("Zoom").toUpperCase(false);


  //cp5.addSlider("scale",1,1.3,scale,40,100,100,10);
  cp5.addSlider("zoom")
    .setPosition(500, 38)
      .setRange(-50, 50)
        .setSize(80, 20)
          .setColorBackground(color(0))
            .setColorForeground(color(100))
             // .setColorCaptionLabel(255) 
                ;

    myTextlabelA = cp5.addTextlabel("labelA")
                    .setText("Kruemmung der Bezierkurve")
                    .setPosition(585,45)
                    .setColorValue(0)
                    //.setFont(createFont("Courier",12))
                    ;

  cp5.addSlider("anzGridX")
    .setPosition(500, 78)
      .setRange(1, 40)
        .setSize(80, 20)
          .setColorBackground(color(0))
            .setColorForeground(color(100))
              //.setColorCaptionLabel(0) 
                ;

    myTextlabelB = cp5.addTextlabel("labelB")
                    .setText("Rasterung Horizontal")
                    .setPosition(585,85)
                    .setColorValue(0)
                    //.setFont(createFont("Courier",12))
                    ;
                
  cp5.addSlider("anzGridY")
    .setPosition(500, 118)
      .setRange(1, 40)
        .setSize(80, 20)
          .setColorBackground(color(0))
            .setColorForeground(color(100))
              // .setColorCaptionLabel(0) 
                ;

    myTextlabelC = cp5.addTextlabel("labelC")
                    .setText("Rasterung Vertikal")
                    .setPosition(585,125)
                    .setColorValue(0)
                    //.setFont(createFont("Courier",12))
                    ;
                    
       cp5.addSlider("anzBezier")
    .setPosition(500, 158)
      .setRange(1, 5)
        .setSize(80, 20)
          .setColorBackground(color(0))
            .setColorForeground(color(100))
              // .setColorCaptionLabel(0) 
                ;
                
      myTextlabelD = cp5.addTextlabel("labelD")
                    .setText("Anzahl Bezierkurven")
                    .setPosition(585,165)
                    .setColorValue(0)
                    //.setFont(createFont("Couier",12))
                    ;


}


Die verschachtelten if-else-Anweisungen dienen zum Abfragen der aktuellen Position im Koordinatensystem und der schon vorhandenen Anzahl von Bezierkurven.

21.02.2014 | Arina Fix |