creyes1-Project-02-Variable-Face

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.