20. September 2012

In Lektion 4 waren Schleifen das Thema. Das Ziel der zugehörigen Übung war es, ein spannendes Ornament zu schaffen, welches sich selber auf allen 4 Seiten wiederholen kann. Als Ausgangslage hatten wir ein Codestück, welches unseren bekannten Smiley über die ganze Seite wiederholte. Im Hinblick auf die nächste Übung waren meine Gedanken bei einem rekursiven Funktionsaufruf und ich überlegte, wie ich einen solchen zur Ornamentgenerierung nutzen konnte. Dabei fielen mir Sachen wie Mandelbrot-Bilder, Fibonacci-Folge oder Mandalas ein. Ich habe daher einen Kreis gewählt und experimentiert, wie ich rekursiv eine Art Mandala aus mehreren Kreisen entstehen lassen kann. Ich habe eine Weile mit verschiedenen Parametern rumgespielt um interessante Muster entstehen zu lassen. Das war allerdings recht mühsam und ich kam auf die Idee, dass es doch viel besser wäre, ein Experimentier-Tool zu basteln, mit dem ich zur Laufzeit verschiedene Kreisanordnungen interaktiv ausprobieren kann.

Ergebnis:

Per Tastendruck kann man verschiedene Parameter verändern:

• Kreisgrösse
• Anzahl Kreise um den Hauptkreis
• Tiefe des "rekursiven" Ornaments
• Abstand der Kreise
• Drehgeschwindigkeit
• Farbe
• Psycho-Mode (alles dreht sich :-))

Dadurch konnte ich unzählige spannende Kombinationen ausprobieren und bin immer wieder auf neue Kaleidoskop-artige Muster gestossen: Gefällt einem das Muster, kann man es mit der Taste "p" als Bild speichern. Mit "x" kann man zufällige Werte generieren. Wenn ich das Projekt weiterverfolgen würde, würde ich gerne mit verschiedenen geometrischen Formen (z.B. Dreiecke wären auch spannend) arbeiten und vielleicht versuchen, das Muster mehr ineinander verfliessen zu lassen. Die Idee vom grafischen Experimentier-Tool gefällt mir aber sehr.

Code:

private static final int MAX_DEPTH = 10;
private int patternDepth = 6;
private int rotateSteps = 6;
private int rotateStepsCounter = 1;
private int patternSize = 150;
private float rotateSpeed = 0.01;
private float patternRotator = 0;
private int transformStep = patternSize;
private boolean colorMode = false;
private boolean psychoMode = false;
private float overallRotation = 0;

public void setup()
{
size(800,800);
smooth();
noFill();
stroke(0);
strokeWeight(2);
}

public void draw()
{
background(255);
translate(width*0.5,height*0.5);

//Globale Rotation von allem
if(psychoMode) {
rotate(radians(overallRotation));
overallRotation+=rotateSpeed*20;
}

pushMatrix();
//Zurück nach oben links zum zeichnen
translate(-width,-height);

//Pattern X-Achse wiederholen
for(int x = 0; x <= width*2; x+=transformStep)
{
//Pattern Y-Achse wiederholen
for(int y = 0; y <= height*2; y+=transformStep)
{
pushMatrix();
translate(x,y);
//Das einzelne Pattern rotieren lassen
rotate(radians(-patternRotator));
drawFractal(patternDepth,patternSize/2,rotateSteps);
patternRotator+=rotateSpeed;
popMatrix();
}
}
popMatrix();
}

/**
* Rekursiv aufgerufene Funktion, welche den einzelne Pattern-Kreis zeichnet
*/
public void drawFractal(int depth, int size, int rotateSteps)
{

if(colorMode) {
if(depth > 0) {
fill(random(50,255),random(50,255),random(50,255),100);
}
} else {
noFill();
}

if(depth > 0) {
if(depth < patternDepth) {
for(int i=0;i<rotateSteps;i++) {
rotate(radians(360/rotateSteps));

pushMatrix();
translate(0,size*1.5);
ellipse(0,0,size,size);
popMatrix();
}

} else {
ellipse(0,0,size*2,size*2);
}
//Rekursiver Aufruf (max. sovielmal wie Parameter depth)
drawFractal(depth-1,size/2,rotateSteps);
} else {
return;
}
}

/**
* Steuerung über die Tastatur
*/
public void keyPressed()
{
switch(key)
{
//Bild speichern
case 'p':
save("screenShot.jpg");
println("save the screen to screenShot.jpg");
break;

//Anzahl Kreiselemente um Hauptkreis
case 'q':
rotateSteps++;
break;

case 'a':
rotateSteps--;
break;

//Grösse der Kreise
case 'w':
patternSize+=20;
break;

case 's':
patternSize-=20;
break;

//Abstand der Kreise
case 'e':
transformStep+=10;
break;

case 'd':
transformStep-=10;
break;

//Tiefe der rekursiven Kreise
case 'r':
if(patternDepth <= MAX_DEPTH) {
patternDepth+=1;
}
break;

case 'f':
patternDepth-=1;
break;

//Drehgeschwindigkeit der Kreise
case 't':
rotateSpeed+=0.01;
break;

case 'g':
rotateSpeed-=0.01;
break;

//Toggle Farbmodus
case 'z':
if(colorMode) {
colorMode = false;
noFill();
stroke(0);
strokeWeight(2);
} else {
colorMode = true;
noStroke();
}
break;

//Toggle Psychomodus
case 'h':
psychoMode = !psychoMode;
break;

//Auto Werte (Random Mode)
case 'x':
rotateSteps = (int)random(1,20);
patternSize = (int)random(100,250);
transformStep = (int)random(patternSize/2,patternSize*1.2);
patternDepth = (int)random(2,8);
break;
default:
break;
}
}