karinac-Project-03

karinac-Project-03

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-03

var bgRed = 0;
var bgGreen = 0;
var bgBlue = 64;


function setup() {
    createCanvas(600,400);
    drawSky();
}



function drawSky() {

	//background color changes using mouse movement

   	background(bgRed,bgGreen,bgBlue);

   	var bgX = mouseX
    
   	//day time bgcolor(187,228,248)
	if (bgX > 200 & bgX < 400) {
		bgX = 200
	}

    //transition to night time
    if (bgX >= 400) {
		bgX = 200 - (mouseX-400)
	}



	//day time transition to blue
	//bgcolor(187,228,248)
	//200 is the starting point of blue sky

	bgRed = bgX*((187-0)/200) + 0;
	bgGreen = bgX*((228-0)/200) + 0;
	bgBlue = bgX*((248-64)/200) + 64;



	//call drawSky function
	window.setInterval(drawSky, 100);
}



function draw() {

	//sun

	var sunSize = 0.4*mouseX
	var sunX = mouseX
	//parametric equation for path of sun
	var sunY = 80 + 0.0033*Math.pow(sunX-300,2)


	if (sunX <= 50) {
		sunX = 50
	}

	if (sunX >= 550) {
		sunX = 550
	}


	fill(255,201,14);
	noStroke();
	ellipseMode(CENTER);
	ellipse(sunX,sunY,sunSize,sunSize);





	//skyline

	fill(0);
	noStroke();

	//left buildings
	rect(0,height-200,45,200);
	rect(50,height-250,75,250);
	rect(55,height-260,65,10);
	rect(60,height-270,55,10);
	rect(65,height-280,45,10);

	//disproportionate building - right
	triangle(475,height-220,525,800,575,height-200);
	triangle(482,height-240,525,650,570,height-260);
	triangle(487,height-280,525,500,562,height-270);

	//dome building
	rect(150,height-110,200,110);
	rect(160,height-125,180,125);
	rect(165,height-130,170,130);
	ellipseMode(CENTER);
	ellipse(250,height-130,160,130);
	rect(240,height-198,20,10);
	rect(248,170,5,100);

	//bottom skyline
	rect(0,height-150,100,150);
	rect(100,height-100,100,100);
	rect(350,height-220,70,220);
	rect(380,height-300,50,325);
	rect(420,height-200,20,200);
	rect(440,height-120,60,120);
	rect(520,height-150,80,150);

	//windows
	fill(240);
	rect(388,120,22,5);
	rect(388,130,34,5);
	rect(388,140,34,5);
	rect(60,160,5,5);
	rect(70,160,5,5);
	rect(80,180,5,5);
	rect(90,180,5,5);
	rect(100,180,5,5);
	rect(110,180,5,5);
	rect(70,190,5,5);
	rect(110,190,5,5);
	rect(100,200,5,5);
	rect(110,200,5,5);
	rect(60,220,5,5);
	rect(70,220,5,5);
	rect(90,220,5,5);
	rect(110,230,5,5);
	rect(60,240,5,5);
	rect(80,240,5,5);
	rect(90,240,5,5);
	rect(100,240,5,5);
	rect(180,282,20,3);
	rect(210,282,20,3);
	rect(240,282,20,3);
	rect(270,282,20,3);
	rect(300,282,20,3);
	rect(490,200,10,20);
	rect(530,210,5,5);
	rect(540,210,5,5);
	rect(550,210,5,5);
	rect(520,220,5,5);
	rect(530,220,5,5);
	rect(510,240,5,5);
	rect(540,240,5,5);
	rect(550,240,5,5);
	rect(490,170,5,5);
	rect(500,170,5,5);
	rect(530,170,5,5);
	rect(550,170,5,5);
	rect(540,160,5,5);
	rect(550,160,5,5);
	rect(500,140,5,5);
	rect(510,140,5,5);
	rect(360,190,5,15);
	rect(370,210,5,15);
	rect(370,230,5,15);
}

The part I struggled with the most was definitely trying to come up with equations for the parabolic pathway of the sun as well as the color equation for the sky. After a lot of trial and error on paper, I was finally able to come up with something and transfer it to the computer and work from there.