Project-06-Abstract-Clock – Page 7 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Taisei Manheim – 06 – Abstract Clock

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-06

var prevSec;
var millisRolloverTime;

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

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

    //Reckon the current millisecond, 
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    //sky color lightest at 3pm and darkest 3am with color changing between
    var skyColor = 22 * abs(15 - H);
    background(135 - skyColor, 206 - skyColor, 235 - skyColor);
    
    //Earth
    noStroke();
    fill(0,0,255);
    ellipse(width / 2, height, width / 4, width / 4);
    
    //North America
    fill(127,255,0);
    beginShape();
    vertex(width / 2 + 6, height - 51.5);
    vertex(width / 2 + 5, height - 52);
    vertex(width / 2 + 5, height - 52.7);
    vertex(width / 2 + 6, height - 54.5);
    vertex(width / 2 + 8, height - 56.3);
    vertex(width / 2 + 10, height - 57.5);
    vertex(width / 2 + 12, height - 58.5);
    vertex(width / 2 + 7, height - 59.5);
    vertex(width / 2, height - width / 8);
    vertex(width / 2 - 7, height - 59.5);
    vertex(width / 2 - 12, height - 58.5);
    vertex(width / 2 - 17, height - 57.5);
    vertex(width / 2 - 22, height - 55.5);
    vertex(width / 2 - 27, height - 53);
    vertex(width / 2 - 32, height - 50.5);
    vertex(width / 2 - 37, height - 47);
    vertex(width / 2 - 42, height - 42.5);
    vertex(width / 2 - 42 + 8, height - 42  + 4);
    vertex(width / 2 - 42 + 12, height - 42  + 9);
    vertex(width / 2 - 42 + 25, height - 42  + 35);
    vertex(width / 2 - 42 + 27, height - 42  + 38);
    vertex(width / 2 - 42 + 30, height - 42  + 40);
    vertex(width / 2 - 42 + 35, height);
    vertex(width / 2 + 5, height);
    vertex(width / 2 + 2, height - 2);
    vertex(width / 2 + 1, height - 3);
    vertex(width / 2 - 0.5, height - 5);
    vertex(width / 2 - 2, height - 8);
    vertex(width / 2 - 4, height - 12);
    vertex(width / 2 - 4, height - 14);
    vertex(width / 2 - 3, height - 15);
    vertex(width / 2 - 1, height - 16.5);
    vertex(width / 2 + 1, height - 17.3);
    vertex(width / 2 + 3, height - 18);
    vertex(width / 2 + 5, height - 18.5);
    vertex(width / 2 + 7, height - 18.5);
    vertex(width / 2 + 9, height - 18.2);
    vertex(width / 2 + 11, height - 17.7);
    vertex(width / 2 + 13, height - 17.2);
    vertex(width / 2 + 15, height - 16.5);
    vertex(width / 2 + 17, height - 15.7);
    vertex(width / 2 + 19, height - 15.4);
    vertex(width / 2 + 21, height - 15.4);
    vertex(width / 2 + 21.5, height - 15.7);
    vertex(width / 2 + 21.7, height - 16.3);
    vertex(width / 2 + 21.7, height - 17);
    vertex(width / 2 + 21.4, height - 17.5);
    vertex(width / 2 + 21, height - 18.5);
    vertex(width / 2 + 19.5, height - 19.8);
    vertex(width / 2 + 18.5, height - 20.5);
    vertex(width / 2 + 18, height - 21.5);
    vertex(width / 2 + 18, height - 23);
    vertex(width / 2 + 19.5, height - 28);
    vertex(width / 2 + 22.5, height - 33);
    vertex(width / 2 + 25.5, height - 36);
    vertex(width / 2 + 28.5, height - 40);
    vertex(width / 2 + 29.5, height - 42);
    vertex(width / 2 + 29.5, height - 44);
    vertex(width / 2 + 28.5, height - 45);
    vertex(width / 2 + 27, height - 46);
    endShape();

    //text
    fill(255);
    textSize(24);
    text(H + ":" + M + ":" + S, width / 2 - 30, 100);
    
    //remapping hour, second, minute values to use with cos and sin for circular motion
    var sec = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
    var min = map(minute() + map(second(), 0, 60, 0, 1), 0, 60, 0, TWO_PI) - HALF_PI;
    var hr = map(hour() + map(minute(), 0, 60, 0, 1), 0, 24, 0, TWO_PI * 2) - HALF_PI;

    //seconds
    //sattelite 1
    //wing 1
    fill(150);
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, (height + sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, height + sin(sec) * width / 2 * 0.75);
    //wing 2
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, (height + sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, height + sin(sec) * width / 2 * 0.75);
    fill(255);
    //body
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 20, (height + sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 20, height + sin(sec) * width / 2 * 0.75);

    //sattelite 2
    //wing 1
    fill(150);
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, (height - sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, height - sin(sec) * width / 2 * 0.75);
    //wing 2
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, (height - sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, height - sin(sec) * width / 2 * 0.75);
    fill(255);
    //body
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 20, (height - sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 20, height - sin(sec) * width / 2 * 0.75);
    
    //minutes
    //cloud1
    fill(255);
    ellipse(width / 2 + cos(min) * width / 2 * 0.5, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 10, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 10, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 5, (height + sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 5, (height + sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 5, (height + sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 5, (height + sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ///cloud2
    ellipse(width / 2 - cos(min) * width / 2 * 0.5, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 10, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 10, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 5, (height - sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 5, (height - sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 5, (height - sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 5, (height - sin(min) * width / 2 * 0.5) - 7, 15, 15);
    
    //hours
    //moon & sun 1
    fill(255,255,0);
    ellipse(width / 2 + cos(hr) * width / 2, height + sin(hr) * width / 2, 50, 50);
    //moon & sun 2
    fill(255,255,0);
    ellipse(width / 2 - cos(hr) * width / 2, height - sin(hr) * width / 2, 50, 50);
}

For this project I show time by having multiple objects to rotate around the Earth, with the sun/moon representing the hour, clouds representing the minute and satellite representing the seconds. As seen in the sketch below the numerical values are represented in a semicircle around the Earth with the left side representing 9am/pm and the right side representing 9pm/am. For the minutes and seconds the left side represents 15/45 and the right side represents 45/15. In addition the sky is darkest at 3am and lightest at 3pm with a gradient between those times. I wanted to have a clock that was abstract but could still be used to read time if you understood how it worked.

At first I thought the rotation around the Earth would be fairly simple and be used simply by translating and rotating, but I realized that wouldn’t work how I wanted it to using the hour(), minutes(), and seconds() commands so I had to figure it out more mathematically. I couldn’t get each object to move from the right to the left once it finished its rotation from the left side to the right side so I had two of each object (only one is visible on the screen at any given time).

Chelsea Fan-Project 06

AbstractClock

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-06
*/

var ocean = 255; //background "ocean" color
var fishx = [];
var fishy = [];


function setup() {
    createCanvas(480, 400);
    for (i = 0; i<=59; i++) { //from 0-59 seconds
    	fishx[i]= random(100, width); //random location of fish x coord
        fishy[i] = random(175, 275); //random location of fish y coord
    }
}

function draw() {
	noStroke();
    var S = second();
    var M = minute();
    var H = hour();
	//var mappedH = map(H, 0, 23, 0, width);
    
    //changing background color to darken every hour
    background(240-5.31*(H-1), ocean-5*(H-1), 255);

	for (i=0; i<S; i++) { //draw for number of seconds on clock
		fill(255, 160, 122); //orange fish color
		ellipse(fishx[i], fishy[i], 15, 5); //fish bodies
		triangle(fishx[i], fishy[i], fishx[i]-10, fishy[i]+4, fishx[i]-10, fishy[i]-4);//fish tails
	}
	//Shark moving across screen counts minutes
	//measured at inner corner of shark's mouth
    fill(160, 160, 160, 170); //gray color
	arc(20+M*(1/59*width)-30, height/2, 400, 150, QUARTER_PI, 11*PI/6); //shark head
    triangle(M*(1/59*width)-100, height/2, M*(1/59*width)-400, height/2-75, M*(1/59*width)-400, height/2+75); //shark tail
	fill(255); //white color
	ellipse(M*(1/59*width)+20, height/2-45, 20, 20); //outer eye
	fill(0); //black color
    ellipse(M*(1/59*width)+20, height/2-45, 10, 10); //inner eye

}

It took me a while to come up with a good idea for an abstract clock. My mind kept returning to ideas similar to the example bar length or a circular clock with standard hands. I had some difficulty figuring out the ratio of colors to keep the background blue (background changes based on the hour). Overall it was an interesting project. I don’t enjoy not being able to run through everything to see the colors of every hour. However, I did enjoy being able to create a “clock” or time measurer without any restrictions. I was able to create whatever I wanted in whatever shape, size, color, etc. I enjoy having that freedom.

Jamie Park – Project – 06

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104         Section E         Project 6

var prevSec;
var millisRolloverTime;

//--------------------------
function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}

//--------------------------
function draw() {
    background(250); // My favorite pink
    noStroke(); //gets rid of stroke of the shapes

    fill(255, 223, 212);
    for (var x = -10; x < width + 25; x += 50){
        for(var y = -10; y < height + 25; y += 50){
            ellipse(x, y, 50, 50);
        }
    }

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

    // Reckon the current millisecond,
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    var hourColor   = map(H, 0, 23, 60, 220);
    //changed map from 0 to 120, so the rectangle could increase 2 pixels / min
    var minuteIncrease = map(M, 0, 59, 50, 120);
    var secondRotation = map(S, 0, 59, 0, width);

    //Created two circles that change color depending on the time of the day
    fill(61, hourColor, 235); //different shades of blue (dark to light blue)
    ellipse(width / 2, height / 2, 325, 325);
    fill(235, hourColor, 61); //transition from red to yellow
    ellipse(width / 2, height / 2, 300, 300)

    //Created a blue rectangle that increases 2 pixels and changes color 2 values every minute
    rectMode(CENTER);
    fill(51 + minuteIncrease, 111, 184)
    rect(width / 2, height / 2, 70 + minuteIncrease, 70 + minuteIncrease, 15, 15);

    //Created a hexagon that rotates every second
    push();
    translate(width / 2, height / 2);
    rotate(secondRotation);
    fill(116, 232, 228);
    polygon(0, 0, 50, 6);
    pop();
}

//created function polygon to create a hexagon
function polygon(x, y, radius, nPoints){
    var angle = TWO_PI / nPoints
    beginShape();
    for (var i = 0; i < TWO_PI; i += angle){
        var sx = x + cos(i) * radius;
        var sy = y + sin(i) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

I started the project by writing down the elements I wanted to include in my clock. I then tried to visualize it through sketching. When I had a concrete idea of what i wanted, I coded the information.

And this is my version of an abstract clock that rotates, changes color, and enlarges according to the time of the day. The seconds are marked by rotating hexagon, the minutes are marked by square that increases “r” value of color by 2 and the size of the wall by 2 pixels, and hours by the two circles that change color. I really enjoyed this project as it allowed me to explore the creative side of coding.

Emma NM-Project-06(Abstract Clock)

abstractClock

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-06 (Abstract clock)
*/

var adj = 85;
var rMin = 200; // radius of min circle
var rH = 300; // radius of hour circle
var rectW = 18;
var rectH = 8;
var totMin = 60;
var hours = 12;
var mAngle = 6; // minute angle
var hAngle = 30; // hour angle
var start;
var stop;
// for color gradient
var center = 128;
var width2 = 127;
var y = - 165; // y position of rectangle


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

function draw() {
    background("#f2f2f2");
    
    // sets the time
    var sec = nf(second(), 2);
    var min = nf(minute(), 2);
    var hourCir = hour() % hours; // accounts for a 12 hour clock, not 24 hour
    if (hourCir === 0) { // if 0, set to 12
        hourCir = numHours;
    }

    // draws the current time in the corner
    time = hourCir + ":" + min + ":" + sec; 
    textSize(20);
    fill("black");
    text(time, width - adj, adj/3);
    
    // draw hours circle
    drawHours();

    // draw minute circle
    drawMinute();
    
    // draws seconds on the outside
    drawSeconds();

}

function drawSeconds() {
    var secs = nf(second(), 2);
    var freq = .1;

    push();
    translate(width/2, height/2);
    for (var s = 0; s < 60; s ++) {
        rectMode(CENTER);

        // rotate the rectangles to make different circular patterns each second
        rotate(secs * mAngle);

        // color changes every second
        noStroke();
        red = sin(freq * secs) * width2 + center;
        b = sin(freq * secs + 2) * width2 + center;
        g = sin(freq * secs + 4) * width2 + center;
        fill(red, g, b);

        // draws rectangles
        rect(0, y, rectW, rectH);
            
    }

    pop();
}

function drawMinute() {
    // set minute value
    var mins = nf(minute(), 2);
    push();
    translate(width/2, height/2); // put in center of canvas
    noStroke();

    // // angles to get the left side of the purple wedge at 12 o'clock
    var top = 270;
    pAngle = mins / totMin; // slowly rotates circle constantly
    // smooth rotation for the minute 
    currAngle = mins * mAngle + (mAngle * pAngle);
    rotate(radians(currAngle + top));
    for (var m = 0; m < 360; m += 6) {
        var freq = .1;
        if (m === 0) { // if its the first wedge, start at 0
            start = 0;
        }
        else { // set the start position to the previous wedge's stop position 
            start = stop;
        }
        stop = start + TWO_PI * (1 / totMin); // sets the current wedge's stop position
        
        // colors based on sin wave to make rainbow
        i = m / 6;
        red = sin(freq * i) * width2 + center;
        b = sin(freq * i + 2) * width2 + center;
        g = sin(freq * i + 4) * width2 + center;
        fill(red, g, b);
        arc(0, 0, rMin, rMin, start, stop, PIE);
    }
    pop();
}

function drawHours() {
    //set the hour and minutes
    var hCir = hour() % hours;
    var mins = nf(minute(), 2);
    
    push();
    translate(width/2, height/2); // put in center of canvas
    noStroke();

    // angles to get the left side of the purple wedge at 12 o'clock
    var top = 270;
    partAngle = mins / totMin; // slowly rotates circle constantly
    // smooth rotation for the hour
    currAngle = hCir * hAngle + (hAngle * partAngle);
    rotate(radians(currAngle + top));

    // draws the 12 wedges
    for (var h = 0; h < 360; h += 30) {
        var freq2 = .2;
        if (h === 0) { // if its the first wedge, start at 0
            start2 = 0;
        }
        else { // set the start position to the previous wedge's stop position 
            start2 = stop2;
        }
        stop2 = start2 + TWO_PI * (1 / hours); // sets the current wedge's stop position
        
        // colors based on sin wave to make rainbow
        hWedge = h / 12;
        red2 = sin(freq2 * hWedge) * width2 + center;
        blue = sin(freq2 * hWedge + 2) * width2 + center;
        green = sin(freq2 * hWedge + 4) * width2 + center;
        fill(red2, green, blue);
        arc(0, 0, rH, rH, start2, stop2, PIE);
    }
    pop();
}

For this project I knew I wanted to use something with colors and have it still be readable to some degree. I came up with the idea of having the different colors being the “numbers” on the clock. For the seconds, I was thinking of doing rectangles increasing as it goes around the circle, but what I have in my final product, I think looks “cooler.” The most difficult part was trying to get the color gradient to work how I envisioned. As you play with the frequency, the colors change. Also, for the second, I struggled to get what I originally intended, but a happy accident happened and I like my final product. You can still tell the time to some degree. At 12:00:00 both circles will have the purple wedge at the top (left side exactly at top). And the 00 seconds have one single purple rectangle at the top too.

Lanna Lang – Project 06 – Abstract Clock

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project-06-Abstract CLock

function setup() {
    createCanvas(470, 430);
    background(154, 233, 250);
  
    ellipseMode(CENTER);
    angleMode(DEGREES);
}

function draw() {
  
    //hours
    h = hour();
    //the radius changes depending on the hour
    var hRadius = map(h%12, 0, 12, 250, 350);
    //the circle color changes
    //as the hour changes
    var hPink = map(h%12, 0, 12, 0, 230);
    noStroke();
    fill(255, 183, hPink);
    ellipse(180, 215, hRadius);
    //white reflection arc
    strokeWeight(8);
    stroke(255);
    arc(240, 170, 60, 60, 300, 360);

    //minutes
    m = minute();
    //the radius changes depending on the minute
    var mRadius = map(m, 0, 60, 100, 170);
    //the circle color changes
    //as the minute changes
    var mGreen = map(m, 0, 60, 0, 150);
    noStroke();
    fill(mGreen, 205, 180);
    ellipse(180, 215, mRadius); 
  
    //seconds
    s = second();
    //the radius changes depending on the second
    var sRadius = map(s, 0, 60, 0, 70);
    //the circle color changes
    //as the second changes
    var sGreen = map(s, 0, 60, 0, 255);
    fill(255);
    ellipse(180, 215, sRadius);
  
    //light grey circle
    fill(220);
    ellipse(400, 120, 70, 70);
  
    //dark grey circle
    fill(127);
    ellipse(400, 120, 40, 40);
  
    //record player tone arm
    strokeWeight(30);
    stroke(250, 235, 154); //yellow
    line(430, 80, 410, 100);
    strokeWeight(10);
    line(410, 100, 310, 240);
    line(310, 240, 290, 250);
    strokeWeight(20);
    line(290, 250, 250, 260);
  
    //buttons on the bottom
    strokeWeight(10);
    stroke(247, 115, 125); //red
    line(20, 410, 40, 410);
    stroke(71, 171, 88); //green
    line(60, 410, 80, 410);
    stroke(47); //dark grey
    line(100, 410, 120, 410);
  
    //volume control
    stroke(127); //dark grey
    line(400, 270, 400, 390);
    strokeWeight(2);
    fill(220); //light grey
    rect(380, 300, 40, 20);
}

My process behind making this clock/record player was simple, but I wanted to familiarize myself with the map() function so I based my whole clock off the map() function. Each ellipse represents the seconds, minutes, or hours, and as time goes on, the circles enlarge and the colors lighten for the minutes and hours. I had fun creating this image and playing with colors.

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.