Siwei Xie – Project 06 – Abstract Clock

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-06-Abstract Clock

var CanvasW = 480;
var CanvasH = 480;
var tx = [];
var ty = [];

function setup() {
    createCanvas(CanvasW, CanvasH);

    //randomize position of stars, IN "SETUP"!
    for (i = 0; i < 60; i ++) {
        tx[i] = random(60, 400);
        ty[i] = random(100, 460);
    }
}

function draw(){
	background("black");

    //fetch time at "draw", instead of at the very beginning
	var S = second();
	var M = minute();
	var H = hour();

    //compute diameter of moon, position of rocket, size of stars 
    var mappedH = map(H, 0, 23, 0, CanvasW);
    var mappedM = map(M, 0, 59, 0, CanvasH/2.5); 
    var mappedS = map(S, 0, 59, 0, CanvasH); 

    //moon enlarges according to hours
    noStroke();
    fill("orange");
    circle(0, 0, mappedH);

    //rocket lands diagonally according to minutes
    stroke("white");
    fill(0, 26, 185);
    ellipse(mappedM+150, mappedM+200, 70, 100);
    ellipse(mappedM+120, mappedM+260, 20, 30);
    ellipse(mappedM+150, mappedM+260, 20, 30);
    ellipse(mappedM+180, mappedM+260, 20, 30);

    //create new stars according to seconds
    noStroke();
    circle(mappedS);
    for (i = 0; i < S; i ++) {
        fill("white");
        ellipse(tx[i], ty[i], 5, 5);
    }

//     write time at upper right corner
//     noStroke();
//     fill("white");
//     text("Hour: "   + H, 350, 22);
//     text("Minute: " + M, 350, 42);
//     text("Second: " + S, 350, 62);

}

I painted the night sky. As hours proceed, moon enlarges; as minutes proceed, rockets lands to ground diagonally; as seconds proceed, more stars appear in sky. The elements interact with each other organically, and follow the time schedule.

The process of creating was romantic and technical for me. I learned about fetching time and incorporating it into my animations. Compared to other projects, I spent more time on the creative and aesthetic sides of the work. Since it gives us more freedom on the form of output, I decided to draw without limitations first. Then after all elements were drawn, I figured out a way to connect the story – a moon and starry night with a rocket landing to grounds.