Category: Section B

sketch

var numObjects = 6; // number of rect/ellipses that will rotate in a circle.
var centerX; //the center x position of the rotating obj.
var centerY; // the center y pos of rotating obj.
var angle = 0; // starting angle of rotation
var distance = 50;
var redd = 255;
var greenn = 255;
var bluee = 255;
var spacing = 10; // spacing for moving rect in the background
var x = 0; // x pos of the rect
var y = 0; // y pos of the rect

function setup() {
  createCanvas(300, 600);
centerX = width / 2; // vars for rotating circles
centerY = height / 2; // vars for rotating circles
noStroke();
ellipseMode(CENTER); // rotating circles
}


function draw() {
  background(0);
  //for current time
  var Hr = hour();
  var Min = minute();
  var Sec = second();
  //mapping the time frame
  var mH = map(Hr, 0,23, 0, height);
  var mM = map(Min, 0,59, 0, height);
  var mS = map(Sec, 0,59, 0, height);
  var rectHeight =  width / 3; //constant for x distance

  noFill(); //the current hour rocket.
  stroke("red");
  rect(0.5*rectHeight, mH, 100, 95);
  stroke(0,0,255);
  rect(0.25*rectHeight, mH, 60, 55);
  rect(1.125*rectHeight, mH, 60, 55);
  stroke("orange");
  triangle(0.5*rectHeight,95+mH, 0.5*rectHeight+100, 95+mH, 0.5*rectHeight+50, 150+mH);
  stroke("pink");
  ellipse(0.5*rectHeight,mH, 20, 70);
  ellipse(0.5*rectHeight+100, mH, 20, 70);

  stroke("pink"); // minute indicator
  strokeWeight(2);
  rect(1*rectHeight, mM, 50, 50);
  fill("pink");
  text("FLY!", 1.125*rectHeight, mM+30);

  noFill();// solar system indicator of the seconds.
  stroke("cyan");
  ellipse(2.4*rectHeight, mS-200, 30, 30);
  ellipse(2.4*rectHeight, mS-100, 70, 70);
  ellipse(2.4*rectHeight, mS, 100, 100);
  stroke("yellow");
  strokeWeight(2);
  ellipse(2.4*rectHeight, mS, 50, 50);
  stroke(255);
  ellipse(2.4*rectHeight, mS-250, 20, 20);
  ellipse(2.4*rectHeight, mS-300, 10, 10)
  ellipse(2.4*rectHeight, mS-100, 90, 20);
  ellipse(2.4*rectHeight, mS-400, 5, 5)
  ellipse(2.4*rectHeight, mS-500, 2, 2)
  stroke("red");
  ellipse(2.4*rectHeight, mS-200, 40, 40);

  //the rotating clock in the middle.
  var angleObject = 360 / numObjects; //space between each object.
    for (var i = 0; i < numObjects; i++) {
  angle += frameCount*i /20;
  push();
  translate(centerX, centerY); // the obj. rotate around the center.
  rotate(radians(i * angleObject + angle));
  stroke("skyblue"); // the lightblue rectangles rotating around.
  rect(distance-10, mS/6, 15, 15); // rotation indicates the seconds.
  stroke("yellow"); // the dark blue circles rotating around.
  strokeWeight(1);
  ellipse(distance, mM/4, 10, 10); // rotation indicates the minutes.
  stroke(0,255,0); // the green small rects rotating around.
  rect(distance, mH/24, 5, 5); // rotation indicates the hour.
  pop();
  }


}

My abstract clock is based on a space theme. The rocketship indicates the hour, the pink box with the text “FLY!” indicates the minutes, and the linear solar system indicates the seconds as they all descend from the top of the canvas. The rotation that is occurring in the middle of the canvas also indicates the hour, minute, and seconds with the squares and the ellipses. As you can see from the code, the skyblue squares rotation enlarges each time the seconds increase form 0 to 60. Similarly, the rest of the other objects that rotate, enlarge proportionally as the hour and the minutes flow by.

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.

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.

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.