Category: Section E

alchan project 02

//face shape
var faceShade = 100;
var faceWidth = 150;
var faceHeight = 200;
var faceAngle1 = 10;
var faceAngle2 = 10;
var faceAngle3 = 10;
var faceAngle4 = 10;

//eyes
var eyeSize = 50;
var eyeStroke = 4;
var eyeNumber = 2;
var eyeX = 320;
var eyeY = 210;
var eyeDistance = 30;

//antlers
var antlerX = 50;
var antlerY = 120;
var antlerLeft1 = 80;
var antlerLeft2 = 180;
var antlerLeftSize = 100;
var antlerRight1 = 0;
var antlerRight2 = 100;
var antlerRightSize = 100;
var antlerStroke = 8;

//determine whether to show/hide
var crestType = 1;
var showEars = 0;

//ears
var earX = 320;
var earY = 100;
var earWeight = 50;

//spike
var spikeX = 320;
var spikeY = 240;
var spikeWidth = 20;
var spikeHeight = 100;

//specimen label
var n1 = 0;
var n2 = 0;
var n3 = 0;

function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
    angleMode(DEGREES);
    smooth();
}

function draw() {
    background(237, 234, 218);

    //antlers
    noFill();
    stroke(0);
    strokeWeight(antlerStroke);
    arc(320 - faceWidth/2, antlerY, antlerLeftSize, antlerLeftSize, antlerLeft1, antlerLeft2, OPEN);
    arc(320 + faceWidth/2, antlerY, antlerRightSize, antlerRightSize, antlerRight1, antlerRight2, OPEN);

    //determine additional crest type: antlers, ears, spike
    if(crestType === 1) {
      strokeWeight(antlerStroke - 2);
      arc(320 - faceWidth/2, antlerY - 20, antlerLeftSize - 50, antlerLeftSize - 50, antlerLeft1, antlerLeft2, OPEN);
      arc(320 + faceWidth/2, antlerY - 20, antlerRightSize - 50, antlerRightSize - 50, antlerRight1, antlerRight2, OPEN);
    } else if (crestType === 2) {
      noStroke();
      fill(50);
      triangle(spikeX - spikeWidth/2, 245 - faceHeight/2, spikeX + spikeWidth/2,
        245 - faceHeight/2, spikeX, spikeHeight);
    }

    //determine whether or not to draw ears
    if(showEars >= 0.5) {
      stroke(faceShade);
      strokeWeight(earWeight);
      line(earX - faceWidth/2, antlerY + earY, earX + faceWidth/2, antlerY + earY);
    }

    //face
    noStroke();
    fill(faceShade);
    rect(320, 240, faceWidth, faceHeight,
      faceAngle1, faceAngle2, faceAngle3, faceAngle4);

    //eyes: determine how many, then draw
    stroke(256);
    strokeWeight(eyeStroke);
    fill(0);
    if(eyeNumber === 1) {
      ellipse(eyeX, eyeY, eyeSize, eyeSize);
    } else if(eyeNumber === 2) {
      ellipse(eyeX - eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX + eyeDistance, eyeY, eyeSize, eyeSize);
    } else if (eyeNumber === 3) {
      ellipse(eyeX - eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX + eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX, eyeY - eyeDistance, eyeSize, eyeSize);
    }

    //caption: specimen number
    noStroke();
    textFont('Georgia');
    textSize(16);
    textAlign(CENTER);
    textStyle(ITALIC);
    text('specimen no. ' + n1 + n2 + n3, 320, 440);
}

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(180, 250);
    faceHeight = random(200, 250);
    faceAngle1 = random(10, 60);
    faceAngle2 = random(10, 60);
    faceAngle3 = random(10, 60);
    faceAngle4 = random(10, 60);
    faceShade = random(80, 150);

    eyeSize = random(30, 70);
    eyeStroke = random(3, 10);
    eyeNumber = Math.floor((random() * 3) + 1); //need a whole number
    eyeX = random(290, 350);
    eyeY = random(180, 240);
    eyeDistance = eyeSize/2 + random(5,30);

    antlerX = random(90, 125);
    antlerY = random(100, 180);
    antlerLeft1 = random(70, 90);
    antlerLeft2 = random(170, 200);
    antlerLeftSize = random(80, 120);
    antlerRight1 = random(-20, 10);
    antlerRight2 = random(90, 110);
    antlerRightSize = random(80, 120);
    antlerStroke = random(4, 15);

    crestType = Math.floor((random() * 2) + 1); //need a whole number
    showEars = random();

    earY = random(80, 120);
    earWeight = random(40, 80);

    spikeX = random(260, 380);
    spikeY = random(50, 100);
    spikeWidth = random(10, 40);
    spikeHeight = random(25, 80);

    n1 = Math.floor((random() * 9) + 1); //need a whole number
    n2 = Math.floor((random() * 9) + 1);
    n3 = Math.floor((random() * 9) + 1);
}

I first figured out which elements of my face I wanted to be randomized. I then decided which elements would be constant (antlers, eyes) and which would only be drawn for some faces (2nd set of antlers, ears, horn, number of eyes). From there it was just working out dimensions, coordinates, and ranges for the randomly generated variables.

yoonyouk-project02-variablefaces

//Yoon Young Kim
//Section E
//yoonyouk@andrew.cmu.edu
//Project-02

var eyeLxSize = 40;
var eyeRxSize = 20;
var faceWidth = 240;
var faceHeight = 200;

var nose1x = 300;
var nose1y = 250;
var nose2x = 350;
var nose2y = 250;
var nose3x = 325;
var nose3y = 285; 
var earpoint = 100;
var smileWidth = 25;
var smileHeight = 25;

//colors
var R1 = 232;
var R2 = 64;
var B1 = 33;
var B2 = 91;
var B3 = 237;
var Ye1 = 323;
var Ye2 = 204;
var Ye3 = 74;

var RW = 4 //weight of any red line


function setup() {
    createCanvas(640, 480);
    background(220);
    angleMode(DEGREES);
}

function draw() {
    background (B1, B2, B3);
    
    //face
    noStroke();
    fill(Ye1, Ye2, Ye3);
    ellipse (width/2, height/2 - 10, faceWidth, faceHeight)
   
    //eyes
    stroke(R1, R2, R2);
    strokeWeight(RW);
    noFill();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeLxSize, eyeLxSize);
    ellipse(eyeRX, height / 2, eyeRxSize, eyeRxSize);
    
    //triangle nose
    noStroke();
    fill(R1, R2, R2);
    triangle(nose1x, nose1y, nose2x, nose1y, nose3x, nose3y);

    //ears
    //left ear
    fill(Ye1, Ye2, Ye3);
    triangle(220, 190, 225, earpoint, 310, 150);


    //right ear
    triangle(420, 190, 420, earpoint, 340, 150);

    //mouth
    stroke(R1, R2, R2);
    strokeWeight(RW);
    noFill();
    arc(width / 2, height / 2 + faceWidth * 0.20, smileWidth, smileHeight, 0, 180);
}

function mousePressed() {
    faceWidth = random(200, 300);
    faceHeight = random(200, 275);
    eyeLxSize = random(20, 80);
    eyeRxSize = random(30, 60);
    R1 = random(200, 250);
    R2 = random(50, 100);
    B1 = random(20, 70);
    B2 = random(90 ,140);
    B3 = random(200, 250);
    Ye1 = random(300, 350);
    Ye2 = random(180, 230);
    Ye3 = random(50, 100);
    RW = random(7, 15);
    smileWidth = random(40, 80);
    smileHeight = random(20, 50);
    nose1x = random(270, 300);
    nose1y = random(240, 260);
    nose2x = random(320, 350);
    nose3x = random(300, 325);
    nose3y = random(270, 285); 
    earpoint = random(50, 120);
}

Much like the first project, I felt that this project required a lot of playing around and trial and error. I wanted to use primary colors in order to range the different color values to evict a childish type of project. In order to experiment with different shapes, I decided to go with a cat face. I like how each image generates a new combination/a new cat face upon each click.

sketch

//eyes
var eyeSize = 12;
var eyeAdd1 = 10;
var eyeAdd2 = 30;
var eyeAdd3 = 20;
var eyeAdd4 = 30;

//face
var faceWidth = 130;
var faceHeight = 150;
var roundX1 = 20;
var roundX2 = 20;
var roundY1 = 20;
var roundY2 = 20;

//mouth
var roundXX1 = 10;
var roundXX2 = 10;
var roundYY1 = 10;
var roundYY2 = 10;
var mouthWidth = 30;
var mouthHeight = 18;
var mouthX = 34;

//color
var colorR = 60;
var colorG = 200;
var colorB = 10;
var colorPr = 250;
var colorPg = 122;
var colorPb = 129;
var colorLr = 250;
var colorLg = 220;
var colorLb = 220;
var colorBr = 10;
var colorBg = 10;
var colorBb = 200;

//eyebrows
var browWidth = 10;
var browHeight = 10;

//nose
var noseHeight = 12;
var noseWidth = 6;

//hair
var hairX = 300;
var hairY = 190;
var hairWidth = 60;
var hairHeight = 30;

//eyebrows
var arcA = 0;
var arcB = 0;
var arcC = 0;
var arcD = 0;

function setup() {
    createCanvas(640,480);
    angleMode(degrees);
    textSize(12);
}

function draw() {
    background(255);
    //face
    noStroke();
    fill(colorLr,colorLg,colorLb);
    strokeWeight(3);
    rect(280,200, faceWidth, faceHeight,roundX1, roundX2, roundY1, roundY2);

    //eyes
    noStroke();
    fill(colorG+50,colorB+60,colorR);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX+eyeAdd1, height / 2+eyeAdd2, eyeSize, eyeSize);
    ellipse(eyeRX+eyeAdd3, height / 2+eyeAdd4, eyeSize, eyeSize);

    //text bubble
    fill(colorLr,colorLg-40,colorLb-30);
    strokeWeight(1.5);
    noStroke();
    rect(147,280,104,40,30,30,0,30);
    triangle(220,290,200,320,260,320);
    
    //text
    noStroke();
    fill(255);
    text("w o w z a ! !",168,293,400,400);

    //nose
    fill(colorPr, colorPb, colorPg);
    rect(((eyeLX+eyeRX)/2),height/2+eyeAdd2,noseWidth,noseHeight,40);

    //hair
    noStroke();
    fill(colorG+50,colorB+60,colorR);
    rect(hairX,hairY,hairWidth,hairHeight,200);

    //eyebrows
    noFill();
    strokeWeight(2);
    stroke(colorG+50,colorB+60,colorR);
    arc(eyeLX,height/2,40,40,PI+3.4-arcA,HALF_PI+arcB,OPEN);
    arc(eyeRX+6,height/2,40,40,HALF_PI-0.4-arcC,HALF_PI+0.6+arcD,OPEN);

    //blush
    fill(colorLr,colorLg-40,colorLb-30);
    noStroke();
    rect(eyeLX+eyeAdd1-10,height/2+eyeAdd2+12, 20,14,80)
    rect(eyeRX+eyeAdd3-10,height/2+eyeAdd4+12, 20,14,80)

    //mouth
    strokeWeight(3);
    stroke(colorPr, colorPb, colorPg);
    fill(255);
    rect(280+mouthX,height/2+eyeAdd2+20, mouthWidth, mouthHeight+random(0,10),roundXX1, roundXX2, roundYY1, roundYY2);

}

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(130, 150);
    faceHeight = random(150, 200);
    eyeSize = random(12, 15);
    roundX1 = random(10,70);
    roundX2 = random(10,70);
    roundY1 = random(10,70);
    roundY2 = random(10,70);
    colorR = random(10,80);
    colorG = random(100,230);
    colorB = random(10,80);
    eyeAdd1 = random(0,20);
    eyeAdd2 = random(30,70);
    eyeAdd3 = random(0,20);
    eyeAdd4 = random(30,70);
    roundXX1 = random(1,9);
    roundXX2 = random(1,9);
    roundYY1 = random(1,9);
    roundYY2 = random(1,9);
    mouthHeight = random(20,50);
    mouthWidth = random(20,50);
    mouthX = random(20,30);
    colorPr = random(200,255);
    colorPg = random(100,150);
    colorPb = random(100,150);
    colorLr = random(270,255);
    colorLg = random(220,255);
    colorLg = random(220,255);
    noseWidth = random(4,10);
    noseHeight = random(9,14);
    hairWidth = random(30,100);
    hairHeight = random(20,50);
    hairX = random(300,320);
    arcA = random(0,0.4);
    arcB = random(0,0.4);
    arcC = random(0,0.4);
    arcD = random(0,0.4);
    colorBr = random(0,140);
    colorBg = random(0,40);
    colorBb = random(200,255);
}

My process in completing this project was similar to the last one in that I worked trial and error through all of the elements of the face–starting with a base shape and going on to the eyes, mouth, nose, etc. As an attempt to stay consistent with the style of the face I created for the previous project, I decided generate faces with a similar worried expression. Rather than have my code be completely randomized, I set a lot of limitations to the range of values so as to be able to be able to have more control over the random nature of the project.

In the end, I focused most on creating a good color scheme in which all of the facial elements would go well together. I had a lot of trouble with this given the amount of randomization in my code. In order to achieve the color scheme that I liked, I altered the range of numbers for the R, G, and B values. I focused on having more warm pastel tones in my project so that the faces I generated would be aesthetically pleasing in a series.