Project-02-Variable-Face – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

For this project I modeled the face from the aliens in Toy Story. I think they have relatively simple features that were easier to abstract. I found a cartoon collector toy version of them which served as a much better basis for the actual shapes.
sketch Download

function setup() {
    createCanvas(600, 600);
    background(220);
    noLoop();
}

function draw() {
    var antennas = random(3);
    var eyes = random(3);
    var mouth = random(4);
    var background = random(6);

    if (background < 1) {
      var backgroundColor = "#BF2D22"
    } else if (background > 1 & background < 2) {
      var backgroundColor = "#730B03"
    } else if (background > 2 && background < 3) {
      var backgroundColor = "#40211F"
    } else if (background > 3 && background < 4) {
      var backgroundColor = "#CA6861"
    } else if (background > 4 && background < 5) {
      var backgroundColor = "#400F0B"
    } else {
      var backgroundColor = "#8C2119"
    }
//background
    fill(backgroundColor);
    noStroke();
    rect(0,0,width,height);

//head
    fill(179,209,25);           //green
    rect(75,175,450,350,90);

  //ears
    beginShape();
    curveVertex(75,275);
    curveVertex(75,275);
    curveVertex(55,250);
    curveVertex(35,230);
    curveVertex(28,233);
    curveVertex(25,240);
    curveVertex(25,240);
    curveVertex(30,350);
    curveVertex(30,350);
    curveVertex(28,360);
    curveVertex(31,373);
    curveVertex(38,380);
    curveVertex(55,375);
    curveVertex(65,370);
    curveVertex(75,365);
    curveVertex(75,365);
    endShape();

    beginShape();
    curveVertex(600-75,275);
    curveVertex(600-75,275);
    curveVertex(600-55,250);
    curveVertex(600-35,230);
    curveVertex(600-28,233);
    curveVertex(600-25,240);
    curveVertex(600-25,240);
    curveVertex(600-30,350);
    curveVertex(600-30,350);
    curveVertex(600-28,360);
    curveVertex(600-31,373);
    curveVertex(600-38,380);
    curveVertex(600-55,375);
    curveVertex(600-65,370);
    curveVertex(600-75,365);
    curveVertex(600-75,365);
    endShape();

    stroke(0,0,0,60);       //transparent black
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(75,285);
    curveVertex(75,285);
    curveVertex(35,240);
    curveVertex(45,360);
    curveVertex(45,360);
    endShape();

    beginShape();
    curveVertex(600-75,285);
    curveVertex(600-75,285);
    curveVertex(600-35,240);
    curveVertex(600-45,360);
    curveVertex(600-45,360);
    endShape();

//collar
    stroke(126,77,152);       //purple
    strokeWeight(40);
    line(155,530,455,530);

//shirt
    noStroke();
    fill(6,149,209);          //blue
    beginShape();
    curveVertex(0,599);
    curveVertex(0,599);
    curveVertex(25,555);
    curveVertex(155,530);
    curveVertex(155,530);
    curveVertex(455,530);
    curveVertex(455,530);
    curveVertex(574,555);
    curveVertex(599,599);
    curveVertex(599,599);
    endShape();

//antennas
    if (antennas < 1) {
      fill(179,209,25);
      beginShape();
      curveVertex(270,175);
      curveVertex(270,175);
      curveVertex(285,125);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(315,125);
      curveVertex(330,175);
      curveVertex(330,175);
      endShape();

      circle(300,75,60);
    } else if (antennas > 1 & antennas < 2){
      fill(179,209,25);
      beginShape();
      curveVertex(270-50,175);
      curveVertex(270-50,175);
      curveVertex(285-50,125);
      curveVertex(270-50,75);
      curveVertex(270-50,75);
      curveVertex(270-50,75);
      curveVertex(330-50,75);
      curveVertex(330-50,75);
      curveVertex(330-50,75);
      curveVertex(315-50,125);
      curveVertex(330-50,175);
      curveVertex(330-50,175);
      endShape();

      beginShape();
      curveVertex(270+50,175);
      curveVertex(270+50,175);
      curveVertex(285+50,125);
      curveVertex(270+50,75);
      curveVertex(270+50,75);
      curveVertex(270+50,75);
      curveVertex(330+50,75);
      curveVertex(330+50,75);
      curveVertex(330+50,75);
      curveVertex(315+50,125);
      curveVertex(330+50,175);
      curveVertex(330+50,175);
      endShape();

      circle(300+50,75,60);

      circle(300-50,75,60);
    } else {
      fill(179,209,25);
      beginShape();
      curveVertex(270,175);
      curveVertex(270,175);
      curveVertex(285,125);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(315,125);
      curveVertex(330,175);
      curveVertex(330,175);
      endShape();

      beginShape();
      curveVertex(270+80,175);
      curveVertex(270+80,175);
      curveVertex(285+80,125);
      curveVertex(270+80,75);
      curveVertex(270+80,75);
      curveVertex(270+80,75);
      curveVertex(330+80,75);
      curveVertex(330+80,75);
      curveVertex(330+80,75);
      curveVertex(315+80,125);
      curveVertex(330+80,175);
      curveVertex(330+80,175);
      endShape();

      beginShape();
      curveVertex(270-80,175);
      curveVertex(270-80,175);
      curveVertex(285-80,125);
      curveVertex(270-80,75);
      curveVertex(270-80,75);
      curveVertex(270-80,75);
      curveVertex(330-80,75);
      curveVertex(330-80,75);
      curveVertex(330-80,75);
      curveVertex(315-80,125);
      curveVertex(330-80,175);
      curveVertex(330-80,175);
      endShape();

      circle(300,75,60);

      circle(300+80,75,60);

      circle(300-80,75,60);
    }

//eyes
    if (eyes < 1) {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300,275,90);
      fill(0);
      circle(300,275,40);
    } else if (eyes > 1 & eyes < 2) {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300-60,275,90);
      fill(0);
      circle(300-60,275,40);

      fill(255,255,255);
      circle(300+60,275,90);
      fill(0);
      circle(300+60,275,40);
    } else {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300,275,90);
      fill(0);
      circle(300,275,40);

      fill(255,255,255);
      circle(300+110,275,90);
      fill(0);
      circle(300+110,275,40);

      fill(255,255,255);
      circle(300-110,275,90);
      fill(0);
      circle(300-110,275,40);
    }

//smile
    var mouthH = random(400,450);
    var mouthW = random(100,150);

    noFill();
    stroke(0);
    strokeWeight(10);

    beginShape();
    curveVertex((width/2)+mouthW,400);
    curveVertex((width/2)+mouthW,400);
    curveVertex(300,mouthH);
    curveVertex((width/2)-mouthW,400);
    curveVertex((width/2)-mouthW,400);
    endShape();
  }

function mouseClicked() {
    loop();
    noLoop();
    clear();
    background(220);
    //allowing user to click to loop another random face
  }
Leave a Reply Cancel reply
