Category: SectionC

I found this project a little challenging, but I do like what I was able to make in the end! There were elements that I was really hoping to add, like an inverted color for the background and lines between the morning and afternoon, but my hours function was not working so I wasn’t able to include that aspect. But I mainly wanted to create a clock that created a full picture with the end of a day. The circles on the right count the minutes and sections and the lines on the right create a grid that has lines added each hour.

//Jacky Lococo
//jlococo
//Section C
function setup() {
    createCanvas(370, 600);
}

function draw() {
    background(0);
    var sec = second() // variable ofr the seconds
    var min = minute() // variable for minutes
    var h = hour()
    var strokeLine = 255 // varible for stroke (ended up not working)

    //white lines that divide seconds, minutes, hours
    strokeWeight(1)
    stroke(strokeLine)
    line(330, 0, 330, 600)

    strokeWeight(1)
    stroke(strokeLine)
    line(290, 0, 290, 600)

    //y value for the seconds cirlces
    for (var y = 10; y <= 10*(sec); y += 10) {
        strokeWeight(0)
        fill(255, 204, 204)
        ellipse(350, y, 10, 10);
    }
    //y value for the minutes since x is the same for each added cirlce
    for(var ym = 10; ym <= 10*(min); ym +=10){
        strokeWeight(0)
        fill(255, 102, 102)
        ellipse(310, ym, 10, 10)
    }

    //hour-horizontal and verticle lines will be drawn with each hour to create a grid
    //y value change for the hours - horizontal visualization
    for(var yh = 25; yh <= 25*(h); yh += 25){
        strokeWeight(1)
        stroke(strokeLine)
        line(0, yh, 290, yh)
    } 
    //x valye for the change in hour - verticle depiction 
    for(var xh = 290/24; xh <= (290/24)*(h); xh += 290/24){
        strokeWeight(1)
        stroke(strokeLine)
        line(xh, 0, xh, 600)
    }

    //red cirlces that follow the hour lines
    strokeWeight(0)
    fill(255, 51, 51)
    ellipse(275, yh - 25, 10, 10)

    strokeWeight(0)
    fill(255, 51, 51)
    ellipse(xh-290/24, 580, 10, 10)


}

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.

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);
  
  
  
}