Variable Faces

The idea behind my code was to use randomization as well as variable-relations to create any number of faces on its own. The random variables include colors as well as the sizes of some aspects, like the eyes and face size. The eyes I made separately in order to create an abstract feel, along with the randomly changing background.

Abstract FacesDownload
//Variable Faces

    var strokeSize = 1;

    var faceWidth = 400;
    var faceHeight = 600;
    var faceColor = 135;

    var eyeColor = 30;
    var lEyeWidth = 100;
    var lEyeHeight = 100;
    var rEyeWidth = 100;
    var rEyeHeight = 100;
    var pupilColor = 135;

    var noseColor = 200;

    var mouthColor = 185;
    var mouthWidth = 180;
    var mouthHeight = 80;

    var backTri = 220;
    var backSquare = 220;
    var backCirc = 220
    var backEllipse = 220;
    var backRect = 220;


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

function draw() {
//randomizes the color of the background square
    var colorRA = random(0, 255);
    var colorGA = random(0, 255);
    var colorBA = random(0, 225);
//randomizes the color of the background triangle
    var colorRB = random(0, 255);
    var colorGB = random(0, 255);
    var colorBB = random(0, 225);
//randomizes the color of the background circle
    var colorRC = random(0, 255);
    var colorGC = random(0, 255);
    var colorBC = random(0, 225);
//randomizes the color of the background ellipse
    var colorRD = random(0, 255);
    var colorGD = random(0, 255);
    var colorBD = random(0, 225);
//randomizes the color of the background rectangle
    var colorRE = random(0, 255);
    var colorGE = random(0, 255);
    var colorBE = random(0, 225);
//randomizes the color of the background
    var colorRF = random(0, 255);
    var colorGF = random(0, 255);
    var colorBF = random(0, 225);

//creates a random background color
    background(colorRF, colorGF, colorBF);

    noStroke();
    frameRate(3);   //slows looping speed
    fill(colorRA, colorGA, colorBA);
    square(width - 300, 0, 300);    //background square
    fill(colorRB, colorGB, colorBB);
    triangle(0, 0, 100, 200, 400, 100);   //background triangle
    fill(colorRC, colorGC, colorBC);
    circle(width - 100, height - 100, 250);   //background circle
    fill(colorRE, colorGE, colorBE);
    rect(0, height * .3, width, .4 * height);   //background rectangle
    fill(colorRD, colorGD, colorBD);
    ellipse(.25 * width, height - 80, 225, 400);    //background ellipse


    strokeWeight(strokeSize);
    stroke(0);    //makes the strokes black

//creates the face with a random strokeWeight
    fill(faceColor);
    ellipse(width / 2, height /2 , faceWidth, faceHeight);


//creates the left eye
    fill(eyeColor);
    ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, lEyeWidth, lEyeHeight);
    ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, rEyeWidth, rEyeHeight);
//creates the right eye
    fill(pupilColor);
    ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * lEyeWidth, .3 * lEyeHeight);
    ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * rEyeWidth, .3 * rEyeHeight);

//creates the nose
    fill(noseColor);
    beginShape();
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2 - .05 * faceWidth, height / 2 + .1 * faceHeight);
    curveVertex(width / 2 - .1 * faceWidth, height / 2 + .15 * faceHeight);
    curveVertex(width / 2, height / 2 + .2 * faceHeight);
    curveVertex(width / 2, height / 2 + .22 * faceHeight);
    endShape();

//creates the mouth
    fill(mouthColor);
    arc(width / 2, height / 2 + faceHeight * .3, faceWidth * .2, faceHeight * .2, 0, PI, CHORD);

}

//creates the randomization when mouse is clicked
function mouseClicked() {
    strokeSize = random(1, 5);    //randomizes the stroke size of the face

    faceWidth = random(250,400);    //randomizes face width
    faceHeight = random(250, 600);    //randomizes face height
//randomizes the color of the face
    faceColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomization of eye sizes and colors
    eyeColor = color(random(0, 255), random(0, 255), random(0, 255));
    lEyeWidth = random(20, .3 * faceWidth);
    lEyeHeight = random(20, .3 * faceHeight);
    rEyeWidth = random(20, .3 * faceWidth);
    rEyeHeight = random(20, .3 * faceHeight);
    pupilColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomizes nose color
    noseColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomizes mouth color
    mouthColor = color(random(0, 255), random(0, 255), random(0, 255));
}

Leave a Reply