yinhuid@andrew.cmu.edu – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Cathy Dong-Looking Outwards-07

Flight Pattern Visualization

Originally developed by Scott Hessels and Gabriel Dunne, “Celestial Mechanics” project used Adobe After Effects and Maya. With time lapse animation, the project visualizes air traffic data and turns it into a series of videos and drawings, and perhaps art. Through still 2D drawings and screen captures, it displays the dynamics. Information shows the origin, end and path of the journey. Comparing the density of parts, readers find the busier ports in North America within a period of twenty-four hours. Also as it reveals multiple iterations of multiple iterations of flight patterns during the cycle, the project implies weather systems and no-fly zones.

Cathy Dong-07-Curve

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project 07 - Composition with Curves
*/

var density = 200;

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

function draw() {
    background(0);
    stroke(255);
    noFill();

    //call devil's curve
    strokeWeight(1);
    push();
    translate(width/ 2, height / 2);
    devilDraw()
    pop();

    //call curve and make its center move with mouse
    strokeWeight(.5);
    push();
    var xDraw = constrain(mouseX, width / 5, width / 5 * 4);
    var yDraw = constrain(mouseY, width / 8, height / 8 * 7);
    translate(xDraw, yDraw);
    hypocycloidDraw();
    pop();
}

//draw hypocycloid move with mouse
function hypocycloidDraw() {
    var xA;
    var yA;
    var aA = map(mouseX, 0, width, 0, width / 5);
    var bA = map(mouseY, 0, height, 0, height / 8);
    beginShape();
    for (var i = 0; i < density; i++) {
        var t = map(i, 0, density, 0 ,PI * 2);
        xA = (aA - bA) * cos(t) - bA * cos((aA - bA) * t);
        yA = (aA - bA) * sin(t) - bA * sin((aA - bA) * t);
        vertex(xA, yA);
    }
    endShape();
}

// draw devil's curve function
function devilDraw() {
    var xD;
    var yD;
    var aD = map(mouseX, 0, width, 10, width/ 8);
    var bD = map(mouseY, 0, height, 10, height / 10);
    beginShape();
    for (var j = 0; j < density; j++) {
        var t = map(j, 0 , density, 0, PI * 2);
        xD = cos(t) * sqrt((pow(aD, 2) * pow(sin(t), 2) - pow(bD, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
        yD = sin(t) * sqrt((pow(aD, 2) * pow(sin(t), 2) - pow(bD, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
        vertex(xD, yD);
    }
    endShape();
}

I started the project with browsing Mathworld Curves and found the curves that I am interested in. I used devil’s curve and hypocycloid. Devil’s curve remains at canvas center and its long diagonal edges change side when mouse moves, whereas hypocyloid itself flies with mouseX and mouseY. Hypocyloid is the smallest when it’s at upper left corner and largest at lower left. It is less complex and mouse moves to left of the canvas. The longest devil curve edges and the hypocyloid would only appear to be at the same edge when mouse is at upper right.

Cathy Dong – Looking Outwards – 06

2015, NTT InterCommunication Center, Tokyo, Japan

The Irreversible, Dimensions Variable

Norimichi Hirakawa is a Japanese artist whose work centralizes in real-time digital audio-visual installations. The series of video, The Irreversible, is generated by a time-evolutionary algorithm. The process starts from randomizing the initial constants. As described by the artist, “everything within the video is just a result of meaningless calculation.” Math calculation is Hirakawa’s variables and parameters, and the final results are somehow confusing but appealing at the same time. The audience are astonished by the strong visual impact. The background sound fits into the visual rhyme well. Through two-dimensional media, such as lines and points, Hirakawa achieves a three-dimensional effect.

Cathy Dong-06-Abstract-Clock

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project: abstract clock
*/

//color scheme
var wall = '#D6C9C9';
var light = '#DDE1E4';
var dark = '#8C9A9B';
var sunset = '#D2AB99';
var coffee = '#60463E';
var table = '#2F2F2F';
var curtainC = '#CEB5A7';

//time variable
var s; //seconds
var m; //minutes
var h; //hours


//coffee cup
var cupGap = 10;
var cupWidth = 28;
var cupHeight = 60;
var coffeeHeight = 0;
var coffeeX = 10;


//curtain
var curtainHeight = 0;

//deco
var deco1X = 100;
var deco1Y = 100;
var deco1Size = 0;
var deco2X = 150;
var deco2Y = 80;
var deco2Size = 0;
var deco3X = 160;
var deco3Y = 160;
var deco3Size = 0;


function setup() {
    createCanvas(470, 480);
    background(0);


}

function draw() {
    //set time variables
    s = second();
    m = minute();
    h = hour();
    coffeeHeight = s;

    //wall & table setting
    noStroke();
    fill(wall);
    rect(0, 0, width, height);
    fill(table);
    rect(0, height - height / 5, width, height / 5);

    //call functions
    coffeeLevel();
    
    cup();
    skyColor();
    curtain();
    deco();
}

//cup outline don't change
function cup() {
    for (var i = 0; i < 12; i++) {
    stroke(0);
    strokeWeight(2);
    noFill();
    var cupX = cupGap * (i + 1) + cupWidth * i;
    var cupY = height - height / 5 - cupHeight;
    rect(cupX, cupY - 10, cupWidth, cupHeight + 10);
    }
}

// coffee level changes every second
function coffeeLevel() {
    noStroke();
    fill(coffee);
    //coffee level increase per second
    for (var j = 0; j < 12; j++) {
        var coffeeY = height - height / 5 - coffeeHeight;
        var coffeeX = cupGap * (j + 1) + cupWidth * j; 
        rect(coffeeX, coffeeY, cupWidth, coffeeHeight);   
    }
}

// sky changes color based on hours
function skyColor() {
    stroke(255);
    strokeWeight(5);
    if ((h > 6) & (h < 15)) {
        fill(light); //morning
    }
    else if ((h > 14) & (h <17)) {
        fill(sunset); //dawn
    }
    else {
        fill(dark); //night
    }
    rect(width / 5 * 3, height / 4, width / 4, height / 3);
}

//curtain height changes based on hours
function curtain() {
    stroke(0);
    strokeWeight(1);
    fill(curtainC);
    var curtainX = width / 5 * 3;
    var curtainY = height / 4;
    var curtainWidth = width / 4;
    var curtainHeight = h * 5;
    rect(curtainX, curtainY, curtainWidth, curtainHeight);
}

//decoration size changes based on minutes
//color changed based on hours (matching sky color)
function deco() {
    stroke(255);
    strokeWeight(3);
    //morning
    if ((h > 6) & (h < 15)) {
        fill(light);
    }
    //dawn
    else if ((h > 14) & (h <17)) {
        fill(sunset);
    }
    //night
    else {
        fill(dark);
    }   
    deco1Size = m * 2;
    deco2Size = m;
    deco3Size = m * 3 / 2;
    circle(deco1X, deco1Y, deco1Size);
    circle(deco2X, deco2Y, deco2Size);
    circle(deco3X, deco3Y, deco3Size);
}

The abstract clock is an animation changes based on time in the day. There will not be any repetitions anytime in the same day. The coffee levels in the cups change based on seconds. The hour decides color of the sky and decoration elements and height of the curtain, whereas decoration dimensions change based on the minute.

There are three color modes: day time as light blue, evening as dark blue, and sunset as pale orange. 7 AM to 2 PM are considered as day time, 3 PM to 4 PM are sunset, and 5 PM to 6 AM are evening.

Cathy Dong-Looking Outwards-05

“Despicable Me” Computer Animated Character

I am really interested in 3-D computer animation used in film making. “Despicable Me,” distributed by Universal Pictures, was animated by a French animation studio-Mac Guff. Characters in the movie has smooth motions and lively facial expressions. What I admire the most is that the producers give every minion its own personality and characteristics. Minions not only have various body feature, such as height, eyes, and hair, but also have different expressions. The process from the first sketch of the minions to story-boarding, layouts, animation, and final production is complex and appealing.

Storyboards, Layout, Animation, and Final Result

Cathy Dong-Project-05-Wall Paper

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 5-wallpaper
*/

var ox = 50;
var oy = 75;
var xSpace = 80;
var ySpace = 120;

function setup() {
    createCanvas(420, 600);
    background(244, 239, 223);
}

function draw() {
	for (var i = 0; i < 5; i++) {
		for (var j = 0; j < 5; j++) {
			//avocado outer variable
			var outX1 = ox + i * xSpace - 33;
			var outY1 = oy + j * ySpace;
			var outX4 = ox + i * xSpace - 25;
			var outY4 = oy + j * ySpace - 30;
			var outX2 = ox + i * xSpace - 8;
			var outY2 = oy + j * ySpace - 60;
			var outX3 = ox + i * xSpace;
			var outY3 = oy + j * ySpace + 35;

			//avocado
			stroke(29, 59, 16);
			strokeWeight(2);
			fill(203, 223, 180);
			beginShape();
			curveVertex(outX4, outY4);
			curveVertex(outX2, outY2);
			curveVertex(outX2 + 7, outY2 - 2); //center point
			curveVertex(outX2 + 16, outY2);
			curveVertex(outX4 + 50, outY4);
			curveVertex(outX1 + 66, outY1);
			curveVertex(outX3 + 20, outY3 - 10);
			curveVertex(outX3, outY3);
			curveVertex(outX3 - 20, outY3 - 10);
			curveVertex(outX1, outY1);
			endShape(CLOSE);

			//avocado inner
			noStroke();
			fill(235, 234, 188);
			beginShape();
			curveVertex(outX4 + 10, outY4 - 5);
			curveVertex(outX2 + 10, outY2 + 10);
			curveVertex(outX2 + 17, outY2 + 8); //top center point
			curveVertex(outX2 + 20, outY2 + 10);
			curveVertex(outX4 + 40, outY4 - 10);
			curveVertex(outX1 + 60, outY1 - 10);
			curveVertex(outX3 + 15, outY3 - 15);
			curveVertex(outX3, outY3 - 5); //bottom center point
			curveVertex(outX3 - 20, outY3 - 15);
			curveVertex(outX1 + 10, outY1 - 10);
			endShape(CLOSE);

			// avocado shell
			if ((i % 2 == 0 & j % 2 == 1) || (i % 2 == 1 && j % 2 == 0)){
				drawShell(i,j);
			}
			// avocade without shell
			if ((i % 2 == 1 & j % 2 == 1) || (i % 2 == 0 && j % 2 == 0)){
				drawNoShell(i,j);
			}
		}
	}
	noLoop();
}

function drawShell(i,j) {
	//avocado center
	stroke(131, 98, 66);
	strokeWeight(2);
	fill(198, 140, 102);
	ellipse(ox + i * xSpace, oy + j * ySpace, 34, 36);

	//avocado center mid
	noStroke();
	fill(215, 158, 124);
	ellipse(ox + i * xSpace, oy + j * ySpace, 20, 23);

	//avocado center light
	stroke(240, 217, 174);
	strokeWeight(5);
	noFill();
	arc(ox + i * xSpace, oy + j * ySpace, 20, 20, 0, QUARTER_PI);
}

function drawNoShell(i,j) {
	//avocado center
	stroke(248, 241, 224);
	strokeWeight(1);
	fill(227, 217, 114);
	ellipse(ox + i * xSpace, oy + j * ySpace, 35, 38);

	//avocado center light
	stroke(202, 198, 75);
	strokeWeight(10);
	noFill();
	arc(ox + i * xSpace, oy + j * ySpace, 20, 20, 0, HALF_PI);

}

My project is about avocado patterns. To help coding, I first calculated important point x and y axis, using shell center as the origin.

Cathy Dong-Looking Outwards-04

“Cycling Wheel” Performance

“Cycling Wheel” is created by Keith Lam, Seth Hon, and Alex Lai. They were inspired by Marcel Duchamp’s Bicycle Wheel, and further transformed mechanics into light and sound.

In the design processes, there were three variables: music, light beam, led strips. Each was generated and controlled by electronic devices.

The designers eventually transformed the computer-generated sounds into an exciting, appealing, and rather dramatic show. They perform while generating music and light. Music and light together create a certain engaging rhyme that draws audience’s attention. Mechanics input is intricate and professional, whereas the final result is interactive. The complicated design logic is simplified into the motions of spinning and touching.

Cathy Dong-Project-04-String Art

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 4-String Art
*/

var sqColor;
var backColor;

function setup() {
	createCanvas(400, 300);
	
}

function draw() {
	background(0);
	//change background color based on mouseY location
	if (mouseY < height / 2) {
		backColor = 'black';
	}
	else if (mouseY >= height / 2) {
		backColor = 'gray';
	}
	//turn background to white when mouse is pressed
	if (mouseIsPressed) {
		backColor = 'white';
	}
	noStroke();
	fill(backColor);
	rectMode(CORNER);
	rect(0, 0, width, height);

	//create a grid of rectangles
	//rectangle color changes based on mouseX
	for (var s = 20; s <= width; s += 30) {
		for (var t = 15; t <= height; t += 30) {
			if (mouseX < width / 2) {
				sqColor = 'gray';
			}
			else if (mouseX >= width / 2) {
				sqColor = 'black';
			}
			noStroke();
			fill(sqColor);
			rectMode(CENTER);
			rect(s, t, 20, 20);	
		}
		
	}
	//lines from mouse to top
	for (var n = 0; n <= width; n += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, n, 0);
	}

	//lines from mouse to bottom
	for (var p = 0; p <= width; p += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, p, height);
	}

	//lines from mouse to left
	for (var q = 0; q <= height; q += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, 0, q);
	}

	//lines from mouse to right
	for (var r = 0; r <= height; r+= 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, width, r);
	}

	//curve with lines from top to right (controled by mouseX)
	for (var i = 0; i <= mouseX; i += 3) {
		stroke(255);
		strokeWeight(.5);
		line(i, 0, width, i);
	}
	//curve with lines from right to bottom (controled by mouseY)
	for (var j = 0; j <= mouseY; j += 3) {
		stroke(255);
		strokeWeight(.5);
		line(width, j, width - j, height);
	}
	//curve with lines from bottom to left (controled by mouseX)
	for (var k = 0; k <= mouseX; k += 3) {
		stroke(255);
		strokeWeight(.5);
		line(width- k, height, 0, height - k)
	}
	//curve with lines from left to top (controled by mouseY)
	for (var m = 0; m <= mouseY; m += 3) {
		stroke(255);
		strokeWeight(.5);
		line(0, height - m, m, 0);
	}

	//draw foco point
	stroke(255);
	strokeWeight(2);
	push();
	line(mouseX / 8 * 7, mouseY, mouseX / 8 * 9, mouseY);
	line(mouseX, mouseY / 8 * 7, mouseX, mouseY / 8 * 9);
	pop();

}

In this project, I used loops to create curves with lines and rectangle grids. All lines changed based on mouse location. The background color also changed when mouse is clicked or moved.

Cathy Dong-Looking Outwards-03

BUGA Fibre Pavilion 2019 | University of Stuttgart ICD | Project Photo

Concept and Fabrication Process Documentation

The BUGA Fibre Pavilion is designed by the Institute for Computational Design and Construction (ICD) and the Institute for Building Structures and Structural Design (ITKE) at University of Stuttgart. The pavilion design uses the most cutting-edge technologies. They use fibre composites and robotic technologies to build the load-bearing structure. Therefore, the project is extraordinary lightweight.

The pavilion mimics natural and biological structure. It is eventually made with 150,000 meters of spatially arranged glass- and carbon-fibers and the structure spans freely for more than 75 feet. With computational design and robots, fibrous filaments are freely placed between rotating winding scaffolds. Use of pioneered technologies broaden the possibility for form making.

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.