Project-06-Abstract-Clock – Page 2 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 6: Clock

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

function draw() {
    background(225, 213, 197);
    var s = second();
    var h = hour();
    var m = minute();
    mini(m); //blue circles (minute)
    horse(h); // black rectangle (hour)
    circ(s); // yellow circle (seconds)
}

//yellow circle grows according to seconds and red rectangle gets longer
function circ(s) {
    noStroke();
    fill("orange")
    ellipse(175, 175, s * 3, s * 3);
    fill(209, 54, 48)
    rect(50, 0, 30, s * 6)
    //rect(300, 0, 30, s * 6)
}

//blue circles grow according to the minute
function mini(m) {
    noStroke();
    fill(37, 105, 193)
    ellipse(0, 175, m * 6, m * 6)
    ellipse(350, 175, m * 6, m * 6)
    //triangle(0, 350, m * 5, m * 5, 0, 0)
}

//hour is represented by black rectangle, width and height grow every hour
function horse(h) {
    noStroke();
    rectMode(CENTER);
    fill("black")
    rect(175, 80, h * 5, h * 5)
}

This project was a doozy. I decided to make it in the style of Bauhaus because to me that it was abstract design encompasses. With this design that I made, the circle in the middle and the reed line correspond to the seconds, the square in the center corresponds to the hour, and the blue circles represent the minutes.

Project 06: Abstract Clock

project 6 sketch copy

var beginday;
var seconds;
var minutes;
var hours;
var bloomx = []; 
var bloomy = [];

function setup(){
    createCanvas(460, 300);
    
    //flower per each passing second
    for (i = 0; i < 60; i ++) {
        bloomx[i] = random(20,440);
        bloomy[i] = random(20,280);
   }
}

function draw(){
    hours = hour();
    minutes = minute();
    seconds = second();
    beginday = 270;
    angleMode(DEGREES);
    
    //daytime background or nightime background 
    if (hours < 7 || hours > 18){
        background(31, 47, 71);
        
    } else{
        background(102, 178, 255);
        
    }
    
    //clock lines
    noFill();
    strokeWeight(15);
    
    //hours measure
    stroke(255, 102, 102, 175);
    arc(230, 150, 240, 240, beginday, beginday + hours * 30);
    
    //minutes measure
    stroke(255, 128, 0, 190);
    arc(230, 150, 200, 200, beginday, beginday + minutes * 6);
    
    //seconds measure
    stroke(255,255,0, 125);
    arc(230, 150, 160, 160, beginday, beginday + seconds * 6);

    for (i = 0; i < seconds; i ++) {
        strokeWeight(10);
        fill(255);
        ellipse(bloomx[i], bloomy[i], 6, 6);
    }

    //determines whether sun or moon is shown and whether the star is present 
    if (hours < 7 || hours > 18){
        
        //moon
        noStroke();
        fill(160,160,160);
        circle (230, 150, 125);
        fill(192,192,192);
        ellipse(270, 115, 10, 10);
        ellipse(235, 110, 30, 30);
        ellipse(270, 150, 40, 40);
        ellipse(230, 175, 20, 20);
        ellipse(205, 140, 40, 40);

        //star that appears every OTHER second
        noStroke();
        fill(255);
        translate(300, 70);
        triangle(25 * (seconds % 2), 0, 0, 4, 0, -4);
        triangle(-4, 0, 4, 0, 0, 25 * (seconds % 2));
        triangle(-4, 0, 4, 0, 0, -25 * (seconds % 2));
        triangle(-25 * (seconds % 2), 0, 0, 4, 0, -4);

        } else{

        //sun
        noStroke();
        fill(249, 228, 95);
        circle (230, 150, 125);
        
        //cloud that appears every OTHER second
        fill(255);
        noStroke();
        ellipse(330, height/2-70, 50, 50 * (seconds % 2));
        ellipse(360, height/2-80, 80, 80 * (seconds % 2));
        ellipse(390, height/2-70, 80, 80 * (seconds % 2));
        ellipse(420, height/2-70, 50, 50 * (seconds % 2));
        
    }
}

I wanted to use lines and play around with transparency, so that’s what I did with the three seconds, minutes and hours lines. Besides the inner yellow line that extended each second, I also added yellow flowers/stars that would randomly populate the canvas per second. In the code you can see that when the hour of day is less than 7 (before 7am) or greater than 18 (after 6pm), the background color and the different parts (sun and cloud) will change into its night version (moon and star). Since there were now two elements measuring seconds, I had the cloud and star appear every other second for a bit of variety.

Project 06: Abstract Clock

For my abstract clock I chose to use a database of song lyrics that mention specific times of day. The clock breaks up the day into 886 equal units of time, the number of song lyrics in the data set, and displays each lyric one after another. The background color also changes with the time of day being referenced in the song. As a result the time measured by this clock is not the actual time of day, but rather the time of day represented within our popular musical cannon mapped to a real 24 hour day. Hours that are referenced more often last longer on this clock and those only mentioned a few times pass by quickly.

sketch

//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//Section C
//Project-06-Abstract Clock



function preload() {
  //loads a .txt file that contains a large sampling of song lyrics 
  //that refer to specific times of day
  timeLyrics = loadStrings('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/10/timeLyrics.txt')
}

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

function draw() {

  //gets the total amount of seconds that have ellapsed that day
  var s = second();
  var m = minute();
  var h = hour();
  m = m * 60
  h = h * 3600
  var totalS = m + h + s;
  

  var i = map(totalS, 0, 86400, 0, 886);
  i = round(i);
  
  //changes background color based on the time that the song lyrics are refering to
  if (i < 421 || i > 780) {
    //its nightime
    fill(0);
  }
  if (i >= 421 & i < 481) {
    //its 5am
    fill(10, 0, 50);
  }
  if (i >= 481 & i < 538) {
    //its 6am
    fill(141, 163, 152);
  }
  if (i >= 538 & i < 562) {
    //its 7 am
    fill(217, 133, 69);
  }
  if (i >= 562 & i < 595) {
    //its 8 am
    fill(249, 192, 107);

  }
  if (i >= 595 & i < 628) {
    //its 9 am
    fill(255, 230, 190);
  }
  if (i >= 628 & i < 631){
    //its 10 am
    fill(255, 255, 200);

  }
  if (i >= 631 & i < 722) {
    //its day
    fill(255);
  }
  if (i >= 722 & i < 747) {
    //its 5pm
    fill(255, 230, 190);
  }
  if (i >= 747 & i < 761) {
    //its 6pm
    fill(238, 108, 32);

  }
  if (i >= 761 & i <= 780) {
    //its 7pm
    fill(100, 15, 36);
  }
  
  textSize(15);
  noStroke();
  //redraws the background
  rect(0, 0, width, height);

  //changes the type color based on what the background color is
  if (i < 421 || i > 780) {
    fill(255);
  }
  else {
    fill(100);
  }

  //displays a song lyric
  //each lyric gets the same amount of time on screen
  //the lyrics repeat each day
  textAlign(CENTER);
  text(timeLyrics[i], 0, 10, width, height);
  
  
  
}

Project-06: Abstract Clock

My Project

//cbtruong;
//Section B;

var secondVal;
var minuteVal;
var hourVal;
var monthVal;

var sixtyCircleX = [];
var sixtyCircleY = [];
var sixtyCircleX2 = [];
var sixtyCircleY2 = [];
var hourAngle = [];


function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    secondVal = second();
    minuteVal = minute();
    hourVal = hour();
    monthVal = month();
    for (var i = 0; i < 8; i++){
        hourAngle.push(i*45);
    }
    for (var y = 10; y < 120; y += 20){
        for (var x = 10; x < 200; x += 20){
            sixtyCircleX.push(x);
            sixtyCircleY.push(y);
        }
    }
    for (var y2 = 370; y2 < 480; y2 += 20){
        for (var x2 = 290; x2 < 480; x2 += 20){
            sixtyCircleX2.push(x2);
            sixtyCircleY2.push(y2);
        }
    }
}

function draw() {
    background(205, 202, 240);
    timeOfDay(hourVal);
    for (var i = 0; i < 8; i++){
        noStroke();
        fill(230, 100, 120);
        if (i > hourVal % 8){
            fill(27, 30, 35);
        }
        hourSquare(hourAngle[i]);
        hourAngle[i] += 0.1;
    }
    for (var j = 0; j < 60; j++){
        fill(100, 230, 120);
        if (j > secondVal){
            fill(240);
        }
        sixtyCircleTime(sixtyCircleX[j], sixtyCircleY[j]);
    }
    for (var l = 0; l < 60; l++){
        fill(120, 120, 230);
        if (l > minuteVal){
            fill(240);
        }
        sixtyCircleTime(sixtyCircleX2[l], sixtyCircleY2[l]);
    }
    for (var m = 180; m <= 480; m += 25){
        fill(240);
        if (m >= monthVal*22.5){
            fill(45, 67, 89);
        }
        push();
        translate(-60, 20);
        rotate(radians(330));
        monthTri(20, m);
        monthTri(260, m);
        pop();
    }
}

function hourSquare(hourAngle){
    push();
    translate(230, 230);
    square(80*cos(radians(hourAngle)), 80*sin(radians(hourAngle)), 20);
    pop();
}

function timeOfDay(hourValue){
    if (hourVal > 15){
       fill(227, 111, 30);
    }
    else if (hourVal < 15 & hourVal > 7){
       fill(252, 209, 77);
    }
    else {
       fill(27, 30, 35);
    }
    circle(240, 240, 100);
}

function sixtyCircleTime(x, y){
    circle(x, y, 20);
}

function monthTri (x, y){
    triangle(x, y, x + 20, y, x + 10, y + 20);
}

I had grander ideas for an Abstract Clock, but I decided to do one that was practical. This one tells the months (the triangles that fill up according to the month), seconds and minutes (the circles arrays – the upper are seconds and the lower are minutes). And finally, the time of day (which I split into 3, Morning (7-15), Afternoon (15-23), and Night (23-7)) and the hours passed of each time. It is very basic.

Project 06: Abstract Clock

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Assignment 06-A: Abstract Clock


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

function draw() {
    var minu = minute();
    //sky darkens by the hour
    background(hour()*5);
    
    //scoop slowly falls by the minute
    for (var col = 0; col <= 5 * minu; col+=1) { 
        fill("pink");
        push();
        translate(225, 40);
        circle(0, col, 20);
        pop();

    } 

    //arm waves for each second
    if (second()%2 == 0){
        line(150, 350, 100, 325);
    } else if (second()%2 != 0){
        line(150, 350, 100, 375);
    } 

     //stick figure man
    fill("white");
    circle(150, 300, 50); //head
    fill("black");
    circle(140, 298, 5);
    circle(160, 298, 5);
    line(150, 325, 150, 400); //back
    line(150, 400, 125, 450); //left leg
    line(150, 400, 175, 450); //right leg
    line(150, 350, 225, 350); //arm with ice cream
    fill(250, 215, 160);
    triangle(225, 365, 215, 345, 235, 345); //ice cream cone


}

I really wanted the program to have ice cream scoops stacking, but I couldn’t figure out a way to do it without my code crashing (since the y of the circle would have to be -=, but you can’t have negative minutes). Instead it is falling very slowly until it falls onto the cone at 59 minutes.

Abstract Clock

sketch

angle = 20;

var x= 0;
var y = 300;

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

function draw() {

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

    dx1 = 600/s; // used for line seconds
    dy1 = 600/s;
    dx2 = 200/s; 
    dy2 = -200/s;
    x1 = 100; // used for line seconds
    y1 = 40;
    x2 = 300; 
    y2 = 400; 

    angles = 30

    push();
    background(244, 241, 222);
    for (var i = 0; i < s; i += 1) { //second lines
        strokeWeight(2)
        stroke(129, 179, 154)
        line(i, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    pop();

    for (var i = 0; i< m; i+=1) { //minute circles
        noFill();
        stroke(223, 122, 94)
        strokeWeight(2);
        ellipse(300, 100, i*7, i*7) //increase circle size
    }

    for (var i = 0; i< h; i+=1) { //hour circles
        push();
        translate(240, 240)
        noFill();
        stroke( 60, 64, 91)
        strokeWeight(3);
        rotate(radians(50));
        ellipse(i*25-300, 40, 15, 15) //change circle position
        pop();
    }

    timer(x, y); //bottom right timer


    if (h < 7 || h>=19) {
        noStroke() // moon depending on hour
        fill(60, 64, 91)
        ellipse(430, 380, 80, 80);
        fill(244, 241, 222)
        ellipse(450, 370, 80, 80);
    } else {
        sun(); //sun depending on hour
     
     }
 }


function timer(x, y) { //for bottom right corner
    textSize(20);
    push();
    noStroke()
    fill(250)
    rect(380, 450, 100, 50);

    fill( 60, 64, 91)
    text(h, 390, 470)

    fill(0)
    text(":", 412, 470)

    fill(223, 122, 94)
    text(m, 420, 470)

    fill(0)
    text(":", 442, 470)

    fill(129, 179, 154)
    text(s, 450, 470)
    pop();

}

function sun() {
        translate(410, 380);
        noStroke();
        fill(222, 222, 74)
        ellipse(0,0, 50, 50);
        for (var i = 0; i< 50; i++) {
            rotate(radians(angle))
             rect(-5,-10, 5, 60);
        }
}

Project 06 – Abstract Clock

I remember learning about the Korean water clock that was invented in the Chosun dynasty in elementary school, which inspired me to create a simplified version of it through p5.js.

엄마표 과학] 만공한국사, 자격루 만들기 - 물시계의 원리 : 네이버 블로그 — reference image

sketch

var angle = 180;
function setup() {
    createCanvas(420, 400);
    // rectMode(CENTER);
}

function draw() {
    background(0);
    fill(255);
    textAlign(CENTER);
    textSize(30);
    text('The water clock', width/2, 50);
    textSize(10);
    textAlign(LEFT);

    let hr = hour();
    let mn = minute();
    let sc = second();

   
    fill(255);
    text(hr + ':' + mn + ':' + sc, 10, 150);
    text('24:00:00', width-65, 150);
    rect(100, 140, 30, 5);
    rect(200, 140, 30, 10);
    
    //hour
    push();
    fill(255);
    translate(350, 380);
    rotate(radians(180)); //rotation to make the rectangle grow upwards
    rect(0, 0, 120, 240);
    fill(0, 0, 255);
    translate(5, 0);
    rect(0, 0, 110, hr*10);
    pop();

    //minute
    push();
    fill(255); //red rectangle
    translate(205, 260);
    rotate(radians(180)); //rotation to make the rectangle grow upwards
    rect(0, 0, 80, 120);
    fill(0, 75, 255);
    translate(5, 0);
    rect(0, 0, 70, mn*2);
    if (mn==59) { //when each the mn container is full, water is transferred to the hr contatiner
        translate(-30, 115);
        stroke(0, 100, 255);
        strokeWeight(5);
        line(-8, 0, 30, 0);
        stroke(0, 0, 255);
        line(-8, 0, -8, -115);
    }
    pop();

    //second
    noStroke();
    push();
    fill(255); 
    translate(100, 200);
    rotate(radians(angle)); //rotation to make the rectangle grow upwards
    rect(0, 0, 40, 60);
    fill(0, 150, 255);
    translate(5, 0);
    rect(0, 0, 30, sc);
    if (sc==59) { //when each the sc container is full, water is transferred to the mn contatiner
        translate(-30, 57.5);
        stroke(0, 150, 255);
        strokeWeight(3);
        line(-8, 0, 30, 0);
        stroke(0, 100, 255);
        line(-8, 0, -8, -115);
    }
    pop();
}

Project 6: Abstract Clock

For my project, I decided to create an abstract clock that tells the time through an animated frog. In this project, the frog slow closes its eyes following every passing second, and when a minute passes its eyes jump back to their starting position. The background itself is programmed to change subtly for every minute that passes. At the bottom of the canvas are blades of grass, one representing each hour that has already passed in the day.

sketch frog

var flyX = 225;
var flyY = 0;

function setup() {
    createCanvas(480, 480);
    background(255, 220, 220);
    ellipseMode(CENTER);
    rectMode(CENTER);
}

//function that draws the frog on canvas
function frog(){
//frog body
    stroke(163, 207, 144);
    fill(163, 207, 144);
    quad(20, 480, 460, 480, 340, 308, 140, 308);
//frog head
    stroke(176, 217, 159);
    fill(176, 217, 159);
    ellipse(width/2, height/2, 360, 302);
    ellipse(130, 130, 126, 120);
    ellipse(350, 130, 126, 120);
//frog blush
    stroke(240, 142, 117)
    fill(240, 142, 117);
    ellipse(70, 218, 83, 46);
    ellipse(410, 218, 83, 46);
}

//function for the flies that surround the frog
function flies(x, y){
    translate(width/2, height/2)
    for(var i = 0; i < 24; i++){
        push();
        rotate(TWO_PI*i/24);
        fill(0);
        rect(x, y, 1, 1);
        pop();
        }
    for(var i = 0; i < 12; i++){
        push();
        noStroke();
        fill(0);
        rotate(TWO_PI*i/12);
        rect(x, y, 5, 5)
        pop();
    }
}

function grass(){
    var x = 0;
    var hr = hour();
    for(var x = 0; x <= 20*(hr-1); x += 20){
        fill(61, 118, 37);
        triangle(x, 480, x+20, 480, x+10, 460);
    }
}

function draw() {
//initializaing variables for time
    var sec = second();
    var min = minute();
    var hr = hour();
    var eyeX = 56;
    var eyeY = 66;

    background(min*5, min*3.5, min*3);
//draws the frog on to the canvas
    frog(); 
//draws blades of grass on canvas that represent the hour of the day
    noStroke();   
    grass();
//frog mouth and eyes
    stroke(0);
    strokeWeight(2);
    fill(0);
    ellipse(350, 140, eyeX, eyeY-sec**1);
    ellipse(130, 140, eyeX, eyeY-sec**1);
    line(210, 168, 270, 168);
//calling function to draw flies
    flies(flyX, flyY);
    flyX += random(-1, 1);
    flyY += random(-1, 1);
//draws blades of grass
}

Tartan Clock

sketch Download

//Yanina Shavialenka
//Section B
//yshavial@andrew.cmu.edu

var x = 15;
var y = 15;

var xSpeed = 1;
var ySpeed = 0;

var xCircleSec = 40;
var yCircleSec = 30;

var xCircleMin = 70;
var yCircleMin = 60;

var xCircleHour = 103;
var yCircleHour = 103;

function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(160, 160, 160);
    seconds();
    minutes();
    hours();
}

function seconds() {
    stroke(255, 255, 0);
    fill(0, 102, 0);
    square(x, y, 450);

    /*
    These for loops draw the 13 lines on the green square to 
    make space for the seconds.
    Counting starts at top left triangle to the right and 
    continues clockwise.
    */
    for(var i=37.5; i<=420; i+=28.8) {
        stroke(255, 255, 0);
        line(x+i, y, x+i, y+37.5);
    }
    for(var i=37.5; i<=420; i+=28.8) {
        stroke(255, 255, 0);
        line(x+412.5, y+i, x+450, y+i);
    }
    for(var i=37.5; i<=420; i+=28.8) {
        stroke(255, 255, 0);
        line(x+i, y+412.5, x+i, y+450);
    }
    for(var i=37.5; i<=420; i+=28.8) {
        stroke(255, 255, 0);
        line(x, y+i, x+37.5, y+i);
    }
    
    // These are 4 corner lines for seconds.
    line(x, y, x+37.5, y+37.5);
    line(x+450, y, x+412.5, y+37.5);
    line(x+450, y+450, x+412.5, y+412.5);
    line(x, y+450, x+37.5, y+412.5);
    
    //Ball for seconds.
    fill(0);
    circle(xCircleSec, yCircleSec, 10);

    /*
    These if-else statements check when to move the position of the ball
    based on the seconds.
    */   
    if(15 <= second() & second() < 30) {
        xCircleSec = width - 32;
        yCircleSec = 38 + 28.8 * (second() - 15);
        xSpeed = 0;
        ySpeed = 1;
    }
    else if(30 <= second() & second() < 45) {
        xCircleSec = width - 38 - 28.8 * (second() - 30);
        yCircleSec = height - 33;
        xSpeed = -1;
        ySpeed = 0;
    }
    else if(second() >= 45) {
        xCircleSec = 33;
        yCircleSec = height - 38 - 28.8 * (second() - 45);
        xSpeed = 0;
        ySpeed = -1;
    }
    else if(second() < 15) {
        xCircleSec = 38 + 28.8 * second();
        yCircleSec = 33;
        xSpeed = 1;
        ySpeed = 0;
    }
}

function minutes() {
    stroke(255, 255, 0);
    fill(0, 0, 190);
    square(x+37.5, y+37.5, 375);

    /*
    These for loops draw the 13 lines on the green square to 
    make space for the minutes.
    Counting starts at top left triangle to the right and 
    continues clockwise.
    */
    for(var i=75; i<=375; i+=23.07) {
        stroke(255, 255, 0);
        line(x+i, y+37.5, x+i, y+75);
    }
    for(var i=75; i<=375; i+=23.07) {
        stroke(255, 255, 0);
        line(x+375, y+i, x+412.5, y+i);
    }
    for(var i=75; i<=375; i+=23.07) {
        stroke(255, 255, 0);
        line(x+i, y+375, x+i, y+412.5);
    }
    for(var i=75; i<=375; i+=23.07) {
        stroke(255, 255, 0);
        line(x+37.5, y+i, x+75, y+i);
    }
    
    // These are 4 corner lines for minutes.
    line(x+37.5, y+37.5, x+(37.5*2), y+(37.5*2));
    line(x+412.5, y+37.5, x+375, y+(37.5*2));
    line(x+412.5, y+412.5, x+375, y+375);
    line(x+37.2, y+412.5, x+(37.5*2), y+375);
    
    //Ball for minutes.
    fill(0);
    circle(xCircleMin, yCircleMin, 10);

    /*
    These if-else statements check when to move the position of the ball
    based on the minutes.
    */ 
    if(15 <= minute() & minute() < 30){
        xCircleMin = width - 72;
        yCircleMin = 56 + 23.07 * (minute() - 15);
        xSpeed = 0;
        ySpeed = 1;
    }
    else if(30 <= minute() & minute() < 45) {
        xCircleMin = width- 55 - 23.07 * (minute() - 30);
        yCircleMin = height - 72;
        xSpeed = -1;
        ySpeed = 0;
    }
    else if(minute() >= 45) {
        xCircleMin = 72;
        yCircleMin= height- 56 - 23.07 * (minute() - 45);
        xSpeed = 0;
        ySpeed = -1;
    }
    else if(minute() < 15) {
        xCircleMin = 56 + 23.07 * minute();
        yCircleMin = 72;
        xSpeed = 1;
        ySpeed = 0;
    }
}

function hours(){
    stroke(255, 255, 0);
    fill(240, 20, 20);
    square(x+75, y+75, 300);
 
    //These lines divide 24 spaces for hours
    stroke(255, 255, 0);
    line(x+75, y+121.14, x+121.14, y+75);
    line(x+75, y+167.28, x+167.28, y+75);
    line(x+75, y+213.42, x+213.42, y+75);
    line(x+75, y+259.56, x+259.56, y+75);
    line(x+75, y+305.7, x+305.7, y+75);
    line(x+(37.5*2), y+351.84, x+351.84, y+(37.5*2));

    line(x+98.07, y+375, x+375, y+98.07);
    line(x+144.221, y+375, x+375, y+144.21);
    line(x+190.35, y+375, x+375, y+190.35);
    line(x+236.49, y+375, x+375, y+236.49);
    line(x+282.63, y+375, x+375, y+282.63);
    line(x+328.77, y+375, x+375, y+328.77);

    line(113, 113, 367, 367);//Middle division line for hours
    
    //Ball for hours.
    fill(0);
    circle(xCircleHour, yCircleHour, 10);

    /*
    These if-else statements check for the hours.
    The position of a circle updates based on the hour 0-23. 
    Upper and bottom triangles represent 12 am and 12 pm or 
    00:00 and 12:00.
    Counting starts from 00:00 at the top triangle and goes clockwise.
    */
    if(hour() == 0) {
        xCircleHour = 103;
        yCircleHour = 103;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 1) {
        xCircleHour = 140;
        yCircleHour = 110;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 2) {
        xCircleHour = 175;
        yCircleHour = 120;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 3) {
        xCircleHour = 210;
        yCircleHour = 130;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 4) {
        xCircleHour = 245;
        yCircleHour = 140;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 5) {
        xCircleHour = 280;
        yCircleHour = 150;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 6) {
        xCircleHour = 317;
        yCircleHour = 160;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 7) {
        xCircleHour = 340;
        yCircleHour = 185;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 8) {
        xCircleHour = 350;
        yCircleHour = 220;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 9) {
        xCircleHour = 360;
        yCircleHour = 260;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 10) {
        xCircleHour = 360;
        yCircleHour = 305;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 11) {
        xCircleHour = 370;
        yCircleHour = 340;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 12) {
        xCircleHour = 377;
        yCircleHour = 377;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 13) {
        xCircleHour = 340;
        yCircleHour = 370;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 14) {
        xCircleHour = 305;
        yCircleHour = 360;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 15) {
        xCircleHour = 265;
        yCircleHour = 355;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 16) {
        xCircleHour = 235;
        yCircleHour = 340;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 17) {
        xCircleHour = 200;
        yCircleHour = 325;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 18) {
        xCircleHour = 165;
        yCircleHour = 315;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 19) {
        xCircleHour = 150;
        yCircleHour = 285;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 20) {
        xCircleHour = 135;
        yCircleHour = 255;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 21) {
        xCircleHour = 130;
        yCircleHour = 215;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 22) {
        xCircleHour = 120;
        yCircleHour = 175;
        xSpeed = 1;
        ySpeed = 1;
    }
    else if(hour() == 23) {
        xCircleHour = 110;
        yCircleHour = 140;
        xSpeed = 1;
        ySpeed = 1;
    }
}

This project was very difficult in the aspect of just coming up with ideas how to make it look like a clock without it actually being a clock. My outer green square represents seconds: each side has 15 seconds such as it is easy to count time by quoters. Blue square stands for minutes with same description for how it works. The pink square represents hours. Two triangles in top left and bottom right corners represents 12 am and 12 pm or 00:00 and 12:00.

I’ve used primary colors of CMU such as green, blue, red, yellow and black to make it a Tartan Clock.

Project 6: Abstract Clock

wpf-abstract-clock.js

//Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment-06-project
var cloudVar = []; //array for cloud x coordinate
var rainVar = []; //array for cloud y coordinate
var hourTime; //variable to store hour
var minuteTime; //vairable to store minute
function setup() {
    createCanvas(600, 600);

    }
function draw(){
    background(155);
    hourTime = hour();
    minuteTime = minute();
    for(var i = 0; i <= 23; i++){ //sets cloud x position by mapping the current second of the day to an x value on the canvas
        cloudVar[i] =  map((second()+(60*minute())+(60*60*(hour()-i))),0,(24-i)*60*60,-105,width);
    }

    for(i = 0; i <= 59; i++){ //sets the rain y position my mapping the current second of the hour to a y value on the canvas
        rainVar[i] = map((second()+60*(minute()-i)),0,(60-i)*60,-12,height+10)
    }

    for(var counter = 0; counter <= 23; counter ++) { //for loop that checks how many hours into the day it is and draws that many clouds with the stored x values and each hour that has passed
        if(hourTime >= counter){
            drawCloud(cloudVar[counter],counter);
        }
    }

    for(var counter = 0; counter <= 59; counter ++) { //for loop that checks how many minutes into the hour it is and draws that many rain drops with the stored y values and each minute that has passed
        if(minuteTime >= counter){
            drawRain(rainVar[counter],counter);
        }
    }
}

function drawCloud(x,counter) { //function to draw clouds
    var y; //long amount of if statements to set the y coordinate
    if(counter == 0) {
        y = 50
    }
    else if(counter == 1) {
        y = 150
    }
    else if(counter == 2) {
        y = 250
    }
    else if(counter == 3) {
        y = 350
    }
    else if(counter == 4) {
        y = 450
    }
    else if(counter == 5) {
        y = 550
    }
    else if(counter == 6) {
        y = 50
    }
    else if(counter == 7) {
        y = 150
    }
    else if(counter == 8) {
        y = 250
    }
    else if(counter == 9) {
        y = 350
    }
    else if(counter == 10) {
        y = 450
    }
    else if(counter == 11) {
        y = 550
    }
    else if(counter == 12) {
        y = 50
    }
    else if(counter == 13) {
        y = 150
    }
    else if(counter == 14) {
        y = 250
    }
    else if(counter == 15) {
        y = 350
    }
    else if(counter == 16) {
        y = 450
    }
    else if(counter == 17) {
        y = 550
    }
    else if(counter == 18) {
        y = 50
    }
    else if(counter == 19) {
        y = 150
    }
    else if(counter == 20) {
        y = 250
    }
    else if(counter == 21) {
        y = 350
    }
    else if(counter == 22) {
        y = 450
    }
    else if(counter == 23) {
        y = 550
    }

    fill(255);  //series of ellipses that draws the cloud
    ellipse(x,y,60,50);
    ellipse(x+30,y-10,60,50);
    ellipse(x+80,y,60,50);
    ellipse(x+20,y+20,60,50);
    ellipse(x+60,y+15,60,50);
    push();
    noStroke();
    ellipse(x+40,y+10,100,55)
    pop();
}
function drawRain(y,counter) { //function to draw rain
        var x; //insanely long amount of if statements, like seriously there has to be an easier way to do this, to have the raindrops fall in a "random" pattern
        if(counter == 0) {
        x = 5;
        }
        if(counter == 39) {
        x = 15;
        }
        if(counter == 20) {
        x = 25;
        }if(counter == 2) {
        x = 35;
        }
        if(counter == 48) {
        x = 45;
        }if(counter == 38) {
        x = 55;
        }
        if(counter == 59){
        x = 65;
        }
        if(counter == 23) {
        x = 75;
        }
        if(counter == 19) {
        x = 85;
        }
        if(counter == 21) {
        x = 95;
        }
        if(counter == 47) {
        x = 105;
        }
        if(counter == 24) {
        x = 115;
        }
        if(counter == 1) {
        x = 125;
        }
        if(counter == 27) {
        x = 135;
        }
        if(counter == 25) {
        x = 145;
        }
        if(counter == 37) {
        x = 155;
        }
        if(counter == 49) {
        x = 165;
        }
        if(counter == 3) {
        x = 175;
        }
        if(counter == 28) {
        x = 185;
        }
        if(counter == 46) {
        x = 195;
        }
        if(counter == 58) {
        x = 205;
        }
        if(counter == 57) {
        x = 215;
        }
        if(counter == 50) {
        x = 225;
        }
        if(counter == 36) {
        x = 235;
        }
        if(counter == 45) {
        x = 245;
        }
        if(counter == 9) {
        x = 255;
        }
        if(counter == 35) {
        x = 265;
        }
        if(counter == 5) {
        x = 275;
        }
        if(counter == 51) {
        x = 285;
        }
        if(counter == 40) {
        x = 295;
        }
        if(counter == 17) {
        x = 305;
        }
        if(counter == 13) {
        x = 315;
        }
        if(counter == 22) {
        x = 325;
        }
        if(counter == 16) {
        x = 335;
        }
        if(counter == 34) {
        x = 345;
        }
        if(counter == 4) {
        x = 355;
        }
        if(counter == 29) {
        x = 365;
        }
        if(counter == 12) {
        x = 375;
        }
        if(counter == 56) {
        x = 385;
        }
        if(counter == 55) {
        x = 395;
        }
        if(counter == 11) {
        x = 405;
        }
        if(counter == 26) {
        x = 415;
        }
        if(counter == 15) {
        x = 425;
        }
        if(counter == 33) {
        x = 435;
        }
        if(counter == 41) {
        x = 445;
        }
        if(counter == 44) {
        x = 455;
        }
        if(counter == 30) {
        x = 465;
        }
        if(counter == 10) {
        x = 475;
        }
        if(counter == 6) {
        x = 485;
        }
        if(counter == 18) {
        x = 495;
        }
        if(counter == 42) {
        x = 505;
        }
        if(counter == 14) {
        x = 515;
        }
        if(counter == 52) {
        x = 525;
        }
        if(counter == 7) {
        x = 535;
        }
        if(counter == 53) {
        x = 545;
        }
        if(counter == 31) {
        x = 555;
        }
        if(counter == 8) {
        x = 565;
        }
        if(counter == 54) {
        x = 575;
        }
        if(counter == 43) {
        x = 585;
        }
        if(counter == 32) {
        x = 595;
        }

        fill(0,0,255); //draws a small ellipse as a rain drop
        ellipse(x,y,7,30)
}

This project was a lot of fun but very challenging. I came up with my idea fairly early on (I was brainstorming and listening to storm sounds). The amount of clouds is the amount of hours in the day, including a cloud for 0:00, and the amount of rain drops is how many minutes it has been in the day, including a drop for minute 0. The drops fall from the top and the clouds move left to right, with their positions being updated every second. I had to do a lot of algebra to have working formulas for the dynamic positions and ran into a lot of bugs when it came to keeping track of so many variables. My sketches became very incoherent very quickly. I also ended up writing an insane amount of for statements which was not good. If I could do this project again I would try to figure out a way to do what the if statements accomplished with some sort of loop.