Project 6 Liz Maday

final liz maday 6

var r;
var g;
var b;
var array = [];
var array2 = [];
var array3 = [];

function setup() {
	createCanvas(415, 210);
}
 function draw() {
 	background('lightblue');
 	strokeWeight(1.5);
 	var s = second();
 	var m = minute();
 	var h = hour();

    //lines
    for (var i = 0; i < 7; i += 1) {
    	var space = 60;
    	var x = (i * space) + 20;
    	var y = 0;
    	line(x, y + 50, x, (y + 65));
    	array = ['0s', '10s', '20s', '30s', '40s', '50s', '60s'];
    	array2 = ['0m', '10m', '20m', '30m', '40m', '50m', '60m'];
        textSize(15);
        fill('red');
        text(array[i], x - 10, y + 20);
        fill('green');
        text(array2[i], x - 10, y + 40);
    }
    
    //second boxes
    for (var i = 0; i < s; i += 1) {
    	var x = (i * (space/10)) + 15;
    	var y = 80;

    	fill('red');
    	rect(x, y, 5, 5);

    }

    //minute boxes
    for (var i = 0; i < m; i += 1) {
    	var x = (i * (space/10)) + 15;
    	var y = 90;
    	fill('green');
    	rect(x, y, 5, 15);
    }

    //hour boxes
    for (var i = 0; i < h; i += 1) {
    	var x = (i * 10) + 15;
    	var y = 110;
    	fill('yellow');
    	rect(x, y, 10, 25);

    }

    //hour lines
    for (var i = 0; i < 5; i += 1) {
    	var space = 40;
    	var x = (i * space * 1.5) + 20;
    	var y = 150;
    	line(x, y, x, (y + 15));
    	textSize(15);
    	array3 = ['0hrs', '6hrs', '12hrs', '18hrs', '24hrs'];
    	text(array3[i], x - 10, y + 40);
    	
    }    

 }

I liked how this project made me think about how time can be efficiently displayed in a more simplistic way than a typical clock. My concept for this project had to adjust a few times, as I was still figuring out how to manipulate the time functions.