Category: Project-06-Abstract-Clock

// Susie Kim
// susiek@andrew.cmu.edu
// Section A
// Project-06

function setup() {
    createCanvas(480, 380);
    background(244, 212, 212);
}

function draw() {
	// time variables
	var yr = year();
	var h = hour();
	var m = minute();
	var s = second();

	background(244, 212, 212);

	// iphone body
	fill(255);
	noStroke();
	rect(50, 40, 160, 305, 20);
	stroke(0);
	strokeWeight(0.2);
	fill(235);
	rect(57, 75, 147, 230);

	// time of day image
	if (h == 0 || h == 1 || h == 2 || h == 3 || h == 4 || h == 5 || h == 24) {
		// if between the hours of 12am and 5am, show night photo
		noStroke();
		fill(51, 83, 135);
		rect(77, 92, 105, 105);

		// moon
		fill(180);
		ellipse(140, 130, 35, 35);

		fill(130);
		ellipse(150, 132, 7, 7);
		ellipse(130, 130, 5, 5);
		ellipse(143, 121, 6, 6);
		ellipse(137, 139, 3, 3);

		// stars
		fill(255);
		ellipse(100, 110, 2, 10);
		ellipse(100, 110, 10, 2);
		ellipse(115, 150, 2, 8);
		ellipse(115, 150, 8, 2);
		ellipse(90, 160, 2, 12);
		ellipse(90, 160, 12, 2);
		ellipse(160, 100, 1, 7);
		ellipse(160, 100, 7, 1);
		ellipse(170, 155, 1, 7);
		ellipse(170, 155, 7, 1);

		// cloud 1
		ellipse(160, 175, 10, 10);
		ellipse(150, 170, 17, 17);
		ellipse(141, 173, 7, 7);
		ellipse(135, 175, 9, 9);
		rect(130, 171, 35, 10, 5);

		// cloud 2
		ellipse(110, 185, 8, 8);
		ellipse(105, 183, 5, 5);
		ellipse(101, 182, 7, 7);
		ellipse(97, 185, 6, 6);
		rect(93, 183, 20, 7, 4);

	} else if (h == 6 || h == 7 || h == 8 || h == 9 || h == 10 || h == 11) {
		// if between the hours of 6am and 11am, show dawn photo
		noStroke();
	    fill(255, 220, 131);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(247, 167, 107, 100);
	    ellipse(115 , 160, 45, 45);
	    ellipse(115 , 160, 35, 35);
	    fill(247, 167, 107);
	    ellipse(115, 160, 25, 25);

	    // cloud 1
	    fill(255);
	    ellipse(165, 125, 10, 10);
		ellipse(155, 120, 17, 17);
		ellipse(146, 123, 7, 7);
		ellipse(140, 125, 9, 9);
		rect(135, 121, 35, 10, 5);

		// cloud 2
		ellipse(170, 175, 8, 8);
		ellipse(165, 173, 5, 5);
		ellipse(161, 172, 7, 7);
		ellipse(157, 175, 6, 6);
		rect(153, 173, 20, 7, 4);

		// cloud 3
		ellipse(100, 108, 12, 12);
		ellipse(92, 112, 9, 9);
		ellipse(108, 110, 7, 7);
		ellipse(115, 110, 10, 10);
		rect(87, 111, 35, 7, 4);

	} else if (h == 12 || h == 13 || h == 14 || h == 15 || h == 16 || h == 17) {
		// if between the hours of 12pm and 5pm, show day photo
		noStroke();
	    fill(179, 227, 250);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(255, 220, 131, 100);
	    ellipse(130, 120, 45, 45);
	    ellipse(130, 120, 35, 35);
	    fill(255, 220, 131);
	    ellipse(130, 120, 25, 25);

	    // cloud 1
	    fill(255);
	    ellipse(100, 178, 12, 12);
		ellipse(92, 182, 9, 9);
		ellipse(108, 180, 7, 7);
		ellipse(115, 180, 10, 10);
		rect(87, 181, 35, 7, 4);

		// cloud 2
		ellipse(170, 165, 10, 10);
		ellipse(160, 160, 17, 17);
		ellipse(151, 163, 7, 7);
		ellipse(145, 165, 9, 9);
		rect(140, 161, 35, 10, 5);

	} else {
		// if between the hours of 6pm and 11pm, show dusk photo
		noStroke();
	    fill(108, 100, 173);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(221, 216, 114, 100);
	    ellipse(150, 160, 40, 40);
	    ellipse(150, 160, 30, 30);
	    fill(221, 216, 114);
	    ellipse(150, 160, 20, 20);

	    // cloud 1
	    fill(255);
		ellipse(165, 115, 10, 10);
		ellipse(155, 110, 17, 17);
		ellipse(146, 113, 7, 7);
		ellipse(140, 115, 9, 9);
		rect(134, 111, 35, 10, 5);

		// cloud 2
		ellipse(110, 135, 8, 8);
		ellipse(105, 133, 5, 5);
		ellipse(101, 132, 7, 7);
		ellipse(97, 135, 6, 6);
		rect(93, 133, 20, 7, 4);s

		// cloud 3
		ellipse(100, 178, 12, 12);
		ellipse(92, 182, 9, 9);
		ellipse(108, 180, 7, 7);
		ellipse(115, 180, 10, 10);
		rect(87, 181, 35, 7, 4);

		// stars
		ellipse(115, 155, 2, 8);
		ellipse(115, 155, 8, 2);
		ellipse(100, 110, 2, 12);
		ellipse(100, 110, 12, 2);
		ellipse(140, 131, 1, 7);
		ellipse(140, 131, 7, 1);
	} 

	// minute line with marker
	stroke(0);
	strokeWeight(1);
	line(67, 215, 194, 215);
	fill(255);
	var mMapped = map(m, 1, 60, 67, 194);
	strokeWeight(.5);
	ellipse(mMapped, 215, 10, 10); // moving circle

	// seconds line with marker
	strokeWeight(1);
	line(67, 285, 194, 285);
	var sMapped = map(s, 1, 60, 67, 194);
	strokeWeight(.5);
	ellipse(sMapped, 285, 15, 15) // moving circle

	// show name of year on screen
	textSize(10);
	fill(0);
	text(yr + ' ~', 118, 235);

	// buttons and iphone details
	noStroke();
	fill(0);
	rect(125, 250, 3, 13); // pause button
	rect(132, 250, 3, 13);

	triangle(150, 250, 150, 263, 163, 257); // forward buttom
	triangle(156, 250, 156, 263, 168, 257); 

	triangle(104, 250, 104, 263, 92, 257); // backward buttom
	triangle(110, 250, 110, 263, 97, 257); 

	rect(115, 58, 30, 3); // top detail

	ellipse(105, 60, 6, 6); // top cameras
	ellipse(130, 50, 4, 4);

	noFill(); // home button
	stroke(0);
	strokeWeight(.5);
	ellipse(130, 325, 25, 25);

	// succulent pot
	fill(216, 186, 117);
	noStroke();
	circle(360, 285, 125, 125);
	fill(140, 122, 84);
	circle(360, 285, 100, 100);

    // succulent leaf # changes with hour, 12 leaves total
	if (h < 24 & h > 12) {
		h -= 12;
	}

    if (h == 0) {
	    h = 12;
    }
    
    // 8 big exterior leaves change
    for (var i = 0; i < h; i++) {
    	push();
    	translate(360, 285);
    	rotate(radians(45*i));
    	fill(139, 196, 118);
	    ellipse(0, 30, 25, 80);
	    pop();
    }

    // 4 interior leaves change
    for (var i = 8; i < h; i++) {
    	push();
    	translate(360, 285);
    	rotate(radians(90*i));
    	fill(174, 215, 152);
	    ellipse(0, 20, 15, 50);
	    pop();
    }

	// airpods case
	fill(255);
	push();
	rotate(radians(-20));
	rect(230, 160, 100, 107, 20);
	pop();
	strokeWeight(1);
	stroke(175);
	line(280, 100, 375, 65);

    // right airpod
    fill(255);
    noStroke();
	ellipse(435, 60, 30, 30);
	push();
	rotate(radians(30));
	rect(410, -170, 11, 45, 7);
	fill(175);
	ellipse(415, -128, 12, 8);
	fill(0);
	ellipse(404, -165, 10, 4);
	ellipse(396, -165, 3, 4);
	pop();

	// left airpod
	noStroke();
	ellipse(265, 180, 30, 30);
	push();
	rotate(radians(-30));
	rect(125, 285, 11, 45, 7);
	fill(175);
	ellipse(130, 325, 12, 9);
	fill(0);
	ellipse(142, 287, 10, 4);
	ellipse(150, 287, 3, 4);
	pop();
}

	

 /*
Nicholas Wong
Section A
*/


var d; //Days
var h; //Hours
var m; //Minutes
var s; //Seconds

var angle; //Angle for sin-wave frequency for pulse

function setup()
{
    createCanvas(480,480);
    angleMode(DEGREES); //Degrees instead of radians (makes mapping easier)
}
 
function draw() 
{
	translate (width/2,height/2) //Make origin at center
	rotate(-90) //Rotate -90 so starting points for most circle counters face up

	background(0); //Black background

	//Day circle (Outer circle)
	dayCircle();

	//Detail circles
	push();
	fill(0)
	strokeWeight(1)
	stroke(250,0,0);
	circle(0,0,200);
	pop();

	//Dark red circles
	push();
	noFill();
	stroke(1)
	stroke(50,0,0)
	circle(0,0)
	circle(0,0,65)
	circle(0,0,80);
	circle(0,0,100);
	circle(0,0,150);
	pop();


	//Hour circle (Second outer ring)
	hourCircle();

	//Minute circle (Tertiary rings)
	minuteCircle();

	//Second circle (Dotted inner ring)
	secondCircle();

	//Center-most pusling circle
	secondPulse();
    angle += (360/60) / 2; //1 period is 360/framerate, half makes 1 pulse/s

    
}

//Circle of 31 arcs
function dayCircle()
{
	var d = day();

	//Loop runs 31 times, the maximum number of days for any month
	for (let i=1; i<=31; i++)
	{

		push();
		noStroke();
		fill(50,0,0)
		arc(0,0,250,250,(i-1)*360/31,(i-1)*360/31 + 10.5); //Make 31 arcs

		//If the day is today, make the arc red
		if(i == d)
		{
			fill(250,0,0)
		}
		else //If not today, make arc dark red
		{
			fill(70,0,0)
		}

		//First day of month is slightly brighter red arc
		if(i==1)
		{
			fill(90,0,0)
		}

		arc(0,0,235,235,(i-1)*360/31,(i-1)*360/31 + 10.5); //Outer arc for aesthetics
		pop();

		//Additional circles for aesthetics
		noFill();
		stroke(255,0,0);
		circle(0,0,250);
		circle(0,0,200);
	}
}

//Circle with 24 segments
function hourCircle()
{
	var h = hour();

	//Loop is run for the amount of hours passed today
	for (let i=0; i<=h; i++)
	{

		push();
		noFill();
		
		stroke(200,0,0);
		strokeWeight(3)

		arc(0,0,150,150,i*15,i*15 + 6); //Add arcs for every hour that has passed today

		strokeWeight(0.35)

		push(0);
		rotate(-90)
		line(75*sin((-i*15)),75*cos((-i*15)),100*sin((-i*15)),100*cos((-i*15))) //Line drawn from arcs for aesthetics
		pop();

		stroke(255)
		strokeWeight(1)
		arc(0,0,140,140,i*15,i*15 + 6); //Secondary arc for aesthetics
		pop();
	}
}

//Circle of variable arc lengths that show minutes in an hour
function minuteCircle()
{
	var m = minute();

	let m_circle = map(m,0,60,0,360); //Map minutes in an hour to angles on a circle
    push();
    noFill();

    strokeWeight(2);
    stroke(200,0,0);

    //Creates an arc with arc length representing how many minutes has passed in this hour
   	arc(0,0,100,100,0,m_circle);

   	strokeWeight(2);
   	stroke(250,100,100);
   	arc(0,0,80,80,0,m_circle); //Aeshtetic secondary arc

   	pop();
}

//Circle of 60 segments that show seconds in a minute
function secondCircle()
{
	var s = second();

	//Loop runs for the amount of seconds passed in this minute
	for (i=0; i<=s; i++)
	{
		push();
		noFill();
		stroke(255,150,150);
		strokeWeight(1)
		arc(0,0,65,65,i*6,i*6 + 1); //Creates an arc for every second that has passed in this minute
		pop();
	}
}

//Circles in center that pulse every second
function secondPulse()
{

   	if (frameCount/60 == 1) //If the frame count is divisible by 60 (is a second)
   	{
   		angle = 180; //Angle is set to 180
   	}

    let s_diam = sin(angle) * 40; //Pulse maximum diameter

    push();

    noFill();
    strokeWeight(1)
    stroke(250,150,150)

    circle(0,0,s_diam); //Draw circle with variable diameter

    stroke(250,250,250)

    circle(0,0,s_diam * 0.75); //Second circle for aesthetics

    pop();
}

// SEAN CHEN
// 15-104 A

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

function randomizer() { // giving the design "chaos"
    var diff = dist(width/2, height/2, mouseX, mouseY);
    if (diff > 25) {
        // more random shifting based on dist from center to mouse
        var chaos = random(-1, 1) * (diff-25)/25;
    } else {
        var chaos = random(-1, 1) * 0.175; // mini shifts for "texture"
    }
    return chaos;
}

function border() { // border ring including seconds hand
    textAlign(CENTER, BOTTOM);
    for (var i = 0; i < 60; i++) {
        push();
        textSize(9);
        if (second() == i) { // if second matches rotation, display sec location
            rotate(radians(6*i+randomizer()));
            textStyle(ITALIC);
            textStyle(BOLD);
            textAlign(LEFT, CENTER);
            rotate(radians(-90)); 
            text(' second ' + second(), 250+randomizer(), 0);
        } else { // say border otherwise
            rotate(radians(6*i+randomizer()));
            text('border', 0, -250+randomizer());
        }
        pop();
    }

}

function face() { // clock face
    push();
    textAlign(CENTER, BOTTOM);
    var diff = dist(width/2, height/2, mouseX, mouseY);
    fill(color(constrain(200-diff, 0, 200)));
    for (var thick = 0; thick < 25; thick++){
        for (var i = 0; i < 60; i++) {
            push();
            rotate(radians(6*i));
            textSize(9);
            text('face', 0, -10*(thick+randomizer()));
            pop();
        }
    }
    pop();
}

function minHand() { // minute hand
    push();
    rotate(radians(6*minute()+randomizer()));
    textSize(9);
    textStyle(ITALIC);
    textStyle(BOLD);
    textAlign(LEFT, CENTER);
    for (var num = 0; num < 7; num++) { // length of hand
        push();
        rotate(radians(-90+randomizer()));
        if (num < 6) {
            text('minute', 30*num+20, 0);
        } else {
            text('minute '+ minute(), 30*num+20, 0);
        }
        pop();
    }
    pop();
}

function hrHand() { // hour hand
    var hr;
    if (hour() > 12) { // convert 24 hr to 12 hr
        hr = hour()-12;
    } else {
        hr = hour();
    }
    push();
    rotate(radians(30*hr+randomizer()));
    textSize(9);
    textStyle(ITALIC);
    textStyle(BOLD);
    textAlign(LEFT, CENTER);
    for (var num = 0; num < 7; num++) { // length of hand
        push();
        rotate(radians(-90+randomizer()));
        if (num < 6) {
            text('hour', 20*num+20, 0);
        } else {
            text('hour '+hr, 20*num+20, 0);
        }
        pop();
    }
    pop();
}

function logo() { // how to operate clock
    push();
    strokeWeight(2);
    var diff = dist(width/2, height/2, mouseX, mouseY);
    ellipse(mouseX, mouseY, 5*diff/10, 2.5*diff/10);
    textStyle(ITALIC);
    textAlign(CENTER, CENTER);
    textSize(8*diff/100);
    text('clock', mouseX, mouseY);
    textSize(3*diff/100);
    textAlign(CENTER, CENTER);
    text('\n(move to stablize)', mouseX, mouseY+7);
    pop();
}

function draw() {
    background(255);
    push();
    translate(width/2+randomizer(), height/2+randomizer()); 
    border();
    face();
    minHand();
    hrHand();
    pop();
    logo();
}