Month: September 2017

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-02

function setup() {
    createCanvas(640, 480);
    background(126, 204, 213);
    angleMode(DEGREES);
    noStroke();
}

//variables for the color of the fish
var r = 222
var g = 157
var b = 207
//variables for tail and eye size
var tail1 = 60
var tail2 = 130
var eyeB = 20 //for black part of eye
var eyeW1 = 8 //for large white part of eye
var eyeW2 = 5 //for small white part of eye


function draw() {
    fill(170, 220, 234);
//bubbles
    ellipse(480, 20, 40, 40);
    ellipse(450, 100, 50, 50);
    ellipse(480, 165, 30, 30);
    ellipse(440, 200, 10, 10);
//fish body
    fill(r, g ,b);
    ellipse(width/2, height/2, 160, 120);
//fish black eye
    fill(0);
    ellipse(380, 240, eyeB, eyeB);
//fish white eye
    fill(255);
    ellipse(377, 235, eyeW1, eyeW1); // large
    ellipse(385, 245, eyeW2, eyeW2); //small
//mouth
    fill(r, g, b);
    ellipse(403, 238, 12, 12); //top
    ellipse(403, 249, 12, 12); //bottom
//fish tails
    rotate(-45);
    translate(-210, -40);
    ellipse(width/3, 320, tail1, tail2); //top
    rotate(90);
    translate(170, -400);
    ellipse(width/3, 250, tail1, tail2); //bottom
}

function mousePressed() {
//when the mouse is pressed, the color changes
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
//when mouse is pressed, tail and eye size changes
    tail1 = random(35, 125);
    tail2 = random(90, 175);
    eyeB = random(10, 35);
    eyeW1 = random(3, 20);
    eyeW2 = random(1, 15);
    clear();
    background(126, 204, 213);
}

sketch

For this project, the first thing that came to mind was a fish. I knew I wanted the color, eyes, and tail size to change, but the difficult part was getting the right proportions and the right angles. The initial shapes were pretty simple, because I figured experimenting with curves and rotate at the same time would be a little too complicated for me right now. I didn’t do any initial sketches, since the fish was only going to be a couple of ellipses. The image of the fish kept overlapping each other instead of replacing when I clicked my mouse, so I had to use the clear function to fix the problem; however, after THAT a chunk of the background was getting cleared too, so I filled in the background again at the very end to make it the way I wanted it to appear. I’m not sure if there was any other (better?) way to fix that problem, but this way seemed to work. All in all, I’m pretty proud of the final product!

face.js

/*Ryu Kondrup
rkondrup@andrew.cmu.edu
Section D
project-02*/
//feature variables

var eyeHeight = 30;
var eyeWidth = 15;
var noseyLiars = 50;
var mouthAgape = 30;
var hatHeight = 120;
var rightShadow = 15;
var downShadow = 10;
var mouthWidth = 30;
var r, g, b;

function setup() {
    createCanvas(640, 480);
    r = random(150, 255);
    g = random(150, 255);
    b = random(150, 255);
  }

function draw() {
  background(26, 83, 92);
  //colors
    var darkDarkBlue = color(22, 74, 82);
    var darkBlue = color(26, 83, 92);
    var blue = color(78, 205, 196);
    var white = color(248, 255, 247);
    var red = color(255, 107, 107);
    var yellow = color(255, 231, 109);



noStroke();


//shirt SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 390+downShadow, 150, 200, 75);

//collar SHADOW
fill(darkDarkBlue);
ellipse(150+rightShadow, 320+downShadow, 160, 50);

//hat top SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 145+downShadow, 120, hatHeight, 60);

//brim of hat SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 190+downShadow, 150, 30, 15);

//head SHADOW
fill(darkDarkBlue);
ellipse(150+rightShadow, 250+downShadow, 150, 150);

//hat wrap SHADOW
fill(darkDarkBlue);
rect(150+rightShadow, 160+downShadow, 120, 30);

//noooose SHADOW
fill(darkDarkBlue);
rectMode(CORNER);
rect(190+rightShadow, 230+downShadow, noseyLiars, 30, 15);



//shirt
fill(yellow);
rectMode(CENTER);
rect(150, 390, 150, 200, 75);

//collar
fill(white);
ellipse(150, 320, 160, 50);

//hat top
fill(yellow);
rectMode(CENTER);
rect(150, 145, 120, hatHeight, 60);

//head
fill(blue);
ellipse(150, 250, 150, 150);

//eyeball
fill(white);
ellipse(140, 240, eyeWidth, eyeHeight);

//brim of hat
fill(yellow);
rectMode(CENTER);
rect(150, 190, 150, 30, 15);

//hat wrap
fill(blue);
rect(150, 160, 120, 30);

//bow CENTER
fill(blue);
ellipse(160, 355, 40);
//bow right
ellipse(195, 355, 40, 60);
//bow right
ellipse(125, 355, 40, 60);

//mouth
fill(red);
rectMode(CORNER);
rect(170, 270, 30, mouthAgape, 15);

//noooose
fill(r, g, b);
rectMode(CORNER);
rect(190, 230, noseyLiars, 30, 15);





}

function mousePressed() {
    eyeHeight = random(30, 70);
    eyeWidth = random(15, 30);
    noseyLiars = random(50, 500);
    mouthAgape = random(30,90);
    hatHeight = random(120, 300);
    r = random(200, 255);
    g = random(100, 255);
    b = random(100, 255);

}

Creating this interactive image was lots of fun.  I wanted to have a concept that made sense with the aim of the assignment, so I settled on a wooden boy as a subject. I also wanted to explore how facial expressions change with different sized facial features. I would like to further explore how features can be changed in ways other than through clicking that can add more depth and complexity to the image.