# Katherine Hua – Project-07 – Curves

``````/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-07-Curves */

function setup() {
createCanvas(480, 480);
frameRate(10);
}

function draw() {

var r1 = map(mouseX, 0, width, 230, 250); // making variables to make the background dependent on mouseX or mouseY
var g1 = map(mouseY, 0, height, 220, 230);
var b1 = map(mouseX, 0, width, 225, 250);
background(r1, g1, b1); // setting background color
var nPoints = 200; // setting number of points on shape

// legs
strokeWeight(5);
bezier(random(195, 205), 320, 150, 320, 240, 400, random(165, 175), 400); // left leg
bezier(random(275, 285), 320, 320, 320, 240, 400, random(300, 310), 400); // right lelg

// body
strokeWeight(5);
fill(50, 50, 50);
push();
translate(width/2, height/2);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var a = map(mouseX, 0, 480, 90, 110); //body will change sizes based on position of mouseX
var n = map(mouseX, 0, 480, 40, 90);
var px = (a/n)*(((n-1)*cos(theta))-(cos((n-1)*theta)));
var py = (a/n)*(((n-1)*sin(theta))-(sin((n-1)*theta)));
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();

// eyes
strokeWeight(1);
fill(255);
nPoints = 10;
// whites of left eye
push();
translate(width/2 - 40, height/2 + 10);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();
// whites of right eye
push();
translate(width/2 + 40, height/2 + 10);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();
// pupil of left eye
fill(0);
nPoints = 4;
push();
translate(width/2 - 40, height/2 + 10);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();
// pupil of right eye
push();
translate(width/2 + 40, height/2 + 10);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();

//arms
noFill();
strokeWeight(5);
//making arms grabbing hand curve different depending if arms are reaching below or above the midpoint
if (mouseY > width/2) {
bezier(random(145, 155), 240, random(115, 125), 240, mouseX - 80, mouseY + 40, mouseX-50, mouseY-50); //left arm
bezier(random(325, 335), 240, 360, random(235, 245), mouseX + 80, mouseY - 40, mouseX+50, mouseY-50); //right arm
} else if (mouseY < width/2) {
bezier(150, 240, 120, 240, mouseX - 80, mouseY + 40, mouseX-50, mouseY+50); //left arm
bezier(330, 240, 360, 240, mouseX + 80, mouseY - 40, mouseX+50, mouseY+50);	//right arm
}

//star
rectMode(CENTER);
push();
translate(mouseX, mouseY); //star will follow position of the mouse
var r2 = map(mouseY, 0, height, 200, 230);
var g2 = map(mouseY, 0, height, 150, 180);
var b2 = map(mouseX, 0, width, 125, 175);
fill(r2, g2, b2);
stroke(r2, g2, b2);
rect(0, 0, 20, 20);
push();
rotate(PI/4);
rect(0,0, 20, 20);
pop();
pop();
}
``````

My design is based off of one of my favorite childhood movies, “Spirited Away.” The character I created is supposed to be one of the coal spirit (or soot ball). Below is an image of how they look like: