Cathy Dong-Project-03-Dynamic Drawing

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 3-Dynamic Drawing
*/


var skyR = 139;
var skyG = 212;
var skyB = 229;
var moonCut = 0;
var sunDia = 100;
var starAngle = 0;
var starR = 249;
var starG = 215;
var starB = 81;
var starW = 10;
var starH = 12;

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

function draw() {
	background(skyR, skyG, skyB);
	var winR = 254;
	var winG = 221;
	var winB = 2;


	//stars
	noStroke();
	fill(starR,starG,starB);
	//star 1
	push();
	translate(640 - mouseX, 100);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 2
	push();
	translate(800 - mouseX, 150);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 3
	push();
	translate(760 - mouseX, 120);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 4
	push();
	translate(900 - mouseX, 20);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 5
	push();
	translate(500 -mouseX, 50);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 6
	push();
	translate(760 - mouseX, 80);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 7
	push();
	translate(1000 - mouseX, 60);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 8
	push();
	translate(1500 - mouseX, 50);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 9
	push();
	translate(1200 - mouseX, 30);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 10
	push();
	translate(320 - mouseX, 100);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 11
	push();
	translate(200 - mouseX, 130);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();


	//trinkle stars
	starAngle += mouseX;


	//night
	if (mouseX > width / 2) {
		//star size
		starW = 10;
		starH = 12;
		//show star
		starR = 249;
		starG = 215;
		starB = 81;
		//sky color
		skyR = 61;
		skyG = 80;
		skyB = 92;
		//moon
		noStroke();
		fill(255, 216, 0);
		ellipse(mouseX, mouseX - 200, 200,200);
		//moon change
		noStroke();
		fill(skyR, skyG, skyB);
		moonCut = map(mouseX, 240, 640, 0, 400);
		ellipse(mouseX - 75, mouseX - 200, moonCut, moonCut);
	}

	//morning
	else if (mouseX <= width / 2) {
		//hide star
		starR = 255;
		starG = 240;
		starB = 154;
		//star size
		starW = 42 - mouseX / 10;
		starH = 42 - mouseX / 10 + 2;
		//sky color
		skyR = 156;
		skyG = 215;
		skyB = 255;
		//window color
		winR = 255;
		winG = 240;
		winB = 154;
		//sun
		noStroke();
		fill(255, 240, 154);
		sunDia = map(mouseX, 0, 320, 30, 200);
		ellipse(mouseX, height - mouseX - 40, sunDia, sunDia);

	}



	//haunted house black
	noStroke();
	fill(0);
	beginShape();
	vertex(270, 416);
	vertex(253, 323);
	vertex(242, 323);
	vertex(269, 270);
	vertex(245, 257);
	vertex(235, 206);
	vertex(251, 206);
	vertex(254, 253);
	vertex(273, 264);
	vertex(284, 236);
	vertex(325, 273);
	vertex(324, 160);
	vertex(315, 159);
	vertex(333, 132);
	vertex(350, 93);
	vertex(354, 138);
	vertex(367, 166);
	vertex(358, 164);
	vertex(370, 238);
	vertex(375, 234); 
	vertex(384, 278); 
	vertex(353, 351);
	vertex(324, 415);
	endShape(CLOSE);



	//haunted house color left chimney
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(251, 206);
	vertex(254, 253);
	vertex(273, 264);
	vertex(275, 260);
	vertex(262, 250);
	vertex(266, 218);
	endShape(CLOSE);

	//haunted house color left roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(335, 310);
	vertex(398, 343);
	vertex(389, 344);
	vertex(320, 314);
	endShape(CLOSE);

	//haunted house color left wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(320, 314);
	vertex(389, 344);
	vertex(377, 420);
	vertex(325, 415);
	endShape(CLOSE);

	//haunted house upper color roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(350, 93);
	vertex(354, 138);
	vertex(367, 166);
	vertex(389, 176);
	vertex(372, 129);
	endShape(CLOSE);

	//haunted house color upper roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(367, 166);
	vertex(389, 176);
	vertex(379, 177);
	vertex (357, 164);
	endShape(CLOSE);

	//haunted house color upper roof wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(370, 238);
	vertex(353, 252);
	vertex(358, 164);
	vertex(378, 176);
	endShape(CLOSE);

	//haunted house color right roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(375, 234);
	vertex(384, 278);
	vertex(412, 306);
	vertex(401, 273);
	endShape(CLOSE);

	//haunted house color right roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(384, 278);
	vertex(412, 306);
	vertex(407, 308);
	vertex(378, 278);
	endShape(CLOSE);

	//haunted house color right wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(407, 308);
	vertex(378, 278);
	vertex(366, 312);
	vertex(390, 337);
	endShape(CLOSE);


	//haunted house color left roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(284, 236);
	vertex(325, 273);
	vertex(398, 343);
	vertex(335, 310);
	endShape(CLOSE);

	//front ground
	noStroke();
	fill(0);
	beginShape();
	curveVertex(0, 640);
	curveVertex(0, 360);
	curveVertex(0, 360);
	curveVertex(68, 400);
	curveVertex(137, 412);
	curveVertex(183, 423);
	curveVertex(225, 413);
	curveVertex(295, 410);
	curveVertex(254, 413);
	curveVertex(320, 410);
	curveVertex(409, 423);
	curveVertex(477, 403);
	curveVertex(550, 400);
	curveVertex(640, 425);
	curveVertex(640, 480);
	endShape(CLOSE);

	//windows lights
	noStroke();
	fill(winR, winG, winB);
	//left long
	beginShape();
	vertex(279, 329);
	vertex(283, 364);
	vertex(298, 362);
	vertex(293, 331);
	vertex(288, 324);
	vertex(283, 324);
	endShape(CLOSE);
	//left ellipse
	ellipse(289, 286, 18, 22);
	//upper short
	beginShape();
	vertex(353, 272);
	vertex(368, 277);
	vertex(362, 293);
	vertex(351, 286);
	endShape(CLOSE);
	//upper long
	beginShape();
	vertex(331, 205);
	vertex(347, 207);
	vertex(347, 172);
	curveVertex(340, 166);
	curveVertex(333, 171);
	endShape(CLOSE);


	//window frame
	noFill();
	stroke(0);
	strokeWeight(1);
	//upper long
	line(333, 177, 348, 180);
	line(331, 186, 348, 188);
	line(332, 194, 349, 197);
	line(339, 166, 339, 206);
	//left long
	line(279, 335, 294, 332);
	line(281, 344, 296, 342);
	line(280, 354, 296, 351);
	line(284, 322, 292, 364);


	//window no lights
	noStroke();
	fill(0);
	//window 1
	beginShape(); 
	vertex(330, 323);
	vertex(330, 340);
	vertex(347, 348);
	vertex(348, 334);
	endShape(CLOSE);
	//window 2
	beginShape(); 
	vertex(329, 362);
	vertex(331, 376);
	vertex(348, 382);
	vertex(348, 368);
	endShape(CLOSE);
	//window 3
	beginShape();
	vertex(383, 293);
	vertex(378, 305);
	vertex(391, 317);
	vertex(398, 308);
	endShape(CLOSE);
	//window 4
	beginShape();
	vertex(364, 172);
	vertex(362, 205);
	vertex(370, 207);
	vertex(373, 182);
	endShape(CLOSE);
	//door outline
	beginShape();
	vertex(360, 370);
	vertex(357, 450);
	vertex(368, 450);
	vertex(376, 377);
	endShape(CLOSE);

	//door window light
	noStroke();
	fill(winR, winG, winB);
	beginShape();
	vertex(363, 375);
	vertex(363, 388);
	vertex(371, 391);
	vertex(371, 380);
	endShape(CLOSE);

	//upper chimney
	noStroke();
	fill(0);
	beginShape();
	vertex(356, 123);
	vertex(365, 114);
	vertex(368, 100);
	vertex(365, 98);
	vertex(376, 77);
	vertex(380, 102);
	vertex(376, 102);
	vertex(373, 119);
	vertex(363, 127);
	endShape(CLOSE);
}

In this Dynamic Drawing project, I made a haunted house. I used color shades to add a 3D effect. By moving mouse left and right, the scene changes from night to morning. The moon and sun changes shape, location, and dimension, whereas the stars at night changes rotation speed and direction. The haunted house itself changes light color.