Category: Section A

sketch

//Min Young Jeong
//mjeong1@andrew.cmu.edu
//Project-06
//section A

function setup() {
    createCanvas(500,500);//create canvas 500X500 
}

function draw() {
    background(51,51,51);

    var h = hour(); 
    var m = minute(); 
    var s = second(); 
    //setting up variables for the time
    var mappedh= map(h,0,24,0,4);
    //divide 24 hours into 4 so that later I can create 4 rectangles that represents hours 
    //each rectangle will represent 6 hours

    stroke(203,203,203);
    strokeWeight(5);
    fill(33,33,33);
    quad(20,330,480,330,460,490,40,490);
    stroke(0);
    //initial back ground which is the machine 

    for(var i = 0; i<mappedh; i++){
        fill(255,100,100);
        noStroke();
        rect(i*70+35,370,60,60,20);
        fill(0);
        noStroke();
        textSize(20);
        text("25%",i * 70+45,405);
    }
    //hour each pink rectancle represents 6 hours so that 4 rectangles as totall will have 100% which is 24 hours

    if(m%2 ==0){
        fill(255,50,50);
        rect(350,370,80,80,15);
    }
    else{
        fill(7,196,7);
        rect(350,370,80,80,15);
    }
    //min 
    //spin button will change the color, green to red, red to green. 
    //color change happens every minute
    fill(0);
    strokeWeight(2);
    textSize(25);
    text("SPIN",360,415);
    noStroke();
    fill(162,162,162);
    rect(0,0,500,350);
    fill(68,62,64);
    quad(10,10,490,10,470,30,30,30);
    fill(102,102,102);
    quad(10,10,30,30,30,320,10,340);
    fill(221,221,221);
    quad(10,340,30,320,470,320,490,340);
    fill(124,122,116);
    quad(490,340,470,320,470,30,490,10);
    fill(0);
    rect(30,30,440,290);
    //background of slot machine
    //grey picture frame

    for(var i = 0; i<3; i++){
        fill(255);
        stroke(180);
        strokeWeight(3);
        rect(i*150+35,50,130,200);
        //three white background for three screens
        //use for loop create three rectangles using on rect command
        if(m<20){
            fill(255,50,50);
            stroke(0);
            textSize(180);
            text("7",150*(i-2)+50,210);
            fill(200);
            rect(350,100,100,100);
            rect(200,100,100,100);
        }
        //if we have min 0 to 19(for example 06:15am or pm), then we have one 7 and two rectangles
        //on the screen
        if (m>=20 & m<40){
            fill(255,50,50);
            stroke(0);
            textSize(180);
            text("7",150*(i-1)+50,210);
            fill(200);
            rect(350,100,100,100);
        //if the minute is 20 to 39, then it has two 7s and one rectangle 

        }
        if (m>=40 & m<60){
            fill(255,50,50);
            stroke(0);
            textSize(180);
            text("7",150*i+50,210);
        }
        //if the minute is 40 to 59, then we have three 7s

        if (m<60 & m>50){
            fill(255,50,50);
            stroke(0);
            textSize(180);
            text("7",150*i+50+random(1,5),210);
        }
        //from 50 min to 60 min, 7s are shaking
    }

    for(var i = 0; i<s; i++){
        fill(255,50,50);
        stroke(255);
        strokeWeight(2);
        rect(i*7+35,290,7,20);
    }
    //number of red rectanlges that represent the secs

    if(m==0){
        textSize(50);
        text("JACKPOT",50,480);
    }
    //each o'clock will have jackpot, ex)3 o'clock, 4 o'clock

}

For this assignment I created slot machine that represents abstract clock. Every second, the number of red rectangles under the slot machine screes will increase. Every other minute, the color of button will change its color. And every 20 min you get “7” on your screen which increases its number at 20 min, 40min, and 60min. As the number of the “7” will increase and when it reaches three “7”s, then you will get “jackpot”

project6

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Project-06

//defining arrays for X and Y of gold coins
var A = [196,210,227,141,156,168,183,245,260,204,190,177,222,239, 163, 150, 250, 199, 186, 213, 231, 172, 243, 159, 195, 209, 229, 182, 239, 168, 204, 220, 190, 176, 233, 205, 221, 191, 177, 235,195, 211, 181, 224,199, 213, 184, 226, 210, 198, 184, 202, 190, 217, 186, 199, 213, 191, 206, 200]

var B = [327,327,327,327,327,327,327,327,327,324,324,324,324,324,324,324,324, 319,319,319,319,319,319,319, 314, 314,314,314,314,314, 310,310,310,310,310, 305,305,305,305,305, 303,303,303,303, 298,298,298,298, 294,294,294, 290,290,290, 285,285,285, 280,280, 275];

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

function draw() {

    background(255);
    
    //putting time functions in variables
    var S = second();
    var M = minute();
    var H = hour();

    //values to shake increase as seconds get higher as it nears one minute
    var mShake = map(S, 0, 60, 0, 1.5);
    var shake = random(-mShake, mShake)

    //map for cloak to expand according to minute value
    expandX = map(M, 0, 60, 0, 100 )
    expandY = map(M, 0, 60, 0, 30)

    //map for cloak to change brightness/darkness according to hour of the day
    if (H >= 0 & H <= 12){
    hourMap = map(H, 0, 12, 0, 255)
    }

    if (H >= 12 && H <= 24){
    hourMap = map(H, 12, 24, 255, 0)
    }

    //cloak
    beginShape();
    fill(hourMap);
    noStroke();
    curveVertex(91-expandX, 400);
    curveVertex(91-expandX, 400);
    curveVertex(111-expandX*0.8, 217);
    curveVertex(129-expandX*0.65, 96);
    curveVertex(178-expandX*0.4, 57-expandY);
    curveVertex(218+expandX*0.4, 59-expandY);
    curveVertex(270+expandX*0.65, 96);
    curveVertex(286+expandX*0.8, 217);
    curveVertex(309+expandX, 400);
    curveVertex(309+expandX, 400);
    endShape();

    //face
    push();
    beginShape();
    fill(221, 231, 229)
    noStroke();
    curveVertex(136, 112);
    curveVertex(136, 112);
    curveVertex(157, 83);
    curveVertex(190, 69);
    curveVertex(239, 85);
    curveVertex(259, 131);
    curveVertex(241, 254);
    curveVertex(182, 275);
    curveVertex(146, 237);
    curveVertex(131, 167);
    curveVertex(136, 112);
    curveVertex(136, 112);
    endShape();
    pop();

    //inner face
    beginShape();
    fill(255)
    noStroke();
    curveVertex(196, 80);
    curveVertex(196, 80);
    curveVertex(228, 92);
    curveVertex(249, 139);
    curveVertex(244, 203);
    curveVertex(235, 240);
    curveVertex(226, 256);
    curveVertex(202, 272);
    curveVertex(174, 270);
    curveVertex(150, 240);
    curveVertex(139, 205);
    curveVertex(135, 161);
    curveVertex(139, 120);
    curveVertex(161, 85);
    curveVertex(196, 80);
    curveVertex(196, 80);
    endShape();

    //right eyebrow
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(160, 105);
    curveVertex(160, 105);
    curveVertex(165, 105)
    curveVertex(168, 118);
    curveVertex(170, 129)
    curveVertex(168, 137);
    curveVertex(161, 140);
    curveVertex(153, 138);
    curveVertex(150, 133)
    curveVertex(151, 125);
    curveVertex(154, 117);
    curveVertex(160, 105);
    curveVertex(160, 105);
    endShape();


    //left eyebrow
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(230, 105);
    curveVertex(230, 105);
    curveVertex(237, 112)
    curveVertex(245, 131);
    curveVertex(242, 139)
    curveVertex(236, 141);
    curveVertex(230, 140);
    curveVertex(225, 136);
    curveVertex(225, 123)
    curveVertex(226, 113);
    curveVertex(230, 105);
    curveVertex(230, 105);
    endShape();

    //left eye
    fill(0);
    beginShape();
    push();
    noStroke();
    frameRate(1);
    curveVertex(146+shake, 152);
    curveVertex(146+shake, 152);
    curveVertex(152+shake, 149);
    curveVertex(163+shake, 147);
    curveVertex(172+shake, 151);
    curveVertex(175+shake, 157);
    curveVertex(170+shake, 162);
    curveVertex(159+shake, 164);
    curveVertex(145+shake, 159);
    curveVertex(146+shake, 152);
    curveVertex(146+shake, 152);
    pop();
    endShape();

    //right eye

    beginShape();
    fill(0);
    frameRate(1);
    noStroke();
    curveVertex(233+shake, 147);
    curveVertex(233, 147+shake);
    curveVertex(249+shake, 149);
    curveVertex(254, 159+shake);
    curveVertex(244+shake, 164);
    curveVertex(232, 164+shake);
    curveVertex(224+shake, 159);
    curveVertex(222, 154+shake);
    curveVertex(225+shake, 150);
    curveVertex(233, 147+shake);
    curveVertex(233+shake, 147);
    endShape();

    //left under eye
    beginShape();
    fill(131);
    noStroke();
    curveVertex(161, 170);
    curveVertex(161, 170);
    curveVertex(171, 168);
    curveVertex(172, 168);
    curveVertex(164, 175);
    curveVertex(149, 172);
    curveVertex(148, 170);
    curveVertex(161, 170);
    curveVertex(161, 170);
    endShape();

    //right under eye
    beginShape();
    fill(131);
    noStroke();
    curveVertex(235, 169);
    curveVertex(235, 169);
    curveVertex(246, 169);
    curveVertex(247, 171);
    curveVertex(235, 174);
    curveVertex(227, 173);
    curveVertex(223, 170);
    curveVertex(225, 168);
    curveVertex(235, 169);
    curveVertex(235, 169);
    endShape();

    //left cheek
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(151, 188);
    curveVertex(151, 188);
    curveVertex(153, 182)
    curveVertex(157, 180);
    curveVertex(169, 185)
    curveVertex(170, 210);
    curveVertex(170, 218);
    curveVertex(168, 226);
    curveVertex(165, 226);
    curveVertex(158, 214);
    curveVertex(151, 188);
    curveVertex(151, 188);

    endShape();

    //right cheek
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(242, 190);
    curveVertex(242, 190);
    curveVertex(239, 207)
    curveVertex(231, 226);
    curveVertex(226, 224)
    curveVertex(224, 190);
    curveVertex(230, 180);
    curveVertex(238, 181);
    curveVertex(242, 190);
    curveVertex(242, 190);
    endShape();

    //chin mark

    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(198, 256);
    curveVertex(198, 256);
    curveVertex(208, 255)
    curveVertex(210, 256);
    curveVertex(199, 263)
    curveVertex(189, 261);
    curveVertex(185, 257);
    curveVertex(186, 255);
    curveVertex(198, 256);
    curveVertex(198, 256);
    endShape();

    //heart comes up near end of minute
    if (S>57){
        push();
        heart(0,0);
        heart(77, 0);
        pop();
    }

    //mouth eating
    var mouthExpandx= 0;
    var mouthExpandy= 0;

    //mouth gets wider at end of minute
    if (55 < S & S < 60){
    mouthExpandx = map(S, 50, 57, 0, 10);
    mouthExpandy = map(S, 50, 57, 0, 50);
    }
    
    //mouth shuts at end of minute
    if (S > 59){
    mouthExpandx = map(S, 58, 60, 10, 0);
    mouthExpandy = map(S, 58, 60, 50, 0);
    }

    //mouth
    fill(0);
    beginShape();
    frameRate(10);
    noStroke();
    curveVertex(197+shake, 237+shake);
    curveVertex(197, 237+shake);
    curveVertex(211+shake, 236)
    curveVertex(218, 239+shake);
    curveVertex(220+shake, 244+shake)
    curveVertex(214+mouthExpandx, 249+shake+mouthExpandy);
    curveVertex(190+shake, 250+mouthExpandy);
    curveVertex(179+shake-mouthExpandx, 248+shake+mouthExpandy);
    curveVertex(175, 244+shake);
    curveVertex(177+shake, 239+shake);
    curveVertex(185, 236+shake);    
    curveVertex(197+shake, 237+shake);
    curveVertex(197, 237+shake);
    endShape();


    //bowl top
    fill(120, 18, 20)
    arc(198, 329, 186, 54, 0, PI)

    //bowl bottom
    fill(239, 59, 57)
    ellipse(198, 329, 184, 5)


    //calling array values for gold coins every second plus jitter
    for (var i = 0; i < S; i++){
        frameRate(20);
        var shakeX = A[i] + random(-0.5,0.5)
        var shakeY = B[i] + random(-0.5 ,0.5)
        coin(shakeX, shakeY);
    }

}

//gold coin
function coin(x, y) {
    push();
    translate(x, y);
    fill(226, 156, 37);
    ellipse(0, 0, 22, 8);
    fill(252, 207, 117);
    ellipse(0, 0, 19, 5);
    fill(255, 232, 192);
    ellipse(0, -1, 10, 2);
    pop();
}

 //heart
 function heart(x,y) {
    beginShape();
    noStroke();
    translate(x,y);
    fill(255, 0 ,0);
    curveVertex(160, 161)
    curveVertex(160, 161)
    curveVertex(157, 157)
    curveVertex(155, 152)
    curveVertex(158, 151)
    curveVertex(159, 154)
    curveVertex(160, 152)
    curveVertex(162, 150)
    curveVertex(165, 151)
    curveVertex(163, 157)
    curveVertex(160, 161)
    curveVertex(160, 161)
    endShape();
}

I wanted to create a clock based on a toy that is based on a character from a Ghibli movie. The seconds are the most apparent from the coins, the size of the cloak follows the minute, and the color of the cloak is based on the hour. I wasn’t too concerned with being able to tell time. Overall this was satisfying to make even though there are issues with the smoothness of animation.

sketch

var xS = []; //for seconds
var yS = [];
var xM = []; //for minutes
var yM = [];
var xL = []; //for hours
var yL = [];
var dxS = []; // velocity in x direction 
var dyS = []; // velocity in y direction
var dxM = []; 
var dyM = []; 
var colS = []; //color array
var colM = [];
var colL = [];
var smR = 15;
var mdR = 25;
var lgR = 35;

function setup() {
    createCanvas(480, 480);  
    
	for (var i = 1; i < 61; i++) { // for loop initializing 60 seconds
        xS[i] = random(width/3+smR,width/3*2-smR);
        yS[i] = random(height/3+smR,width/3*2-smR);
        dxS[i] = random(-5, 5);
        dyS[i] = random(-5, 5);
        var colR = random(102,199);
        var colScale = (colR-137)/(199-137);
        colS[i] = color(colR, 85+(173-85)*colScale, 96+(190-96)*colScale);
    }
    
    for (var i = 1; i < 61; i++) { // for loop initializing 60 minutes
        xM[i] = random(mdR,width-mdR);
        yM[i] = random(mdR,height-mdR);
        while (dist(xM[i],yM[i],width/2,height/2) <= width/4+mdR/2) {
        	xM[i] = random(width);
        	yM[i] = random(height);
        }
        dxM[i] = random(-5, 5);
        dyM[i] = random(-5, 5);
        var colR = random(99,179);
        var colScale = (colR-99)/(179-99);
        colM[i] = color(colR, 59+(143-59)*colScale, 61+(145-61)*colScale);
    }

    for (var i = 1; i < 25; i++) { // for loop initializing 24 hrs
        xL[i] = random(lgR,width-lgR);
        yL[i] = random(lgR,height-lgR);
        while (dist(xL[i],yL[i],width/2,height/2) <= width/4+lgR/2) {
        	xL[i] = random(width);
        	yL[i] = random(height);
        }
        dxM[i] = random(-3, 3);
        dyM[i] = random(-3, 3);
        var colR = random(151,232);
        var colScale = (colR-151)/(232-151);
        colL[i] = color(colR, 120+(215-120)*colScale, 157+(241-180)*colScale);
    }
}

function draw() {
	var H = hour();
	var M = minute();
	var S = second();
	var cirC = [];
	
	background(241,227,228);
	noStroke();
	fill(235,219,204);
	ellipse(width/2, height/2,width/2);
	
    frameRate(4);
	for (var i = 1; i < S+1; i++) {  //for each ellipse - seconds
        fill(colS[i]);
        ellipse(xS[i], yS[i], smR);
        xS[i] += dxS[i];
        yS[i] += dyS[i];
		if (dist(xS[i],yS[i],width/2,height/2)>=width/4-smR/2) {
        	dxS[i] = - dxS[i];
        	dyS[i] = - dyS[i];        	
        }
	}
	for (var j = 1; j < M+1; j++) { //for each ellipse - minutes
		fill(colM[j]);
		ellipse(xM[j], yM[j], mdR);
		xM[j] += dxM[j];
		yM[j] += dyM[j];
		if (dist(xM[j],yM[j],width/2,height/2) <= width/4+mdR/2) {
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
        } else if (xM[j]+mdR>width || xM[j]-mdR<0){
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
    	} else if (yM[j]+mdR>width || yM[j]-mdR<0){
    		dxM[j] = - dxM[j];
    		dyM[j] = - dyM[j];
    	}
        
	}
	for (var j = 1; j < H+1; j++) { //for each ellipse - hours
		fill(colL[j]);
		ellipse(xL[j], yL[j], lgR);
		xL[j] += dxM[j];
		yL[j] += dyM[j];
		if (dist(xL[j],yL[j],width/2,height/2) <= width/4+lgR/2) {
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
        } else if (xL[j]+lgR>width || xL[j]-lgR<0){
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
    	} else if (yL[j]+lgR>width || yL[j]-lgR<0){
    		dxM[j] = - dxM[j];
    		dyM[j] = - dyM[j];
    	}
        
	}
	
	

}

For my project, I used the amount of circles to represent the time. Then central circle represents the seconds that are randomly distributed within the circle. The circles outside of the central circle represents the minutes. The other larger moving circles represent the hours. They have different moving velocity to show the difference among them.

project06-3.js

//shariwa sharada
//ssharada@andrew.cmu.edu
//project 06
//section a 


//creating global var to be used in varyingly in different functions
var diameter;
//array of points for x point of second ellipses - 60 variables for 60 seconds 
var placeX = [300,305,310,320,325,330,340,345,350,360,365,370,380,385,390,400,405,410,420,425,430,440,445,450,460,465,470,480,485,490,500,505,510,520,525,530,540,545,550,560,565,570,580,585,590,600,605,610,620,625,630,640,645,650,660,665,670,680,690,700]
//array of points for y point of second ellipses - 60 variables for 60 seconds 
var placeY = [300,305,310,320,325,330,340,345,350,360,365,370,380,385,390,400,405,410,420,425,430,440,445,450,460,465,470,480,485,490,500,505,510,520,525,530,540,545,550,560,565,570,580,585,590,600,605,610,620,625,630,640,645,650,660,665,670,680,690,700]
//array of points for x point of minute ellipses - 60 variables for 60 minutes 
var placeXMin = [50,60,75,85,100,110,125,135,150,160,175,185,200,210,225,235,250,260,275,285,300,310,325,335,350,360,375,385,400,410,425,435,450,460,475,485,500,510,525,550,575,600,625,650,675,700,725,750,775,800,825,850,875,900,925,950]
//array of points for y point of hour lines - 24 variables for 24 hours
var placeYHr = [50,75,121,150,176,200,253,300,350,375,450,473,500,550,600,675,699,737,775,803,825,869,900,925]


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

function draw(){
	background(0);

	var hr = hour(); //hour variable 
	var mn = minute(); //minute variable 
	var sc = second();//second variable 

	//creating the ellipses for the seconds
	//this draws the same number of ellipses at the given second 
	//the ellipses position change with each second  
	push();
	for (var i = 0; i<sc; i++){ //for loop relative to the number of seconds 
		var diameter = random(20,180);
		frameRate(1);
		fill(random(214,254), random(92,132), random(131,171), random(0,70)); //adding transparencies to the fill 
		stroke(random(214,254), random(92,132), random(131,171), random(120,225));
		strokeWeight(random(0.5, 2.3));
		ellipseX = random(placeX); //making the index value chosen from the array random 
		ellipseY = random(placeY); //making the index value chosen from the array random 
		ellipse(ellipseX/2, ellipseY/2, diameter/2, diameter/2); //drawing the ellipses 
	}
	pop();

	//making the minutes ellipses 
	//the position of the ellipses in the y axis does not change 
	//this draws the same number of ellipses at the given minute.
	push();
	for (var j = 0; j<mn; j++){ //for loop relative to the number of minutes 
		stroke(random(215,255), random(174,214), random(5,45), random(70,100));//randomising stroke colours
		fill(255, 194, 25, 70);
		strokeWeight(random(0.1, 1.2));
		drawMin(placeXMin[j]/2); //making it relaitive to the x value of the ellipse and the for loop  
		//calling it from another functions that defines what to draw
	}
	pop();

	//making the hour lines/blobs
	//the position of these blobs does not change in the x direction 
	//this draws the same number of lines as the number of hours in a range of 1-24
	push();
	for (var k = 0; k<hr; k++){ //making the for loop relative to the hour 
		stroke(random(0,40), random(137,177), random(155,195));
		fill(20, 157, 175, 10);
		strokeWeight(random(5, 10));//making the lines blobs 
		drawHr(placeYHr[k]/2);//making it relative to hour variable, the for loop, y position array
	}
	pop();
}

//giving the parameters for the ellipses drawn for the minutes representation 
function drawMin(x){
	var diameter = random(10,50);
	ellipse(x, width/2, diameter/2, diameter/2);//only calling fro the x position to be changed. 
}

//giving the parameters for the lines drawn for the hours representation 
function drawHr(y){
	var diameter = random(30,70);
	line(height/2, y, height/2, y+5); //only calling the y value to be changed 
}

For this project I was inspired by the gear system that watches have. The way the ellipses interact represent the complexity of a traditional gear system.

Everything is relative to the second values which is why everything moves as the second changes but the objects are only added as the individual variable changes. This is similar to the idea that in a gear system, if even one part if off by the slightest bit, everything is affected.

The pink ellipses depict the seconds – the number of these ellipses show the number of seconds that have passed, and every second that goes by the placement of these ellipses randomises while adding another ellipse i.e.: a second.

The yellow ellipses represent the minutes with the number of minutes increasing from left to right as the number of minutes increase.

The central blobs represent the hours in a 24 hours clock with the number increasing from top to bottom as the number of hours increase.

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-06
*/

var sealevel = 250;
var boatlevel = 230;
var rodX = 230;
var rodY = boatlevel+35;
var manX = 170;
var manY = 200;

 //-------------------------
function setup() {
    createCanvas(360, 360);
}
 
 //-------------------------
function draw() {
    background(209,236,245);
    noStroke();

//fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    var mappedS = map(S, 0, 59, 0, rodX);

//create text elements for hours and minute on top
    fill(0);
    textStyle(BOLD);
    text("x " + H, 60,40);
    text("x " + M, 310,40);

//create fish icon
    fill(253,189,3);
    noStroke();
    arc(290, 35, 22, 15, 0, TWO_PI-QUARTER_PI, PIE);
    triangle(275, 45, 270, 35, 290, 35);

//create fish bucket icon
    fill(120);
    rect(20, 20, 30, 30, 5);
    noFill();
    stroke(120);
    arc(35, 25, 30, 20, PI, TWO_PI);

//create sea
    fill(26,91,147);
    rect(0, sealevel, width, height);

//create fishing rod
    noFill();
    stroke(120);
    arc(rodX, rodY, 80, 210, PI+QUARTER_PI, TWO_PI);

//create fisherman
    fill(29,70,149);
    noStroke();
    ellipse(manX, manY, 15, 15);
    arc(manX+10, manY+18, 40, 40, 0, PI+QUARTER_PI, PIE); //add additional spacing between head and body

//create fish bucket
    fill(120);
    rect(manX-80, manY+15, 30, 30, 5);
    noFill();
    stroke(120);
    arc(manX-65, manY+20, 30, 20, PI, TWO_PI);

//create boat
    noStroke();
    fill(235,121,85);
    arc(width/2.5, boatlevel, width/2, height/5, 0, PI);

//create fish
    fill(253,189,3);
    noStroke();
    //map fish movement to seconds of clock
    arc(mappedS+35, rodY, 22, 15, 0, TWO_PI-QUARTER_PI, PIE);
    triangle(mappedS+15, rodY, mappedS+35, rodY, mappedS+20, rodY+10); 

}

When thinking about how to best represent the passing of time, I considered different active and passive activities from eating, exercising, etc. I decided to represent the passage of time in fishing — letting the fish bucket represent hours, the number of fishes caught as minutes, and the movement of fish as seconds.

I was inspired by both Wassily Kandinsky’s abstract art and the MOMA’s perpetual calendar. I put the two of these together to create a more minimal version of an abstract clock.

The triangle spins using milliseconds, the red arc grows using seconds, the black circle moves using minutes, and the gray circle moves along the black bar using hours.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 06 - Clock

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

function draw() {
    background(258, 252, 234);

    fill(250, 244, 219);
    noStroke();
    ellipse(50, 50, 750, 750); // background left circle

    // TIME
    /* Every millisecond, the background triangle will spin. 
    Every second, the red circle will be filled in more.
    Every minute, the black dot in the red circle will move.
    Every hour, the gray circle on the black bar will move. */

    milliseconds(); // background triangle
    seconds(); // red circle
    hours(); // black bar
    minutes(); // black circle inside red circle

    strokeWeight(2);
    stroke(190, 50, 50);
    line(350, 285, height, 285); // line indicating 0 seconds

    noFill();
    stroke(60);
    line(235, 64, 301, 50); // decoration line 1
    line(242, 84, 304, 62); // decoration line 2
    ellipse(width-30, 0, 400, 400); // decoration circle 1
    ellipse(width+10, 10, 400, 400); // decoration circle 2 

    push();
        noStroke();
        fill(0, 53, 176, 80);
        ellipse(370, 190, 100, 100); // blue circle
    pop();
}

// HOURS
function hours() {
    push();
    noStroke();
    fill(100);
    rect(25, 340, 265, 13); // draw bar

    var h = hour() % 12; // 12 hr time instead of 24 hr time
    if (h == 0){
        h = 12;
    }

    var hx = map(h, 0, 11, 32, 282); // map hours to length of bar
    fill(200);
    ellipse(hx, 332, 16, 16); // draw circle
    pop();
    print(hour());
}

// MINUTES
function minutes(){
    var m = minute();
    var mx = map(m, 0, 59, 0, 360);

    push();
        fill(0);
        noStroke();
        translate(270, 285);
        rotate(mx);
        ellipse(100, 0, 16, 16);
    pop();
}

// SECONDS
function seconds(){
    var s = second();
    var sx = map(s, 0, 60, 0, 360); // map minutes to circle

    if (s==60){
        s = 0;
    }

    // red circle
    push();
        noFill();
        strokeWeight(13);
        stroke(223, 97, 97);
        ellipse(270, 285, 230, 230); // draw circle
        
        translate(270, 285);
        strokeWeight(13);
        stroke(190, 50, 50);
        strokeCap(SQUARE);
        arc(0, 0, 230, 230, 0, sx); // arc grows by the second
    pop();
}

// MILLISECONDS
function milliseconds(){
    var prevSec = s;
    var millisRollover = 0;
    var s = second();

    if (s != s) {
        millisRollover = millis();
    }

    var mils = floor(millis() - millisRollover);
    var milsToSeconds = s + (mils/1000.0);
    var milsRotate = map(milsToSeconds, 0, 60, 0, 360);    

    // triangle
    push();
        noStroke();
        translate(width/2-20, height/2);
        rotate(milsRotate);
        fill(239, 234, 203);
        triangle(0, -195, -167, 97, 167, 98); 
    pop();
}