sketch

//Fallon Creech
//Section B
//fcreech@andrew.cmu.edu
//Project-06

var xarc = 200
var yarc = 200
var center = 200

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

function draw() {
  background(77);
	noStroke();

//beginning of red hours circle
	fill(77);
  ellipse(center, center, 300, 300);
  fill(241, 106, 111);
  arc(xarc, yarc, 300, 300, 1.5*PI, ((hour()%24)/12*PI-HALF_PI+0.0001));

//end of red hours circle
  fill(77);
  ellipse(center, center, 225, 225);

//beginning of green minutes circle
  ellipse(center, center, 200, 200);
  fill(176, 215, 119);
  arc(xarc, yarc, 200, 200, 1.5*PI, (minute()/30*PI-HALF_PI+0.0001));

//end of green minutes circle
  fill(77);
  ellipse(center, center, 125, 125);

//beginning of blue seconds circle
  ellipse(center, center, 100, 100);
  fill(139, 219, 217);
  arc(xarc, yarc, 100, 100, 1.5*PI, (second()/30*PI-HALF_PI+0.0001));

//end of blue seconds circle
  fill(77);
  ellipse(center, center, 25, 25);

//literal time
	fill(255);
  textAlign(RIGHT);
  text(hour()%24, 185, 30);
  text(":", 190, 30);
  textAlign(CENTER);
  text(minute(), 200, 30);
  text(":", 210, 30);
  textAlign(LEFT);
  text(second(), 215, 30);
}

I approached this project by making a simplified version of a typical analog clock. This design is meant to be highly and easily legible, so I used an RGB color palette to easily distinguish between time segment and a layout that references typical clocks. I envision this design being an alternative to typical clocks, in which numbers aren’t needed to interpret the time.

sketch

//Yinjie Tian
//Section D
//yinjiet@andrew.cmu.edu
//Assignment 06

var x = []; 
var y = [];
var dx = []; 
var dy = []; 
var color = []; 


function setup() { 
    createCanvas(480, 480);
    angleMode(DEGREES);
    for (i = 0; i < 100; i++) { 
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
        color[i] = color(random(255), random(255), random(255));
        
    }
    frameRate(5);
}


function draw() {
 
    background(0);
 
 //stars at the background   
    noStroke();
    for (i = 0; i < 100; i++) {  // for each stars at the back ...
        fill(color[i]);
        ellipse(x[i], y[i], 10, 10);
        x[i] += dx[i];
        y[i] += dy[i];
        
        if (x[i] > width) x[i] = 0;        //horizontally
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;       //vertically
        else if (y[i] < 0) y[i] = height;
    }

        var h = hour();
        var m = minute();
        var s = second(); 
        var ring = random(1, 50);

//planets (clock)
    push();
    noStroke();
    
    translate(width/2,height/2);
    rotate(s * (360/60));


    fill(0, 200, s * 5);
    ellipse(200, 0, 80+ring, 80+ring);
    fill(0);
    ellipse(200, 0, 80, 80);
    fill(200, 200, s * 5);
    ellipse(200, 0, 60, 60);
    
    line()

    pop();
    
    push();
    noStroke();
    fill(200, m * 5, 200);
    translate(width/2,height/2);
    rotate(m*(360/60));
    
    ellipse(60, 0, 40, 40);
    pop();
    
    push();
    noStroke();
    fill(h * 25, 200, 200);
    translate(width/2,height/2);
    rotate(h*(360/12));
    
    ellipse(100, 0, 20, 20);
    pop();

//center rotational axis
    strokeWeight(4);
    stroke(255)
    line(width / 2 - 25, height / 2, width / 2 + 25, height / 2);
    line(width / 2, height / 2 - 25, width / 2, height / 2 + 25);
    fill(255, 0, 0);
    ellipse(width/2, height/2, 10, 10); 

}

I was inspired by how the solar system operates like a clock that all the planets are rotating around the sun. For the clock I created, I drew three planets rotating around the center point where the nearest one represents hour, the medium one represents minute and the furtherest one tells the second.

Abstract Clock

var x = [0];
var y = [0];
var Xoffset = 0;
var Yoffset = 0;
var col = 255;
var resetclr = 0;
var sc = [0];
var gRate = 0; //gradient speed
var activity = 0;


function setup() {
  createCanvas(480, 480);
  background(0);
  frameRate(30);
  var H = hour();
  var M = minute();
  var S = second();
}

function neuron() {
  col = random(0, 255);

stroke(col, 80)
  beginShape()
  for (i = 0; i < x.length; i++){
    vertex(x[i], y[i]);
  }
  endShape()
  Xoffset = random(-10, 20);
  Yoffset = random(-10, 20);
  x.push(x[x.length-1]+Xoffset);
  y.push(y[y.length-1]+Yoffset);
  if (i % 60 == 0) {
    x[i] = 0;
    y[i] = 0;
    background(0)
    endShape()
    beginShape()
  }
  if (second() % 5 == 0) {
    fill(0, 0, 0, resetclr);
    noStroke();
    rect(-50,-50, width + 50, height + 50);
    x = [0];
    y = [0];
    resetclr ++;
  }
  
}
//function to determine the breathing rate
function activeness(){
  //fast breathing during the active hours of the day
  if (hour() > 6 & hour() < 23) {
  activity = 2;
}
  //slow breathing due to sleep
  if (hour() < 6 || hour() > 23) {
    activity = 0.3
  }
  //medium speed breathing when waking up and going to bed
  if (hour() == 6 & hour() == 23) {
  activity = 1;
}
}

//changing the gradient to represent breathing
function breathing(){
  var c = map(sin(radians(gRate)), -1, 1, 0, 255);
  for (j = 0; j < 255; j++) {
      stroke(abs(j - abs(sin(radians(gRate))) * 255));

      circle(width / 2, height / 2, j);
      print(c);
    }
}

function draw(){
noFill();
//the
for (rota = 0; rota < 4; rota ++) {
  push()
  translate(width / 2, height / 2);
  rotate(PI / 2 * (rota + 1))
  neuron()
  pop()
}

if (second() % 6 == 0) {resetclr = 0;}
activeness();
breathing();


gRate = gRate + activity;
}

I made a biological clock trying to describe two phenomenons that happen within our bodies constantly: breathing and information exchange between neurons. The gradient circle in the middle represents breathing and the electricity-looking lines represent the signals being transferred between the neurons.

The breathing speed changes depending on the hour of the day. I took into account how a person’s activeness affects their breathing. When the person is asleep, 12am – 5am, breathing is the slowest, medium speed at 6am and 11am, when people state of activeness is transitioning, and fastest from 7am to 10pm, which are the active hours for me.

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//project-06



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

function draw() {
    clear();
    var H = hour(); //Hours
    var M = minute(); //Minutes
    var S = second(); //Seconds
    background(0);

    push(); //orbits
    translate(width / 2, height / 2);
    stroke('white');
    strokeWeight(0.5);
    noFill();
    ellipse(0, 0, 100, 100); //inner orbit (seconds)
    ellipse(0, 0, 250, 250); //outer orbit (minutes)
    pop();

    push(); //Seconds
    translate(width / 2, height / 2);
    fill(255, 153, 255);
    rotate(TWO_PI * (S - 15) / 60); //starts at 0 seconds
    ellipse(50, 0, 30, 30);
    pop();

    push(); //Minutes
    translate(width / 2, height / 2);
    fill(102, 255, 102);
    rotate(TWO_PI * (M - 15) / 60); //starts at 0 minutes
    ellipse(125, 0, 45, 45);
    pop();

    translate(width / 2, height / 2);//Outer planets (Hours)
    var hours = H >= 12 ? H - 12 : H; //If H >= 12, subtract 12 from H to make 12hr clock
    for (i = 0; i < 12; i++) {
        push();
        rotate(TWO_PI * (i - 3) / 12);
        if (i == hours) {
        fill('yellow'); //fill yellow for current time
        }
        else {
        fill(51, 153, 255);
        }
        ellipse(195, 0, 50, 50);
        pop();
    }


}

I got my motivation while watching my friend playing a video game, and I designed my clock with space theme. With 12 circles (planets) that represent each hour, I made the planet change to yellow for current hour. Then I made two planets rotating around their orbits according to minutes and seconds.

sketch

// CJ Walsh 
// Section D
// cjwalsh@andrew.cmu.edu
// Project-06

var cx, cy;
var sunDim, hourDim, minDim, secDim;
var hx, hy;
var mx, my;
var sx, sy;
var tx = [];
var ty = [];
var starNum;
var colors = ['white', '#D8B495', '#DBD8A2'];

function setup() {
	createCanvas(480, 480);
	cx = width/2;
	cy = height/2;
	sunDim = 0.2*480; // establishing variables for the sun and orbit paths
	hourDim = 0.55*480;
	minDim = 0.85*480;
	secDim = 70;
	starNum = 150;
	
	// loop created for generation of stars
	for (i = 0; i < starNum; i++) {
		tx[i] = random(0, width);
		ty[i] = random(0, height);
	}
}

function draw() {
	background('black');

	// drawing background of stars
	for (i = 0; i < starNum; i++) {
		fill(colors[i%3]);
		ellipse(tx[i], ty[i], 5, 5);
	}

	var s = second(); // establishing variables for sec, min, hr
	var h = hour() % 12; // hours set to 12 hr day rather than 24hr
	var m = minute();

	var sAngle = s/60*2*PI - PI/2; // establishing variables for angle of hands 
	var mAngle = m/60*2*PI - PI/2 + s/60/60*2*PI;
	var hAngle = h/12*2*PI - PI/2 + m/60/12*2*PI;


	// drawing paths of orbit
	noFill();
	stroke('#919191');
	strokeWeight(2);
	ellipse(cx, cy, hourDim, hourDim);
	ellipse(cx, cy, minDim, minDim);

	// drawing sun and radiating lines
	noStroke();
	fill('#DB5858');
	ellipse(cx, cy, sunDim, sunDim);
	noFill();
	stroke('#FFC269');
	for (s = sunDim; s <= sunDim+4*12; s+=12) {
		ellipse(cx, cy, s, s);
	}

	// Hour Planet 
	hx = cx + hourDim/2*cos(hAngle);
	hy = cy + hourDim/2*sin(hAngle);
	drawHour();

	// Minute Planet 
	mx = cx + minDim/2*cos(mAngle);
	my = cy + minDim/2*sin(mAngle);
	drawMin();

	// Second Moon
	sx = mx + secDim/2*cos(sAngle);
	sy = my + secDim/2*sin(sAngle);
	drawSec();
	

}

function drawHour() {
	noStroke();
	fill('#DD6C9F');
	ellipse(hx, hy, 50, 50);
	fill('#844364');
	ellipse(hx+14, hy+3, 15, 15);
	ellipse(hx-6, hy-5, 5, 5);
	ellipse(hx-10, hy+10, 10, 10);

}

function drawMin() {
	noStroke();
	fill('#4A74A5');
	ellipse(mx, my, 35, 35);
	fill('#303C6D');
	ellipse(mx-3, my-6, 17, 13);
	ellipse(mx+4, my+6, 6, 6);
}

function drawSec() {
	noStroke();
	fill('#73B3FF');
	ellipse(sx, sy, 12, 12);
}

For this project I wanted to create a clock that looked like planets orbiting a sun. Although the design is still centered around circular themes, I think its still breaking outside the idea of a clock, and definitely couldnt be identified as a clock by first glance. My process began with sketching my ideas on paper, and then translating that into a drawing using Adobe Illustrator. After that I was able to translate my sketches into code, creating both fixed and animated objects on my canvas. I used the knowledge I gained from Assignment C to help me create my new clock. I added in the ability of the planets to move slightly in the transition from minute to minute or hour to hour. As a final touch, I drew some randomly generated stars to fill the background. This was definitely a fun project to make, though one that challenged my knowledge.

For this project, I wanted to explore how to use a variety of shapes to express time so I used a combination of lines, circles and squares in a rotating motion simulate the effect of a clock.

//Shannon Ha
//sha2@andrew.cmu.edu
//Section D
//Project 06

function setup() {
    createCanvas(400, 400);
    angleMode (DEGREES); //converts radians to degrees
}

function draw() {
    var H = hour();
    var M = minute();
    var S = second();

      background(H * 5,M,S); // background color changes according to time

      //small circle for hours
      for (var h = 0; h < H; h++){
        var r=150;
        var g=200;
        var b=50;

          push();
          translate (width/2, height/3 - 30);
          rotate((15*h)-0.25*360) //24 squares to count hours
          noStroke();
          fill(r-H, g-M, b-S); //color alternates as time changes
          rect(35,0,20,20);
          pop();
      }

      //bigger circle for minutes
        for(var m = 0; m < M; m++){
          var r=250;
          var g=130;
          var b=10;
            push();
            translate (width/2, height/2 + 50);
            rotate((6*m)+ 0.25 *360); //60 circles to count min
            noStroke();
            fill(r+H, g+M, b+S); //color alternates as time changes
            ellipse(72, 0, 15, 15);
            pop();
          }


      //line seconds
        for(var s = 0; s < S; s++) {
        var r=160;
        var g=105;
        var b=60; //sets b value
        push();
        translate (width/2, height/2 + 50);
        rotate((6*s)- 0.50 * 360); //60 rotating lines
        stroke(H, M, S*2); //color alternates as time changes
        strokeWeight(2);
        line(100,100,10,10);
        pop();
    }


}

sketch

/* Nadia Susanto
   nsusanto@andrew.cmu.edu
   Section B
   Project-06-Abstract Clock */

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


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


     var hr = hour();
     var min = minute();
     var sec = second();

     push();
     textSize(30);
     text(nf(hr%12,2)+":"+nf(min,2)+":"+nf(sec,2) , -50, -20, 50, 100)
     pop();

     strokeWeight(4);
     var b = map(sec, 0, 60, 0, 255);
     stroke(color(100, b, 255));
     noFill();
     var secondAngle = map(sec, 0, 60, 0, 360);
     arc(0, 0, 300, 300, 0, 360-secondAngle);

     strokeWeight(5);
     var c = map(min, 0, 60, 0, 255);
     stroke(color(0, 255, c));
     noFill();

     var minuteAngle = map(min, 0, 60, 0, 360);
     arc(0, 0, 280, 280, 0, 360-minuteAngle);


     strokeWeight(3);
     var d = map(hr, 0, 60, 0, 255);
     stroke(color(d, c, b));
     noFill();
     var hourAngle = map(hr % 12, 0, 12, 0, 360);
     arc(0, 0, 260, 260, 0, 360-hourAngle);

   }

It was hard thinking of a very abstract concept, so I kept it simple. I wanted to stay simple but add the abstract element. The arc if hours, minutes, or seconds “disappears” to show the time passing by. Even though it looks simple, I think it looks pretty nice and I’m happy with the outcome.

Boba Clock

/*Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 06-- Abstract Clock
*/

function setup() {
    createCanvas(500, 500);
    var topLayer = color(130, 152, 168);
    var bottomLayer = color(109, 83, 117);
    setGradient(topLayer, bottomLayer);

    textSize(30);
    textAlign(CENTER);
    textStyle(ITALIC);
    text("boba all day every day", 0, 80, width);

}    

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

    var X = 180;
    b = 0;

   
    //boba cup: will not change
    rectMode(CORNER);
    noStroke();
    fill(255);
    rect(175, 200, 150, 250);

    ellipseMode(CENTER);
    noStroke();
    fill(255);
    ellipse(250, 200, 150, 30);

    ellipseMode(CENTER);
    noStroke();
    fill(255);
    ellipse(250, 450, 150, 30);

    //straw: seconds
    noStroke();
    fill(0);
    rectMode(CORNER);
    rect(235, 140, 30, S);
    

    //tea: minutes 
    //tea is draining per minute
    //to make draining effect, I created the complete picture and then used background color to "delete" the drawn

    ellipseMode(CENTER); //bottom part: doesn't change
    noStroke();
    fill(209, 207, 171);
    ellipse(250, 450, 140, 20);

    rectMode(CORNER);
    noStroke();
    fill(209, 207, 171);
    rect(180, 220, 140, 230);

    ellipseMode(CENTER);
    noStroke();
    fill(209, 207, 171);
    ellipse(250, 220, 140, 20);

    rectMode(CORNER);
    noStroke();
    fill(255);
    rect(180, 200, 140, M);

    //boba: hour (12 hours)
    b = H % 12;
    for (i = 1; i <= b; i+=1){
        noStroke();
        fill(0);
        ellipse(X + 10 * i, 440, 10, 10);
    }}


function setGradient(color1, color2) {
    for (var a = 0; a <= height; a++) {
        var amount = map(a, 0, height, 0, 1);
        var back = lerpColor(color1, color2, amount);
        stroke(back);
        line(0, a, width, a);
    }}

When creating this project, I simply looked at the objects on my desk for inspiration and decided to use my cup of Fuku Tea as inspiration. I identified 3 components of the boba cup that I could alter to fit hours, minutes, and seconds. I found it interesting to build my own clock graphically through one of my favorite food items.

sketch

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C
// Project 06 Abstract Clock

var prevSec;
var millisRolloverTime;

var ons = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; 
var tns = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen']; 
var tnspls = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety']; 

var milli;
var sec;
var mins;
var hr;

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

function draw() {
    background("black");
    
    // 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);
    
    textFont("Helvetica");
    textAlign(CENTER, CENTER);
    
    // increase in size based on time
    fill(50);
    textSize(mils);
    textStyle(NORMAL);
    var mm = int(mils / 10);
    milli = toWords(mm);
    text(milli, width / 2, height / 2);

    fill(75);
    textSize(S * 5);
    textStyle(NORMAL);
    sec = toWords(S);
    text(sec, width / 2, height / 2);

    fill(150);
    textSize(M * 2);
    textStyle(NORMAL);
    mins = toWords(M);
    text(mins, width / 2, height / 2);

    fill(230);
    textSize(H);
    textStyle(NORMAL);
    hr = toWords(H);
    text(hr, width / 2, height / 2);
}

function toWords(x) {
    if (x < 10) {
        return ons[x];
    } else if (x >= 10 & x < 20) {
        var i = x - 10;
        return tns[i];
    } else {
        if (x % 10 == 0) {
            var i = (x / 10) - 2;
            return tnspls[i];
        } else {
            var i = x % 10;
            var o = ons[i];
            var ii = int(x / 10) - 2;
            var t = tnspls[ii];
            var arr = [t, o];
            return join(arr, "");
        }
    }
}

When thinking of ideas for this assignment, I initially brainstormed a variety of different pictorial representations of the passage of time. I eventually decided to go with a text-based clock after seeing this image online. I thought it was interesting to see time represented textually rather than in an analog or digital form. 

The most challenging part of this assignment was converting the number of the time into text. I could only convert numbers up to 99, so for milliseconds, the number converted is divided by 10. I figured it didn’t matter as much because the milliseconds are illegible. I also had the size of the text increase based on the time.

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 06

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

//--------------------------
function draw() {
    background(255, 200, 200);
    noStroke();
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Compute the widths of the rectangles
    var mappedH = map(H, 0,23, 0,width - 50);
    var mappedM = map(M, 0,59, 0,width - 50);
    var mappedS = map(S, 0,59, 0,width - 50);

    if (H >= 6 & H <= 14) { //Change color of the background depending on time of day. (Morning, Afternoon, Evening)
      background('#87CEEB'); //morning sky blue
    } else if (H > 14 & H <= 17) {
      background('#fd5e53'); //afternoon sunset orange
    } else {
      background('black') //evening black
    }
    
    // Display the minutes and hours.
    fill('#2e2e2e');
    ellipse(width/2, height/2, mappedH, mappedH);
    fill('#ED2B33');
    ellipse(width/2, height/2, mappedM, mappedM);
    
    noFill(); //Second "hand"
    stroke(255);
    ellipse(width/2, height/2, mappedS, mappedS);
}