Author: aboyle@andrew.cmu.edu

aboyle-Sect D-Project 2-Variable Face

aboyle Var Face

//Anna Boyle
//aboyle@andrew.cmu.edu
//Section D
//Project 2


//variables
    var eyeWidth =20
    var eyeHeight=20
    var faceWidth=100
    var faceHeight=100
    var pupil=170
    var noseWidth=5
    var noseHeight=130
    var nosePosition=80
    var browthickness=2
    var brow=80
    var hairLength=150
    var mouth;

function setup() {
    createCanvas(480, 640);
}


function draw() {
    background(157,242,171);
    strokeWeight(0);
//hair
    fill(71,44,21);
    ellipse(195,80,faceWidth+20,faceHeight-20);
    rect(115,110,160,hairLength);
    //black rectangle gives hair more depth
    fill(0);
    rect(130,110,130,hairLength);
//shirt
    fill(0,204,204);
    ellipse(195,230,150,50);
    rect(120,230,140,190);
    fill(6,142,142);
    rect(145,270,7,150);
//pants
    fill(19,38,112);
    rect(140,420,120,220);
    fill(0)
    rect(195,450,7,220)
//neck
    fill(142,88,51);
    rect(175,150,40,70);
//button
    fill(114,4,4);
    ellipse(400,330,100);
    fill(255,0,0);
    //gives the effect of button being pushed
    if (mouseIsPressed)
      ellipse(400,330,100);
    else
      ellipse(400,320,100);
//head
    fill(198,147,111);
    ellipse(195, 120,faceWidth,faceHeight);
//hands
    rect(120,420,35,40);
    //slight change makes button movement look more natural
    if (mouseIsPressed)
      rect(385,304,33,38);
    else
      rect(385,304,35,40);
//ears
    strokeWeight(0);
    ellipse(190-faceWidth/2,120,30);
    ellipse(200+faceWidth/2, 120, 30);
//nose
    fill(142,88,51);
    triangle(190,nosePosition,190-noseWidth,noseHeight,190+noseWidth,noseHeight);
//eyes
    strokeWeight(2);
    fill(256);
    ellipse(210,95,eyeWidth,eyeHeight);
    ellipse(170,95,eyeWidth,eyeHeight);
//pupils
    fill(0);
    ellipse(pupil,95, eyeWidth/2, eyeHeight/2);
    ellipse(pupil+40, 95, eyeWidth/2, eyeHeight/2);
//mouth
    noFill()
    //switches the mouth between smile and straight
    if (mouth<=0.5)
      curve(200,50,170,160,215,160,200,50);
    else
      line(170,160,215,160);
//earrings
    fill(236,200,21);
    strokeWeight(0);
    rect(183-faceWidth/2, 127, 10,10);
    rect(197+faceWidth/2,127,10,10);
//eyebrows
    strokeWeight(browthickness);
    line(155, 75, 185, brow);
    line(195,brow,225,75);
//arm
    fill(0,204,204);
    strokeWeight(0);
    rect(300,310,85,30);
    translate(width/5, height/5);
    rotate(PI/3.0);
    rect(165,-100,120,30);
}


function mousePressed(){
  faceWidth=random(130,170);
  faceHeight=random(150,190);
  eyeWidth=random(10,37);
  eyeHeight=random(15,35);
  pupil=random(165,175);
  noseWidth=random(5,10);
  noseHeight=random(130,150);
  nosePosition=random(95,120);
  browthickness=random(2,9);
  brow=random(60,92);
  hairLength=random(75,230);
  mouth=random(0,1)
}

I thought this was a cool assignment! I had a lot of fun playing with the variables, even though I couldn’t add as many details as last time. For some reason when I refresh the page the face looks pretty weird, but once I start clicking the mouse it looks like how I want it to.

I also decided to give my subject apparent agency over her own face changes by making it look like she’s pressing a button. Though rather simple, I hope it’ll help me remember the difference between mousePressed and mouseIsPressed in the future.

In retrospect, I wish I had done more with curves and more complicated shapes, but overall I’m okay with how it turned out.

aboyle-Looking Outwards-01

“Dream Garden” is a phone project that invites people to decorate an urban space by submitting 7-word poems, which the project refers to as dreams. Participants can then use Layar, a free augmented reality app, to see a floating garden of dreams in the space around them.

Above: Video describing project

I think this project is super cool because it combines poetry and computer science, a combination that is relatively rare but definitely interesting. I admire both the interdisciplinary nature of the project and the inclusivity of it. Anyone can submit a dream and have it displayed, so the garden really represents the people who live near the urban space.

The artists behind this project are Matt Roberts, Terri Witek, and Michael Branton. Roberts is a new media artist, Witek is an author and creative writing teacher, and Branton helped design and found the Computer Science major at Stetson and still works there as a Computer science teacher. Their bios and a description of the project can be found at http://inthedreamgarden.com/.

I hope that this project can inspire others to use augmented reality in creative ways, as well as consider the place of poetry and other writing in technology.

aboyle-Project01-Face

Anna-Face

//Anna Boyle
//Section D
//aboyle@andrew.cmu.edu
//Assignment-01

function setup() {
    createCanvas(350, 350);
    background(166,242,252);

    strokeWeight(0)

//hair color-back
    fill(81,58,30)
    ellipse(230,220,95,100)
    fill(81,58,30)
    ellipse(120,90,120)
    ellipse(115,150,110)
    ellipse(110,200,110)

//clothing color
    fill(38,112,51)
    ellipse(160,275,180,120)

//skin color
    fill(241,197,137)
    ellipse(149,100,120,120)
    ellipse(149,150,115,115)
    rect(140,190,45,50)

//blush
    fill(244,156,103)
    rect(94,130,70,20,0,20,20,20)

//hair color-front
    fill(81,58,30)
    ellipse(170, 55, 100, 60)
    ellipse(210,100,95,100)
    ellipse(220,180,95,100)

    strokeWeight(9)
    noFill()

//face
    curve(160, 20, 150, 207, 95, 138, 300, 0);
    curve(100, 100, 120, 50, 95, 130, 300, 290);

//eyes
    line(110,112,110,128)
    line(135,112,135,128)

//hair lines
    curve(350,280,137,34,68,123,350,350)
    curve(150,150,68,123,65,170,150,150)
    curve(200,200,65,170,77,245,200,200)
    curve(200,100,137,34,220,50,300,300)
    curve(0,100,220,50,245,135,50,200)
    curve(150,125,245,135,270,190,210,250)
    curve(100,100,270,190,253,263,200,125)
    curve(280,0,120,50,175,80,200,0)
    curve(350,0,168,83,200,145,220,0)

//clothing lines
    stroke(22,65,29)
    line(102, 280, 102, 315)
    line(200, 280, 200, 323)
    curve(100,100,125,230,195,227,120,120)

//hair line
    stroke(0)
    curve(350,50,185,149,240,220,630,0)

//face
    strokeWeight(5)
    curve(200,140,120,140,120,150,200,150)
    curve(100,100,115,170,135,170,120,120)
    curve(100,130,102,105,120,100,100,140)
    curve(150,130,129,100,147,105,120,140)
}

I thought this assignment was pretty cool! The project description included a picture of Tintin, which inspired me to use bold, black lines in my drawing. It was a lot of trial and error for me, but I enjoyed the process a lot. I had fun with the curve function, as you can probably tell. I also learned very quickly that it helps to separate your code and comment what each section is for.

I had one little hiccup with noStroke() affecting later lines, but I changed it to strokeWeight(0) and that worked out a lot better. I also meant to have a bigger canvas, but by the time I realized my canvas was set to (350, 350) it would’ve been a ludicrous amount of extra work to go back and adjust everything accordingly. Overall I’m pretty happy with how it turned out.