Project 6: Abstract Clock

Download

// Yash Mittal
// Section D

var r1; // road 1
var r2; // road 2
var r3; // road 3
var secondscarwidth;
var minutecarwidth;
var hourcarwidth;

function setup() {
    createCanvas(480, 480);
    background (200);
}

function road1 (r1) {

    noStroke();

    fill (50);

    rect (0, (height / 2 - 30), width, (height / 2 - 160)); // road 1

    fill (250);

    rect (40, (height / 2 + 3), 50, 10);  // white stripe 1

    rect (150, (height / 2 + 3), 50, 10); // white stripe 2

    rect (260, (height / 2 + 3), 50, 10); // white stripe 3

    rect (370, (height / 2 + 3), 50, 10); // white stripe 4

    fill ("yellow");

    rect (0, (height / 2 - 30), width, 5); // yellow stripe 1

    rect (0, (height / 2 + 45), width, 5); // yellow stripe 2

}
    
function road2 (r2) {

    fill (50);

    rect (0, (height / 2 + 140), width, (height / 2 - 160)); // road 1

    fill (250);

    rect (40, (height / 2 + 173), 50, 10);  // white stripe 1

    rect (150, (height / 2 + 173), 50, 10); // white stripe 2

    rect (260, (height / 2 + 173), 50, 10); // white stripe 3

    rect (370, (height / 2 + 173), 50, 10); // white stripe 4

    fill ("yellow");

    rect (0, (height / 2 + 140), width, 5); // yellow stripe 1

    rect (0, (height / 2 + 215), width, 5); // yellow stripe 2

}

function road3 (r3) {

    fill (50);

    rect (0, (height / 2 - 200), width, (height / 2 - 160)); // road 1

    fill (250);

    rect (40, (height / 2 - 167), 50, 10);  // white stripe 1

    rect (150, (height / 2 - 167), 50, 10); // white stripe 2

    rect (260, (height / 2 - 167), 50, 10); // white stripe 3

    rect (370, (height / 2 - 167), 50, 10); // white stripe 4

    fill ("yellow");

    rect (0, (height / 2 - 200), width, 5); // yellow stripe 1

    rect (0, (height / 2 - 125), width, 5); // yellow stripe 2
}

function draw() { 

    background (10);

    var sc = second(); // seconds
    var mt = minute(); // minutes
    var hr = hour(); // hours

    road1 (r1);
    road2 (r2);
    road3 (r3);

    var secondscarwidth = map (sc, 0, 59, -5, width - 3); // variable for seconds
    var minutecarwidth = map (mt, 0, 59, -5, width - 3); // variable for minutes
    var hourcarwidth = map (hr, 0, 23, -5, width - 3); // variable for hours


    // car 1 - seconds car

    fill (150, 0, 0);
    rect (secondscarwidth, 60, 70, 40); // base of car
    fill (100, 0, 0);
    triangle (secondscarwidth + 35, 80, secondscarwidth + 70, 60, secondscarwidth + 70, 100); // window highlight
    fill (250, 0, 0);
    rect (secondscarwidth + 18, 70, 35, 20); // roof of car
    fill (255, 255, 0);
    rect (secondscarwidth + 70, 65, 2, 10); // headlight 1
    rect (secondscarwidth + 70, 85, 2, 10); // headlight 2
    fill (200, 0, 0);
    rect (secondscarwidth + 50, 57, 10, 3); // side mirror 1 
    rect (secondscarwidth + 50, 100, 10, 3); // side mirror 2
    

    // car 2 - minutes car

    fill (173, 216, 230);
    rect (minutecarwidth, 230, 70, 40); // base of car
    fill (30, 144, 255);
    triangle (minutecarwidth + 35, 250, minutecarwidth + 70, 230, minutecarwidth + 70, 270); // window highlight 
    fill (70, 130, 180);
    rect (minutecarwidth + 18, 240, 35, 20); // roof of car
    fill (255, 255, 0);
    rect (minutecarwidth + 70, 235, 2, 10); // headlight 1
    rect (minutecarwidth + 70, 255, 2, 10); // headlight 2 
    fill (135, 206, 255);
    rect (minutecarwidth + 50, 227, 10, 3); // side mirror 1
    rect (minutecarwidth + 50, 270, 10, 3); // side mirror 2

    // car 3 - hours car

    fill (0, 255, 127);
    rect (hourcarwidth, 400, 70, 40); // base of car
    fill (150, 205, 50); 
    triangle (hourcarwidth + 35, 420, hourcarwidth + 70, 400, hourcarwidth + 70, 440); // window highlight
    fill (0, 165, 0);
    rect (hourcarwidth + 18, 410, 35, 20); // roof of car
    fill (255, 255, 0);
    rect (hourcarwidth + 70, 405, 2, 10); // headlight 1
    rect (hourcarwidth + 70, 425, 2, 10); // headlight 2 
    fill (152, 251, 152);
    rect (hourcarwidth + 50, 397, 10, 3); // side mirror 1
    rect (hourcarwidth + 50, 440, 10, 3); // side mirror 2

    }

I wanted to keep my idea simple yet creative so I decided to make three roads with each car assigned to seconds, minutes, and hours respectively. The concept is very basic but I am happy with how the execution turned out because I was afraid that the car wouldn’t actually represent a car but I think it turned out well.