Joanne Chui – Project 03 – Dynamic Drawing

proj3code

/*
Joanne Chui
Section C 
Project 3
*/

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

var angle = 0;
var elbow = 215;
var wrist = 220;
var height = 20;

function draw(){
	background(204, 166, 149);
	strokeWeight(0);
	//view
	fill(215, 195, 210);
	rect(130, 130, 200, 300);
	fill(240, 220, 235);
	ellipse(155, 190, 20, 20);//cloud1
	ellipse(175, 190, 30, 30);
	ellipse(195, 190, 25, 25);
	ellipse(215, 190, 20, 20);
	ellipse(250, 250, 15, 15);//cloud2
	ellipse(270, 250, 35, 35);
	ellipse(290, 250, 20, 20);
	ellipse(305, 250, 15, 15);
	//blinds
	if(mouseY > 130 & mouseY < 430){
		for(var i = 0; i < 30; i++){
			if(i % 2 == 0){
				fill(200, 186, 183);
			}
			else {
				fill("white");
			}
			rect(130, 130 + i * ((mouseY - 130)/30), 200, (mouseY - 130)/30); 
		}
	}
	//windowsill
	stroke(144, 120, 109);
	strokeWeight(10);
	line(130, 430, 130, 130);
	line(115, 130, 345, 130);
	line(330, 130, 330, 430);
	line(345, 430, 130, 430);
	strokeWeight(0);
	if(mouseY > 430){
		background(144, 120, 109);
		fill(200, 186, 183);
		rect(130, 130, 200, 300);
		fill(150, 140, 140);
		for(var i = 0; i < 30; i += 2){
				rect(130, 130 + i*10, 200, 10);
		}
		//lighton
		fill(252, 247, 187, 80);
		beginShape();
		vertex(360, 317);
		vertex(290, 305);
		vertex(270, 470);
		vertex(375, 470);
		endShape();
		//windowsilldark
		stroke(110, 88, 78);
		strokeWeight(10);
		line(130, 430, 130, 130);
		line(115, 130, 345, 130);
		line(330, 130, 330, 430);
		line(345, 430, 130, 430);
		strokeWeight(0);
	}
	//DESK
	fill("black");
	rect(30, 470, 400, 30, 7);
	rect(40, 500, 30, 140);
	rect(390, 500, 30, 140);
	//LAMP
	fill(170, 125, 125);
	rect(340, 460, 80, 10, 3);
	strokeWeight(13);
	stroke(170, 125, 125);
	line(380, 460, 360, 320);
	strokeWeight(10);
	line(360, 317, 290, 310);
	//GIRL
	//neck
	strokeWeight(0);
	fill(102, 83, 63);
	stroke(102, 83, 63);
	rect(135, 330, 40, 50);
	//sweater
	fill(102, 29, 53);
	stroke(102, 29, 53);
	rect(130, 365, 50, 20, 5);
	rect(90, 380, 130, 40, 20);
	//writing arm
	strokeWeight(30);
	line(210, 395, elbow, 470);
	line(elbow, 470, wrist, 470);
	stroke("black");//pen
	strokeWeight(5);
	line(wrist + 10, 410, wrist + 10, 470);
	fill(102, 83, 63);//hand
	strokeWeight(0);
	ellipse(wrist + 10, 470, 35, 35);
	if (mouseX > 210 & mouseX < 300){
		wrist = mouseX;
		elbow = .5 * (wrist - 215) + 215;
	}
	//chair
	fill(40, 20, 15);
	rect(80, 580, 25, 100);
	rect(205, 580, 25, 100);
	fill(43, 64, 69);
	stroke(43, 64, 69);
	rect(70, 400, 170, 130, 10);
	fill(32, 48, 50);
	rect(70, 525, 170, 60, 10);
	//head
	push();
	translate(157, 315);
	rotate(angle - QUARTER_PI);
	stroke(102, 83, 63);//face
	fill(102, 83, 63);
	ellipse(0, 0, 70, 80);
	strokeWeight(1); //bun
	stroke(60, 38, 33);
	fill(60, 38, 33);
	ellipse(-7, -5, 80, 100);
	fill(84, 53, 45);
	ellipse(-27, -50, 50, 50);
	fill(60, 38, 33);
	strokeWeight(3);
	ellipse(-37, -55, 20, 30);
	noFill();
	arc(-27, -54, 35, 40, PI + HALF_PI, PI);
	fill(102, 83, 63);//ear
	stroke(102, 83, 63);
	ellipse(28, 5, 10, 22);
	noFill();
	stroke(60, 38, 33);
	arc(37, -5, 10, 50, HALF_PI, PI); //hair tendril
	fill(36, 24, 24); //bun
	stroke(36, 24, 24);
	ellipse(-32, -55, 8, 15);
	stroke("white");//airpods
	fill("white");
	ellipse(30, 7, 3, 8);
	line(28, 7, 30, 17);
	//headbob
	if (mouseX > 0 & mouseX < 480){
		angle = mouseX * (1/280);
	}
	pop();


}

I was interested in creating two different scenes, and having different parts of the drawing activated based on if the mouse was moving vertically or horizontally.

Leave a Reply