Month: October 2017

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.

sketch

/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 06: Abstract Clock*/

var prevSec;
var millisRolloverTime;

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

function draw() {
    background(17,76,98);

    // Fetch the current time
    var H = hour();
    var X = (H%12);//so that the clock becomes a 12hr clock instead of 24 hr
    var M = minute();
    var S = second();


    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    //showing text of time
    fill(255);
    text(nf(X,2,0) + ':' + nf(M,2,0) + ':' + nf(S,2,0),width/2-30,15);


    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);

    // Making the seconds into a smoother transition
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);


  //floorbed
  fill(250,247,196);
  rect(0,height-115,width,200);

  //drawing the snail (hour)
  noStroke();
  fill(207,230,239);
  rect(0, 500, hourBarWidth, 10);
  fill(234,207,239);
  ellipse(hourBarWidth,484,45,45);
  fill(155,124,161);
  ellipse(hourBarWidth,505,70,10);
  fill(155,124,161);
  ellipse(hourBarWidth+20,483,5,45);
  fill(155,124,161);
  ellipse(hourBarWidth+30,483,5,45);
  fill(255);
  ellipse(hourBarWidth+20,465,15,15);
  fill(255);
  ellipse(hourBarWidth+30,465,15,15);
  fill(25);
  ellipse(hourBarWidth+20,465,8,8);
  fill(25);
  ellipse(hourBarWidth+30,465,8,8);

  //drawing fish hook (seconds)
  push();
  noFill();
  strokeWeight(10);
  stroke(160);
  arc(100,secondBarWidthSmooth,70,70,0,PI);
  strokeWeight(5);
  arc(135,secondBarWidthSmooth-110,10,10,0,TWO_PI);
  strokeWeight(6);
  rect(133,secondBarWidthSmooth-100,5,100,10);
  stroke(50);
  rect(133,0,2,secondBarWidthSmooth-110,5);

  pop();

  //drawing the fish (minute)
  fill(94,229,239);
  ellipse(minuteBarWidth,275,100,80);
  fill(255);
  ellipse(minuteBarWidth+25,250,40,40);
  fill(0);
  ellipse(minuteBarWidth+35,250,20,20);
  fill(94,191,239);
  triangle(minuteBarWidth-80,255,minuteBarWidth-80,295,minuteBarWidth-40,270);
  //and exclamation point
  fill(255);
  rect(minuteBarWidth-5,130,10,60,10);
  ellipse(minuteBarWidth,210,10,10);

}

For my project, I wanted to make a clock but visually represented in a unique way. Here, I decided to make an instance/ scene of a fish underwater. The snail on the floorbed represents the hours (bc snails are slow anyway), the fish represents the minutes, and the fish hook represents the seconds. The scene here is that the fish is swimming away from the oncoming hook while the snail is just crawling away in a leisurely pace. As seen in the sketch, I initially wanted to use bubbles to represent the seconds, but went ahead and changed my idea to the fish hook instead.

(not sure if it’s just me, but for some reason I have to refresh the page a couple times to see the code work.)

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 6
*/

var d1 = 24;	//hour
var d2 = 60;	//minutes/seconds
var slope1;		//slope of the diagonal line from hour triangle
var slope2;		//slope of the diagonal line from minute triangle

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

function draw() {
	//this if statement inverts the black-white colours depending on AM or PM
	if(hour()>11){		//PM
		background(0);
	} else {			//AM
	background(255);
	}
//HOUR	
	slope1 = (height/2-height/8)/d1;
	for(var i = 0; i < d1; i++){
		//12am, 3am, 6am, 9am, 12pm, 3pm, 6pm, 9pm
		//longer and thicker line 
		if(i%3 == 0){
			if(hour()>11){
				stroke(200);
			} else {
			stroke(0);
		}
			strokeWeight(1);
			line(0, height/8+i*slope1,
			 	 width/2+d1-i, height/8+i*slope1);
		} else {
		//thin lines for all other times
			stroke(100);
			strokeWeight(0.5);
			line(0, height/8+i*slope1,
			 	 width/2-d1+i, height/8+i*slope1);
		}
		//blue triangle fill for HOUR
		noStroke();
		fill(26, 136, 255, 200);
		if(i == hour()){
			triangle(width/2+d1-i, height/8+i*slope1,
				 width/2-d1+i, height/8+i*slope1,
				 width/2, height/2);
		}
	}
//MINUTE
	slope2 = (height*(7/8)-height/2)/d2;
	for(var j = 0; j <= d2; j++){
		//10 min, 20 min, 30 min, 40 min, 50 min, 60 min
		if(j%10 == 0){			
			if(hour()>11){		//PM
				stroke(200);
			} else {			//AM
				stroke(0);
			}
			strokeWeight(1);
			line(width/2-j, height/2+j*slope2,
			 	 width, height/2+j*slope2);
		} 
		//blue quad fill for MINUTE
		noStroke();
		fill(0, 99, 204, 200);
		if(j == minute()){
			quad(width/2-d2, height*(7/8),
				 width/2+d2, height*(7/8),
				 width/2+d2-j, height*(7/8)-j*slope2,
				 width/2-d2+j, height*(7/8)-j*slope2);
		}
//SECOND
		stroke(179, 204, 255);
		strokeWeight(2);
		if(j == second()){
		line(width/2, height/2, width/2, height/2+j*slope2)
		}
	}
//TWO TRIANGLES
	if(hour()>11){		//PM
		stroke(255);
	} else {			//AM
		stroke(0);
	}
	strokeWeight(2);
	noFill();
	//hour triangle
	triangle(width/2-d1,height/8,
			 width/2+d1, height/8,
			 width/2, height/2);
	//minutes triangle
	triangle(width/2, height/2,
			 width/2-d2, height*(7/8),
			 width/2+d2, height*(7/8));
}

For this project, I wanted to do something similar to the hourglass, but make it more geometric with just triangles and lines. The lines and background colours invert when AM switches to PM and vice versa.