Author: Elizabeth

elizabew-Project-02-Variable-Face

sketch

// Elizabeth Wang
// elizabew@andrew.cmu.edu
// Project - 02: variable faces; face variables

var eyeSize = 40;
var whiteeyes = 55;
var faceWidth = 250;
var faceHeight = 250;
var cheeks = 50;
var x = 300;
var y = 300;
var mouth = 80;
var ears = .2;

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(89,117,133);
    noStroke();

//hair
fill (0);
  rect(.5*x, .38*y, x, 1.5*y, 90);


//ears
fill (255,234,201);
  ellipse( .6*x, y, x*ears, x*ears);
  ellipse( 1.40*x, y, x*ears, x*ears);

//neck
fill (214,197,169);
  rect(.9*x, 1.2*y, .2*x, .5*y, 90);

//head
fill (255,234,201);
  ellipse( x, y, faceWidth,  faceHeight);


//body
fill (250);
  rect(.55*x, 1.5*y, .9*x, 2*y, 120);

//bangs
fill(0);
  rect(.6*x, .45*y, .65*x, .4*y, 30 ,30, 30, 30);

//mouth
fill (0);
  rect(.86*x, 1.17*y, mouth, .09*mouth);

//cheeks
fill (237,106,90);
noStroke();
  ellipse( .7*x, 1.15*y, cheeks, cheeks);
  ellipse( 1.3*x, 1.15*y, cheeks, cheeks);

//eyes
fill(250);
  ellipse( .81*x, y, whiteeyes, whiteeyes)
  ellipse( 1.2*x, y, whiteeyes, whiteeyes);
fill (0);
  ellipse( .81*x, y, eyeSize, eyeSize);
  ellipse( 1.2*x, y, eyeSize, eyeSize);

//nose
fill (255,123,83);
  triangle(x, y, 1.05*x, 1.1*y, .95*x, 1.1*y);


}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(200, 250);
    faceHeight = random(200, 250);
    eyeSize = random(20, 40);
    whiteeyes = random (20, 60);
    x = random(250, 300);
    y = random(250, 350);
    cheeks = random(20, 60);
    mouth = random (40, 90);
}

Reflection

Initially, when I began this project, I did not exactly know where to start, so I decided to base the face off of my self portrait—with minor changes to the overall design.

(portrait from Project 01)

While I do enjoy the overall result of my program (the outputted faces look very funny and show a lot of personality despite a consistently flat mouth), I do wish I put in more time to make a simplified version of my program using functions, instead of ‘strange’ numbers that multiply with other ‘strange’ numbers. However I did learn a lot from this, and I can say that the next time a approach a program similar to this, I know what steps I need to take before jumping into writing the code instead of diving in headfirst.

elizabew-LookingOutwards-02-SectionE


Tentasho, created by Austrian artist Lia, is an installation that can be interactive using a touch screen. However, it can also be autonomous by exploring its’ parameter space.What I also find clever is how the installation will move on its own if there is no one interacting with it, most likely peaking the interest of those who might walk by it, and hopefully welcoming people to interact with it.

What I admire about this project and the work it produces is how every piece that comes out is incredibly unique and beautiful—invoking different visual feelings from the viewers. Some come out looking delicate, almost floral, whereas some come out looking dark and menacing.

While the installation does achieve the minimalistic approach it strives for, I personally would like to have seen what the outcomes would look like if the program integrated brighter colors into it. However, it does inspire me to look into unique programs and algorithms that would draw in an audience with both an interactive aspect and a unique output.

The algorithm used to generate this installation was made with a minimalistic approach—using only a single algorithm.

elizabew – looking outwards – 01 – SectionE

This interactive installation and multi-sensory experience, New Spring, is a collaboration between architect Azusa Murakami and artist Alexander Groves. The video showcases the installation’s beautiful design and artistic standing by using amazing filmography to demonstrate the way the installation works and how it is interacted with.

“Inspired by the famous cherry blossom festival in Japan, the installation is designed to create a special moment that brings people together. A fleeting shared experience that evokes a sense of the changing seasons.” — Studio Swine

What I love about this installation is the feeling of “out of this world”, almost like a fantasy. It is both incredibly pleasing to look and practically pulls you in to try and experience it. The mist-filled bubbles look both heavy and delicate at the same time (and can be held using special gloves according to the website).

I personally feel that if it was able to capture all five senses, it would be an even stronger piece (perhaps if the mist of each bubble smelled different and the bubbles themselves would taste different).

For further reading on this installation: New Spring

The overall design of this installation is inspiring (while only using minimal resources!), and the video itself is alluring as well. I hope to create designs that can capture the attention of both the visual and physical senses as well one day.

elizabew-Project-01-Face

selfportrait

function setup(){
  createCanvas(400, 500); //width by height

}

function draw (){
  background(91,192,235); //RGB, 255 is black, 0 is white, 0,0,0,0 is transparent;

  //ellipse(200, 250, 200, 250); //x, y is position w, h is how large;

  noStroke(); //gets rid of default black line for the filled in shape
//hair
fill(49,50,66);
  rect(50, 140, 300, 500, 120, 120, 120, 120);
//neck
fill(223,192,155);
  rect(170, 400, 63, 105);
//ears
fill(246,226,198);
  ellipse(100, 320, 50, 55);
  ellipse(300, 320, 50, 55);
//head
fill(246,226,198); //filling rectangle color
  rect(100, 200, 200, 220, 60); //rect(upperleft, lowerright, radius of rounded corners)
fill(246,226,198);
  rect(200, 200, 100, 220, 0, 60, 60, 0);
//eyes
fill(255);
//arc(150, 300, 30, 30, 300, PI+QUARTER_PI, PIE); //x,y,w,h,angle to start, angle to stop
  ellipse(155, 300, 40, 40);
  ellipse(245, 300, 40, 40);
//eyeshine
fill(71,67,80);
  ellipse(160, 300, 30, 30);
  ellipse(250, 300, 30, 30);
//eyebrows
fill(71,67,80)
// Draw a rectangle with rounded corners having the following radii:
// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
rect(120, 260, 55, 10, 80, 80, 80, 0);
rect(220, 260, 55, 10, 80, 80, 0, 80);
//bangs
fill(49,50,66);
rect(180, 180, 140, 90, 0, 180, 0, 180);
//cheeks
fill(244,96,54); //228,255,26
  ellipse(125, 350, 40, 40);
fill (244,96,54); //orange cheeks
  ellipse(275, 350, 40, 40);
    if (mouseX < (width / 2)) {
      fill (228,255,26); //yellow cheeks
      ellipse(125, 350, 40, 40);
      ellipse(275, 350, 40, 40);
    }
  //background(230, 230, 0); // Yellow
    //if (mouseX < (width / 2)) {
      //background(0, 0, 200); // Blue
//nose
fill(244,96,54);
  triangle(200, 300, 215, 350, 185, 350);
    if (mouseX < (width / 2)) {
      fill(0,114,255);
      triangle(200, 300, 215, 350, 185, 350);
    }
//mouth
fill(49,50,66);
  rect(165, 375, 70, 7);
//body
fill(253,231,76);
  rect(90, 445, 220, 95, 160, 160, 160, 160);
//hairshine
//fill(78,74,88);
  //ellipse(245, 225, 50, 50)

}

Reflection

Before I decided to take this class, the only class I ever took was a very basic C++ class back in high school. I still have limited knowledge of programming (since I forgot most of what I did learn), but I was eager about an opportunity to combine both programming and creativity; the latter of which I resonate with more often.

Before jumping right into making my portrait, I decided to sketch out my ideas on paper, using only basic shapes that I would be able to replicate using javascript.

This assignment was both frustrating and satisfying for me. Getting the hang of the graphing elements took longer than I would have liked, but I did enjoy the feeling of every new form appearing on the screen. It was like putting together a puzzle. Overall, it was a fun project that introduced me to the creative side of programming that I never really understood before.