Month: September 2019

lanna_project02_sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
// Project 02 Variable Face

var fill1 = '#00bff3'
var r = 255
var g = 245
var b = 104
var duckoWidth = 500
var duckoHeight = 600
var thic = 20
var mouthWidth = 70
var eyeSize = 20
var blushX = 80
var blushY = 470


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

function draw() {
    background(fill1);
    
//lefthair
    strokeWeight(thic);
    stroke(0);
    line(240, 250, 170, 150);

//righthair
    strokeWeight(thic);
    stroke(0);
    line(240, 250, 310, 150);

//body
    fill(r, g, b);
    ellipse(240, 550, duckoWidth, duckoHeight);

//eyes
    fill(0);
    circle(140, 390, eyeSize);
    circle(340, 390, eyeSize);

//mouth
    strokeWeight(mouthWidth);
    stroke('#f49ac1');
    line(200, 500, 280, 500);

//blush lines on the left
    strokeWeight(10);
    stroke('#f69679');
    line(blushX - 20, blushY, blushX, blushY + 30);
    line(blushX, blushY, blushX + 20, blushY + 30);
    line(blushX + 20, blushY, blushX + 40, blushY + 30);
  
//blush lines on the right
    strokeWeight(10);
    stroke('#f69679');
    line(blushX + 300, blushY, blushX + 320, blushY + 30);
    line(blushX + 320, blushY, blushX + 340, blushY + 30);
    line(blushX + 340, blushY, blushX + 360, blushY + 30);
}

function mousePressed() {
    g = random(200, 255);
    duckoWidth = random(100, 900);
    mouthWidth = random(30, 200);
    eyeSize = random(5, 150);
}

I experimented with different faces and making different characters, but I enjoyed the result of coding this character, so this became my final outcome. The code behind the character is simple, but after experimenting with p5js and creating characters for a while, I decided that sometimes less is more.

In this project I changed the size of the cat’s eyes, nose, mouth, head, ears, and body with each mouse press. The most challenging part of the project was to make the ears connect to the head with each randomized variable.

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 02
*/

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 80;
var bodyWidth = 100;
var bodyHeight = 150;
var noseX = 10;

function setup() {
    createCanvas(300, 300);
    
}

function draw() {
    noStroke();
    background(147,184,186);

    fill (0);
    ellipse(width/2, height/2+100, bodyWidth, bodyHeight); //body
    triangle(width/2, height/2+faceHeight/2, width/2+faceWidth/2, height/2, width/2+faceWidth/4,height/4); //ear
    triangle(width/2, height/2+faceHeight/2, width/2-faceWidth/2, height/2, width/2-faceWidth/4,height/4); //ear
    ellipse(width/2, height/2, faceWidth, faceHeight); //head

    fill(255,145,200);
    triangle (width/2, height/2+15, width/2+noseX, height/2+5, width/2-noseX, height/2+5); //nose
    stroke(255,145,200);
    strokeWeight(4);
    line(width/2, height/2+15, width/2+eyeSize, height/2+20); //mouth
    line(width/2, height/2+15, width/2-eyeSize, height/2+20); //mouth

    noStroke();
    fill (231,219,82)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //eye
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize/4, eyeSize); //pupil
    ellipse(eyeRX, height / 2, eyeSize/4, eyeSize); //pupil
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(80, 150);
    eyeSize = random(10, 30);
    bodyWidth = random(100,150);
    bodyHeight = random(130,200);
    noseX = random(5,20);
}