Month: October 2021

Emilio Bustamante

Section D

//Emilio Bustamante
//ebustama@andrew.cmu.edu
//Section D
//Project-06-Abstract clock 

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

function draw() {

//variables for the time 
    var seconds = second();
    var minutes = minute();
    var hours= hour();
  
    background(0)
    push();
    stroke(255);
    strokeWeight(1);
  
// hours
    line(hours*2,0,0,hours*2);
    line(hours*4,0,0,hours*4);
    line(hours*6,0,0,hours*6);
    line(hours*8,0,0,hours*8);
    line(hours*10,0,0,hours*10);
    line(hours*12,0,0,hours*12);
    line(hours*14,0,0,hours*14);
    line(hours*16,0,0,hours*16);
    line(hours*18,0,0,hours*18);
    line(hours*20,0,0,hours*20);
    line(hours*22,0,0,hours*22);
    line(hours*24,0,0,hours*24);
    line(hours*26,0,0,hours*26);
    line(hours*28,0,0,hours*28);
    line(hours*30,0,0,hours*30);
    line(hours*32,0,0,hours*32);
// hours real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(hours*34,0,0,hours*34);
    stroke(255);
    strokeWeight(1);
    line(hours*36,0,0,hours*36);
    line(hours*38,0,0,hours*38);
    line(hours*40,0,0,hours*40);
    line(hours*42,0,0,hours*42);
    line(hours*44,0,0,hours*44);
    line(hours*46,0,0,hours*46);
    line(hours*48,0,0,hours*48);
    line(hours*50,0,0,hours*50);

// minutes
    line(0,minutes,415,minutes);
    line(0,minutes*2,415,minutes*2);
    line(0,minutes*3,415,minutes*3);
    line(0,minutes*4,415,minutes*4);
    line(0,minutes*5,415,minutes*5);
// minutes real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(0,minutes*6,415,minutes*6);
    stroke(255);
    strokeWeight(1);
    line(0,minutes*7,415,minutes*7);
    line(0,minutes*8,415,minutes*8);
    line(0,minutes*9,415,minutes*9);
    line(0,minutes*10,415,minutes*10);
    line(0,minutes*11,415,minutes*11);
    line(0,minutes*12,415,minutes*12);
    line(0,minutes*13,415,minutes*13);
    line(0,minutes*14,415,minutes*14);
    line(0,minutes*15,415,minutes*15);
    line(0,minutes*16,415,minutes*16);
    line(0,minutes*17,415,minutes*17);
    line(0,minutes*18,415,minutes*18);
    line(0,minutes*19,415,minutes*19);
    line(0,minutes*20,415,minutes*20);
    line(0,minutes*21,415,minutes*21);
    line(0,minutes*22,415,minutes*22);
    line(0,minutes*23,415,minutes*23);
    line(0,minutes*24,415,minutes*24);
    line(0,minutes*25,415,minutes*25);
    line(0,minutes*26,415,minutes*26);
    line(0,minutes*27,415,minutes*27);
    line(0,minutes*28,415,minutes*28);
    line(0,minutes*29,415,minutes*29);
    line(0,minutes*30,415,minutes*30);
    line(0,minutes*31,415,minutes*31);
    line(0,minutes*32,415,minutes*32);
    line(0,minutes*33,415,minutes*33);
    line(0,minutes*34,415,minutes*34);
    line(0,minutes*35,415,minutes*35);
    line(0,minutes*36,415,minutes*36);
    line(0,minutes*37,415,minutes*37);
    line(0,minutes*38,415,minutes*38);
    line(0,minutes*39,415,minutes*39);
    line(0,minutes*40,415,minutes*40);
    line(0,minutes*41,415,minutes*41);
    line(0,minutes*42,415,minutes*42);
    line(0,minutes*43,415,minutes*43);
    line(0,minutes*44,415,minutes*44);
    line(0,minutes*45,415,minutes*45);
    line(0,minutes*46,415,minutes*46);
    line(0,minutes*47,415,minutes*47);
    line(0,minutes*48,415,minutes*48);
    line(0,minutes*49,415,minutes*49);
    line(0,minutes*50,415,minutes*50);
  
//seconds
    line(seconds,0,seconds,415);
    line(seconds*2,0,seconds*2,415);
    line(seconds*3,0,seconds*3,415);
    line(seconds*4,0,seconds*4,415);
    line(seconds*5,0,seconds*5,415);
    line(seconds*6,0,seconds*6,415);
// seconds real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(seconds*7,0,seconds*7,415);
    stroke(255);
    strokeWeight(1);
    line(seconds*8,0,seconds*8,415);
    line(seconds*9,0,seconds*9,415);
    line(seconds*10,0,seconds*10,415);
    line(seconds*11,0,seconds*11,415);
    line(seconds*12,0,seconds*12,415);
    line(seconds*13,0,seconds*13,415);
    line(seconds*14,0,seconds*14,415);
    line(seconds*15,0,seconds*15,415);
    line(seconds*16,0,seconds*16,415);
    line(seconds*17,0,seconds*17,415);
    line(seconds*18,0,seconds*18,415);
    line(seconds*19,0,seconds*19,415);
    line(seconds*20,0,seconds*20,415);
    line(seconds*21,0,seconds*21,415);
    line(seconds*22,0,seconds*22,415);
    line(seconds*23,0,seconds*23,415);
    line(seconds*24,0,seconds*24,415);
    line(seconds*25,0,seconds*25,415);
    line(seconds*26,0,seconds*26,415);
    line(seconds*27,0,seconds*27,415);
    line(seconds*28,0,seconds*28,415);
    line(seconds*29,0,seconds*29,415);
    line(seconds*30,0,seconds*30,415);
    line(seconds*31,0,seconds*31,415);
    line(seconds*32,0,seconds*32,415);
    line(seconds*33,0,seconds*33,415);
    line(seconds*34,0,seconds*34,415);
    line(seconds*35,0,seconds*35,415);
    line(seconds*36,0,seconds*36,415);
    line(seconds*37,0,seconds*37,415);
    line(seconds*38,0,seconds*38,415);
    line(seconds*39,0,seconds*39,415);
    line(seconds*40,0,seconds*40,415);
    line(seconds*41,0,seconds*41,415);
    line(seconds*42,0,seconds*42,415);
    line(seconds*43,0,seconds*43,415);
    line(seconds*44,0,seconds*44,415);
    line(seconds*45,0,seconds*45,415);
    line(seconds*46,0,seconds*46,415);
    line(seconds*47,0,seconds*47,415);
    line(seconds*48,0,seconds*48,415);
    line(seconds*49,0,seconds*49,415);
    line(seconds*50,0,seconds*50,415);
  
    pop();
  
// red reference lines
  
  stroke(255,0,0);
  strokeWeight(3);
  var y = 0; 
  var spacing = 7; 
  var len= 7; 
  
//seconds red lines
  for (var x = 0; x <= 415; x += spacing) { 
      line(x, y, x, y + len); 
   }
    
//minutes red lines
  for (var y = 0; y <= 415; y += 7) {
    for (var x = 0; x <=0; x += 7) {
      line(x, y, x + len, y ); 
   }
}
//hours red lines 
  var w = width/24;
  var h = height/24;
  var y = 0;
  for (var x = 0; x < width; x += w) {
    line(x, y, x + len, y );
    y += h;
  }
}

This clock intends to create different forms depending on the time of the day by overlapping different groups of lines oriented by seconds, minutes and hours. Each group of lines would have multiple lines to create a grid but the green lines will determine the time it is.

//Emilio Bustamante
//ebustama@andrew.cmu.edu
//Section D
//Project-06-Abstract clock 

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

function draw() {

//variables for the time 
    var seconds = second();
    var minutes = minute();
    var hours= hour();
  
    background(0)
    push();
    stroke(255);
    strokeWeight(1);
  
// hours
    line(hours*2,0,0,hours*2);
    line(hours*4,0,0,hours*4);
    line(hours*6,0,0,hours*6);
    line(hours*8,0,0,hours*8);
    line(hours*10,0,0,hours*10);
    line(hours*12,0,0,hours*12);
    line(hours*14,0,0,hours*14);
    line(hours*16,0,0,hours*16);
    line(hours*18,0,0,hours*18);
    line(hours*20,0,0,hours*20);
    line(hours*22,0,0,hours*22);
    line(hours*24,0,0,hours*24);
    line(hours*26,0,0,hours*26);
    line(hours*28,0,0,hours*28);
    line(hours*30,0,0,hours*30);
    line(hours*32,0,0,hours*32);
// hours real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(hours*34,0,0,hours*34);
    stroke(255);
    strokeWeight(1);
    line(hours*36,0,0,hours*36);
    line(hours*38,0,0,hours*38);
    line(hours*40,0,0,hours*40);
    line(hours*42,0,0,hours*42);
    line(hours*44,0,0,hours*44);
    line(hours*46,0,0,hours*46);
    line(hours*48,0,0,hours*48);
    line(hours*50,0,0,hours*50);

// minutes
    line(0,minutes,415,minutes);
    line(0,minutes*2,415,minutes*2);
    line(0,minutes*3,415,minutes*3);
    line(0,minutes*4,415,minutes*4);
    line(0,minutes*5,415,minutes*5);
// minutes real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(0,minutes*6,415,minutes*6);
    stroke(255);
    strokeWeight(1);
    line(0,minutes*7,415,minutes*7);
    line(0,minutes*8,415,minutes*8);
    line(0,minutes*9,415,minutes*9);
    line(0,minutes*10,415,minutes*10);
    line(0,minutes*11,415,minutes*11);
    line(0,minutes*12,415,minutes*12);
    line(0,minutes*13,415,minutes*13);
    line(0,minutes*14,415,minutes*14);
    line(0,minutes*15,415,minutes*15);
    line(0,minutes*16,415,minutes*16);
    line(0,minutes*17,415,minutes*17);
    line(0,minutes*18,415,minutes*18);
    line(0,minutes*19,415,minutes*19);
    line(0,minutes*20,415,minutes*20);
    line(0,minutes*21,415,minutes*21);
    line(0,minutes*22,415,minutes*22);
    line(0,minutes*23,415,minutes*23);
    line(0,minutes*24,415,minutes*24);
    line(0,minutes*25,415,minutes*25);
    line(0,minutes*26,415,minutes*26);
    line(0,minutes*27,415,minutes*27);
    line(0,minutes*28,415,minutes*28);
    line(0,minutes*29,415,minutes*29);
    line(0,minutes*30,415,minutes*30);
    line(0,minutes*31,415,minutes*31);
    line(0,minutes*32,415,minutes*32);
    line(0,minutes*33,415,minutes*33);
    line(0,minutes*34,415,minutes*34);
    line(0,minutes*35,415,minutes*35);
    line(0,minutes*36,415,minutes*36);
    line(0,minutes*37,415,minutes*37);
    line(0,minutes*38,415,minutes*38);
    line(0,minutes*39,415,minutes*39);
    line(0,minutes*40,415,minutes*40);
    line(0,minutes*41,415,minutes*41);
    line(0,minutes*42,415,minutes*42);
    line(0,minutes*43,415,minutes*43);
    line(0,minutes*44,415,minutes*44);
    line(0,minutes*45,415,minutes*45);
    line(0,minutes*46,415,minutes*46);
    line(0,minutes*47,415,minutes*47);
    line(0,minutes*48,415,minutes*48);
    line(0,minutes*49,415,minutes*49);
    line(0,minutes*50,415,minutes*50);
  
//seconds
    line(seconds,0,seconds,415);
    line(seconds*2,0,seconds*2,415);
    line(seconds*3,0,seconds*3,415);
    line(seconds*4,0,seconds*4,415);
    line(seconds*5,0,seconds*5,415);
    line(seconds*6,0,seconds*6,415);
// seconds real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(seconds*7,0,seconds*7,415);
    stroke(255);
    strokeWeight(1);
    line(seconds*8,0,seconds*8,415);
    line(seconds*9,0,seconds*9,415);
    line(seconds*10,0,seconds*10,415);
    line(seconds*11,0,seconds*11,415);
    line(seconds*12,0,seconds*12,415);
    line(seconds*13,0,seconds*13,415);
    line(seconds*14,0,seconds*14,415);
    line(seconds*15,0,seconds*15,415);
    line(seconds*16,0,seconds*16,415);
    line(seconds*17,0,seconds*17,415);
    line(seconds*18,0,seconds*18,415);
    line(seconds*19,0,seconds*19,415);
    line(seconds*20,0,seconds*20,415);
    line(seconds*21,0,seconds*21,415);
    line(seconds*22,0,seconds*22,415);
    line(seconds*23,0,seconds*23,415);
    line(seconds*24,0,seconds*24,415);
    line(seconds*25,0,seconds*25,415);
    line(seconds*26,0,seconds*26,415);
    line(seconds*27,0,seconds*27,415);
    line(seconds*28,0,seconds*28,415);
    line(seconds*29,0,seconds*29,415);
    line(seconds*30,0,seconds*30,415);
    line(seconds*31,0,seconds*31,415);
    line(seconds*32,0,seconds*32,415);
    line(seconds*33,0,seconds*33,415);
    line(seconds*34,0,seconds*34,415);
    line(seconds*35,0,seconds*35,415);
    line(seconds*36,0,seconds*36,415);
    line(seconds*37,0,seconds*37,415);
    line(seconds*38,0,seconds*38,415);
    line(seconds*39,0,seconds*39,415);
    line(seconds*40,0,seconds*40,415);
    line(seconds*41,0,seconds*41,415);
    line(seconds*42,0,seconds*42,415);
    line(seconds*43,0,seconds*43,415);
    line(seconds*44,0,seconds*44,415);
    line(seconds*45,0,seconds*45,415);
    line(seconds*46,0,seconds*46,415);
    line(seconds*47,0,seconds*47,415);
    line(seconds*48,0,seconds*48,415);
    line(seconds*49,0,seconds*49,415);
    line(seconds*50,0,seconds*50,415);
  
    pop();
  
// red reference lines
  
  stroke(255,0,0);
  strokeWeight(3);
  var y = 0; 
  var spacing = 7; 
  var len= 7; 
  
//seconds red lines
  for (var x = 0; x <= 415; x += spacing) { 
      line(x, y, x, y + len); 
   }
    
//minutes red lines
  for (var y = 0; y <= 415; y += 7) {
    for (var x = 0; x <=0; x += 7) {
      line(x, y, x + len, y ); 
   }
}
//hours red lines 
  var w = width/24;
  var h = height/24;
  var y = 0;
  for (var x = 0; x < width; x += w) {
    line(x, y, x + len, y );
    y += h;
  }
}

sketch

// project 06
// gnmarino@andrew.cmu.edu
// Gia Marino
// Section D

var theta = 0;     // references theta in draw function only
var m;   // current minute
var h;   // current hour

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

function draw() {

    translate(width/2, height/2);

        // rotates whole clock 

        rotate(radians(theta));

        // draws the whole clock

        NightAndDay();    // draws the night and day sides of the circle
        sun(0, height/2 - 80);
        moon(0, -height/2 + 80);
        clouds(width/2 - 25, 0);
        diamonds(-width/2 + 25, 0);
    
    // takes current time and calculates how much to rotate the clock
    // every minute the clock should turn .25 degrees 
    // every hour the clock should have rotated 15 more degrees

    m = minute();
    h = hour();
    theta = (h * 15) + (m * .25);

}

function sun(sunX, sunY) {

    push();

    // orangey yellow color for sun

    fill(253, 208, 25);

    // moves sun to coordinates stated in draw function

    translate(sunX, sunY);

    circle(0, 0, 50);    // middle of sun

    // strokeWeight and loop makes the sun rays

    strokeWeight(2);

    for (theta = 0; theta < 360; theta += 45) {
        rotate(radians(theta));
        line(30, 0, 37, 0);

    }

    pop();
}

function moon(moonX, moonY) {

    push();

    fill(220);  // light grey

    // moves moon to coordinates stated in draw function

    translate(moonX, moonY);

    circle(0, 0, 50);

    pop();
}

function diamonds(diamondX, diamondY) {

    push();

    noFill();
    strokeWeight(5);

    // counter keeps track how many times the for-loop loops
    // needs to start at 12 so the diamonds don't fill in when it's before noon

    var counter = 12;

    // loop rotates and draws diamonds
    
    for (theta = 7; theta < 177; theta += 15) {

    push();

    rotate(radians(theta));

    // moves diamonds to coordinates stated in draw function

    translate(diamondX, diamondY)

    // scale & rotate are used to make diamonds look better along the border

    scale(.25);
    rotate(radians(90));

    // if statement says the diamonds should be filled in based on the hour
    // diamond fills in after every hour passes
    // if clock hasn't passed that hour yet then diamond stays unfilled
    // diamonds fill in for 1pm to 12 am

    if (counter < h) {
        fill(255);
    } else {
        noFill();  
    }

    // draws 1 diamond every time

    beginShape();
    vertex(-20, 0);
    quadraticVertex(-10, -5, 0, -30);
    quadraticVertex(10, -5, 20, 0);
    quadraticVertex(10, 5, 0, 30);
    quadraticVertex(-10, 5, -20, 0);
    endShape();

    pop();

    counter += 1; // adds 1 everytime loop ends

    }
    
    pop();
}


function clouds(cloudX, cloudY) {
    
    push();

    strokeWeight(5);
    noFill();

    // counter keeps track how many times the for-loop loops
    // counter starts at zero so clouds starts filling after 1st hour has passed

    var counter = 0;

    // loop rotates and draws clouds

    for (theta = 7; theta < 177; theta += 15) {

    push();

    rotate(radians(theta));

    // moves clouds to coordinates stated in draw function

    translate(cloudX, cloudY);

    // scale & rotate are used to make clouds look better along the border

    scale(.25);
    rotate(radians(90));

    // if statement says the clouds should be filled in based on the hour
    // cloud fills in after every hour passes
    // if clock hasn't passed that hour yet then cloud stays unfilled
    // clouds fill in for 1 am to 12 pm

    if (counter <= h) {
        fill(255);
    } else {
        noFill();
    }

    // draws 1 cloud every time

    beginShape();
    vertex(0, 0);
    quadraticVertex(-45, 5, -40, -10);
    quadraticVertex(-35, -30, -15, -20);
    quadraticVertex(-20, -40, 0, -40);
    quadraticVertex(20, -40, 15, -20);
    quadraticVertex(35, -30, 40, -10);
    quadraticVertex(45, 5, 0, 0);
    endShape();

    pop();

    counter += 1; // adds 1 everytime loop ends

    }
    pop();
}
 
function NightAndDay() {

    push();
    
    // yellow half circle represents day time
    
    fill(255, 238, 127);     // yellow
    arc(0, 0, width, height, radians(0), radians(180));

    // navy half circle represents night time

    fill(60, 67, 129);     // navy
    arc(0, 0, width, height, radians(180), radians(360));

    pop();

}

For this assignment I actually got inspiration from the Minecraft clock because it is the first example I could think of for a non-western standard clock.

I started off by deciding that I wanted the daylight half circle to be fully on the top and vice versa with the night side.

I ended up deciding that I wanted the clock to emulate how the sky typically looks if you are at a reasonable latitude on earth. So, when it is noon and the sun is highest in the sky then I want the clock’s yellow side to be fully on top so it looks like  what you’d see if you’d looked outside at noon. It also kinda shows when the sun rises and sets too.

Lastly, I decided that I wanted someone to be looking at my clock and know what time it is and not completely guess. So, I made little hour symbols (the clouds and diamonds) light up every time an hour passes. This makes it when you look at the clock you can count how many clouds or diamonds are white and know it’s been x amount of hours.

sketch

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.