Category: Project-06-Abstract-Clock

atraylor – Project 06 – Section B

sketch

// atraylor@andrew.cmu.edu
// Section B
// Project 06

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

function draw() {
    background(255, 230, 154);
    var offset = sin(millis()) * 2; // movement of hour circle

    var h = hour();
    var m = minute();
    var s = second();

    var hCol = map(h, 0, 23, 0, 255); //mapping hour to shade

    fill(hCol);
    ellipse(width/2, height/2 + offset, 50, 50); // hour circle

    for (var i = 0; i < s; i++) { //drawing second dots
        c = color(0);

        drawSec(i, c);
    }

    for (var i = 0; i < m; i++){ //drawing minute circles
        c = color(0, 40);
        drawMin(i, c);
    }
}

function drawSec(count, col, offset, offset2) { // fucntion for second dots
    push();
    offset = cos(millis()/ 350) * random(20, 50); // creating random oscillation
    offset2  = sin(millis()/ 350) * random(20, 50);
    translate(200, 200);
    rotate(radians(count * 6));
    fill(col);
    ellipse(150 + offset, 0 + offset2, 8, 8);
    pop();
}

function drawMin(count, col, offset, a){ // function for minute circles
    push();
    a = random(50, 70);
    offset = sin(millis()) * random(1, 2);
    translate(200, 200);
    rotate(radians(count * 6));
    fill(col);
    ellipse(60 + offset, 0, a, a);
    pop();
}

Time keeping is an interesting subject to me, especially when you begin to think about inaccuracy. My design is inspired by time keeping by measuring oscillation and resonance. I remember visiting NIST in elementary school to see their atomic clock which measures the resonance frequency of cesium to determine a second, and is the basis of time keeping in the US. While my design doesn’t illustrate a cesium atom’s resonance or the mechanics of atomic clocks, I was inspired to represent oscillation.

hyt-Project-06: Clock Works

hyt-06-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-06-clock


function setup() {
    createCanvas(480, 300);
    angleMode(DEGREES);
}


function draw() {

    // current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // color palette
    var transparency = 170; // alpha value
    var red = color(255, 0, 0, 170);
    var orange = color(255, 100, 0, 170);
    var green = color(7, 150, 70, 170);
    var yellow = color(255, 250, 55, transparency);
    var blue = color(0, 155, 250, 170);
    var purple = color(142, 78, 201, 170);

    // draw rainbows
    var hDiff = 30;// height difference each time
    var initialHL = 190; // initial height on the left
    var initialHR = 20; // initial height on the right

    background(200 - H, 255 - M * 0.5, 210 - S * 0.7); // bg color randomizes as time goes by

    
    //red
    strokeWeight(25); // line thickness
    stroke(red);
    line(0, initialHL, width, initialHR);
    //orange
    stroke(orange);
    line(0, initialHL + hDiff, width, initialHR + hDiff);
    //green
    stroke(green);
    line(0, initialHL + hDiff * 2, width, initialHR + hDiff * 2);
    //blue
    stroke(blue);
    line(0, initialHL + hDiff * 3, width, initialHR + hDiff * 3);
    //purple
    stroke(purple);
    line(0, initialHL + hDiff * 4, width, initialHR + hDiff * 4);

//----------------------------


    // HOURS dots
    for (var dotH = 1; dotH <= 24; dotH++) {
        noStroke();
        fill(yellow); 
        rect(20 * H, initialHL + 30 - 7.1 * H, 3, 3); 
        // pacman shape
        noStroke();
        fill(yellow);
        var angle1 = 20; 
        var angle2 = 310;
        arc(20 * H - 20, initialHL + 40 - 7.1 * H, 20, 20, angle1, angle2);
    }


    // MINUTES dots
    for (var dotM = 1; dotM <= 60; dotM++) {
        noStroke();
        fill(yellow);
        rect(7.9 * M, initialHL + 60 - 2.8 * M, 3, 3); 
        // pacman shape
        noStroke();
        fill(yellow);
        var angle1 = 20; 
        var angle2 = 310;
        arc(7.9 * M - 20, initialHL + 70 - 2.8 * M, 20, 20, angle1, angle2);
    }



    // SECONDS dots
    for (var dotS = 1; dotS <= 60; dotS++) {
        noStroke();
        fill(yellow);
        rect(7.9 * S, initialHL + 90 - 2.8 * S, 3, 3); 
        // pacman shape
        var angle1 = 20; 
        var angle2 = 310;
        arc(7.9 * S - 20, initialHL + 100 - 2.8 * S, 20, 20, angle1, angle2);
    }


    // clock time shown on the left top side
    fill(0, 100);
    rotate(-20);
    textFont("Courier New", [60]);
    time = H + ":" + M + ":" + S; 
    text(time, -10, 163); 

}

For this project, I had several ideas in mind, and somehow thought of the viral Nyan cats looped video on Youtube. Inspired by that, I decided to make a rainbow background with each Pacman moving as a way of representing the clock’s hour, minute, and seconds.

(A really rough sketch for ideation phase)

However, later I realized the extreme difficulty of drawing an arc movement for the Pacman, and resorted to a simpler version of straight lines of rainbow. Some of the variations within the projects are play with colors, transparency, movements and the background color gradient throughout time. I like how the final results turned out, and also enjoyed the process of making.

Jihee Kim_SectionD_Project-06-Abstract-Clock

jiheek1_project6

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project6 Abstract Clock
//section D

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

function draw() {
    background(127, 87, 75);
    drawGrid(); // draw a picnic table pattern in the background with grid
    var H = hour()%12; //the hour restarts on a 12-hour basis
    var M = minute();
    var S = second();

    //SECONDS
    //for every second, a salt particle comes out of the shaker
    //draw the salt shaker
    stroke(180);
    strokeWeight(2);
    fill(220);
    ellipse(77.5, 120, 55, 55); // head of the shaker
    fill(255);
    stroke(180);
    quad(35, 20, 50, 120, 105, 120, 120, 20); // the body of salt shaker
    line(55, 20, 70, 120); // left profile line of shaker
    line(100, 20, 85, 120); // right profile line of shaker
    noStroke();
    fill(180);
    ellipse(73, 138, 5, 5); // hole left
    ellipse(82, 138, 5, 5); // hole right
    ellipse(77.5, 144, 5, 5); // hole middle
    //have the salt particles come out every second
    for (var i = 0; i < S; i ++) {
    fill(255);
    rect(76, 152 + i*5, 2.5, 2.5);
    }

    // MINUTES
    // a ring forms on the plate of eggs every minute
    //draw the plate of eggs
    fill(230);
    noStroke();
    ellipse(width*3/4-1, height/4+3, 403, 403); // plate shadow for volume
    fill(255);
    ellipse(width*3/4, height/4, 400, 400); // plate
    //draw navy blue patterns on the plate
    noFill();
    stroke(155, 187, 234);
    strokeWeight(1);
    //have ring draw every minute
    for (var i = 0; i < M; i++) {
    ellipse(width*3/4, height/4, 390-i*6.5, 390-i*6.5);
    }

    //draw the eggs
    noStroke();
    //Egg1
    fill(239, 228, 202); //428
    ellipse(270, height/2-96, 153, 133); //egg white shadow for volume
    fill(249, 245, 232);
    ellipse(270, height/2-100, 150, 130); //egg white
    fill(237, 130, 37);
    ellipse(width-230, height/2-85, 53, 53); //egg yolk shadow for volume
    fill(242, 139, 40);
    ellipse(width-232, height/2-86, 50, 50); //egg yolk
    //Egg2
    fill(239, 228, 202); //362
    ellipse(width*3/4+2, height/2-5, 153, 133); //egg white shadow for volume
    fill(249, 245, 232);
    ellipse(width*3/4, height/2-9, 150, 130); //egg white
    fill(237, 143, 50);
    ellipse(width-133, height/2-13, 53, 53); //egg yolk shadow for volume
    fill(242, 152, 54);
    ellipse(width-135, height/2-14, 50, 50); //egg yolk


    //HOURS
    //a sausage will appear every hour
    //the tray of sausages will clear every 12 hours
    //draw a tray for sausage
    fill(255);
    rect(width/3-45, height-100, width*2/3+45, 100);
    rect(width/3-30, height-115, width*2/3+30, 15);
    ellipse(width/3-30, height-100, 30, 30); //round the corner of the tray
    //draw patterns on the tray
    noFill();
    stroke(160, 157, 78);
    strokeWeight(1);
    line(width/3-42, height-100, width/3-42, height);
    line(width/3-27, height-112, width, height-112);
    arc(width/3-27, height-97, 30, 30, PI, 3*PI/2);
    //draw sausage (a sausage appears every hour)
    var X = [130, 160, 190, 220, 250, 280, 310, 340, 370, 400, 430, 460];
    var Y = 410;
    for (var i = 0; i < H; i++) {
        stroke(147, 49, 28);
        strokeWeight(15); //thickness of the sausage
        line(X[i], Y, X[i] + 15, Y + 40);
    }
}

function drawGrid() {
    // cover canvas with vertical lines to depict a wood table
    for (var y = 0; y < height; y ++) {
        for (var x = 50; x < width; x += 50) {
            stroke(102, 69, 56);
            strokeWeight(3);
            line(x, y, x, height);
        }
    }
}

For this project, I created an abstract clock in a picnic setting. I used a hierarchy in size to depict the seconds, minutes and hours. The smallest element, which is the salt particles, represent the seconds. The second in size, which is the blue rings/pattern that form on the plate, depict the minutes. Lastly, the biggest element, the sausages represent the hours. The tray of sausages clears every 12 hours, making this clock based on a 12hr system.

sketch

kyungak-project-06-abstract-clock

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project 06

var ellcenx = 85;
var ellceny = 100;
var dia = 140;

function setup() {
    createCanvas(480, 200);
    angleMode(DEGREES);
    noStroke();
}

function draw() {

    background(213,158,153); //pink background

    var h = hour();
    var m = minute();
    var s = second();

    var mappedH = map(h, 0,23, 0,255);
    var mappedM = map(m, 0,59, 0,255);
    var mappedS = map(s, 0,59, 0,255);

    //donut base
    fill(195,132,46); //donut brown
    ellipse(ellcenx,ellceny,dia,dia); //left donut base
    ellipse(ellcenx+155,ellceny,dia,dia); //middle donut base
    ellipse(width-ellcenx,ellceny,dia,dia); //right donut base

    noStroke();
    //chocolate filling on left donut
    //color changes according to hours (blue - pink)
    fill(mappedH,100,150); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + ellcenx;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //chocolate filling on middle donut
    //color changes according to minutes (red - yellow)
    fill(200,mappedM,50); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + ellcenx+155;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //chocolate filling on right donut
    //color changes according to seconds (brown - purple)
    fill(100,50,mappedS); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + width-ellcenx;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //donut hole
    fill(213,158,153);
    ellipse(ellcenx,ellceny,dia-100,dia-100); //left donut hole
    ellipse(ellcenx+155,ellceny,dia-100,dia-100); //middle donut hole
    ellipse(width-ellcenx,ellceny,dia-100,dia-100); //right donut hole

    //left donut sprinkle
    fill(250,233,3);
    rect(ellcenx-30,ellceny-30,3,7);
    rect(ellcenx-38,ellceny-10,7,3);
    rect(ellcenx-10,ellceny+30,3,7);
    rect(ellcenx+20,ellceny-40,7,3);
    rect(ellcenx+30,ellceny+35,3,7);
    rect(ellcenx-30,ellceny+20,7,3);
    rect(ellcenx,ellceny-40,3,7);
    rect(ellcenx+30,ellceny-20,7,3);
    rect(ellcenx+40,ellceny+10,7,3);
    rect(ellcenx+10,ellceny+30,7,3);
    rect(ellcenx-40,ellceny+10,3,7);

    //middle donut sprinkle
    fill(255);
    rect(ellcenx-30+155,ellceny-30,3,7);
    rect(ellcenx-38+155,ellceny-10,7,3);
    rect(ellcenx-10+155,ellceny+30,3,7);
    rect(ellcenx+20+155,ellceny-40,7,3);
    rect(ellcenx+30+155,ellceny+35,3,7);
    rect(ellcenx-30+155,ellceny+20,7,3);
    rect(ellcenx+155,ellceny-40,3,7);
    rect(ellcenx+30+155,ellceny-20,7,3);
    rect(ellcenx+40+155,ellceny+10,7,3);
    rect(ellcenx+10+155,ellceny+30,7,3);
    rect(ellcenx-40+155,ellceny+10,3,7);

    //right donut sprinkle
    fill(255,145,0);
    rect(width-ellcenx-30,ellceny-30,3,7);
    rect(width-ellcenx-38,ellceny-10,7,3);
    rect(width-ellcenx-10,ellceny+30,3,7);
    rect(width-ellcenx+20,ellceny-40,7,3);
    rect(width-ellcenx+30,ellceny+35,3,7);
    rect(width-ellcenx-30,ellceny+20,7,3);
    rect(width-ellcenx,ellceny-40,3,7);
    rect(width-ellcenx+30,ellceny-20,7,3);
    rect(width-ellcenx+40,ellceny+10,7,3);
    rect(width-ellcenx+10,ellceny+30,7,3);
    rect(width-ellcenx-40,ellceny+10,3,7);

    fill(0);
    textSize(10);
    text( h + " hour(s) " + m + " minute(s) " + s + " second(s) ", 20,20);
}

For this project, I wanted to make three donuts that each represented hours, minutes, and seconds of time. Instead of tallying the time changes with visual elements, I wanted to express it through color. For me, using color meant taking more of an abstract approach to time, which is always expressed as exact numbers. By letting time gradually alter the icing color of the donut, I wanted the viewers to not be able to tell the time in a glance but to feel the time tick and change. Because hours and minutes don’t go by so quickly, I put a reference on the top to let people know that the clock is working. But by paying attention to the color changes, one can easily tell that the clock is doing its job, but in a unique way.

mmiller5-Project-06

sketch

//Michael Miller
//Section A
//mmiller5@andrew.cmu.edu
//Project-06

//Coordinates for pandas
var pandaX = [30, 90, 150, 210, 270, 330, 390, 450,
	      30, 90, 150, 210, 270, 330, 390, 450,
	      30, 90, 150, 210, 270, 330, 390, 450];
var pandaY = [298, 298, 298, 298, 298, 298, 298, 298,
	      455, 455, 455, 455, 455, 455, 455, 455, 
	      200, 200, 200, 200, 200, 200, 200, 200];

function setup() {
    createCanvas(480, 480);
    frameRate(1);
    noStroke();
}

function draw() {
    //relates time to ratio of circular motion for sun and moon
    var hourRat = ((hour() + (minute() / 60)) / 24) * 2 * PI;
    var bambooX = [];
    var bambooY = [];
    //darkens during night, brightens during day
    var bgCol = color(49, 49, constrain(160 + 120 * -cos(hourRat), 49, 200));
    background(bgCol);
    //sun
    fill(255, 255, 0);
    ellipse(width / 2 - sin(hourRat) * 200, height / 2 + cos(hourRat) * 200,
	    150, 150);
    //moon
    fill(230);
    ellipse(width / 2 + sin(hourRat) * 200, height / 2 - cos(hourRat) * 200,
	    100, 100);
    fill(bgCol);
    ellipse(width / 2 + sin(hourRat + .2) * 200,
	    height / 2 - cos(hourRat + .2) * 200,
	    75, 75);
    //midground
    fill(116, 116, 55);
    rect(0, 2 * height / 3 - 100, width, 2 * height / 3 - 100);
    //foreground
    fill(154, 116, 55);
    rect(0, 2 * height / 3, width, 2 * height / 3);
    //time tracking mechanics
    bambooFall(width / 2, 2 * height / 3);
    //every hour, a new panda comes to feast on the accumulated bamboo
    for(var i = 0; i < hour(); i ++) {	
	panda(pandaX[i], pandaY[i]);
    }
    bambooGrow(width / 2, 2 * height / 3);
}
//central bamboo grows one stalk per second, making happy pandas
function bambooGrow(x, y) {
    for(var sec = 0; sec < second(); sec ++) {
	    fill(120, 180, 56);
	    rect(x, y - 4 * sec, 3, 3);
	    fill(128, 75, 35);
	    rect(x, y - 4 * sec - 1, 3, 1);
	}
}
//when bamboo gets too tall, it falls in a half circle, stacking up every minute
function bambooFall(x, y) {
    for(var min = 0; min < minute(); min ++) {
	fill(177, 200, 60);
	push();
	translate(x, y);
	rotate(radians(2 + (min / 60) * 176));
	rect(0, 0, 180, 3);
	pop();
    }
}
//panda and its body parts
function panda(x, y) {
    pandaBody(x, y);
    pandaHead(x, y - 40);
}
function pandaHead(x, y) {
    fill(255);
    ellipse(x, y, 50, 50);
    fill(0);
    ellipse(x - 20, y - 20, 15, 15);
    ellipse(x + 20, y - 20, 15, 15);
    ellipse(x - 10, y, 10, 10);
    ellipse(x + 10, y, 10, 10);
    ellipse(x, y + 7, 8, 6);
    fill(255);
    ellipse(x - 9, y - 1, 2, 4);
    ellipse(x + 9, y - 1, 2, 4);
}
function pandaBody(x, y) {
    fill(255);
    ellipse(x, y, 55, 50);
    fill(0);
    ellipse(x - 18, y - 12, 20, 25);
    ellipse(x + 18, y - 12, 20, 25);
    ellipse(x - 19, y + 13, 25, 23);
    ellipse(x + 19, y + 13, 25, 23);
}

Yep, more bamboo.  Why?  I was inspired by the exceptional speed at which bamboo grows, but then I thought, “Now what if it grew super fast?”  The consequences of lightning bamboo are staggering — potential building material, fuel, and of course, food for pandas!  Imagine an infinity ice cream dispenser, except that you never get full (or fat, we’ll ignore that too) — that’s exactly what this is for pandas!  I think word of this would spread pretty quickly, but pandas are slow so they take a while to get there (1 hour exactly, actually.  Punctual pandas).

Now I don’t actually do all that much art, so my product probably doesn’t look as amazing as it could — the pandas are a buncha colored circles — but I think it works.  The coding was pretty fun for this project, and it took me some time to figure out how to make the time countable.  I probably would’ve been more comfortable doing something more abstract, but I thought I’d give this a try, and I think it worked out in the end.

jennyzha-Project 06

sketch

// Jenny Zhang
// Section D
// jennyzha@andrew.cmu.edu
// Project 06

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;
var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
        millisRolloverTime = 0;
}

function draw() {
    background(255,250,200);

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

	if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);

    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);

    noStroke();
    fill(255, 200, 200);
    ellipse(width/2, height/2, hourBarWidth, hourBarWidth);
    var eyeLX = width/2 - hourBarWidth*0.25;
    var eyeRX = width/2 + hourBarWidth * 0.25;
    fill(0,90,150);
    ellipse(eyeLX, height/2, minuteBarWidth/3, minuteBarWidth/3);
    ellipse(eyeRX, height/2, minuteBarWidth/3, minuteBarWidth/3);
    fill(226,43,42);
    var mouth = width/2 
    ellipse(mouth, height-height/4, secondBarWidthChunky/3, secondBarWidthChunky/3)
}

This project was inspired by our third project, the variable faces, where I made the head the hour, the eyes the minute, and the mouth a function of the seconds. I enjoyed going back to my previous project and reviewing, improving, and understanding my past code on a deeper level as I refined it into an abstract clock for this project.

Jdbrown – Project 6 – Nature Clock

Actual Clock-Jdbrown

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Project 6: Clock
// Section C

var slowVel = 1.0;
var medVel = 1.5;
var speedyVel = 2;

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

function draw () {
    background (25, 150, 150, 150);

    var S = second ();
    var M = minute ();
    var H = hour ();

    // setting up the Sun (measurement of seconds);

    push ();
    stroke (255);
    strokeWeight (2.5);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 320, 320, radians (0), radians (45));
    arc (0, 0, 320, 320, radians (55), radians (100));
    arc (0, 0, 320, 320, radians (110), radians (155));
    arc (0, 0, 320, 320, radians (165), radians (210));
    arc (0, 0, 320, 320, radians (220), radians (265));
    arc (0, 0, 320, 320, radians (275), radians (310));
    arc (0, 0, 320, 320, radians (320), radians (350));
    fill (200, 180, 70);
    ellipse (0, 0, 200 + (H * 3), 200 + (H * 3));   // draws the sun
    fill (255);
    ellipse (0, 0, S + 75, S + 75);     // draws the white ball in the sun, growing every second
    pop ();

    push ();
    stroke (255);
    strokeWeight (1.5);
    translate (width, 0);
    rotate (radians (S * -6));
    fill (0, 0);
    arc (0, 0, 300, 300, radians (0), radians (45));
    arc (0, 0, 300, 300, radians (55), radians (100));
    arc (0, 0, 300, 300, radians (110), radians (155));
    arc (0, 0, 300, 300, radians (165), radians (210));
    arc (0, 0, 300, 300, radians (220), radians (265));
    arc (0, 0, 300, 300, radians (275), radians (310));
    arc (0, 0, 300, 300, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();

    push ();
    stroke (255);
    strokeWeight (1);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 280, 280, radians (0), radians (45));
    arc (0, 0, 280, 280, radians (55), radians (100));
    arc (0, 0, 280, 280, radians (110), radians (155));
    arc (0, 0, 280, 280, radians (165), radians (210));
    arc (0, 0, 280, 280, radians (220), radians (265));
    arc (0, 0, 280, 280, radians (275), radians (310));
    arc (0, 0, 280, 280, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();
    
    // making the scenery, measuring hours;

    if (H >= 12) {

    noStroke();
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (0, 0 - 15, 150, 400); // filter (top)
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (0, height - 75, 200, 400);    // filter (bottom)
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (200, 150, 200, 400);    // filter (side)
    fill (25, 150, 150);
    ellipse (365, 190, 105, 105); // curve
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    ellipse (365, 190, 50, 50); // curve
    fill (40 - (H * 3), 75 - (H * 3), 200, 150);
    ellipse (0, height, 400, 500);  // waterfall
    fill (67 - (H * 3), 75 - (H * 3), 100, 150);
    ellipse (0, height, 300, 300);  // waterfall shadow
    fill (100 - (H * 3), 75 - (H * 3), 100, 150);
    ellipse (0, height, 120, 150);  // waterfall shadow

    }

    if (H < 12) {

    noStroke();
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (0, 0 - 15, 150, 400); // filter (top)
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (0, height - 75, 200, 400);    // filter (bottom)
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (200, 150, 200, 400);    // filter (side)
    fill (25, 150, 150);
    ellipse (365, 190, 105, 105); // curve
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    ellipse (365, 190, 50, 50); // curve
    fill (40 + (H * 3), 75 + (H * 3), 200, 150);
    ellipse (0, height, 400, 500);  // waterfall
    fill (67 + (H * 3), 75 + (H * 3), 100, 150);
    ellipse (0, height, 300, 300);  // waterfall shadow
    fill (100 + (H * 3), 75 + (H * 3), 100, 150);
    ellipse (0, height, 120, 150);  // waterfall shadow

    }

    // drawing little bird boi;

    birdBoi();


    
   
        

    // drawing sky stuff, measuring minutes;
    
    var cloudX = -100;

    fill (255 - (M * 3), 200);
    ellipse (cloudX + slowVel, 50, 200, 25);
    ellipse ((cloudX + medVel), 90, 200, 25);
    ellipse ((cloudX + speedyVel) - 250, 150, 200, 25);
    

    slowVel += 1 + (M / 10);
    medVel += 1.2 + (M / 5);
    speedyVel += 1.5 + (M / 2.5);

    // making sure that clouds will respawn on the other side;

    if (cloudX + slowVel > width + 100) {
        cloudX = -200;
        slowVel = 1;
    }
    if (cloudX + medVel > width + 100) {
        cloudX = -200;
        medVel = 1.2;
    }
    if (cloudX + speedyVel > width  + 400) {
        cloudX = -200;
        speedyVel = 1.5;
    }
}

// making the bird boy

function birdBoi () {

    var H = hour();
    var M = minute ();
    var S = second ();

    for (var i = 0; i < 20; i++) {
        push ();
        translate (30, 250);
        rotate (radians (i * 6));
        rotate (radians (i));
        stroke (0);
        strokeWeight (2.5);
        line (0, 0, 10 + i, 10 + i);
        pop ();
    }

    fill (0);
    triangle (30, 245, 75, 245, 35, 255);  // beak
    fill (255);
    ellipse (30, 270, 30, 30);  // body
    ellipse (35, 250, 25, 25);  // head
    fill (200);
    ellipse (25, 270, 18, 25);  // body shadow
    fill (200);
    ellipse (32, 251.5, 18, 20);  // head shadow
    fill (0);
    ellipse (40, 248, 5, 5);    // eye

    for (var i = 0; i < 20; i++) {
        push ();
        translate (20, 255);
        rotate (radians (i * 6));
        rotate (radians (i));
        stroke (0);
        strokeWeight (2.5);
        line (0, 0, 10 + i, 10 + i);
        pop ();
    }
}

For this project, I had a lot of different ideas. Most of them were HORRIBLE. But I settled on a peaceful scene, a hummingbird-boi partying and communing with nature.

The “clock” portion of the design is as follows:

Seconds are measured by the rotation of the sun’s rays, as well as the little white ball in the middle of the sun.

Minutes are measured by the clouds’ speed and color.

Hours are measured by pigment changes in the physical landscape (bright, warm for morning and dark blues for night).

mjanco – project6-abstractclock-sectionB

abstractclock

//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project06-AbstractClock

function setup() {
  createCanvas(600, 800);
}

function draw() {
  noStroke();
  background(228,200,30);

  var mapH = map(hour(), 0,30, 0, width);

//make ellipse that grows depending on the hour
  fill(250, 150, 0);
    ellipse(300,400, mapH, 50);


  for (var i = 0; i < 60; i++){
    var c = color(240, 200, 0);
    	//make seconds red
    	if (second() == i) {
      	c = color(240, 80, 30);
    }
    //if not, purple
    else {
      	c = color(130, 100, 180);

    //getting the minutes to gradually make the clock green as time goes on
    	if (i < minute() & i != second()) {
      	c = color(100, 150, 30);
     	 }
 	 }
    drawMark(i, c);
  }
}
  function drawMark(count, col) {
    push();
    translate(300, 400);
    rotate(radians(count*6));
    fill(col);
    strokeWeight(1);
    ellipse(50,50, 300,3);
    pop();
  }

For this assignment, I was inspired by wacky 60’s / 70’s room accessories, with their bright colors and abstract shapes. It took me a while to figure out how to make the minutes add up and then reset once 60 minutes pass, but eventually i figured it out, and learned a lot from doing this project.

rsp1-Project06-Abstract-Clock

sketch

/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 06: Abstract Clock*/

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(620, 620);
    noStroke();
    millisRolloverTime = 0;
}

function draw() {
    background(17,76,98);

    // Fetch the current time
    var H = hour();
    var X = (H%12);//so that the clock becomes a 12hr clock instead of 24 hr
    var M = minute();
    var S = second();


    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    //showing text of time
    fill(255);
    text(nf(X,2,0) + ':' + nf(M,2,0) + ':' + nf(S,2,0),width/2-30,15);


    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);

    // Making the seconds into a smoother transition
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);


  //floorbed
  fill(250,247,196);
  rect(0,height-115,width,200);

  //drawing the snail (hour)
  noStroke();
  fill(207,230,239);
  rect(0, 500, hourBarWidth, 10);
  fill(234,207,239);
  ellipse(hourBarWidth,484,45,45);
  fill(155,124,161);
  ellipse(hourBarWidth,505,70,10);
  fill(155,124,161);
  ellipse(hourBarWidth+20,483,5,45);
  fill(155,124,161);
  ellipse(hourBarWidth+30,483,5,45);
  fill(255);
  ellipse(hourBarWidth+20,465,15,15);
  fill(255);
  ellipse(hourBarWidth+30,465,15,15);
  fill(25);
  ellipse(hourBarWidth+20,465,8,8);
  fill(25);
  ellipse(hourBarWidth+30,465,8,8);

  //drawing fish hook (seconds)
  push();
  noFill();
  strokeWeight(10);
  stroke(160);
  arc(100,secondBarWidthSmooth,70,70,0,PI);
  strokeWeight(5);
  arc(135,secondBarWidthSmooth-110,10,10,0,TWO_PI);
  strokeWeight(6);
  rect(133,secondBarWidthSmooth-100,5,100,10);
  stroke(50);
  rect(133,0,2,secondBarWidthSmooth-110,5);

  pop();

  //drawing the fish (minute)
  fill(94,229,239);
  ellipse(minuteBarWidth,275,100,80);
  fill(255);
  ellipse(minuteBarWidth+25,250,40,40);
  fill(0);
  ellipse(minuteBarWidth+35,250,20,20);
  fill(94,191,239);
  triangle(minuteBarWidth-80,255,minuteBarWidth-80,295,minuteBarWidth-40,270);
  //and exclamation point
  fill(255);
  rect(minuteBarWidth-5,130,10,60,10);
  ellipse(minuteBarWidth,210,10,10);

}

 

For my project, I wanted to make a clock but visually represented in a unique way. Here, I decided to make an instance/ scene of a fish underwater. The snail on the floorbed represents the hours (bc snails are slow anyway), the fish represents the minutes, and the fish hook represents the seconds. The scene here is that the fish is swimming away from the oncoming hook while the snail is just crawling away in a leisurely pace. As seen in the sketch, I initially wanted to use bubbles to represent the seconds, but went ahead and changed my idea to the fish hook instead.

sketch of ideas

(not sure if it’s just me, but for some reason I have to refresh the page a couple times to see the code work.)

jamieh-Project06-Abstract-Clock

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 6
*/

var d1 = 24;	//hour
var d2 = 60;	//minutes/seconds
var slope1;		//slope of the diagonal line from hour triangle
var slope2;		//slope of the diagonal line from minute triangle

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

function draw() {
	//this if statement inverts the black-white colours depending on AM or PM
	if(hour()>11){		//PM
		background(0);
	} else {			//AM
	background(255);
	}
//HOUR	
	slope1 = (height/2-height/8)/d1;
	for(var i = 0; i < d1; i++){
		//12am, 3am, 6am, 9am, 12pm, 3pm, 6pm, 9pm
		//longer and thicker line 
		if(i%3 == 0){
			if(hour()>11){
				stroke(200);
			} else {
			stroke(0);
		}
			strokeWeight(1);
			line(0, height/8+i*slope1,
			 	 width/2+d1-i, height/8+i*slope1);
		} else {
		//thin lines for all other times
			stroke(100);
			strokeWeight(0.5);
			line(0, height/8+i*slope1,
			 	 width/2-d1+i, height/8+i*slope1);
		}
		//blue triangle fill for HOUR
		noStroke();
		fill(26, 136, 255, 200);
		if(i == hour()){
			triangle(width/2+d1-i, height/8+i*slope1,
				 width/2-d1+i, height/8+i*slope1,
				 width/2, height/2);
		}
	}
//MINUTE
	slope2 = (height*(7/8)-height/2)/d2;
	for(var j = 0; j <= d2; j++){
		//10 min, 20 min, 30 min, 40 min, 50 min, 60 min
		if(j%10 == 0){			
			if(hour()>11){		//PM
				stroke(200);
			} else {			//AM
				stroke(0);
			}
			strokeWeight(1);
			line(width/2-j, height/2+j*slope2,
			 	 width, height/2+j*slope2);
		} 
		//blue quad fill for MINUTE
		noStroke();
		fill(0, 99, 204, 200);
		if(j == minute()){
			quad(width/2-d2, height*(7/8),
				 width/2+d2, height*(7/8),
				 width/2+d2-j, height*(7/8)-j*slope2,
				 width/2-d2+j, height*(7/8)-j*slope2);
		}
//SECOND
		stroke(179, 204, 255);
		strokeWeight(2);
		if(j == second()){
		line(width/2, height/2, width/2, height/2+j*slope2)
		}
	}
//TWO TRIANGLES
	if(hour()>11){		//PM
		stroke(255);
	} else {			//AM
		stroke(0);
	}
	strokeWeight(2);
	noFill();
	//hour triangle
	triangle(width/2-d1,height/8,
			 width/2+d1, height/8,
			 width/2, height/2);
	//minutes triangle
	triangle(width/2, height/2,
			 width/2-d2, height*(7/8),
			 width/2+d2, height*(7/8));
}

For this project, I wanted to do something similar to the hourglass, but make it more geometric with just triangles and lines. The lines and background colours invert when AM switches to PM and vice versa.