Project 2, “Klaus Wallpaper/Mirror”

Klaus Wallpaper/Mirror

When applying to the DFI program, in the winter of 2012, I was working on a project loosely referred to as, “Klaus Mirror Wallpaper.” In it, I envisioned a mirror, similar to the one in Snow White, which one could peer into but would have different images looking back at them. In my mind, the images would interactively ripple like a pebble thrown into water and pop up, like a mirror.

http://www.youtube.com/watch?v=Z_-pDpLVVNc

I wanted it to double as wallpaper, its eeriness based on how it could camouflage itself into the rest of the wallpaper. At the time, I considered this to be magical, or at the very least, too technically difficult for me to accomplish on my own. Instead, I came up with a Flash animation version of what I had in store. I made a music loop for this, called “Klaus Tomato Complete”.

Images

Klaus Nomi was a German underground No Wave/opera performer living in New York City in the late seventies/ early eighties. I have longtime been a fan of Nomi’s ability to transform visual art into a persona (through costume and song), sort of a precursor to Lady Gaga. Around the time that I was initially working on this project, I was listening to a cover he did of Donna Summer’s “I Feel Love.”

I made a song that was inspired by this.

https://soundcloud.com/chante/friend-of-slime

“Will Munro: Total Eclipse” was the first art show I saw when I moved to Toronto in 2010, at Frank’s Gallery (AGO). The poster for this show included a large image of Klaus Nomi.

Will Munro

 

This poster has been hanging on the wall of my various apartments since that time. I like the idea of overtly  acknowledging pop culture obsessions and making more art with and about it.

For “Klaus Wallpaper/Mirror”, I used an image of Klaus Nomi that I found on a fan tumblr. I used this image  as the wallpaper because I like taking a character and turning him into a highly reproductible iconic figure  (Andy Warhol). I like Walter Benjamin’s ideas in “The Work of Art in the Age of Mechanical Reproduction”,  where he discusses how the more something is mass-produced, the less authentic it becomes: “Even with the  most perfect reproduction, one thing stands out: the here and now of the work of art- its unique existence in the  place where it is at this moment…The here and now of the original constitute the abstract idea of its  genuineness. The whole province of genuiness is beyond technological reproducibility.” (Benjamin, 8)

Due to my highly limited Photoshop skills, I erased one of the figure’s heads by accident, but prefer it that way.

For Halloween of that year, I found a Martha Stewart craft, “Mirror Glow Eyes”, that is a different version of the  Snow White Mirror, that gives off animation feel. I love it.

Mirror Glow Eyes

 http://www.marthastewart.com/268895/mirror-glow-eyes

For the images that went on top of the Klaus Nomi heads, I used photos that I had taken in 2006 of video games at an arcade in Hong Kong. I have always been fascinated by the video game aesthetic; make something as synthetic as possible. I like the juxtoposition between the Klaus Nomi heads and arcade photos.

I was also inspired by Tasman Richardson’s 2012 show, “Necropolis” at MOCCA. He takes film and plays with  it in all sorts of formats that are interactive installatiosn. The following clip is an experience of his work.

 Process

 Working on this project has involved many steps.

  1. Load all of the images.
  2. Figure out the exact points of coordination where the arcade photos should go to be exactly on top of the Klaus heads.
  3. For some reason, after I loaded them and started playing around with my ‘if statements’, they all became huge.Take the arcade photos, resize and touch them up in Photoshop.
  4. Create a new sketch, where I load all of these photos again.
  5. Create all of my ‘if statements’ for where I want the photos to be placed. I want it to be so that depending on where you are standing, the arcade photos pop up over Klaus’ head. This means that, at first, I have to give vague points of coordination, around each square for where the person has to stand in order for the arcade photo to pop up. Because these points of coordination often work in alignment, it is difficult to have a person stand in one position and not have a few heads pop up at the same time.
  6. Endless playing with OpenCV and Capture, which is endlessly inspiring, but confusing, because I haven’t been able to do figure out how to incorporate the demos into my sketch. So far, some other demos that I would like to play with and incorporate into Klaus Mirror Wallapaper or another project, at a future time are:

-Suitscan: Have video playing before, then when you stand somewhere, everything stops and it plays the split screen, plus colous changes.

-In Open CV, copy is cool, the image, for some reason, reminds me of using many LFOs in music, something about how they drag.

-Spatiotemporal: Half Screen

– Time displacement: Ripple delay

-Pocky

-Framingham

-In Movie, I like scratch.

 More Process Notes:

I was having a lot of problems trying to use OpenCV; I didn’t know where to put it in my code, in the beginning or end? I went to see Nick and he stayed with me for what felt like over an hour and helped me TREMENDOUSLY. He told me that I needed to employ Network Communication for the project; get another sketch running at the same time as mine. The initial one would be the ‘client’ and the other one, with Open CV, would be the ‘server’. One of the reasons for this was to be able to have my initial dimensions for the image (1200, 1500). Otherwise, trying to use OpenCV in my initial sketch would only be able to handle the small square that it initially wants to use (hope that is clear).

I was ecstatic when everything finally worked. It needs to be dark in the room for things to work most efficiently and it’s a bit rough, but wow, what gratification I have to see my images come and go, depending on where I am standing!!

Now to incoporate audio:

I added the Minim library and was able to have one sketch successfully play my accompanying loop, “Klaus Tomato Complete”, although when I try to put it into my Client sketch, this is when troubles arise. I spent a few hours trying to incorporate it into my main sketch, when it eventually occurred to me to do with Minim what I had done with OpenCV; give it its own sketch!! Duh hickey. I added the code and then one line so that it would loop and presto, all three sketches work to create my Klaus Mirror/Wallpaper!

The Code

Remember, I used three sketches. I am having trouble logging into GitHub, so I will have to give you my code here.

1. The server, which was in charge of face detection:

import hypermedia.video.*;
import java.awt.Rectangle;
import processing.net.*;////
OpenCV opencv;

// contrast/brightness values
int contrast_value = 0;
int brightness_value = 0;

Server server;///make a new server
float faceX;
float faceY;
String sendData; //
byte zero = 0;

void setup() {

size( 320, 240 );

opencv = new OpenCV( this );
opencv.capture( width, height ); // open video stream
opencv.cascade( OpenCV.CASCADE_FRONTALFACE_ALT ); // load detection description, here-> front face detection : “haarcascade_frontalface_alt.xml”

server = new Server(this, 5204);

}
public void stop() {
opencv.stop();
super.stop();
}

 

void draw() {

// grab a new frame
// and convert to gray
opencv.read();
opencv.convert( GRAY );
opencv.contrast( contrast_value );
opencv.brightness( brightness_value );

// proceed detection
Rectangle[] faces = opencv.detect( 1.2, 2, OpenCV.HAAR_DO_CANNY_PRUNING, 40, 40 );

// display the image
image( opencv.image(), 0, 0 );

// draw face area(s)
noFill();
stroke(255,0,0);
for( int i=0; i<faces.length; i++ ) {

faceX=((faces[i].x+(faces[i].x+faces[i].width))/2);
faceY=((faces[i].y+(faces[i].y+faces[i].height))/2);

rect( faces[i].x, faces[i].y, faces[i].width, faces[i].height );

ellipse(faceX,faceY,20,20);
}

sendData=(map(faceX,320,240,1500,1200)+”,”+map(faceY,320,240,1500,1200));
server.write(sendData);
server.write(zero);

}

 

2. The client, which was responsible for my images:

import processing.net.*;///*****
Client client;//****

PImage img1; // Klaus Background
PImage img2; // Boobs
PImage img3; // Egyptian Eye
PImage img4; // Clown
PImage img5; // Yellow Buttons
PImage img6; // Kind Text
PImage img7; // Pink Buttons
PImage img8; // Girl Face
PImage img9; // Sunset
float faceX;//***
float faceY;//***

void setup() {

client = new Client(this,”127.0.0.1″, 5204);

////****
size(1500, 1200);
img1 = loadImage(“Klaus Background.jpg”);
img2 = loadImage(“Boobs28.jpg”);
img3 = loadImage(“EgyptianEye28.jpg”);
img4 = loadImage(“Clown28.jpg”);
img5 = loadImage(“YellowButtons.jpg”);
img6 = loadImage(“KindText28.jpg”);
img7 = loadImage(“PinkButtons28.jpg”);
img8 = loadImage(“GirlFace28.jpg”);
img9 = loadImage(“Sunset28.jpg”);

}
void draw()
{
receiveData();///*****put this at the top of the draw

image(img1, 0, 0);

//img2 Boobs

if (faceX > 240 && faceY > 70) {
image(img2, 216, 40, 60, 90);
}

//img3 Egyptian Eye

if (faceX > 500 && faceY > 150) {
image(img3, 675, 337, 60, 90);
}

//img4 Clown

if (faceX > 400 && faceY > 600) {
image(img4, 446, 641, 60, 90);

}

//img5 Yellow Buttons

if (faceX > 1100 && faceY > 150) {
image(img5, 1132, 336, 60, 90);
}

//img6 Text

if (faceX > 800 && faceY > 70) {
image(img6, 903, 42, 60, 90);
}

//img7 Pink Buttons
if (faceX > 210 && faceY > 150) {
image(img7, 216, 336, 60, 90);
}

//img8 Girl Face
if (faceX > 1100 && faceY > 200) {
image(img8, 1132, 40, 60, 90);}

//img9 Sunset
if (faceX > 1100 && faceY > 50){
image(img9, 1132, 641, 60, 90);}

}

void receiveData()
{
boolean sTest;
String[] inCoords = new String[2];
byte zero = 0;
String data;
/////////////////////////////////
// Read data
if (client.available() > 0) {
data = client.readStringUntil(zero);
//println(data);

try {
inCoords = splitTokens(data, “,”);
sTest=true;
} catch (NullPointerException e) {
sTest=false;
}

if(sTest==true)
{

faceX=int(inCoords[0]);
faceY=int(inCoords[1]);
}

}
}

3. The music

import ddf.minim.*;

Minim minim;
AudioPlayer song;

void setup()
{
size(100, 100);

minim = new Minim(this);

// this loads mysong.wav from the data folder
song = minim.loadFile(“Klaus Tomato Complete.mp3”);
song.play();
song.loop();
}

void draw()
{
background(0);
}

 

**Important to note that one must press play first for the server, second for the client and third for the music, otherwise it won’t play.

***One thing that I noticed through playing with this is that because it can be for the camera to pick up the user’s face, the user (me), sometimes has to wave their arms around and it becomes a sort of dance to get the attention of a small green light at the top of the camera screen.

****I would love to see this on a big projector!

 

Bibliography

Benjamin, Walter. “The Work of Art in the Age of Mechanical Reproduction.” (Penguin Great Ideas), 2008.

 

 

 

 

Comments are closed.