[icm week 7] The Beautifying Mirror

Screenshot 2015-10-14 12.53.41

(See The Beautifying Mirror here.)

It was fun to move out of the canvas with DOM this week. All the HTML/CSS stuff really brought me back to my early days on the web, hand-coding Harry Potter fansites in middle school. (Back before we thought this might actually be a useful skill to pursue!)

That’s probably why the page I made this week is sort of early-2000’s nostalgic in style. I wanted to do something with the webcam feature, so I pulled a frame image off the googles and set the camera capture inside. My goal was to play with the idea of “improving” your appearance with the slightly disparaging encouragement of the text on the page. I hope it’s at least a tiny bit unsettling.

IMG_0452
my friend Chris tests the mirror

I made my buttons and text in my sketch and created a separate CSS stylesheet.

In the future, I’d love to take this idea a little further with facial tracking software and the ability to screenshot your final image. (And probably better assets that weren’t just random things I found as quickly as possible.)

Check it out!

My sketch.js code is below, but it doesn’t include my stylesheet or index HTML.

var capture, c;
var x1, x2, eyes, nose, mouth, glitter, eyes2, nose2, mouth2;
var textTitle, textQuestion, textAgree, textEyes, textNose, textMouth, textGlitter, textSave, textDislike, textGoBack, textNo, textNo2;
var button1, button2, buttonReady, buttonEyes, buttonNose, buttonMouth, buttonLike, buttonDislike, buttonSave, buttonGoBack, buttonNo1, buttonNo2, buttonFinalNo;


function preload() {
  frame = loadImage("assets/frame.png");
}

function setup() {

  c = createCanvas(600, 500);
  c.position(windowWidth / 4, 0, CENTER);
  background('#FFE0F7');

  capture = createCapture(VIDEO);
  capture.size(480, 384);
  capture.hide();

  textTitle = createP("THE BEAUTIFYING MIRROR");
  textTitle.position(windowWidth / 4 + 130, 0);
  textTitle.id("mirror");

  textQuestion = createP("Hm, you don't look great. Let's improve your appearance.");
  textQuestion.position(windowWidth / 4 + 20, 500);
  textQuestion.id("text");

  button1 = createButton("You know what, you're right.");
  button1.position(windowWidth / 4 + 20, 580);
  button1.id("button");
  button1.mousePressed(start);

  button2 = createButton("What...? Okay...");
  button2.position(windowWidth / 4 + 280, 580);
  button2.id("button");
  button2.mousePressed(start);

  glitter = createImg("assets/sparkle2.gif");
  glitter.position(width / 2 + 90, 75);
  glitter.hide();

  x1 = createImg("assets/x.png");
  x1.position(width / 2 + 258, 180, CENTER);
  x1.size(50, 50);
  x1.hide();

  x2 = createImg("assets/x.png");
  x2.position(width / 2 + 378, 180, CENTER);
  x2.size(50, 50);
  x2.hide();

  eyes = createImg("assets/eyes2.gif");
  eyes.position(width / 2 + 220, 160, CENTER);
  eyes.size(250, 79);
  eyes.hide();

  nose = createImg("assets/nose.gif");
  nose.position(width / 2 + 280, 200, CENTER);
  nose.size(120, 120);
  nose.hide();

  mouth = createImg("assets/mouth2.png");
  mouth.position(width / 2 + 265, 315, CENTER);
  mouth.size(150, 122);
  mouth.hide();

  eyes2 = createImg("assets/angryeyes.png");
  eyes2.position(width / 2 + 220, 160, CENTER);
  eyes2.size(250, 79);
  eyes2.hide();

  nose2 = createImg("assets/rednose.png");
  nose2.position(width / 2 + 280, 200, CENTER);
  nose2.size(120, 120);
  nose2.hide();

  mouth2 = createImg("assets/frown.png");
  mouth2.position(width / 2 + 265, 315, CENTER);
  mouth2.size(150, 122);
  mouth2.hide();


}

function draw() {
  image(capture, 80, 50, 480, 384);
  image(frame, 0, 0);
}

function start() {
  textQuestion.hide();
  button1.hide();
  button2.hide();

  textAgree = createP("Glad we agree. To start, line your eyes up with the X's.");
  textAgree.position(windowWidth / 4 + 20, 500);
  textAgree.id("text");

  buttonEyes = createButton("Okay, I'm ready.");
  buttonEyes.position(windowWidth / 4 + 20, 580);
  buttonEyes.id("button");
  buttonEyes.mousePressed(newEyes);

  x1.show();
  x2.show();

}

function newEyes() {

  ellipse(500, 500, 50, 50);
  eyes.show();

  textAgree.hide();
  buttonEyes.hide();
  x1.hide();
  x2.hide();

  textAgree = createP("Glad we agree. BAM! Here are your new eyes!!");
  textAgree.position(windowWidth / 4 + 20, 500);
  textAgree.id("text");

  buttonReady = createButton("Wow looks great! Do my nose next.");
  buttonReady.position(windowWidth / 4 + 20, 580);
  buttonReady.id("button");
  buttonReady.mousePressed(newNose);

}

function newNose() {
  nose.show();

  textAgree.hide();
  buttonReady.hide();

  textNose = createP("Sure thing! Check out your new and improved nose!!");
  textNose.position(windowWidth / 4 + 20, 500);
  textNose.id("text");

  buttonNose = createButton("OMG thanks!! What about my mouth?");
  buttonNose.position(windowWidth / 4 + 20, 580);
  buttonNose.id("button");
  buttonNose.mousePressed(newMouth);
}

function newMouth() {
  mouth.show();

  textNose.hide();
  buttonNose.hide()

  textMouth = createP("Of course. These lips are much better than what you have.");
  textMouth.position(windowWidth / 4 + 20, 500);
  textMouth.id("text");

  buttonMouth = createButton("I LOVE IT!!! Thank you!!");
  buttonMouth.position(windowWidth / 4 + 20, 580);
  buttonMouth.id("button");
  buttonMouth.mousePressed(like);

  buttonDislike = createButton("Actually...I don't think I like this.");
  buttonDislike.position(windowWidth / 4 + 280, 580);
  buttonDislike.id("button");
  buttonDislike.mousePressed(dislike);

}

function like() {
  glitter.show();

  textMouth.hide();
  buttonMouth.hide();
  buttonDislike.hide();
  //buttonNo2.hide();

  textGlitter = createP("You're welcome. :)");
  textGlitter.position(windowWidth / 4 + 20, 500);
  textGlitter.id("text");

  // buttonLike = createButton("Finally I'm beautiful! Save this portrait!");
  // buttonLike.position(windowWidth / 4 + 20, 580);
  // buttonLike.id("button");
  // buttonLike.mousePressed(savePortrait);
}

function dislike() {
  eyes2.show();
  nose2.show();
  mouth2.show();

  eyes.hide();
  nose.hide();
  mouth.hide();
  textMouth.hide();
  buttonMouth.hide();
  buttonDislike.hide();

  textDislike = createP("FINE. IS THIS BETTER?");
  textDislike.position(windowWidth / 4 + 20, 500);
  textDislike.id("text");

  buttonGoBack = createButton("Can we just go back to the beginning...?");
  buttonGoBack.position(windowWidth / 4 + 20, 580);
  buttonGoBack.id("button");
  buttonGoBack.mousePressed(goBack);
}

function goBack() {
  eyes.show();
  nose.show();
  mouth.show();

  eyes2.hide();
  nose2.hide();
  mouth2.hide();
  textDislike.hide();
  buttonGoBack.hide();

  textGoBack = createP("You mean like this?");
  textGoBack.position(windowWidth / 4 + 20, 500);
  textGoBack.id("text");

  buttonMouth = createButton("Yes! Thank you.");
  buttonMouth.position(windowWidth / 4 + 20, 580);
  buttonMouth.id("button");
  buttonMouth.mousePressed(like);

  buttonDislike = createButton("No, I just want to look like myself.");
  buttonDislike.position(windowWidth / 4 + 280, 580);
  buttonDislike.id("button");
  buttonDislike.mousePressed(no);
}

function no() {

  textGoBack.hide();
  buttonMouth.hide();
  buttonDislike.hide();

  textNo = createP("Are you sure?");
  textNo.position(windowWidth / 4 + 20, 500);
  textNo.id("text");

  buttonNo1 = createButton("On second thought, you're right.");
  buttonNo1.position(windowWidth / 4 + 20, 580);
  buttonNo1.id("button");
  buttonNo1.mousePressed(like2);

  buttonNo2 = createButton("Yeah I'm sure.");
  buttonNo2.position(windowWidth / 4 + 380, 580);
  buttonNo2.id("button");
  buttonNo2.mousePressed(no2);
}

function like2() {
  glitter.show();

  textNo.hide();
  buttonNo1.hide();
  buttonNo2.hide();

  textGlitter = createP("You're welcome. :)");
  textGlitter.position(windowWidth / 4 + 20, 500);
  textGlitter.id("text");

}

function no2() {
  eyes.hide();
  nose.hide();
  mouth.hide();
  buttonNo1.hide();
  buttonNo2.hide();

  textNo2 = createP("Okay. I hope you're happy.");
  textNo2.position(windowWidth / 4 + 20, 500);
  textNo2.id("text");

}

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: