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().
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
