sketch

// Han Yu
// hyu1@andrew.cmu.edu
// Section D
// Project 06

var bubbley = 480;
var noiseParam = 0;
var otherbubbley = 510;


function setup() {
    createCanvas(480, 480);
    noStroke();
    frameRate(10);
}



function draw() {
	
	background(41,221,245);
	// fectch time
	var H=hour();
	var M=minute();
	var S=second();
	// compute location of fish
	var hourfish=map(H, 0, 23, 35, width-51);
	var minutefish=map(M, 0, 59, 50, width-71);
	var secondfish=map(S, 0, 59, 40, width-41);

	//bubbles
	//sets sidemove to noise value
	var sideMove = noise(noiseParam);
	//map time sidemove between -20 and 20
	sideMove = map(sideMove, 0, 1, -20, 20);
	//color of bubble
	fill(51,231,255);
	//draws bubbles in diff sizes y and x
	ellipse(width/2+sideMove,bubbley,50,50);
	ellipse(width/2+sideMove+50,bubbley-30,30,30);
	ellipse(width/3+sideMove/2, otherbubbley, 40,40);
	//make it go up
	bubbley -= 10;
	otherbubbley -= 5;
	//resets to bottome when at top
	if (bubbley < -25) {
		bubbley = 480			
	}
	if (otherbubbley < -20) {
		otherbubbley = 510
	}
	//increase parameter by 0.3
	noiseParam += 0.3
	
	

	// hour fish
	fill(252,237,60);
	ellipse(hourfish, 100, 70, 35);
	triangle(hourfish+30, 100, hourfish+50, 
			 80, hourfish+50, 120);
	// minute fish
	fill(246,214,48);
	ellipse(minutefish, 200, 100, 50);
	triangle(minutefish+45, 200, minutefish+65, 
			 180, minutefish+65, 220);
	// second fish
	fill(245,184,44);
	ellipse(secondfish, 340, 80, 50);
	triangle(secondfish-35, 340, secondfish-55, 
			 320, secondfish-55, 360);

	// sand
	fill(255,249,207);
	rect(0, 410, width, height);


}

I started out this project hoping to represent time more interactively, something more than just a clock. I have always been fond of the underwater so I chose it as the theme of my abstract clock. My initial design is attached below. I changed around a bit because I later found out the constant shit of colors is not a good representation of time. Overall I enjoyed doing this project, it helped it lot with learning time application and randomness.

Project-05

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-06-Abstract-Clock

var prevSec;
var millisRolloverTime;
var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var y = [358, 377, 383, 400, 422, 413, 422, 400, 383, 377];

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
    frameRate(10);
}

function draw() {
    background(0); 
    fill(255);
    noStroke(0);
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
   
    var hourW = map(H, 0, 23, 0, width);
    var minuteW = map(M, 0, 59, 0, width);
    
    var secondsWithFraction = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWChunky = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWSmooth = map(secondsWithFraction, 0, 60, 0, width);

    // Hour yellow ellipse
    noStroke();
    fill(255, 237, 101, 255);
    ellipse(width / 4, height / 4, hourW, hourW);

    // Minute green ellipse
    fill(92, 220, 82, 230);
    ellipse(width - 30, height / 3 + 40, minuteW, minuteW);

    // Second blue ellipse
    fill(171, 213, 255, 200);
    ellipse(width / 2, height / 2, secondBarWChunky, secondBarWChunky);

    // Millisecond red ellipse
    fill(240, 32, 32, 200);
    ellipse(width - 50, height - 50, secondBarWSmooth, secondBarWSmooth);

    // Text of the current time
    fill(255);
    textFont("Futura");
    textSize(12);
    text("HOUR: " + H, 10, 22);
    text("MINUTE: " + M, width - 80, height / 3 + 40);
    text("SECOND: " + S, width / 2 - 30, height / 2 + 3);
    text("MILLISECOND: " + mils, width - 120, height - 50);


    // Big star 
    var nPoints = x.length;
    fill(255);
    
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var px = x[i] + random(-1, 1);
        var py = y[i] + random(-1, 1);
        vertex(px,py);
    }
    endShape(CLOSE);
    
    // Small star
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var px = x[i] + random(-1, 1);
        var py = y[i] + random(-1, 1);
        vertex(px,py);
    }
    scale(0.5, 0.5);
    endShape(CLOSE);
}

I tend to associate time with space, probably because they’re both used when describing dimensions. So when I thought of space, I thought of outer space— the sun, stars, moons, and various planets floating about in darkness. For this project, I tried to abstractly visualize time in an outer space setting, with each element of time (hour, min, sec, ms) represented with an element in outer space. My original idea was to animate a story of a comet approaching and causing an explosion, but it was difficult to time the movements that I pictured accordingly.

sketch

function setup() {
    createCanvas(450, 450);
    stroke(255, 215, 0);
    background(0);
    frameRate(1);
}

function draw() {
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    // HourRect
    var rectHH = height/24; //height of each 'hourfloor'
    var rectMH = rectHH/60; //height of each 'minutefloor'
    var rectW = [100, 140, 120, 130];
    for(var i = 0; i < H; i ++){
        fill(25, 25, 112); //add changefulness to different floors color
        var rectX = width/2 - 0.5 * rectW[i % 4]; //X coordinate of HourRect
        var rectY = height -(i + 1) * rectHH; //Y coordinate of HourRect
        rect(rectX, rectY, rectW[i % 4], rectHH);
    }

    //MinuteRect
    for(var j = 0; j < M; j ++){
        fill(255);
        var rectX = width/2 - 0.5 * rectW[j % 4]; //X coordinate of MinuteRect
        var rectY = height -(j + 1) * rectMH - H * rectHH; //Y coordinate of MinuteRect
        rect(rectX, rectY, rectW[j % 4], rectMH);
        //cover secondRect in every new minute
        push();
        fill(0);
        noStroke();
        rect(width/2 - 140/2, height - M * rectMH - H * rectHH - 17, 150, 17);
        pop();
    }

    //SecondRect
    for(var k = 0; k < S; k ++){
        fill(150);
        var heightRange = [5,14,3,8,17]; //to get random height
        var widthRange = [7,5,2,8,6]; //to get random width
        var gap = rectW[k % 4] / 60; // distribute second rectangles
        var rectX = width/2 - 130/2 + k * gap; //X coordinate of MinuteRect
        var rectY = height - M * rectMH - H * rectHH - heightRange[k % 5]; //Y coordinate of MinuteRect
        rect(rectX, rectY, widthRange[k % 5], heightRange[k % 5]);
    }
}

In the design I try to make the clock look like a building under construction. The ‘second rectangles’ and ‘minute rectangles’ are the parts being built and the ‘hour rectangles’ are floors that are already built.

Cookie Clock

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu 
// Project-06-Abstract Clock

// Global Variables
var chipX = 0; // x position of choco chip
var chipY = 0; // y positiom of choco chip
var chunkX = 0; // x position of choco chunk
var chunkY = 0; // y position of choco chunk

//--------------------------
function setup() {
    createCanvas(300, 300);
    //millisRolloverTime = 0;
    
    frameRate(1); // the chips change position every second so you can tell when a second goes by
}

//--------------------------
function draw() {
    background(183, 225, 255);
    
    // circular cookie shape
    strokeWeight(3);
    fill(206, 149, 75);
    ellipse(width / 2, height / 2, 250, 250);

    // bite out of cookie
    fill(183, 225, 255);
    noStroke();
    ellipse(width / 2 - 120, height / 2, 30, 35);
    ellipse(width / 2 - 115, height / 2 - 17, 30, 27);
    ellipse(width / 2 - 120, height / 2 - 30, 30, 35);

    // Crumbs at bite
    stroke(60, 46, 16);
    fill(206, 149, 75);
    ellipse(width / 2 - 135, height / 2 - 15, 12, 12);
    ellipse(width / 2 - 117, height / 2 - 5, 6, 6);
    ellipse(width / 2 - 120, height / 2 - 30, 9, 9);
    ellipse(width / 2 - 136, height / 2 + 35, 15, 15);
    ellipse(width / 2 - 125, height / 2 + 50, 6, 6);
    ellipse(width / 2 - 138, height / 2 + 65, 5, 5);
    ellipse(width / 2 - 140, height / 2 + 5, 7, 7);
    ellipse(width / 2 - 115, height / 2 - 65, 6, 6);
    ellipse(width / 2 - 128, height / 2 - 60, 9, 9);

    // top right corner crumbs
    ellipse(245, 26, 7, 7);
    ellipse(265, 37, 17, 17);
    ellipse(255, 55, 10, 10);

    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // number time text
    fill(255);
    text("   "   + H + "  : ", 5, 22);
    text("   " + M + "  : ", 35, 22);
    text("   " + S, 65, 22);

    // chocolate chips for the number of minutes
    for (var i = 0; i < M; i ++) {
        noStroke();
        var chipX = random(65, 240);
        var chipY = random(65, 240);
        fill(87, 64, 16);
        ellipse(chipX, chipY, 10, 10);
    }

    // chocolate chunks for the number of hours
    for (var j = 0; j < H; j ++) {
        fill(52, 39, 11);
        stroke(33, 25, 8);
        var chunkX = random(70, 220);
        var chunkY = random(70, 220);
        rect(chunkX, chunkY, 11, 22);
    }
    stroke(0);
}

I really enjoyed this project, it was fun to try to think of a way to convey time unconventionally. I finally came up with making a “cookie clock” after thinking about what I wanted to do and I am happy with how the clock turned out, looking very cartoonish and almost comical. It took me a bit to figure out how I wanted to represent each variable, hours, minutes and seconds and I eventually decided to, rather than physically represent seconds, have the seconds be represented by the pace of the movement of the chocolate chips and chunks. I tried briefly to make the cookie 3D but it ended up being too complicated for this project, but I would like to learn how to do that in the future.