AbstractClock-Project-06-mdambruc

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-06
var buffer = 10;
var ybuffer = 20;
function setup() {
    createCanvas(610, 350);
}

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    var d = day();
    var m = month();
    background(84, 162, 178);
    secondboxes();
    minuteboxes();
    hourboxes();
    dayboxes();
    monthbox();
    }

function secondboxes(){
  var sx = 10;
  var diam = 10;
  var sy = 50;
  var spacing = 10;
  var count = 62;//seconds in a minute
  var s = second();
  text(s, buffer, sy + ybuffer);
  text("seconds", buffer + ybuffer, sy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(sx, sy, diam, diam);
  sx = sx + spacing;
  if (i == s){
    fill(0);//current second
  } else{
    fill(255);
  }
}
}
function minuteboxes(){
  var mx = 10;
  var diam = 10;
  var my = 100;
  var spacing = 10;
  var count = 62;//minutes in an hour
  var m = minute();
  text(m, buffer, my + ybuffer);
  text("minutes", buffer + ybuffer, my + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(mx, my, diam, diam);
  mx = mx + spacing;
  if (i == m){
    fill(0);//current minute
  } else{
    fill(255);//
  }
}
}

function hourboxes(){
  var hx = 10;
  var diam = 10;
  var hy = 150;
  var spacing = 10;
  var count = 26;//24 hours in a day
  var h = hour();
  text(h, buffer, hy + ybuffer);
  text("hours", hx + ybuffer, hy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(hx, hy, diam, diam);
  hx = hx + spacing;
  if (i == h){
    fill(0);//current hour
  } else{
    fill(255);//
  }
}
}

function dayboxes(){
  var dx = 10;
  var diam = 10;
  var dy = 200;
  var spacing = 10;
  var count = 33;//31 days in october
  var d = day();
  text(d, buffer, dy + ybuffer);
  text("days", dx + ybuffer, dy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(dx, dy, diam, diam);
  dx = dx + spacing;
  if (i == d){
    fill(0);//current day
  } else{
    fill(255);//
  }
}
}

function monthbox(){
  var mx = 10;
  var diam = 10;
  var my = 250;
  var spacing = 10;
  var count = 14;//12 months in a year
  var m = month();
  text(m, buffer, my + ybuffer);
  text("months", mx + ybuffer, my + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(mx, my, diam, diam);
  mx = mx + spacing;
  if (i == m){
    fill(0);//current month
  } else{
    fill(255);//
  }
}
}

For this Abstract Clock project, I wanted to create a full year calendar. Taking inspiration from the previous calendar assignment I created a calendar that tracks the seconds, minutes, hours, days and months in a year. I enjoy this clock because I believe it is a clock designed for a visual person; showing dates with symbols rather than numbers. My process involved a lot of trial and error with various ideas and finding myself struggling with more complex ideas. I found this project interesting since it made me question the original concept of clocks in general. I enjoyed the idea of making a full year calendar since all of the information is in front of you in a visually pleasing way. Although a bit stressful watching the seconds go by, I improved with using loops and learned a lot from this project. 

Project 06 Abstract Clock

 

I went with the idea of a ballerina.  Her point shoe on the stationary leg gives the seconds and the theatre curtain behind her also moves in seconds.  The shoe moves back and forth every second; the curtain moves down every second.  The floorboards on the stage tell the hour by adding an extra floorboard every hour.  The “clock” gives the minute time by moving with the leg from different positions.  Every hour it resets back to the first position.  The rest of the body and the head was made by lines, triangles, and ellipses.  The skirt was made by creating a shape using vertices.

The whole thing was incredibly difficult, and I felt like crying.  In the end it worked out, though. I would’ve liked to have just faces of the audience appear to count the minutes instead of having the legs move but I couldn’t figure out a way for that to work (I went through five different approaches but they didn’t work out).sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-06

var dressX;    //Skirt X Coordinates
var dressX1a;
var dressX1b;
var dressX2a;
var dressX2b;

var dressY;   //Skirt Y Coordinates
var dressYa;
var dressYb;
var dressYc;
var dressYd;



 var x = 280;
 var y = 580;
 var h;
 var m;
 var s;
 var footHeight = 40;
 var footWidth = 90;
 var footX = 420;
 var spacing = 5;
 var floorSpacing = 50;
 var floorX = 10;
 var floorY = 780;
 var audienceSpacing = 80;
 var audienceSpacing2 = 50;
 var hbx = 0;
 var vbx = 156;
 var hby = 156;
 var legX = 350;
 var legY = 700;
 

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

function draw() {
    background(0);

    dressX = (0);
    dressX1a= dressX - 70; 
    dressX1b= dressX1a - 10; 
    dressX2a= dressX+50; 
    dressX2b= dressX2a+10;

    dressY = (0)+ 120;
    dressYa =  dressY+ 80;
    dressYb = dressYa + 20;
    dressYc = dressY +50;
    dressYd = dressYc + 20;

    angleMode(DEGREES);
    h = hour();
    m = minute() ;
    s = second();

   
   curtains();
   Floor();
   floorBoards();
 
   push();
   translate(width/2,height/7);
   scale(2.0);
   skirt();
   pop();
   
   standingLeg();
   movingLeg();
   body();
   foot(); 

   if (s%2==0){
      footHeight = 90;
      footWidth = 40;     //seconds
      footX = 400;
   }
   else{
    footHeight = 40;     //seconds
    footWidth = 90;
    footX = 420;
   }


}



function skirt (){
    strokeWeight(0);
   fill(250,152,189);
    beginShape();
    vertex(dressX,dressY);
    vertex(dressX1a,dressYc);
    vertex(dressX1b,dressYd);
    vertex(dressX2b,dressYb);
    vertex(dressX2a,dressYa);
    vertex(dressX,dressY);
    endShape();     //skirt
}

function standingLeg(){
   stroke(250,152,189);
   strokeWeight(45);         //standing leg
   line(400,420,400,700);      
}

function movingLeg(){
   stroke(250,152,189);
   strokeWeight(45);         //moving leg 
    push();
    translate(350,460);
    if (m<60){
      rotate(3*m);
       
    }

    else if (m>=60){
      rotate(180);
       
    }
    
    line(0,0,0,280);
    strokeWeight(0);
    fill(250,152,189);
    ellipse(0, 280,40,90);
    //minute hand
    pop();

}


function body(){
    strokeWeight(0);
    fill(250,152,189)         //actual body
    triangle(400,460,470,300,320,300);

   stroke(250,152,189);
   strokeWeight(25);         //right arm
   line(320,300,270,200); 
   line(270,200,350,100);

   stroke(250,152,189);
   strokeWeight(25);         //left arm
   line(470,300,520,200);
   line(520,200,450,100); 

   ellipse(440,230,20,20);  //hair bun

   strokeWeight(0);           //head
   fill(250,152,189);
   ellipse(400,235,80,100);

   strokeWeight(45);  //neck
   line(400,300,400,320);
}

function foot(){
    strokeWeight(0);
    ellipse(footX,730,footWidth,footHeight);
}

function curtains(){
  for (i=0;i<s;i++){           //curtains
    fill(198,42,42);
    ellipse(width/2,1+(i*spacing),width+40,10);
   }
}
 
 function Floor(){
    fill(66,47,45);   //floor
   ellipse(400,800,1300,450);
 }

 function floorBoards(){
  for (i=0;i<h;i++){           //floorbaords
    stroke(0);
    strokeWeight(5);
    line(0-200+(i*floorSpacing),545,width/2,1000);
   }
 }



/* 
   for (i=0;i<10;i++){
    for (var j = 0; j < 6; j ++) {
            fill(255, 140);
            strokeWeight(0);
            noStroke();
            fill(252,185,139);       //audience
           ellipse(35+(i*audienceSpacing),270+(j*audienceSpacing2),40,40);
        }    
   } 


     
     fill(255,155,220,50);                     //horrizontal black box
     rect(hbx,100+hby,width,310); 


     fill(255,0,255,50); 
     rect(0,vbx,width,310); //vertical black box
     
     if((s<10)&(s%10!=0)){
      hbx = secs*95;
    }else if(s%10!=0){
      hbx = 0;
      secs= s-10;
    }

    push();
    frameRate(1);
    if(s%10==0){
     vbx = vbx-65;
    }
    pop();

    */




(The image is cut off for some reason. However, it works on my computer and is 800×800.)

Yugyeong Lee Project – 06

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project 06

function setup() {
    createCanvas(600, 200);
}

function draw() {
    background(110, 181, 192);
    angleMode(DEGREES);

	var s = second();
	var m = minute();
	var h = hour();

	var secondBarWidth = map(s, 0, 60, 0, 388);
	var diamM = 80;
	var diamH = 34;
	var angleM = map(m, 0, 60, 0, 360);
	var angleH = map(h, 0, 24, 0, 360);
	var mx = cos(angleM) * (diamM / 2);
	var my = sin(angleM) * (diamM / 2);
	var hx = cos(angleH) * (diamH / 2);
	var hy = sin(angleH) * (diamH / 2);
	var centerMx = 500;
	var centerMy = 127.5;
	var centerHx = 85;
	var centerHy = 75;

	textSize(10);
	noStroke();
	fill(10, 108, 132);
	textFont("Comic Sans");
	text(nf(h, 2, 0), 120, 70);
	text(":", 135, 70);
	text(nf(m, 2, 0), 140, 70);
	text(":", 155, 70);
	text(nf(s, 2, 0), 160, 70);

	//design
	noStroke();
	fill(10, 108, 132);
	ellipse(40, 30, 25, 25);
	ellipse(centerHx, centerHy, 20, 20);
	ellipse(centerMx, centerMy, 50, 50);
	fill(110, 181, 192);
	strokeWeight(3);
	stroke(10, 108, 132)
	ellipse(60, 40, 30, 30);
	noFill();
	strokeWeight(5);
	ellipse(centerHx, centerHy, 54, 54);
	ellipse(centerMx, centerMy, 100, 100);

	//representation of second, minute, hour
	arc(centerMx, centerMy, diamM, diamM, 0, angleM)
	arc(centerHx, centerHy, diamH, diamH, 0, angleH)
	fill(10, 108, 132);
	noStroke();
	rect(112, 75, secondBarWidth, 5);
}

I was inspired to create an abstract clock only using basic geometric shape such as rectangle and ellipse. The small ellipse represents hour while the big one represents minutes. The rectangle represents seconds.

Isabella Hong – Project – 06

For my abstract clock, I chose to visually declare the current hour, minute and second using different fruits. The large oranges signify the current hour based on a 12 hour rotation and the little apples and blueberries represent the minutes and seconds respectively.

ijhong-06

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-06

function setup() { 
	createCanvas(700, 500);
}

function draw() {
	//current hour, minute, and second of the day 
	var h = hour()%12; 
	var m = minute(); 
	var s = second(); 
	//light orange background 
	background(255, 250, 195);
	//loop orange function (hour) 
	var x = 32; 
	for (var i = 0; i < h; i++) {
		orange(x, 90); 
		x += 58;  
	}
	//loop apple function (min)
	var a = 0;
	for (var y = 175; y <= 275; y += 50) {
		for (var x = 17; x < width; x += 35) {
			if (a < m) {
				apple(x, y); 
			}
			else {
				break;
			}
			a += 1; 		
		}
		if (a == m) {
			break; 
		} 
	}
	//loop blueberries function (sec)
	var b = 0; 
	for (var y = 340; y <= 440; y += 50) {
		for (var x = 17; x < width; x += 35) {
			if (b < s) {
				blueberries(x, y);
			}
			else {
				break;
			}
			b += 1; 
		}
		if (b == s) {
			break;
		}
	}

}

//oranges represent the number of hours 
function orange(x, y) {
	//orange base 
	noStroke(); 
	fill(255, 165, 0); 
	ellipse(x, y, 50, 50);
	//orange leaf 
	noStroke(); 
	fill(0, 100, 0); 
	arc(x, y - 25, 50, 5, 270, 45, OPEN);
	//orange stem 
	stroke(101, 67, 33); 
	strokeWeight(5); 
	line(x, y - 25, x - 5, y - 35); 
}

//apples represent the number of minutes 
function apple(x, y) {
	//apple base 
	noStroke(); 
	fill(200, 0, 0);
	ellipse(x, y, 20, 20); 
	//apple leaf 
	noStroke(); 
	fill(0, 100, 0);
	arc(x, y - 13, 25, 3, 270, 45, OPEN); 
	//apple stem 
	stroke(101, 67, 33); 
	strokeWeight(2); 
	line(x, y - 10, x - 5, y - 15); 
}

//blueberries represent the number of seconds 
function blueberries(x, y) {
	//blueberry base 
	noStroke();  
	fill(0, 0, 103);	
	ellipse(x, y, 20, 20); 
	//highlight
	fill(255); 
	ellipse(x + 3, y - 3, 5, 5); 
	//leaves 
	noStroke(); 
	fill(0, 100, 0); 
	ellipse(x + 5, y - 10, 10, 5); 
	ellipse(x - 5, y - 10, 10, 5); 
}


	


	

My process work - I shuffled through a variety of objects that could potentially be used.
My process work – I shuffled through a variety of objects that could potentially be used.

Project 06 – Abstract Clock-sehenry

For this project, a ton of ideas came to my mind but one of them stuck. The idea that a shape could increase in increments as a representation of seconds intrigued me. I then just played around with how I wanted the hour and minute things to go. I started sketching what it could look like and realized that the other two sets of time would be relatively easy to make. I love the way the clock turned out. I used the normal settings of my normal clock for this one as well so it took less time than I originally thought. abstract-clock-sketch

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Abstract Clock Project 6


//Global Variables
var sCount = 0
var mCount = 0
var hCount = 0


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

function draw() {

var centerX = width/2 //center w
var centerY = height/2 //center h
var s = second(); //second
var h = hour()%12; //24hrs/2
var m = minute(); //minutes

    background(100,100,s*2); //changes color as time goes on. 
    
    push();
    for(sCount=0;sCount<=s;sCount+=1){ //counts seconds
        var secondPos = sCount*6
       }
    fill(20,secondPos,secondPos); //different colors as different seconds appear.
    ellipse(centerX,centerY,secondPos,secondPos); //circle that increases until it reaches 60 seconds
    translate(centerX,centerY); //translates the origin to (0,0)
    rotate(millis()/800); //Random rotation of rectangles 
    rectMode(CENTER);
    fill(100,100,secondPos);
    rect(0,0,secondPos,50); //inside rectangle

    push();
    fill(100,secondPos-60,100);
    rotate(millis()/900); //rotate slower than first rectangle
    rectMode(CENTER);
    rect(0,0,secondPos,50); //Second rectangle inside ellipse
    pop();
    pop();

    line(0,70,500,70); //upper boundary for circle and line for hour representation
    line(0,430,500,430);//lower boundary for circle and line for minute representation



    strokeWeight(2);
    for(mCount=0;mCount<m;mCount+=1){ //counts minutes
        var minutePos = mCount*6
        fill(minutePos,secondPos,secondPos);
        ellipse(minutePos+76.5,430,5,5);
    }
    push();
     for(hCount=0;hCount<h+1;hCount+=1){ //counts hours
        var hourPos = hCount*32.5+65
        strokeWeight(3); 
        rectMode(CENTER);
        rect(hourPos,70,28,28)
         }
    pop();

    textSize(30) //text for hours
    textAlign(CENTER);
    var htext=hour()%12;
    text(htext,hourPos,120);

    textSize(15) //text for minutes
    textAlign(CENTER);
    var mtext=minute();
    text(mtext,minutePos+76.5,425);
    
}



   


zhuoyinl-project 06 abstruct clock

sketch

//Zhuoying Lin
//section a
//zhuoyinl@andrew.cmu.edu
//Project 06 abstruct clock

var xh = [];
var yh = [];
var xb = [];
var yb = [];
var col = [];


function setup() {
    createCanvas(600, 600);
    for (i = 0; i<100; i++) {
        xh[i] = random(50,550);
        yh[i] = random(50,550);
        xb[i] = random(0,600);
        yb[i] = random(0,600);
        col[i] = random(150,255);
    }
    frameRate(4);
}

function draw() {
    background(0);
    var h = hour();
    var m = minute();
    var s = second();

    push();
    translate(width/2, height/2);

    for (i = 0; i<s;i++) {
         stroke(col[i]);
         strokeWeight(0.5);
         noFill();
         ellipse(0, 0, 540-i*9, 540-i*9);//the decreasing circle in thebackground which represent seconds

    }
    pop();
    
    push();
    translate(width/2, height/2);
    for ( i = 0; i<m; i++) {

       
        rotate(radians(6));
        stroke(col[i]);
        strokeWeight(3);
        line(0, 0, 0, -290+random(-3,3));      
    }
    pop();//the amount of lines representing the minute

    for (i = 0; i<s; i++) {
        fill(random(0,255));
        noStroke();
        ellipse(xb[i], yb[i], 10, 10);
    }//draw the shining stars in the background, the amount is in relation to second

    push();
    translate(width/2, height/2);
    var angle = 360*s/60
    rotate(radians(angle-90));//make the circle of epplipse rotate according to seconds
    for (i = 0; i<h; i++) {
        rotate(radians(15));
        noStroke();
        fill(col[i]);
        ellipse(0, -258, 25,25);//number of circles which representing hours
    }
    pop();

    textFont("Helvetica")
    text(nf(h,2,0)+":", 535, 590);
    text(nf(m,2,0)+":", 555, 590);
    text(nf(s,2,0), 575,590);
   
}

For this project, I try to create a sense of universe to depict the fourth dimension. And I used multiple variables to represent the time move. Both the circle lines and circle of ellipses represent the time in second as a metaphor of planets in the space and their tracks. The number of long white lines represent the minutes which could also seen as light beam and the number of while ellipse represent the hours. The sparkly little ellipse in the background do not show the times but they could be seen as stars far away.

sketch

ShanWang-Project06-Abstract Clock

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-06-Project

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


function draw() {
    background('#E79460')
    var cX = width/2;
    var cY = height/2;
    var lX = width/2;
    var lY = height/2;
    var rX = width/2;
    var rY = height/2;
    var sX = width/2-40;
    var sY = height/2+70;
    var sec = second();
    var min = minute();
    var hr = hour()+10;
    //set intervals for different planes;
    var intT = 1;
    var intL = 5;
    var intR = 8;
    var intS = 0.7;
    //set alpha value variable
    var alphaV = 0;

    //draw base plane (black) with no outlines;
    topPlane(width*2/3-50,height*3/4,90,100,"black",false);
    leftPlane(width*2/3-50,height*3/4,90,5,'#FFB11B',false);
    rightPlane(width*2/3-50,height*3/4,5,100,'#FFC408',false);

    //draw top planes that increment every second; resets after a cycle of 60
    for (var i=0; i<sec; i++){
        topPlane(cX,cY,40,intT,'#985F2A',false)
        cX = cX + intT/cos(45);
        cY = cY - intT/cos(45);
    }

    //draw left planes that increment every minute; resets after a cycle of 60
    for (var i=0; i<min; i++){
        leftPlane(lX,lY,40,intL,"white",false);
        lY += intL;
    }

    //draw right planes that increment every hour; resets after a cycle of 24
    var len = dist(width/2,height/2,cX,cY);
    for (var i=0; i<hr; i++){
        rightPlane(rX+4, rY+8,intR,60,"red",false);
        rY += intR;
    }

    //draw edge planes that compose the three dimensional image
    leftPlane(width/2+4,height/2+8,2,intR*hr,25,false);
    topPlane(width/2+4,height/2+8,2,60,200,false);

    rightPlane(width/2,height/2,7,intT*sec,55,false);

    //draw side planes that increments every second; resets after a cycle of 60
    for (var i=0; i<sec; i++){
        var dis = min*intL-107;
        rightPlane(sX,sY,dis,intS,'#005CAF',false);
        sX -= intS/cos(45);
        sY += intS/cos(45);
    }
    //draw side plane Edge
    var edgeLen2 = intS*sec;
    topPlane(sX+intS/cos(45),sY-intS/cos(45),2,edgeLen2,45,false);
    leftPlane(sX+intS/cos(45), sY-intS/cos(45),2,dis,"black");

    //dim the background every second;
    alphaV += sec%59 * 3;
    noStroke();
    fill(0,0,0,alphaV);
    rect(0,0,width,height);

}

function topPlane (cX, cY, side1, side2, color,outline){
    var p1X = cX - side1/cos(45);
    var p1Y = cY - side1/cos(45);
    var p2X = p1X + side2/cos(45);
    var p2Y = p1Y - side2/cos(45);
    var p3X = cX + side2/cos(45);
    var p3Y = cY - side2/cos(45);
    fill(color);
    if (outline == false){
        noStroke();
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
    else{
        stroke(0);
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
}

function leftPlane (cX, cY, side1, side2,color,outline){
    var p1X = cX;
    var p1Y = cY + side2;
    var p2X = p1X - side1/cos(45);
    var p2Y = p1Y - side1/cos(45);
    var p3X = cX - side1/cos(45);
    var p3Y = cY - side1/cos(45);
    fill(color);
    if (outline == false){
        noStroke();
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
    else{
        stroke(0);
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
}

function rightPlane (cX, cY, side1, side2, color,outline){
    var p1X = cX;
    var p1Y = cY + side1;
    var p2X = p1X + side2/cos(45);
    var p2Y = p1Y - side2/cos(45);
    var p3X = cX + side2/cos(45);
    var p3Y = cY - side2/cos(45);
    fill(color);
    if (outline == false){
        noStroke();
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
    else{
        stroke(0);
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
}

The inspiration for the visual style of this project came from the drawings of Theo Van Doesburg, a De Stijl artist during the 1900s.
I am interested in the idea of representing the change of time with the change of space. By extending the length size of the planes, the spatial quality of the representation changes throughout the day.
Also for legibility, I set the cycle of the dimming of the background color to be every minute.

sihand – Project Week 06 – Contour Clock

sihand – contour clock

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 06 project: abstract clock - erosion

var s;
var m;
var h;
var angMinute;
var angSecond;
var arrayS = [];
var arrayM = [];
var arrayH = [];
var gradientH = [];
var colorH1 = [];
var colorH2 = [];
var interval = 40;

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

function draw() {
	background(0, 0, 50);
	drawHour();
	drawSecond();
	drawMinute();
    drawTime();
}

function drawHour() {
	h = hour();
	noStroke();

	for (ih = 0; ih < 13; ih++) {
	//dimension of the centripetal circles
		arrayH[ih] = width - ih*interval;
	//set up the value of the gradient used to generate green and blue
		gradientH[ih] = 255 - 20*ih;
		
	//the certipedal circles represent the hours, where the 
		//land contour
		if (ih+1 > h%12 || ih+1 < 13) {
			//gradientH.pop();
			colorH1[ih] = color(0, gradientH[ih-h%12], 0);
			fill(colorH1[ih]);	
		}
		//ocean contour
		if (ih < h%12) {
			colorH2[ih] = color(0, 0, gradientH[h%12-ih-1]);
			fill(colorH2[ih]);
		}
		
		ellipse(width/2, height/2, arrayH[ih], arrayH[ih]);
	}
}

function drawMinute() {
	m = minute();
	noStroke();
	//fill()
	
    	
	
    for (var im = 0; im < m; im++) {
    	push();
    	
    	translate(width/2, height/2);
    	angMinute = map(m, 0, 60, 0, TWO_PI);
    	angMinute = im*angMinute/m;
    	rotate(angMinute-PI/2);
    	
    	fill(0, 0, 255);
    	rect(0, -3/2, (width - (h%12)*interval)/2, 3);
  		ellipse((width - (h%12)*interval)/2, 0, 10, 7);
    	pop();
	}
}

function drawSecond() {
	s = second();
	noStroke();
	angSecond = map(m, 0, 60, 0, TWO_PI);

	for (is = 0; is < 60; is++) {
		push();
		arrayS[is] = map(is, 0, 60, 65/2+2, width/2);
		
		if (is < s) {
			translate(width/2, height/2);
    		rotate(angSecond-PI/2);
			//fill(255);
			fill(0, 0, map(is, 0, 60, 255, 0));
			ellipse(arrayS[is], 0, 4, 4);
		}
		pop();
	}	
}

function drawTime() {
//the circular background for the text
	noStroke();
	fill(0);
	ellipseMode(CENTER);
    ellipse(width/2, height/2, 65, 65);

//text that shows the real time
	fill(255);
    textAlign(CENTER);
    text(h + " : " + m + " : " + s, width/2, height/2+5);
}

This project was inspired by colored contour maps (shown below). Seconds are represented by a line of dots: “precipitation”; minutes are represented by a serious of “streams”; and hours are represented by the change in the contour. The idea is that every hour passed, the sea level, represented by the blue area, rises to a certain level. In other words, the island, which represented by the green area, relatively sinks by the same level. The changes are illustrated in the updated image via changes in the shades of green and blue, which abides by the common appearance of a contour map.

Contour map example

 

Charlie Mo abstract clock

sketch




var r= 230;
var g= 250;
var b= 250;

function setup() {
    createCanvas(600, 600);
    //background(r, g, b);
}
function draw() {
	background(r, g, b,20);
	angleMode(DEGREES);

	
	//hours
	push();
	rectMode(CENTER);
	var h = hour();
	translate(width/2,height/2);
	rotate(h*30-180);
	noFill();
	rect(0,0,400,400);
	rect(0,0,1,500);

	pop();
	//seconds
	push();
	var s = second();
	translate(width/2,height/2);
	rotate(s*6-135);
	fill(63, 12, 12);
	noStroke();
	ellipse(150,150,40,40);
	ellipse(-150,-150,20,20);
	pop();

	//minutes
	push();
	var m = minute();
	translate(width/2,height/2);
	rotate(m*6-180);
	head(0,0);
	pop();

	

}

function head(x,y){

//head
	noStroke();
	fill(255, 235, 117);
	ellipse(0,0,300,300);
	//eyes
	strokeWeight(1);
	fill(255);
	ellipse(-70,0,80,15);
	ellipse(70,0,80,15);
	noStroke();
	fill(38, 20, 0);
	ellipse(-70,0,15,15);
	ellipse(70,0,15,15);
	//ears
	fill(255, 235, 117);
	ellipse(-150,0,30,50);
	ellipse(150,0,30,50);
	ellipse(-150,20,50,60);
	ellipse(150,20,50,60);
	//studs
	fill(0, 48, 46);
	ellipse(-160,30,10,10);
	ellipse(160,30,10,10);
	//mouth
	fill(145, 36, 36);
	arc(0,40,30,30,0,180);
	//dots
	for(var x = 0; x<3; x++){

		for(var y = 0; y<3; y++){

			var x2 = -40 + x * 40;
			var y2 = -110 + y * 40; 

			fill(255, 250, 147);
			ellipse(x2,y2,20,20);
		}
	}

}

Shannon Case- Project 06 – Clock

For this project I decided to try to represent time as dripping water droplets. I wanted to show the hours, minutes, and seconds dripping down from the top of my canvas. I was thinking about water evaporating and dripping as a way to tell the passage of time. I chose to do a 24 hour time because thats what the assignment asked for and I think that the chance for that row to be longer will be a cool visual effect. I used loops to create the vertical columns of drips and add one drip for each second/minute/hour. The first column is hours, the middle is minutes, and the last is seconds.

img_7951

sketch

//Shannon Case
//Section D
//scase@andrew.cmu.edu
//project 06

function setup() {
    createCanvas(300,800);
    background(0);
}

function draw() {

    background('#9fdbdd');
    var m = minute();
    var s = second();  //sets variables
    var h = hour();
    var size = 10;
    var yOffset = 10;
    var spacing = 10;




for(var i = 0; i<h; i++){

    fill('#409bad');
    ellipse(40, yOffset+i*spacing, size, size);
}

for(var i = 0; i<m; i++){

    fill('#4078ad');
    ellipse(120, yOffset+i*spacing, size, size);
}

for(var i = 0; i<s; i++){
    
    fill('#0f025e');
    ellipse(200, yOffset+i*spacing, size, size);
}

}