Category: Section D

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-02

function setup() {
    createCanvas(640, 480);
    background(126, 204, 213);
    angleMode(DEGREES);
    noStroke();
}

//variables for the color of the fish
var r = 222
var g = 157
var b = 207
//variables for tail and eye size
var tail1 = 60
var tail2 = 130
var eyeB = 20 //for black part of eye
var eyeW1 = 8 //for large white part of eye
var eyeW2 = 5 //for small white part of eye


function draw() {
    fill(170, 220, 234);
//bubbles
    ellipse(480, 20, 40, 40);
    ellipse(450, 100, 50, 50);
    ellipse(480, 165, 30, 30);
    ellipse(440, 200, 10, 10);
//fish body
    fill(r, g ,b);
    ellipse(width/2, height/2, 160, 120);
//fish black eye
    fill(0);
    ellipse(380, 240, eyeB, eyeB);
//fish white eye
    fill(255);
    ellipse(377, 235, eyeW1, eyeW1); // large
    ellipse(385, 245, eyeW2, eyeW2); //small
//mouth
    fill(r, g, b);
    ellipse(403, 238, 12, 12); //top
    ellipse(403, 249, 12, 12); //bottom
//fish tails
    rotate(-45);
    translate(-210, -40);
    ellipse(width/3, 320, tail1, tail2); //top
    rotate(90);
    translate(170, -400);
    ellipse(width/3, 250, tail1, tail2); //bottom
}

function mousePressed() {
//when the mouse is pressed, the color changes
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
//when mouse is pressed, tail and eye size changes
    tail1 = random(35, 125);
    tail2 = random(90, 175);
    eyeB = random(10, 35);
    eyeW1 = random(3, 20);
    eyeW2 = random(1, 15);
    clear();
    background(126, 204, 213);
}

sketch

For this project, the first thing that came to mind was a fish. I knew I wanted the color, eyes, and tail size to change, but the difficult part was getting the right proportions and the right angles. The initial shapes were pretty simple, because I figured experimenting with curves and rotate at the same time would be a little too complicated for me right now. I didn’t do any initial sketches, since the fish was only going to be a couple of ellipses. The image of the fish kept overlapping each other instead of replacing when I clicked my mouse, so I had to use the clear function to fix the problem; however, after THAT a chunk of the background was getting cleared too, so I filled in the background again at the very end to make it the way I wanted it to appear. I’m not sure if there was any other (better?) way to fix that problem, but this way seemed to work. All in all, I’m pretty proud of the final product!

face.js

/*Ryu Kondrup
rkondrup@andrew.cmu.edu
Section D
project-02*/
//feature variables

var eyeHeight = 30;
var eyeWidth = 15;
var noseyLiars = 50;
var mouthAgape = 30;
var hatHeight = 120;
var rightShadow = 15;
var downShadow = 10;
var mouthWidth = 30;
var r, g, b;

function setup() {
    createCanvas(640, 480);
    r = random(150, 255);
    g = random(150, 255);
    b = random(150, 255);
  }

function draw() {
  background(26, 83, 92);
  //colors
    var darkDarkBlue = color(22, 74, 82);
    var darkBlue = color(26, 83, 92);
    var blue = color(78, 205, 196);
    var white = color(248, 255, 247);
    var red = color(255, 107, 107);
    var yellow = color(255, 231, 109);



noStroke();


//shirt SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 390+downShadow, 150, 200, 75);

//collar SHADOW
fill(darkDarkBlue);
ellipse(150+rightShadow, 320+downShadow, 160, 50);

//hat top SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 145+downShadow, 120, hatHeight, 60);

//brim of hat SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 190+downShadow, 150, 30, 15);

//head SHADOW
fill(darkDarkBlue);
ellipse(150+rightShadow, 250+downShadow, 150, 150);

//hat wrap SHADOW
fill(darkDarkBlue);
rect(150+rightShadow, 160+downShadow, 120, 30);

//noooose SHADOW
fill(darkDarkBlue);
rectMode(CORNER);
rect(190+rightShadow, 230+downShadow, noseyLiars, 30, 15);



//shirt
fill(yellow);
rectMode(CENTER);
rect(150, 390, 150, 200, 75);

//collar
fill(white);
ellipse(150, 320, 160, 50);

//hat top
fill(yellow);
rectMode(CENTER);
rect(150, 145, 120, hatHeight, 60);

//head
fill(blue);
ellipse(150, 250, 150, 150);

//eyeball
fill(white);
ellipse(140, 240, eyeWidth, eyeHeight);

//brim of hat
fill(yellow);
rectMode(CENTER);
rect(150, 190, 150, 30, 15);

//hat wrap
fill(blue);
rect(150, 160, 120, 30);

//bow CENTER
fill(blue);
ellipse(160, 355, 40);
//bow right
ellipse(195, 355, 40, 60);
//bow right
ellipse(125, 355, 40, 60);

//mouth
fill(red);
rectMode(CORNER);
rect(170, 270, 30, mouthAgape, 15);

//noooose
fill(r, g, b);
rectMode(CORNER);
rect(190, 230, noseyLiars, 30, 15);





}

function mousePressed() {
    eyeHeight = random(30, 70);
    eyeWidth = random(15, 30);
    noseyLiars = random(50, 500);
    mouthAgape = random(30,90);
    hatHeight = random(120, 300);
    r = random(200, 255);
    g = random(100, 255);
    b = random(100, 255);

}

Creating this interactive image was lots of fun.  I wanted to have a concept that made sense with the aim of the assignment, so I settled on a wooden boy as a subject. I also wanted to explore how facial expressions change with different sized facial features. I would like to further explore how features can be changed in ways other than through clicking that can add more depth and complexity to the image.

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.

creyes1 Project-02 Variable Faces

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-02 Variable Faces

var backgroundR = 255;
var backgroundG = 250;
var backgroundB = 221;
var modelNo = "24601";
var antennaHeight = 50;
var antennaWidth = 10;
var antennaColorR = 204;
var antennaColorG = 86;
var antennaColorB = 34;
var bodyWidth = 100;
var headWidth = 200;
var headHeight = 100;
var earWidth = 30
var earHeight = 50
var eyeWidth = 30;
var eyeHeight = 30;
var mouthWidth = headWidth*.75;


function setup() {

    createCanvas(480, 640);
    rectMode(CENTER);
    noStroke();

}

function draw() {

    background(backgroundR, backgroundG, backgroundB);

    //Creates a line of text with a randomized model number
    fill(119, 124, 130);
    textFont("Courier New", 16);
    textStyle(BOLD);
    text("Model No. " + modelNo, 25, 31);

    fill(220);

    //Antenna - draws a rectangle relative to head at a random length
    var antennaTop = height/2 - headHeight;
    var antennaHeight = headHeight*.75;
    push();
    rectMode(CORNER);
    rect(width/2 - antennaWidth/2, height/2 - headHeight,
         antennaWidth, antennaHeight);

    //Antenna Light - draws a circle on top of the antenna,
    //                with a randomly selected fill color
    fill(antennaColorR, antennaColorG, antennaColorB);
    ellipse(width/2, height/2 - headHeight, 50, 50);
    pop();

    fill(100, 104, 109); //Darker gray

    //Body - draws two overlapping rounded rectangles
    //       at a random size relative to the head
    push();
    rectMode(CORNER);
    rect(width/2 - bodyWidth/2, height/2 + headHeight*.75,
         bodyWidth, height/2, 20, 20, 20, 20);

    fill(119, 124, 130); //Lighter gray
    rect(width/2 - bodyWidth/2, height/2 + headHeight*.75,
         bodyWidth*.9, height/2, 20, 20, 20, 20);
    pop();

    //Head - draws two overlapping rounded rectangles at a random size
    fill(100, 104, 109);
    rect(width/2, height/2, headWidth, headHeight, 10, 10, 10, 10);

    push();
    rectMode(CORNER);
    fill(119, 124, 130);
    rect(width/2 - headWidth/2, height/2 - headHeight/2,
         headWidth*.95, headHeight, 10, 10, 10, 10);
    pop();

    //Ears - draws two rounded rectangles at a random size,
    //       relative to head
    var earLX = width/2 - headWidth*.65;
    var earRX = width/2 + headWidth*.65;
    fill(119, 124, 130);
    rect(earLX, height/2, earWidth, earHeight, 10, 10, 10, 10);
    fill(100, 104, 109);
    rect(earRX, height/2, earWidth, earHeight, 10, 10, 10, 10);

    //Eyes - draws two ellipses at a random size, position relative to head
    var eyeLX = width/2 - headWidth/4;
    var eyeRX = width/2 + headWidth/4;
    var eyeY = height/2 - headHeight/4;
    fill(240);
    ellipse(eyeLX, eyeY, eyeWidth, eyeHeight);
    ellipse(eyeRX, eyeY, eyeWidth, eyeHeight);

    //Mouth - draws a rounded rectangle at a random size,
    //        position relative to head
    var mouthY = height/2 + headHeight/4;
    var mouthHeight = headHeight*.15
    rect(width/2, mouthY, mouthWidth, mouthHeight, 20, 20, 20, 20);

}

//Generates a random string of 6 numbers to create a model number for each robot
function makeid() {

    var modelNo = "";
    var possible = "0123456789";

    for (var i = 0; i < 5; i++)
        modelNo += possible.charAt(Math.floor(Math.random() * possible.length));

    return modelNo;
//Credit: https://stackoverflow.com/a/1349426 - user csharptest.net

}

function mousePressed() {

    //Selects a random background color within certain parameters on mouse-click
    backgroundR = random(221, 255);
    backgroundG = random(221, 255);
    backgroundB = random(221, 255);

    modelNo = makeid(); //Creates a new model number

    antennaHeight = random(headHeight/2, headHeight*1.5);

    //Antenna Light Colors, generates a random color on mouse-click
    antennaColorR = random(0, 256);
    antennaColorG = random(0, 256);
    antennaColorB = random(0, 256);

    bodyWidth = random(headWidth/3, headWidth*2);

    headWidth = random(150, 250);
    headHeight = random(70, 200);

    earWidth = random(headWidth*.1, headWidth/4);
    earHeight = random(headHeight/4, headHeight*.75);

    eyeWidth = random(25, 60);
    eyeHeight = random(25, 60);

    mouthWidth = random(headWidth/4, headWidth*.75);

}

My previous project involved a lot of pixel-perfect arc alignments, so I wanted to just work with simple shapes this time around to really focus on the code. A lot of the process was trial-and-error, basing the rest of the body around the robot’s head. Additionally, most of the randomization is set to be a certain proportion relative to the head so that the randomized elements don’t get too out of control and start forming a gray blob instead of communicating a robot.

Chickoff Seagull

//Cora Hickoff
//Section D 9:30AM-10:20AM
//chickoff@andrew.cmu.edu
//Project-02

var faceWidth = 350;
var faceHeight = 300;
var eyeSize = 20;
var pupilSize = 9;
var beakSize = 50;
var x = 170;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(130,180,200);

    //face
    strokeWeight(0);
    fill(235,235,235);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //body
    strokeWeight(0);
    fill(235,235,235);
    ellipse(340,430,270,250);

    //beak
    strokeWeight(0);
    fill(255,220,25);
    rect(width / 10, height / 2, x, beakSize);

    //feather 1
    strokeWeight(0);
    fill(220,220,220);
    ellipse(370,440,20,100);

    //feather 2
    strokeWeight(0);
    fill(200,200,200);
    ellipse(380,440,20,120);

    //feather 3
    strokeWeight(0);
    fill(180,180,180);
    ellipse(390,440,20,100);

    //feather 4
    strokeWeight(0)
    fill(200,200,200);
    ellipse(400,440,20,90);

    //eyes
    strokeWeight(2);
    fill(250,250,210);
    var eyeLX = width / 3 - faceWidth * 0.12;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //pupils
    strokeWeight(2);
    fill(0,0,0);
    var pupilLX = width / 3 - faceHeight * 0.12;
    var pupilRX = width / 2 + faceWidth * 0.25;
    ellipse(pupilLX, height / 2, pupilSize, pupilSize);
    ellipse(pupilRX, height / 2, pupilSize, pupilSize);

}
 
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, 350);
    faceHeight = random(200, 300);
    eyeSize = random(20, 30);
    pupilSize = random(7,11);
    beakSize = random(30,50);
    beakWidth = random(10,50);

}

When creating this project, I was originally hoping to make a dog of some sort. I made a lot of sketches for this, trying to simplify the shapes. However I ended up changing my direction after a happy accident. When I wrote the code to create a rectangle, it turned out to be yellow because of the color variables I had randomly set. I immediately thought it looked like a seagull’s beak and so I went with it!

my-sketch

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;

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

function draw() {
    background(180);
    fill(r, b, g);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var eyeLX = width/2 - faceWidth*0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    fill(e1, e2, e3);
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize);
    var mouth = width/2 
    ellipse(mouth, height/2+30, mouthSizeW, mouthSizeH)
} 

function mousePressed() {
	faceWidth = random(75,150);
	faceHeight = random(100,200);
	eyeSize = random(10,30);
	r = random(0, 255);
	b = random(0, 255);
	g = random(0, 255);
	e1 = random(0, 255);
	e2 = random(0, 255);
	e3 = random(0, 255);
	mouthSizeW = random(5, 50);
	mouthSizeH = random(10, 55);
}

While making this project I decided to play with color so I assigned random variables for the eyes and mouth and the face.