MultiArt

Aus toolbox_interaktion
Wechseln zu: Navigation, Suche

Idee

Unsere Idee war ein Interaktives Kunstwerk in Form einer Holzstaffelei und einer Touchscreen-Leinwand, mit dem man seine Kreativität digital ausleben und seine künstlerische Schaffenskraft neu entdecken kann.
Der "Look" sollte einem realen Kunstwerk möglichst nahe kommen und dem User somit den Eindruck vermitteln "altmodisch" auf einer Leinwand mit Pinsel zu malen.
Man sollte verschiedene Pinsel und eine Farbpalette zur Verfügung haben, ungefähr wie bei Paint oder Photoshop und wenn man die „Leinwand“ berührt, erscheinen vorgespeicherte, berühmte Kunstwerke.

Interaktion.jpg Interaktion2.jpg


Utensilien

-verstellbare Holzstaffelei, wie man sie aus dem Künstlerbedarf kennt
-ein von der Hochschule zur Verfügung gestellter Multitouch-Monitor
-der Sensu Solo Artist Brush: Hierbei handelt es sich um einen digitalen touchscreenkompatiblen Pinsel mit synthetischen Borsten, der wie ein authentischer Malpinsel aussieht.

Staff.jpg 1.jpg 2.jpg


Software

Als nächstes haben wir uns überlegt mit welcher Software wir unsere Idee am besten umsetzen und programmieren könnten. In Frage kamen:
TouchLib: Eine Bibliothek um Multitouch-Interaktions-Oberflächen zu kreieren. Hier programmiert man mit C++.
MT4J = Multitouch for Java: Ein Framework, das als Basis zur Entwicklung von Anwendungen für Multi-Touch-Screens mit JAVA dient.
oder Processing: Eine objektorientierte, stark vereinfachte Programmiersprache, die besonders auf die Einsatzbereiche Grafik, Simulation und Animation spezialisiert ist.
Auf Empfehlung haben wir uns für Processing entschieden, weil es -wie gesagt- graphisch orientiert ist und da der Schwerpunkt unserer Interaktion auf der "Malerei", dem Erschaffen einer Grafik und der Gestaltung liegt, bot es sich förmlich an.


Setting

Als erstes haben wir unsere Leinwand gestaltet. Hier war der erste Schritt das Aussuchen von verschiedene, möglichst berühmten und bekannten Kunstwerken wie z.B. der "Feldhase" von Albrecht Dürer und "Die weichen Uhren" von Salvador Dali.
Wir haben die Bilder so bearbeitet, dass sie die Größe von der Leinwand haben und diese ausfüllen - also 1280 x 800 Pixel-und auch teilweise gedreht.

Durer Young Hare.jpg Dali Uhren 01.jpg

Als nächstes haben wir die Buttons mit Adobe Photoshop designt, die als Pinsel fungieren.
Um die "Klick"-Optik des Buttons zu programmieren, mussten zwei verschiedene Versionen jedes Buttons angelegt werde.

Button3.png Button3-2.png Button5.png Button5-2.png Button7.png Button7-2.png

Hinter jedem Button liegt praktisch ein Kunstwerk. Wenn man jetzt auf einen Button klickt, wird z.B. der "Feldhase" aktiviert und man kann ihn auf die Leinwand malen. Wenn man dann auf einen anderen Button klickt, werden z.B. "Die Weichen Uhren" aktiviert und man malt diese auf die Leinwand zu dem Feldhasen dazu.
Insgesamt gibt es sieben Pinsel-Buttons mit sieben Kunstwerken.
Zusätzlich gibt es einen ERASER- Button, der wie ein normaler Radiergummi funktioniert und mit dem man unerwünschte Pinselstriche wieder entfernen kann und den CLEAR-Button, mit dem man sein ganzes Bild komplett löschen kann, um von vorne zu beginnen.
Der Einfachheit halber, bzw. auch, weil es nichts zum Ergebnis beigetragen hätte, haben wir auf die Farbpalette verzichtet.


Programmierung

Das Hauptproblem war eindeutig der Maleffekt mit den verschiedenen Bildern.
Zuerst haben wir an das Prinzip von einem Rubbellos gedacht: Ein Bild liegt quasi unsichtbar auf der Leinwand und wird beim drüberwischen aufgedeckt.
Das Problem hier war, dass es keinen Maleffekt gab, sondern einen Radiereffekt. Man hätte nicht mehrere Bilder übereinander speichern können, weil auch jedesmal wenn man auf einen neuen Button geklickt hätte, das bereits gemalte wieder verschwunden wäre.
Als nächstes haben wir an die Ebenenmasken in Adobe Photoshop gedacht. Zur Erklärung: Eine Ebenenmaske ist zu vergleichen mit einer Schablone. Man verdeckt sein Bild mit einem weißen Blatt. Indem man mit schwarzer Farbe Flächen füllt, schneidet man Löcher in die Maske. Es entsteht eine volle Transparenz und die darunter liegende Ebene wird voll sichtbar. Hier tauchte das gleiche Problem wie bei dem Rubbellos auf. Auch einen Code für Masken zu finden erwies sich als ziemlich schwierig, weil es „Masken“ wie man sie von Photoshop kennt, nicht in Processing gibt.
Unsere Lösung: Aus den Processing-References haben wir den copy()-Befehl benutzt. Dieser funktioniert wie folgt: Man kopiert einen Pixelbereich aus dem Fenster an eine andere Stelle des Fensters. (Prinzip wie der Kopierstempel in Photoshop!).

(Im Folgenden wurden nur die wichtigsten Teile des Codes zur Veranschaulichung ausgewählt)

copy()-Code

PImage img;
img1 = loadImage("dali2.jpg");
 
void picture1() {   
  if(mousePressed) 
      copy(img1, 
              constrain(mouseX-SQUARE_WIDTH/2,0,width), 
              constrain(mouseY-SQUARE_HEIGHT/2,0,height), 
              SQUARE_WIDTH,SQUARE_HEIGHT, 
              constrain(mouseX-SQUARE_WIDTH/2,0,width), 
              constrain(mouseY-SQUARE_HEIGHT/2,0,height), 
              SQUARE_WIDTH,SQUARE_HEIGHT);
}

Position der Buttons

Damit die Maus bzw. der Pinsel erkennen kann, auf welchen Button gerade geklickt wurde, wurde jedem Button eine X- und Y-Position zugeteilt (festgelegt als statische Variablen). Hier als Beispiel der Positions-Code des zweiten Buttons:

boolean pic2Over = false;
int pic2X, pic2Y;
int pic2Size = 85;
.
.
.
pic2X = pic2Size+195;
pic2Y = pic2Size/2;

Code für Mausposition

boolean overPicture(int x, int y, int width, int height)  {
  if (mouseX >= x && mouseX <= x+width &&
      mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;

Erkennung der Button-Position

Hier wird die Mausposition mit der Position der einzelnen Buttons verknüpft, damit sie erkennen kann, welcher aktiviert wurde. (Hier nun der Code-Teile für alle Buttons)

void update(int x, int y) {
  pic1Over = overPicture(pic1X, pic1Y, pic1Size, pic1Size); 
  pic2Over = overPicture(pic2X, pic2Y, pic2Size, pic2Size);
  pic3Over = overPicture(pic3X, pic3Y, pic3Size, pic3Size);
  pic4Over = overPicture(pic4X, pic4Y, pic4Size, pic4Size);
  pic5Over = overPicture(pic5X, pic5Y, pic5Size, pic5Size);
  pic6Over = overPicture(pic6X, pic6Y, pic6Size, pic6Size);
  pic7Over = overPicture(pic7X, pic7Y, pic7Size, pic7Size);
  eraseOver = overPicture(eraseX, eraseY, eraseSize, eraseSize);
  clearOver = overPicture(clearX, clearY, clearSize, clearSize);
}

Wechseln der Bilder nach Mausklick

/*
  Functions to switch the images
 */
void keyPressed() {
  switch(key){
    case '1':
      currentTool = 1;
      break;
    case '2':
      currentTool = 2;
      break;
    case '3':
      history  = new ArrayList(); 
      currentTool = 3;
      break;
    case '4':
      currentTool = 4;
      break;
    case '5':
      currentTool = 5;
      break;
    case '6':
      currentTool = 6;
      break;  
    case '7':
      currentTool = 7;  
    case '8':
      currentTool = 8;  
    case 'c':
    case DELETE:
    case BACKSPACE:
      background(255);    // clear the screen
      history  = new ArrayList();  // reset history array
      break;      
  }  
}
// Switch the image according to the button press
void mousePressed() {
  if (pic1Over) {
    currentTool = 1;
  }else if (pic2Over) {
    currentTool = 2;
  }else if (pic3Over) {
    currentTool = 3;
  }else if (pic4Over) {
    currentTool = 4;
  } else if (pic5Over) {
    currentTool = 5; 
  } else if (pic6Over) {
    currentTool = 6; 
  } else if (pic7Over) {
    currentTool = 7; 
      } else if (eraseOver) {
    currentTool = 8; 
  } else if (clearOver) {
      background(255);  
  } 
}

Radierer und clear-Funktion

Für die clear-Funktion wurde ein weißes Bild ebenfalls der Größe 1280x800 px gespeichert, welches erscheint, sobald der "Clear"-Button angeklickt wird. Der Radierer nutzt ebenfalls dieses Bild, aktiviert es aber genau wie bei der Mal-Funktion der Gemälde, mit dem copy-Befehl, wobei so die Illusion erzeugt wird, man könne mit Weiß über die Bilder drüber malen.

Beispielablauf von MultiArt

Ablauf in Bildern

01.jpg 02.jpg

03.jpg 04.jpg

05.jpg


Ablauf als Video

Vimeovorschau.png
MultiArt bei Vimeo


Fazit und Ausblick

Im Großen und Ganzen haben wir alle Ziele erreicht, die wir uns im Verlauf der Arbeit an "MultiArt" vorgenommen hatten. Was man in Zukunft noch in Angriff nehmen könnte, wäre die Form und die Kanten des Pinsels zu verändern. Es wäre schöner, würde dieser rund sein und weiche Kanten besitzen. Weitere Erweiterungen des Programms könnten dann noch die Einstellung der Transparenz des Pinsels, und eine Option zur Änderung der Farben der verschiedenen Bilder sein, so dass man sich noch kreativer mit MultiArt ausleben könnte. Ganz frei nach dem Motto:
"Discover the artist within you!"

Weblinks

Interne Daten

Code und Projektdaten als Zip-Datei
Demonstrations-Video als Mp4-Datei

Bildquellen

Albertina Online: Feldhase
Hellfirez.de: Belegarbeit- Salvador Dali