Project 2 – Variable Face – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Inspired by the popular Sumikk Gurashi characters from Japanese company San-X, this project explores the variable faces of cute 2D characters in the context of a simple text-based meme format. The occurrence of each feature (ie. body color, lack/ type of ear, mouth, whiskers, arm position, text) are determined by their own unique variables, allowing for a wide scope of character generation.
sketch
// Tsz Wing Clover Chau
// Section E

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


var counter = 0;
var ears = false;
var earsUp = false;
var r = 0;
var rArms = 0;
var rEars = 0;
var rMouth = 0;
var rWhiskers = 0;
var rText = 0;




let c = [255, 255, 255];
let t = ["Is for me?", "A positive weed", "Am i even\na penguin?", "Made of 1% meat, \n99% fat"];


function mouseClicked(){
    r = random([0,1,2,3]);
    rEars = random([0,1,2,3]);
    rArms = random([0,1,2,3]);
    rMouth = random([0,1,2,3]);
    rWhiskers = random([0,1,2,3]);
    rText = random([0,1,2,3]);

    print("%s", r);
    counter += 1;

    if (counter > 3){       // wrapping bounds
        counter = 0;
    }

    if (r%2 == 0){
        ears = true;
    } else {
        ears = false;
    }

    if (r == 2) {
        whiskers = true;
    } else {
        whiskers = false;
    }
}


function draw() {
    background(220);
    scale(1.45 *0.93);
    ellipseMode(CENTER);
    rectMode(CENTER);
    
    var cX = width/2;
    var cY = height/2;
    var sizeX = width/3;
    var sizeY = width/3.75;
    

    if (r == 0){
        c = [255, 255, 255];       // shirokuma
    } else if (r == 1){
        c = [202, 240, 248];       // tokage
    } else if (r == 2){
        c = [254, 250, 224];       // neko
    } else {
        c = [217, 224, 163];       // penguin
    }
    
    
    var offsetX = width/35;
    var offsetY = height/10;


    //BODY
    fill(c);
    
    rect(cX + offsetX, cY + (offsetY*2), sizeX - offsetX, height - (cY + offsetY), 70);
    ellipse(cX, cY, sizeX, sizeY);

    noStroke();
    rect(cX + offsetX, cY + (offsetY*2)-2, sizeX - offsetX-2, height - (cY + offsetY)-5, 70);
    
    stroke(0);
    strokeWeight(3);
    beginShape();
    curveVertex(cX - sizeX/1.75, cY - sizeY*0.9);            //1st control point
    curveVertex(cX + sizeX/2.5, cY - offsetY*1.07);
    curveVertex(cX + sizeX/1.5, cY + (offsetY*2));
    curveVertex(cX + sizeX/3.75, height - offsetY*1.02);
    curveVertex(cX - sizeX/1.75, cY + sizeY*0.7);            //2nd control point
    endShape();

    //ARMS
    if (rArms == 0){
        arc(cX, cY + offsetY*1.5, offsetY, offsetX*1.2, PI / 2, 3 * PI / 2, OPEN);
        arc(cX - offsetY, cY + offsetY*1.5, offsetY, offsetX*1.2, 3*PI / 2, PI / 2, OPEN);
    } else if (rArms %3 == 0){
        arc(cX - offsetY, cY + offsetY*1.5, offsetY, offsetX*1.2, 3*PI / 2, PI / 2, OPEN);
    } else if (rArms == 1){
        arc(cX, cY + offsetY*1.5, offsetY, offsetX*1.2, PI / 2, 3 * PI / 2, OPEN);
    } else {
        arc(cX, cY + offsetY*1.5, offsetY, offsetX*1.2, PI / 2, 3*PI / 2, OPEN);
        arc(cX - offsetX*4.25, cY + offsetY*1.5, offsetY, offsetX*1.2, PI / 2, 3*PI / 2, OPEN);
    }
    

    //EYES
    push();
    fill(0,0,0);
    ellipse(cX - offsetY*1.2, cY - offsetY/6, offsetX/2, offsetX/3);
    ellipse(cX + offsetY*0.2, cY - offsetY/6, offsetX/2, offsetX/3);
    pop();

    //NOSE / MOUTH
    push();
    if (rMouth %3 == 0){                        // beak
        fill(255, 220, 116);
        ellipse(cX - offsetY/2, cY+offsetX - offsetY/6, offsetY/1.5, offsetX);
        line(cX - offsetY/1.25, cY + offsetY/5, cX - offsetY/5, cY + offsetY/5);
    } else if (rMouth %2 == 0) {               // snout
        fill(255);
        strokeWeight(2);
        rect(cX - offsetY/2, cY+offsetX*1.15, offsetY*0.85, offsetX*1.4, 120);
        fill(0);
        ellipse(cX - offsetY/2, cY+offsetX - offsetY/6, offsetY/3, offsetX/1.75);
    } else {
        fill(0);
        ellipse(cX - offsetY/2, cY+offsetX - offsetY/6, offsetY/3, offsetX/1.75);
    }
    pop();


    //EARS
    fill(c);
    if (rEars %2 == 0){           // bear
        push();
        rotate(radians(15));
        arc(cX + offsetY*1.8, cY - sizeY, offsetY*1.1, offsetY, -PI*0.95, PI*0.05, OPEN); 
        fill(252, 213, 206);
        ellipse(cX + offsetY*1.8, cY - sizeY*1.02, offsetY*0.45, offsetY/4);
        pop();

        push();
        rotate(radians(-20));
        arc(cX - sizeX/1.5, cY + offsetX/1.75, offsetY*1.1, offsetY, -PI*1.1, -PI*0.03, OPEN);
        fill(252, 213, 206);
        ellipse(cX - sizeX/1.5, cY + offsetX/2.2, offsetY*0.45, offsetY/4);
        pop();
    } else if (rEars%3 ==  0){     // cat
        push();
        rotate(radians(-20));
        arc(cX - sizeX*0.85, cY + offsetX*1.5, offsetY*1.35, offsetY*1.15, -PI*0.7, -PI*0.1, PIE);
        noStroke();
        arc(cX - sizeX*0.837, cY + offsetX*1.6, offsetY*1.25, offsetY*1.05, -PI*0.7, -PI*0.1, PIE);
        
        
        stroke(0);
        arc(cX - sizeX*0.25, cY + offsetX*3.85, offsetY*1.35, offsetY*1.15, -PI*0.7, -PI*0.1, PIE);
        noStroke();
        arc(cX - sizeX*0.235, cY + offsetX*3.95, offsetY*1.25, offsetY*1.05, -PI*0.7, -PI*0.1, PIE);
        pop();
    }

    //WHISKERS
    if (rWhiskers %3 == 0 ){
        line(cX - offsetY*2.4, cY, cX - offsetX*5.5, cY + offsetY*0.05);
        line(cX - offsetY*2.4, cY + offsetX/2, cX - offsetX*5.5, cY + offsetX/2 - offsetY*0.05);
        line(cX + offsetY, cY, cX + offsetX*2, cY + offsetY*0.05);
        line(cX + offsetY, cY + offsetX/2, cX + offsetX*2, cY + offsetX/2 - offsetY*0.05);
    }
    
    
    push();
    textSize(18);
    noStroke();
    fill(255,255, 255);
    text(t[rText], width/14, height/2);
    pop();

}
Leave a Reply Cancel reply
