Project 06 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project 06

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

function draw() {
    //gradient background
    var from = color(127, 188, 215);
	var to = color(255);
    setGradient(0, height, from, to);
    //variables for time
	var h = hour();
	var m = minute(); 
	var s = second();
	//mapping ground color based on hour
    noStroke();
    r = map(h, 0, 24, 190, 0);
    g = map(h, 0, 24, 255, 80);
    b = map(h, 0, 24, 180, 30);
    fill(r, g, b);
    rect(0, height-30, width, 30);
	//mapping positionY based on minute
    var positionY = map(m, 0, 60, 416, 156);
	upHouse(positionY);
	//balloons increase and move based on second
	for (var i = 0; i < s; i++) {
		frameRate(1); //frame changes once per second
		strokeWeight(.25);
		balloonX = random(85, 135);
		balloonY = random(65, 120);
		line(105, positionY-37, balloonX, positionY-balloonY);
		fill(random(249, 255), random(140, 255), random(150, 200));
		ellipse(balloonX, positionY-balloonY, 11, 14);
		}
    }

function setGradient (y, h, from, to) {
	// top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(from, to, inter);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+h, i);
	}
}

function upHouse (y) {
	//function to create the house
	noStroke();
	//base
	fill(245, 202, 170);
	rect(73, y, 62, 38);
	fill(126, 176, 200);
	rect(73, y, 62, 10);
	//roof
	fill(51);
	quad(74, y-28, 136, y-28, 144, y, 66, y);
	//chimney
	fill(88, 67, 50);
	rect(102, y-36, 6, 10);
	//door
	fill(78, 60, 45);
	rect(95, y+5, 9, 25);
	//porch&stair
	fill(99, 71, 59);
	rect(72, y+27, 18, 11);
	for (var i = 0; i < 4; i++) {
		fill(255);
		stroke(150);
		strokeWeight(0.25);
		rect(90, y+27+2.75*i, 18.5, 2.75);
	}
	noStroke();
	fill(255);
	rect(74, y, 2, 27);
	rect(88, y, 2, 27);
	rect(76, y+13, 12, 2);
	rect(79, y+15, 2, 12);
	rect(83, y+15, 2, 12);
	//other components of house
	fill(187, 202, 94);
	rect(108, y, 28, 38);
	fill(245, 248, 162);
	triangle(104, y+5, 140, y+5, 122, y-38);
	rect(84, y-20, 12, 10);
	triangle(82, y-18, 98, y-18, 90, y-30);
	//outline
	stroke(141, 202, 233);
	strokeWeight(3.5);
	line(140, y, 122, y-38);
	line(122, y-38, 104, y);
	line(98, y-18, 90, y-30);
	line(90, y-30, 82, y-18);
	//windows
	fill(240, 208, 100);
	stroke(265);
	strokeWeight(1);
	rect(86, y-20, 6, 7);
	rect(116, y-14, 10, 10);
	rect(115, y+14, 12, 14);
}

*sketch updated to modified code based on question on Piazza

I was inspired by the movie “UP” to create this abstract clock design. The number of balloons increases every second while moving around to random points to illustrate the balloons floating in the air. The number of balloons goes back to 0 when it hits the next minute. The color of the balloons are also randomized within a range to have variety of shades. Each minute is indicated by the house’s Y position as the house moves up. The ground color slowly changes every hour to indicate the current time. A separate function had to be created to generate the house, which uses variable y that is mapped to minute().