amui1@andrew.cmu.edu – Page 3 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

amui1-LookingOutwards-02

For this Looking Outwards, I was inspired by this project called “Human After All,” created by a photographer, Jan Kriwol, and a digital artist, Markos Kay. This generative art piece showcased 3D renderings of virtual blood vessels with particle simulations. They stripped down the human body to just the essentials, and placed them in the context of everyday situations. This project aimed to battle social barriers, caused by race or gender, in various environmental contexts.

I really admire this project because of its creative collaboration of 2 mediums and because of the message the artists work to convey. I admire this project because it is completely new and not like anything I have seen before. Also, this combination of digital and real is extremely creative, and I aspire to create something one day that does the same. “Human After All” inspires me because the artists use such a creative way to demonstrate equality.

Link to full project here

amui1 – Project-02-Variable-Face

amui1-project2

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-02

var val = 0
var headW = 400
var headH = 371
var backR = 225
var backG = 225
var backB = 225

function setup() {
    createCanvas(600,600);
    backR = random(0,255);
    backG = random(0,255);
    backB = random(0,255);
    background(backR,backG,backB);
}

//when mouse is clicked, do these functions
function mouseClicked() {
  if (val <= 0) {
    //sad background
    backR = random(0,43);
    backG = random(151,255);
    backB = random(207,255);
    push(new sad);
    val += 1;
  } else{
    //angry background
    if (val == 1) {
      backR = random(188,255);
      backG = random(0,30);
      backB = random(0,55);
      push(new hungry);
      val += 1;
    } else{
      //happy background 
      backR = random(180,255);
      backG = random(190,255);
      backB = random(0,50);
      push(new happy);
      val = 0;
    }

  }
}

function sad() {
    headW = random(300,400);
    background(backR,backG,backB);
    //hair
    strokeWeight(0);
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    strokeWeight(3);
    arc(width/2,470,145,65, PI,0);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(208,226,50,45);
    ellipse(385,226,50,45);
    fill(249,214,159);
    ellipse(201,222,70,41);
    ellipse(395,222,70,41);
    //worrymark
    strokeWeight(2);
    arc(400,470,5,12,HALF_PI, 3*HALF_PI);
    arc(200,470,5,12,3*HALF_PI, HALF_PI);
    //eyebag
    fill(132,81,36);
    strokeWeight(0);
    ellipse(222,385,40,11);
    ellipse(380,385,40,11);
}

function hungry() {
    headW = random(350,400);
    background(backR,backG,backB);
    //hair
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    fill(132,81,36);
    ellipse(width/2,455,100,80);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(230,226,50,45);
    ellipse(375,226,50,45);
    fill(249,214,159);
    ellipse(240,220,67,39);
    ellipse(364,220,70,41);
    //angry lines
    strokeWeight(2);
    line(150,350,170,370);
    line(430,370,450,350);
    //banana
    fill(255,255,0);
    strokeWeight(0);
    beginShape();
    vertex(mouseX, mouseY);
    bezierVertex(mouseX + 50, mouseY - 20,
               mouseX + 50, mouseY + 55,
               mouseX, mouseY + 55);
    bezierVertex(mouseX + 20, mouseY + 60,
               mouseX + 30, mouseY + 5,
               mouseX, mouseY);
    endShape();
}

function happy() {
    headW = random(400,450);
    background(backR,backG,backB);
    //hair
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    strokeWeight(3);
    arc(width/2,440,145,65, 0, PI);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(188,239,50,35);
    ellipse(410,239,50,35);
    fill(249,214,159);
    ellipse(193,245,50,30);
    ellipse(405,245,50,28);
    //laugh
    strokeWeight(2);
    arc(400,470,5,12,HALF_PI, 3*HALF_PI);
    arc(200,470,5,12,3*HALF_PI, HALF_PI);
}

I chose to do a sequence of emotions of a monkey: sad, then hungry (with a banana toying him), then happy. I started out sketching my monkey faces using Illustrator. Starting with this really streamlined my process when coding. I had a lot of fun with this project and am happy with my result.

amui1 – Project-01-Face

amui1-project01-face

//Allison mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-01
function setup() {
    createCanvas(600,600);
    background(255);
}

function draw() {
    strokeWeight(0);
    fill(255,240,245);
    rect(0,0,300,600);
    fill(255,228,225)
    rect(300,0,300,600);
    //head
    //hair
    fill(0);
    arc(300,292,380,380,PI, HALF_PI*3);
    fill(0);
    rect(110,292,250,250);
    arc(300,292,350,350,HALF_PI*3, 0);
    rect(350,292,125,250);
    //neck
    strokeWeight(1);
    fill(247,193,155);
    rect(260,420,75,80,20);
    //ear
    fill(247,193,155);
    ellipse(170,300,40,40);
    ellipse(430,300,40,40);
    fill(255,240,245);
    ellipse(170,300,20,20);
    ellipse(430,300,20,20);
    //face
    fill(247,193,155);
    ellipse(300,300,270,300);
    fill(0);
    arc(173,150,250,200,0,HALF_PI);
    //eyes
    line(200,265,206,268);
    line(196,272,201,274);
    line(193,280,200,283);
    line(395,270,402,267);
    line(398,278,405,275);
    line(401,285,408,283);
    fill(255);
    strokeWeight(3);
    arc(240,290.5,80,77,PI, TWO_PI);
    arc(360,290.5,80,77,PI, TWO_PI);
    fill(63,42,20);
    ellipse(240,272.5,40,33);
    ellipse(360,272.5,40,33);
    fill(0);
    ellipse(240,272,20,20);
    ellipse(360,272,20,20);
    fill(255);
    strokeWeight(0);
    ellipse(250,265,10,10);
    ellipse(365,265,10,10);
    //nose
    strokeWeight(2);
    arc(310,325,2,25,3*HALF_PI, HALF_PI);
    noFill();
    arc(300,350,20,10,TWO_PI, PI);
    //mouth
    fill(255);
    strokeWeight(0);
    arc(300,380,100,65,TWO_PI, PI);
    //laughmark
    strokeWeight(2);
    line(200,240,260,235);
    line(330,235,390,240);
    noFill();
    strokeWeight(1);
    arc(215,395,5,12,3*HALF_PI, HALF_PI);
    arc(385,395,5,12,HALF_PI, 3*HALF_PI);
    //shirt
    fill(135,206,260);
    arc(300,630,380,300,PI, TWO_PI)
}

My portrait is made of rectangles, arcs, circles, and curves. My process consisted of a lot of trial and error and looking for help in the p5js reference directory. I first started off with the head shape and then built off of that. I am happy with my product. However, in the future, I would like to learn how to add more details to my face to improve my portrait further.

amui1 – Looking Outwards-01

This short film, “The Wishgranter,” was created by 3 artists: Kal Athannassov, John McDonald, Echo Wu. They are all part of the Ringling College of Art and Design.

“The Wishgranter” is ultimately a love story created by an apathetic creature that lives under a fountain.

What I love about animated shorts is that it communicates a strong message through an entertaining and creative medium. I admire that a video of 5 minutes entails a long and thoroughly thought out development process, including thinking on script, characters, setting, music, action, and sounds. What I admire about “The Wishgranter” in particular is the emotion the artists communicate through their characters. For example, it was very clear that the wishgranter was uninterested and unmotivated with his job, but by the end of the short, you could see that the wishgranter became motivated again and invested in delivering love to these two strangers.

A few more videos that inspired me are: “Scarlett” and “Sweet Cocoon” .