rkondrup-06-project-abstract-clock

sketch

// ryu kondrup
// rkondrup@andrew.cmu.edu
// section D
// project-06-abstract-clock

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

function draw() {
  background(255);

    var centerPt = width/2;
    var sWidth = 100;
    var mWidth = 60;
    var hWidth = 30;
    var s = second();
    var m = minute();
    var h = hour();
    var sAngle = radians(s*6)-PI/2;
    var mAngle = radians(m*6)-PI/2;
    var hAngle = radians(h*30)-PI/2;

    //sin cos positioning of each circle


    //big center circle
    fill(120, 210, 200);
    stroke(255, 245, 210);
    strokeWeight(3);
    ellipse(centerPt, centerPt, width);

//to make 60 lines
for (var i = 0; i < 60; i++) {

    //seconds
    var sPositionX = cos(sAngle)*150+centerPt;
    var sPositionY = sin(sAngle)*150+centerPt;
    //minutes
    var mPositionX = cos(mAngle)*100+centerPt;
    var mPositionY = sin(mAngle)*100+centerPt;
    //hours
    var hPositionX = cos(hAngle)*60+centerPt;
    var hPositionY = sin(hAngle)*60+centerPt;
    //main background circle
    var xPerimeter = cos(radians(6*i))*240+240;
    var yPerimeter = sin(radians(6*i))*240+240;
    //new perimeter circle
    var x2Perimeter = cos(radians(i*s))*240+240;
    var y2Perimeter = sin(radians(i*s))*240+240;


//LINES!!!!!!!!!!!!!!!!!!!!
    stroke(245, 255, 210);
    strokeWeight(1);
    noFill();
        beginShape();
        //center reference point
        curveVertex(centerPt, centerPt);
        //fixed perimeter
        curveVertex(xPerimeter, yPerimeter);
        //second hand
        curveVertex(sPositionX, sPositionY);
        //minute hand
        curveVertex(mPositionX, mPositionY);
        //hour hand
        curveVertex(hPositionX, hPositionY);
        //fixed perimeter
        curveVertex(x2Perimeter, y2Perimeter);
        //back to center reference point
        curveVertex(centerPt, centerPt);
        endShape();
    }

// //CIRCLES!!!!!!!! HIDDEN
// fill(230, 230, 230);
// //seconds
// ellipse(sPositionX, sPositionY, sWidth)
// //minutes
// ellipse(mPositionX, mPositionY, mWidth)
// //hours
// ellipse(hPositionX, hPositionY, hWidth)


}

In this assignment I originally wanted to make circles which rotate inside of other rotating circles in the way that the moon orbits the earth as the earth orbits the sun, but because of time constraints and because I was not able to come up with a way to do it by friday morning, I had to settle on a different design concept. Instead I chose to depict time as a collection of curving lines which share three common points representing the second, minute, and hour. I then attached the lines to the perimeter of the bounding circle. The way that the line density changes each second was an accident but because it made the image more dynamic I decided to leave it.