Sarah Yae – Project 3

sketch

var angle = 0;
var dia = 40; 
var r = 0;
var g = 0;
var b = 0;

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

}

function draw() {

//base face of person   
    noStroke();
    fill(255,229,200);
    ellipse (240,560,150,150);

//mouth of person
    noStroke();
    fill('red');
    triangle(210,580,270,580,240,610);

//draws rotating yellow rectangles, 
//as it interacts with the mouse
	fill (250,318,94);
	noStroke();
	push();
	translate(mouseX, mouseY);
	rotate(radians(angle));
	rect(0,0,20,20);
	pop();
	angle = angle + 2

//hair (right)
    fill (87,45,9);
    noStroke();
    ellipse(300,500,dia,dia);
//hair (middle)
    fill(87,45,9);
    noStroke();
    ellipse(240,480,dia,dia);
//hair (left)
    fill(87,45,9);
    noStroke();
    ellipse(180,500,dia,dia);
//hair grows as the mouse moves to the left side of canvas
if (mouseX <= 230) {dia = dia + 0.03}
//hair stops growing as the mouse moves to the right side of canvas
if (mouseX > 230) {dia = dia}

//eyes (right) 
    fill(r,g,b);
    noStroke();
    ellipse(270,550,20,20);
//eyes (left)
    fill(r,g,b);
    noStroke();
    ellipse(210,550,20,20);
//eyes change color as the mouse to the left side of canvas
if (mouseX <= 230) {r = r + 0.1}
if (mouseX <= 230) {g = g + 0.07}
if (mouseX <= 230) {b = b + 0.2}

}

As you move your mouse towards the left of the canvas, you can see hair growth, and eye color change; however, if your mouse is on the right side of the canvas, all changes to facial features stop. Your mouse’s location is tracked down by a yellow rectangle that spins around; you can even attempt to color the background yellow!