Digital Bauhaus Vorkurs/Projekte/Tobias

From Medien Wiki

Experimente mit Processing und Adobe Illustrator

Generativesdesign1.jpg Generativesdesign2.jpg


Generativesdesign3.jpg



Durch klicken der Maus werden an der Mausposition Kreise gezeichnet. Die Größe des Kreises/Ellipsen variiert in einem begrenzten Bereich durch die Zufallsfunktion. Je langsamer man die Maus mit gedrückter Taste bewegt, desto dichter werden die Kreise. Ein "Tunnel" wird sichtbar.

Patchtunnel1.jpg Patchtunnel2.jpg


float x;
float y;

void setup () {
  size(1600,900);
  smooth();
  background(255);
  frameRate(2000);
}

void draw () {
  if(mousePressed) {
  x = random(100, 110);
  y = random(100, 110);
  noFill();
  stroke(0, 50);
  color(50,20,80);
  ellipse(mouseX,mouseY,x,y);
  x = constrain(x,140,width);
  y = constrain(y,100,height);
  }else{
    point(width/2,40);
  }
}




2 Ellipsen, deren Größenparameter sich durch Mausbewegung verändern lassen.

Patchkreisgroeße.jpg

void setup() {
  size(600,600);
  background(255);
  smooth();
}

void draw() {
  background(255);
  noStroke();
  fill(40);
  ellipse(200,300,mouseX,100);
  ellipse(400,300,100,mouseY);
}

Bei gedrückter Maustaste werden rotierende Linien um die Mausposition gezeichnet. So entstehen Kreise, Halbkreise oder auch nur einzelne Kreissektoren.

Patchrotation.jpg

float linienlaenge = 50;
float winkel = 0;
float geschwindigkeit = 1.0;


void setup() {
  size(600,600);
  smooth();
  background(255);
}

void draw() {
  if(mousePressed) { 
   pushMatrix();
   translate(mouseX,mouseY);
   rotate(radians(winkel));
   line(0,0,linienlaenge,0);
   popMatrix();
  
   winkel += geschwindigkeit;
  }
  
}




Ein Kreis springt in dem Fenster herum. Horizontale und vertikale Geschwindigkeit wird zufällig festgelegt.

Springenderkreis.jpg

//Position Horizontal des Kreises
float x= random(0,600);
//Position Vertikal des Kreises 
float y= random(0,600);
//horizontale Geschwindigkeit 
float vx = random(5,15);
//vertikale Geschwindigkeit
float vy = random(5,15);
//Größe des Kreises 
float s = random(40,100);



void setup() {
  size(600,600);
  smooth();
  background(255);
  frameRate(3000);
}


void draw() {
  
  
  background(255);
  fill(29,7,48);
  ellipse(x,y,s,s);

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



Man sieht einen Kreis in der Mitte des Fensters. Im Laufe der Zeit verfremdet sich der Kreis zufällig.

Verfremdeterkreis.jpg

import processing.pdf.*;
boolean recordPDF = false;

int formResolution = 15;
int stepSize = 1;
float distorsionFactor = 1;
float initRadius = 150;
float centerX, centerY;
float[] x = new float[formResolution];
float[] y = new float[formResolution];

boolean filled = false;
boolean pause = false;


void setup(){
  size(700, 700);
  smooth();

  // init form
  centerX = width/2; 
  centerY = height/2;
  float angle = radians(360/float(formResolution));
  for (int i=0; i<formResolution; i++){
    x[i] = cos(angle*i) * initRadius;
    y[i] = sin(angle*i) * initRadius;  
  }

  stroke(3);
  background(255);
}


void draw(){
   background(255);
  // calculate new points
  for (int i=0; i<formResolution; i++){
    x[i] += random(-stepSize,stepSize);
    y[i] += random(-stepSize,stepSize);
    // ellipse(x[i], y[i], 5, 5);
  }



  beginShape();
  // Start Kontrollpunkte
  curveVertex(x[formResolution-1]+centerX, y[formResolution-1]+centerY);

  // nur die Kontrollpunkte werden gezeichnet
  for (int i=0; i<formResolution; i++){
    curveVertex(x[i]+centerX, y[i]+centerY);
  }
  curveVertex(x[0]+centerX, y[0]+centerY);

  // Ende Kontrollpunkte
  curveVertex(x[1]+centerX, y[1]+centerY);
  endShape();
}


// events
void mousePressed() {
  //init form on mouse position
  centerX = mouseX; 
  centerY = mouseY;
  float angle = radians(360/float(formResolution));
  float radius = initRadius * random(0.5,1.0);
  for (int i=0; i<formResolution; i++){
    x[i] = cos(angle*i) * radius;
    y[i] = sin(angle*i) * radius;
  }
}


void keyReleased() {
  if (key == 's' || key == 'S') saveFrame(timestamp()+"_##.png");
  if (key == DELETE || key == BACKSPACE) background(255);

  if (key == '1') filled = false;
  if (key == '2') filled = true;

  // ------ pdf export ------
  // press 'r' to start pdf recording and 'e' to stop it
  // ONLY by pressing 'e' the pdf is saved to disk!
  if (key =='r' || key =='R') {
    if (recordPDF == false) {
      beginRecord(PDF, timestamp()+".pdf");
      println("recording started");
      recordPDF = true;
      stroke(0, 50);
    }
  } 
  else if (key == 'e' || key =='E') {
    if (recordPDF) {
      println("recording stopped");
      endRecord();
      recordPDF = false;
      background(255); 
    }
  } 

  // switch draw loop on/off
  if (key == 'p' || key == 'P') pause = !pause;
  if (pause == true) noLoop();
  else loop();
}


// timestamp
String timestamp() {
  Calendar now = Calendar.getInstance();
  return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
}

Viele Ellipsen entstehen und blinken mit Bewegung der Maus vom Mittelpunkt des Fensters aus. 2 Farbtöne dominieren.

Bunteellipsen1.jpg Bunteellipsen2.jpg Bunteellipsen3.jpg


void setup() {
size(screen.width,screen.height);
frameRate(1000);
background(255);
color(0);
smooth();

}
void draw (){
  noStroke();
  int x = (int)random(255);
  int y = (int)random(255);
  int z = (int)random(255);
  fill(x,100,20);
  ellipse(width/2,height/2,mouseX,mouseY);

}