OM 2010 » StephanieHoffmann

Interaktives Plakat zum Bild

StephanieHoffmann — Fri, 18 Jun 2010 17:02:52 +0000

Dies ist ein zweites Plakat zu Marianne Brandt. Auch hier ist der Hammer als interaktives Werkzeug angedacht.
Durch das Schlagen auf die Bildfläche teilen sich die Punkte. Es entsteht dann, nach einiger Zeit und vielen Schlägen, denn Metallbearbeitung braucht ja bekanntlich Zeit, das berühmte Tee-Extraktkännchen von Marianne Brandt, welches sie 1924 entwarf.

Der Grundcode dieses Plakates stammt von Martin Schneider.

Interaktives Plakat zur Typografie

StephanieHoffmann — Fri, 18 Jun 2010 14:29:05 +0000

Dies war der Entwurf für ein interaktives Plakat, das ein Zitat von Marianne Brandt zeigt, welches bei der Interaktion erzittert. Als Tool für unsere Interaktion wählten wir einen Hammer, welcher als Symbol für das Handwerk in der Metallwerkstatt und Mariannes starken und zielstrebigen Charakter steht.
Das Zitat wählten wir aus, weil es kurz und knapp Marianne Brandts Charakter widerspiegelt.

Der Grundcode dieses Plakates stammt von: Daniel Shiffman

PFont f;
String message = "´´Ich bin nun eben kein Theoretiker.``";
 
Letter[] letters;
 
Rect[] rects;
 
int count = 0;
 
void setup() {
  size(640,480);
 
  f = createFont("Arial", 35, true);
  textFont(f);
  letters = new Letter[message.length()];
 
  rects = new Rect[1000];
  int x = 38;
  for (int i = 0; i &lt; message.length(); i ++ ) {
    letters[i] = new Letter(x,240,message.charAt(i));
    x += textWidth(message.charAt(i));
  }
}
 
void draw() {
  background(225);
 
  for (int i = 0; i &lt; count; i ++ ) {
  rects[i].display();
  smooth();
  noStroke();
  }
 
  for (int i = 0; i &lt; letters.length; i ++ ) {
 
  letters[i].display();
 
    if (mousePressed) {
 letters[i].shake();
    }
    else {
      letters[i].home();
    }
 
  }
}
 
class Letter {
  char letter;
 
  float homex,homey;
  float x,y;
 
  Letter(float x_, float y_, char letter_) {
    homex = x = x_;
    homey = y = y_;
    letter = letter_;
  }
 
  void display() {
    fill(0);
    textAlign(LEFT);
    text(letter,x,y);
  }
 
  void shake() {
    x += random(-5,5);
    y += random(-20,20);
  }
 
  void home() {
    x = homex;
    y = homey;
  }
}
 
class Rect {
 
  int durchmesser;
  int xx,yy;
 
  Rect(int x_, int y_, int durchmesser_) {
    xx = x_;
    yy = y_;
 
  }
 
  void display() {
    fill(0, 50);
    rect(xx, yy, 110, 110);
 
 }
 
}
void mousePressed(){
 rects[count] = new Rect(mouseX,mouseY,30);
  count++;
  }
void keyPressed(){
}

Linien automatisch zeichnen

StephanieHoffmann — Fri, 19 Feb 2010 14:40:56 +0000

Bei dieser Übung zeichnen sich die Linien automatisch, bis man mit der Maus auf einen beliebigen Punkt der Fläche klickt. Dann beginnt das Ganze von Neuem.



void setup(){ 
    size(300, 300);  
    background(0);
    smooth(); 
} 
 
void draw(){ 
    stroke(255); 
    d1 = new Dd(random(0,300),random(0,300), random(0,100)); 
    d1.draww(); 
} 
 
void mousePressed(){ 
    background(0);     
} 
 
class Dd{ 
  float posx; 
  float posy; 
  float colorr; 
 
  Dd(float ax, float ay, float ac){ 
      posx = ax; 
      posy = ay; 
      colorr = ac; 
  } 
 
  void draww(){ 
    line(posx, posy, mouseX, mouseY); 
  }   
}

Linien manuell zeichnen

StephanieHoffmann — Fri, 19 Feb 2010 14:33:59 +0000

Dies war die nächste Processing-Übung.
Hier werden die Linien manuell gezeichnet, indem man die Maus über die Fläche bewegt.



void setup(){
  size(400, 400);
  background(255);
} 
 
void draw(){
  stroke(255,0,0);  
  line(200, 200, mouseX, mouseY);
}

magnetische Linien

StephanieHoffmann — Wed, 13 Jan 2010 13:41:18 +0000

Das war die erste Processing-Übung… die Aufgabe war es, Linien magnetisch wirken zu lassen.



void setup()  
{ 
  size(300, 300);      
  strokeWeight(3);   
  smooth(); 
} 
 
float y1; 
float x1; 
float y2; 
float x2; 
float dist1,dist2,fx,fy; 
float betr; 
int p,q; 
 
void draw(){  
  background(0);   
  x1=mouseX; 
  y1=mouseY;
 
  for ( p=10;p&lt;width;p=p+width/20){ 
    for (q=10;q20)&amp;(abs(x2-p)+abs(y2-q))&gt;20){ 
        fx=3000000*(((x1-p)/(dist1*dist1*dist1*dist1))); 
        fy=3000000*(((y1-q)/(dist1*dist1*dist1*dist1)));
 
        stroke(255); 
        line(p-fx,q-fy,p,q); 
      } 
    } 
  } 
}

kurze Animation

StephanieHoffmann — Wed, 18 Nov 2009 15:26:09 +0000