Category: Section E

sketch

/*
Alice Fang
acfang@andrew.cmu.edu
Section E
Project-06-AbstractClock
*/

function setup() {
    createCanvas(400, 400);
    noStroke();
}
function draw() {
	background(146, 211, 231);

	//current time
	var H = hour();
	var M = minute();
	var S = second();

	// sun
	var arc = 140; // radius of sun trajectory path
	var angle = H;
	push();
	translate(width/2, height/2);
	rotate(radians(7.5*H)); // rotate based on time of day, with highest point at 12:00 pm
	fill(239, 244, 214);
	ellipse(0 - arc, 0, 36, 36);
	pop();

	//static landscape
	fill(145, 168, 113); // farthest mountain
	beginShape();
	vertex(0, 166);
	vertex(67, 186);
	vertex(115, 175);
	vertex(150, 182);
	vertex(240, 152);
	vertex(270, 160);
	vertex(328, 144);
	vertex(352, 153);
	vertex(369, 150);
	vertex(400, 157);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(125, 147, 96); //third mountain
	beginShape();
	vertex(0, 226);
	vertex(40, 208);
	vertex(95, 224);
	vertex(183, 205);
	vertex(288, 218);
	vertex(400, 186);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(81, 110, 81, 80); // second mountain
	beginShape();
	vertex(0, 266);
	vertex(20, 258);
	vertex(40, 265);
	vertex(110, 244);
	vertex(200, 275);
	vertex(260, 312);
	vertex(400, 323);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(81, 110, 81, 80); // closest mountain
	beginShape();
	vertex(0, 280);
	vertex(47, 298);
	vertex(77, 289);
	vertex(119, 330);
	vertex(175, 348);
	vertex(211, 326);
	vertex(288, 337);
	vertex(325, 370);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);
 
 	// hot air balloon!
	var mapY1 = map(S, 0, 60, height, -175); // map y position of turquoise balloon to seconds
	var mapY2 = map(M, 0, 60, height * 2, -175); // map y position of magenta balloon to minutes
	var mapY3 = map(H, 0, 24, height * 2.857, -175); // map y position of orange balloon to hours
	var balX = 300; // X position of balloon
	var balY1 = mapY1;
	var balY2 = mapY2;
	var balY3 = mapY3;

	drawBalloon(balX, balY1 + 60, 120, 1, 26, 120, 142); // turquoise balloon
	drawBalloon(balX, balY2 + 60, 120, 0.5, 137, 62, 101); // magenta balloon
	drawBalloon(balX - 100, balY3 + 60, 120, 0.35, 233, 153, 95); // orange balloon

	if (H <= 11 & H >= 6) {
		fill(252, 217, 192, 75) // morning color
		rect(0, 0, width, height);
	} else if (H >= 14 & H <= 20) {
		fill(228, 77, 46, 75); // sunset color
		rect(0, 0, width, height);
	} else if (H > 20 || H < 6) {
		fill(5, 6, 90, 99); // dusk color
		rect(0, 0, width, height);
	}
}

function drawBalloon(balX, balY, balSize, balScale, R, G, B) {
	push();
	scale(balScale);
	fill(R, G, B);
	ellipse(balX, balY, balSize, balSize); // balloon shape
	quad(balX - 44, balY + 40, balX + 44, balY + 40, balX + 14, balY + 77, balX - 13, balY + 77);
	
	stroke(0); // basket lines
	line(balX - 12, balY + 77, balX - 12, balY + 90);
	line(balX + 12, balY + 77, balX + 12, balY + 90);
	noStroke();
	
	fill(104, 81, 32); // basket
	rect(balX - 12, balY + 90, 25, 25);
	pop();
}

I was inspired by some photographs that I saw of hot air balloons, and I really wanted to play with the different colors of sky at different times of day. The trickiest parts for me were setting up the function drawBalloon() to create the balloons, because once I scaled them, I forgot what variables would be affected in terms of animation.

The largest, turquoise balloon represents seconds, with the magenta balloon as minutes and the orange balloon as hours. The sun also rises and sets based on the hour, with the highest point at noon.

jeeyoonk06

var x = [];
var y = [];

function setup() {
    createCanvas(500, 500);
    for (i = 0; i < 100; i++){
    	x[i] = random(50, 450);
    	y[i] = random(50, 450);
    }
}

function draw() {
	background(1, 41, 71);
	var S = second(); //variables for time
	var M = minute();
	var H = hour();

	var Hmap = map(H, 0, 20, 0, 500); // ground (pink block) adds up every "HR"
	for(i = 0; i < H; i++)
		stroke(255);
        strokeWeight(2);
		fill(255, 138, 143);
		rect(0, 460, Hmap, 40);

	stroke(255); //fire fly JAR
	strokeWeight(2);
	line(192, 196, 289, 196);
	line(192, 196, 192, 242);
	line(192, 242, 163, 274);
	line(163, 274, 163, 460);
	line(163, 460, 318, 460);
	line(318, 460, 318, 274);
	line(318, 274, 289, 242);
	line(289, 242, 289, 196);

	push(); //Jar lid
	translate(260, -78)
	fill(255);
	rotate(PI / 3);
	rect(192, 196, 10, 100); 
    pop();

    for(i = 0; i < S; i++){ //tiny firefly appears every "SEC"
    	fill(247, 246, 146);
    	noStroke();
    	ellipse(x[i], y[i], 4, 4);
    }

    push(); //firefly rotates every "MIN"
    translate(width / 2, height / 2);
    noStroke();
    ellipseMode(CENTER);
    fill(255);
    rotate(radians(M * 6));
    stroke(255);
    strokeWeight(0.8);
    line(85, 70, 87, 80); //left bug tentacle
    stroke(255);
    strokeWeight(0.8);
    line(75, 60, 74, 80); //right bug tentacle
    noStroke();
    fill(249, 196, 65); //body
    ellipse(80, 40, 19, 50);
    fill(247, 216, 146);
    ellipse(80, 40, 17, 30);
    fill(244, 224, 189);
    ellipse(80, 40, 14, 18);
    fill(45, 16, 35); //wings
    ellipse(75, 50, 10, 33);
    fill(45, 16, 35); //wings
    ellipse(85, 50, 10, 33);
    fill(255, 0, 68); //head
    ellipse(80, 65, 12, 12);
    fill(0); //left eye
    ellipse(85, 70, 5, 5);
    fill(0);
    ellipse(75, 70, 5, 5);
    pop();

}

For this project, I was inspired by the fireflies I saw in my backyard. The tiny firefly adds up every second, pink block adds up every hour, and the firefly in the middle rotates every minute. From last week to this week, my biggest challenge had been understanding “arrays” and “loops”. Through this project, I could understand these concepts better, and I had fun exploring different styles, color, and movements of the parts of the project.

Christine Chen-Project-06-Abstract Clock

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-06-Abstract Clock
*/

function setup() {
    createCanvas(400, 400);
    angleMode(DEGREES);
}

function draw() {
    background(43, 43, 47); //darl gray background

    //background circle
    strokeWeight(0); //no stroke
    for (i = 560; i > 320; i = i - 60){
        fill(70); //light gray
        ellipse(200, 200, i, i);

        fill(55); //medium gray
        ellipse(200, 200, i - 20, i - 20);

        fill(43); //dark gray
        ellipse(200, 200, i - 40, i - 40); 
    }

    var angleH = 0; //angle for hour circle rotations
    var angleM = 0; //angle for minute circle rotations
    var angleS = 0; //angle for second circle rotations

    //y position for the circles of Hour, Minute, Second
    var yH = 0; 
    var yM = 20; 
    var yS = 40; 
    
    //Fetch current time
    var H = hour();
    var M = minute();
    var S = second();

    //ratio for controlling spiral circles within borders
    var ratio = 0.3 * width;

    strokeWeight(0.5);

    //Seconds Spiral
    for (var i = 0; i < S; i++){
        push();
        translate (200, 200);
        rotate(angleS);

        stroke(255); //white
        line(0, yS, 0, 0); //draw from canvas center to circle center

        noStroke();
        fill(255); //white
        ellipse(0, yS, 5, 5);
        pop();

        yS += ratio/60;
        angleS += 12;
    }

    //Hour Spiral
    for (var i = 0; i < 24; i++){
        push();
        translate (200, 200);
        rotate(angleH);
        
        if(i < H){
            fill(133, 185, 250); //light blue for current time
        } else {
            fill(100); //gray circles for the rest
        }
    
        ellipse(0, yH, 13, 13);
        pop();

        yH += ratio/24;
        angleH += 30;
    }


    //Minute Spiral
    for (var i = 0; i < 60; i++){
        push();
        translate (200, 200);
        rotate(angleM);

        if(i < M){
            fill(122, 150, 255); //dark blue for current time
        } else {
            fill(70); //gray circles for the rest
        }

        ellipse(0, yM, 10, 10);
        pop();

        yM += ratio/60;
        angleM += 12;
    }


}

    

My idea was a lot harder to create than I thought it would be. I created a spiral form of an abstract clock. The largest circles represent the hour, the medium sized ones represent minutes, and the smallest ones represent seconds. All 24 circles representing hours and all 60 circles representing minutes are drawn out. They get lighted up to represent the current time. The smallest circles representing seconds are drawn in real time which shows how time is moving forward.

I added in the background layers of ellipses and to make the clock more visually interesting. I also experimented with lines and added the lines to connects the canvas center to the second circles to make the movement of the clock more dynamic. I also ended up with having the circles of the more center parts of the spiral overlapping each other because I just like how it gives it a more dynamic “spiral” look rather than having equal distances between all of the circles.

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-06
*/


var fluffX = []; // x position of fixed seeds
var fluffY = []; // y position of fixed seeds
var angle = 0; //angle of fixed seeds

var looseX = []; //x position of floating seeds
var looseY = []; //y position of floating seeds
var dir = []; //direction of floating seeds
var w = 3; //width of fluff

var centerX = []; //x center of each hour stem
var centerY = []; // y center of each hour stem


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

    //fills arrays for fixed and floating 
    //seed positions with random numbers
    for (var i = 0; i < 60; i++) {

        //converts angle to distribute fixed seeds around the stem
        var min = 270 + map(angle, 0, 60, 0, 360);
        angle++;

        //positions for fixed seeds
        fluffX[i] = random(20, 30)*cos(radians(min));
        fluffY[i] = random(20, 30)*sin(radians(min));

        //positions for floating seeds
        looseX[i] = random(0, width);
        looseY[i] = random(0, height);

        //direction of floating seeds
        dir[i] = random(-0.5, 0.5);

    }

    var x = 28; //starting position for first stem

    //fills array for stem position
    for (var i = 0; i < 12; i++) {
        centerX[i] = x;
        x+= 38
        if (i % 2) { 
            centerY[i] = random(80, 170);
        }
        else {
            centerY[i] = random(180, 260);
        }

    }

}


function draw() {
    background("lightBlue");
    drawSeed(); //draws fixed seeds
    drawFloat(); //draws floating seeds
    drawStem(); //draws stems

}


//draws fixed and minute-based seeds
function drawSeed() {
    stroke(255);
    if (hour() == 12 || hour() == 0) {
        var flowerX = 12;
    }
    else {
        var flowerX = hour() % 12;
    }

    //draws seeds around hours that have not passed
    for (var j = 12; j >= flowerX; j--) {
        for (var i = 0; i < 60; i++) {
            stroke(240);
            line(centerX[j] + fluffX[i], centerY[j] + fluffY[i], centerX[j], centerY[j]);
            noStroke();
            ellipse(centerX[j] + fluffX[i], centerY[j] + fluffY[i], w, w);
        }
    }

    //draws seeds around hour stem corresponding to the current minute
    //depletes one seed for every minute passed
    for (var i = 60; i > minute(); i--) {
        stroke(240);
        line(centerX[flowerX - 1] + fluffX[i], centerY[flowerX - 1] + fluffY[i], centerX[flowerX - 1], centerY[flowerX - 1]);
        noStroke();
        ellipse(centerX[flowerX - 1] + fluffX[i], centerY[j] + fluffY[i], w, w);
        
    }
}


//draws floating seeds corresponding to current second
function drawFloat() {
    noStroke();

    //adds floating seed at random position for each second passed
    for (var i = 0; i < second(); i++) {
        ellipse(looseX[i], looseY[i], w, w);

        //assigns each seed a direction
        looseX[i] += dir[i];
        looseY[i] += dir[i + 1];

        //resets seed position if it floats off the canvas
        if (looseX[i] > width) looseX[i] = 0;
        else if (looseX[i] < 0) looseX[i] = width;
        if (looseY[i] > height) looseY[i] = 0;
        else if (looseY[i] < 0) looseY[i] = height;
    }
}


//draws stems and centers
function drawStem() {
    stroke(255);
    for (var i = 0; i < 12; i++) {
        line(centerX[i], centerY[i], centerX[i], centerY[i] + height);
        ellipse(centerX[i], centerY[i], 8, 8);
    }

}

How to read: The 12 stems represent hours, and the seeds that are positioned around them are the minutes. The seeds deplete each minute around the stem corresponding to the current hour. The loose bits of fluff appear each second and float aimlessly until they reset each minute.

This has been my favorite assignment so far! Learning about arrays has made many of my ideas more tangible. I knew for this assignment that I wanted to do something pictorial, and I originally considered using balloons or planets. Nevertheless, I’m very happy with how this clock turned out.
Early sketches:

dots clock

function setup() {
    createCanvas(480, 100);
    stroke(17, 21, 28);
}

function draw() {
    // background colour
    var H = hour();
    if (H >= 7 & H <= 19) {
        background(228, 246, 248); // day background
        stroke(228, 246, 248);
    }
    else {
        background(17, 21, 28); // night background
        stroke(17, 21, 28);
    }
    // hour circles
    var d1 = width / 24; // diameter (L)
    for (var i = 0; i < 24; i++) { // 24 hours
        var hx = i * d1 + d1 / 2; // x position
        if (H >= 7 & H <= 19) { // day circle colour
            // top edge
            if (H - 1 == i) {
                fill(98, 194, 204);
                ellipse(hx, height - d1 / 2, d1, d1);
            }
            // bottom edge
            else {
                fill(98, 194, 204);
                ellipse(hx, d1 / 2, d1, d1);
            }
        }
        else { // night circle colour
            if (H - 1 == i) {
                fill(48, 72, 120);
                ellipse(hx, height - d1 / 2, d1, d1);
            }
            // bottom edge
            else {
                fill(48, 72, 120);
                ellipse(hx, d1 / 2, d1, d1);
            }
        }
    }
    // minute circles
    var M = minute();
    var d2 = width / 60; // diameter (M)
    for (var j = 0; j < 60; j++) { // 60 minutes
        var mx = j * d2 + d2 / 2;
        if (H >= 7 & H <= 19) { // day circle colour
            if (M - 1 == j) {
                fill(241, 112, 34);
                ellipse(mx, height - d2 / 2, d2, d2);
            }
            else {
                fill(241, 112, 34);
                ellipse(mx, d1 + d2 / 2, d2, d2);
            }
        }
        else { // night circle colour
            if (M - 1 == j) {
                fill(120, 144, 168);
                ellipse(mx, height - d2 / 2, d2, d2);
            }
            else {
                fill(120, 144, 168);
                ellipse(mx, d1 + d2 / 2, d2, d2);
            }
        }
    }
    // second circles
    var S = second();
    var d3 = width / 60 - 2; // diameter (S)
    var space = 2; // spacing between ellipse centres
    for (var k = 0; k < 60; k++) { // 60 seconds
        var sx = k * d3 + space * k + d3 / 2 + 1;
        if (H >= 7 & H <= 19) { // day circle colour
            if (S - 1 == k) {
                fill(253, 184, 19);
                ellipse(sx, height - d3 / 2, d3, d3);
            }
            else {
                fill(253, 184, 19);
                ellipse(sx, d1 + d2 + d3 / 2, d3, d3);
            }
        }
        else { // night circle colour
            if (S - 1 == k) {
                fill(240, 168, 24);
                ellipse(sx, height - d3 / 2, d3, d3);
            }
            else {
                fill(240, 168, 24);
                ellipse(sx, d1 + d2 + d3 / 2, d3, d3);
            }
        }
    }
}

I tried to make a clock that uses the colour and position of graphic elements to indicate the time of day. Three rows of circles that represent the hour, minute, and second appear at the top to their correct quantity (24, 60, 60). For the current time, the corresponding circle appears at the bottom edge of the canvas.

I also wanted the colour scheme of the clock to change with the time of day. I coordinated colours for a day and night setting that change at 7 a.m. and 7 p.m with that range using the daytime colour scheme. I looked up the sunrise and sunset times in Pittsburgh to make sure.