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

dnam-project-06

/*
Doo Won Nam
Section B
dnam@andrew.cmu.edu
Project - 06
*/

//variables for spiral
var spiralAngle = 45;
var spiralRadius = 1;
var spiralRate = 0;

function setup() {
    createCanvas(480, 480);
    background(200, 250, 200); //background doesn't reset every frame
}

function draw() {
    noStroke();

    // Fetch the current time
  var H = hour();
  var M = minute();
  var S = second();
  var x = cos(radians(spiralAngle)) * spiralRadius; //wider
  var y = sin(radians(spiralAngle)) * spiralRadius; //taller

  fill(0 + S * 4); //gets lighter per second passed
  ellipseMode(CENTER);
  ellipse(240 + x, 240 - y, 10, 10); //the X and Y shifts along the spiral
  spiralAngle = spiralAngle + 2; //angle shifts to form spiral
  spiralRadius = spiralRadius + 0.1; //spiral radius increases
  spiralRate = spiralRate + 1; 

     if (spiralRate > 2000) { //reset once spiral goes too far
         spiralRate = 0;
         spiralRadius = 1;
         background(150, 200, 150);
}
}

I wanted to show time with just the seconds by using the formation of a spiral and the change of gradience. The code is instructed to create lighter color ellipses until a minute passes and the second resets – the ellipses in the spiral are then reset to black. The spiral also restarts if it fills up too much of the canvas. The idea was based off of Korean anti-mosquito scent candles, which look like these:

I always thought how the candle disappears in a spiral as time goes was almost hypnotising, and I wanted to create a similar effect with this candle.

mjnewman Project-06, Section A

sketch

var canvasWidth = 240;
var canvasHeight = 480;

function setup() {
    createCanvas(canvasWidth, canvasHeight);
}

function draw() {
	//movement of minute, second, and hour ellipses
	var sec = map(second(), 0, 59, 10, height - 10);
	var min = map(minute(), 0, 59, 30, width - 30);
	var hr = map(hour(), 0, 23, 50, height - 50);
	//adding hour variable so that there is a dynamic background
	background(20, 30, hr/6);
	noStroke();
	//hour cirlce moves up and down the canvas, color also changes depending on the hour
	fill(40, 160, hr/2);
	//largest circle
	ellipse(width/4, hr, 100, 100);
	//minutes circle moves across the canvas, color changes depending on minute
	fill(130, 209, min);
	//middle sized circle
	ellipse(min, height * 0.75, 60, 60);
	//seconds circle moves down the canvas, color changes depends on the second 
	fill(200, sec/2, 90);
	//smallest circle
	ellipse(width / 2, sec, 20, 20);

}

For my initial idea, I wanted to mimic how the interaction of asteroids and planets in our solar system. I wanted to illustrate how asteroids get uncomfortably close to these planets, hence the distance between the second and hour circles. There have been many documented close calls that are visible on Youtube.

In terms of colors, I wanted to mimic the impact that asteroids experience when the enter the atmosphere, hence the changing of color from pink to yellow. The rest of the circles change color in order to have a dynamic clock. The background will stay relatively dark to mimic the color of “space.”

sunmink-project06-Abstract Clock

sketch

//SunMin Kim 
//Section E
//sunmink@andrew.cmu.edu
//Project 06 

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

function draw() {
    //show the current time 
    var h = hour(); 
    var m = minute(); 
    var s = second(); 
    
    //color of the ocean changes depending on hours 
    var mapH = map(h, 0, 25, 0, 255);
    background(mapH, 220, 250); 

    noStroke();
    //tail 
    fill(230, 150, 70);
    rect(365, 270, 80, 100, 40, 20, 20, 40);
    //body
    fill(230, 150, 70);
    rect(50, 230, 320, 180, 20, 20, 20, 20);
    //eyes 
    fill(255); 
    ellipse(120, 300, 50, 50);
    //pupill
    fill(0);
    ellipse(122, 292, 30, 30);
    //bubble1
    fill(255);
    ellipse(110, 50, 20, 20);
    //bubble2
    fill(255);
    ellipse(105, 160, 20, 20);
    //bubble3
    fill(255);
    ellipse(130, 110, 20, 20);


    //changes form 24 hour to 12 hour clock 
    if (h == 0){ 
        h = 12; 
    } else if (h > 12 & h < 24){ 
        h -=12; 
    } else{ 
        h = hour(); 
    }
   
    //draw hair every second 
    for (var c = 0; c <= s; c++){
        strokeWeight (2.5); 
        stroke(255); 
        line(80 + 6 * c, 190, 63 + 5 * c, 230);
    }

    //size of mouth gets larger depending on the minutes
    var mapM = map(m, 0, 100, 0, width); 
    noStroke(); 
    fill(230, 80, 100);
    rect(50, 350, mapM, 50, 5, 5, 5, 10);
  
    fill(0);
    textSize(8);
    text( h + " hour(s) " + m + " minute(s) " + s + " second(s) ", 20,20);
}

After finishing assignments using index variables, I was excited to create an abstract clock that transforms according to hours, minutes, and seconds. Thus for the abstract clock, I wanted to take benefit of making a clock that is interesting to watch more than few seconds. Throughout this project, I struggled the most when coming up with triangle coordinates. I feel good with the outcome that I successfully used triangles for this wallpaper which was the most challenging part during the project.

Throughout this project, I struggled the most to come up with types of design that allows me to indirectly display the time flow. However, I felt great to successfully use different parts in the fish to represent the time flow.

myoungsh-project-06-abstract-clock

sketch

//Mason Young-Shor 
//Section C 
//myoungsh@andrew.cmu.edu 
//Abstract Clock
function setup() {
  createCanvas(600, 600);
  background(0);
}
function draw() {
  background(0);
  angleMode(DEGREES);
  var h = hour();
  var m = minute();
  var s = second();
  if (h > 12) { //12 hour clock
    h -= 12;
  }
  for (var H = 1; H < h + 1; H ++) { //hour indicatior
    var x = 0;
    var y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(30 * H);
    if (H % 3 === 0) { //every three hours is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are small and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 110 + x);
    ellipse(0, 110 + x, 10 + y, 10 + y);
    pop();
  }
  for (var M = 1; M <= m; M ++) { //minute indicator
    x = 0;
    y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(6 * M);
    if (M % 5 === 0) { //every five minutes is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are smal and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 170 + x);
    ellipse(0, 170 + x, 10 + y, 10 + y);
    pop();
  }
  for (var S = 1; S <= s; S ++) { //second indicator
    x = 0;
    y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(6 * S);
    if (S % 5 === 0) { //every five seconds is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are small and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 230 + x);
    ellipse(0, 230 + x, 10 + y, 10 + y);
    pop();
  }
}

rfarn -Project-06-AbstractClock

For this project, it took me a while to figure out what I wanted to do. At first I was stuck on the idea of a clock being circular and thought of creating a flower with petals to represent hours, minutes and seconds. However, I thought this wasn’t abstract enough. After pondering for a bit, I came up with the idea of creating a landscape with certain parts that would gradually change over time. At first, I thought of just creating a natural landscape with a sun, river, and mountains, but I felt this wasn’t personalized enough.

While thinking of what to do, I was siting at my kitchen table staring at the couch across from me and out my window. I finally decided to take inspiration from my own room and create an image of this view of the room. I decided to add a few different fun features to the actual clock.

In the abstract clock, the light turns on and off by the second, the sky and sun shift by the hour, and the mouth of the couch gradually opens by the minute.

sketch

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

function draw() {
	background(164, 158, 141);
	var h = hour();

//window assembly
	var windowM = 80; //margins on sides of window (distance from edge of canvas to edge of window)
	var windowW = 320; //width of window
	var windowH = 240; //height of window
	
	if(h > 0 & h < 13){ //sky brightens from 1am - 12pm
		var skyR = h * (167/12); //red
		var skyG = h * (206/12); //green
		var skyB = h * (214/12); //blue
	} else { //sky darkens from 1pm - 12am
		var skyR = 167 - (h - 12) * (167/12); //red
		var skyG = 206 - (h - 12) * (206/12); //green
		var skyB = 214 - (h - 12) * (214/12); //blue
	}

	//window
	noStroke();
	fill(skyR, skyG, skyB);
	rect(windowM, 0, windowW, windowH);
	strokeWeight(10);
	stroke(60, 61, 59);
	line(windowM, 0, windowM, windowH); //left border
	line(windowM + windowW, windowH, windowM + windowW, 0); //right border

	//sun
	var sunDiam = 100; //diameter of sun
	var sunX = width/2; //x position of sun

	if(h > 0 & h < 13){ //sun rises from 1am-12pm
		var sunY = (windowH + sunDiam/2) - h * ((windowH + sunDiam)/12);
	} else { //sun lowers from 1pm-12am
		var sunY = -sunDiam/2 + (h - 12) * ((windowH + sunDiam)/12); //y position of sun
	}
	
	if(h > 0 & h < 13){ //sun brightens from 1am-12pm
		var sunR = h * (211/12); //red
		var sunG = h * (130/12); //green
		var sunB = h * (115/12); //blue
	} else { //sun darkens from 1pm-12am
		var sunR = 211 - (h - 12) * (211/12); //red
		var sunG = 130 - (h - 12) * (130/12); //green
		var sunB = 115 - (h - 12) * (115/12); //blue
	}

	noStroke();
	fill(sunR, sunG, sunB);
	ellipse(sunX, sunY, sunDiam, sunDiam);

	
//couch
	var couchR = 228; //couch red
	var couchG = 231; //couch green
	var couchB = 189; //couch blue
	var cushionW = 180 - minute() * (140/60); //changing width of cushion
	var cushionR = 240 + minute() * (140/60); //changing x position of right cushion

	strokeWeight(5);
	stroke(couchR - 10, couchG - 10, couchB - 10);
	fill(couchR, couchG, couchB);
	rect(60, windowH - 10, 360, height - windowH + 10, 40);	//back of couch
	
	//couch face
	noStroke();
	fill(211, 130, 115);
	rect(60, windowH + 65, 360, 75); //mouth gums
	strokeWeight(30);
	stroke(261, 80, 65);
	line(120, 345, 360, 345); //mouth
	fill(255);
	noStroke();
	rect(210, 330, 20, 20); //tooth right
	rect(250, 330, 20, 20); //tooth left
	ellipse(140, 270, 30, 40); //eye white left
	ellipse(340, 270, 30, 40); //eye white right
	fill(0);
	ellipse(340, 275, 20, 20); //pupil left
	ellipse(140, 275, 20, 20); //pupil right

	//cushions
	strokeWeight(5);
	stroke(couchR - 10, couchG - 10, couchB - 10);
	fill(couchR, couchG, couchB);
	rect(60, windowH + 65, cushionW, 75, 20); //left cushion
	rect(cushionR, windowH + 65, cushionW, 75, 20); //right cushion
	rect(50, 260, 40, 200, 40); //left arm rest
	rect(width - 90, 260, 40, 200, 40); //right arm rest

//lamp
	noStroke();
	if(second() % 2 == 0){ //turns on every other second
		fill(242, 239, 199);
		rect(440, 60, 50, 100);
	} else {
		fill(100);
		rect(440, 60, 50, 100);
	}
	fill(60, 61, 59); 
	rect(470, 160, 20, 400); //lamp stand
}

Project-06-Chickoff-Hazy Clock

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project-06

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

function draw() {

    background(240, 8, 8, 1);
    noStroke();

    for (var y = 0; y < height+5; y += 15) {
        for (var x = 0; x < width+5; x += 15) {
            fill(25, 220, 20, 1,);
            ellipse(x, y, 20, 20);
        }
    }

     for (var y = 0; y < height+5; y += 15) {
        for (var x = 0; x < width+5; x += 15) {
            fill(25, 50, 200, 1);
            triangle(x, y, 5, 5, 2, 10);
        }
    }
    
    var H = hour();
    var M = minute();
    var S = second();

    var mappedH = map(H, 0,23, 0,width);
    var mappedM = map(M, 0,59, 0,width);
    var mappedS = map(S, 0,59, 0,width);
    var triangleHeight = height / 3;
    var triangleWidth = width / 2;

    //hour
    fill(205, 18, 90, 3);
    triangle(200, .5*triangleHeight, .5*triangleWidth, mappedH, 0, triangleHeight);

    //minute
    fill(20, 20, 180, 3);
    triangle(0, 4*triangleWidth, .5*triangleWidth, mappedM, 2, triangleHeight*2);

    //second
    fill(15, 100, 180, 3);
    triangle(0, .5*triangleWidth, 1.5*triangleWidth, mappedS, 0, triangleHeight);

}

I started this project by thinking about how I could make this clock visually interesting. I found that lowering the opacity caused it to feel more blended and smooth, versus hard and rigid like the clocks we see in classrooms. In addition, I created a for() loop to cause thin triangles to cascade at the start of the program, and felt it was representative of the passage of time.

aerubin-Project-06-Abstract-Clock

For this project, I wanted to create a clock out of an everyday object. I came to the conclusion that flowers could be made into an analog clock with the petals acting as the hands and the timekeeper. I thought the largest outside petals could symbolize the largest hour hand, the middle petals could represent the minute hand, and the smallest petals could act as the second hand. In addition, I added a hand in the center of the flower that represents the seconds in a smooth transition that follows the seconds petals. Overall, I am very satisfied with my product and I think it would be feasible to create and implement in today’s clock designs.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-06-Abstract-Clock

var a = 0;
var b = 255;
var n = 255;
var c = 0;
var d = 255;
var m = 255;
var e = 0;
var f = 255;
var o = 255;
var flowerx = 110;
var flowery = 110;
var nn = 255;
var mm = 255;
var oo = 255;
var nnn = 255;
var mmm = 255;
var ooo = 255;
var offset = 0;
var mil_start = 0;

function setup() {
    createCanvas(450, 450);   

    //millisecond hand in sinc with second petals
    var sc_start = second();
    mil_start = millis();
    offset = sc_start*6;
}

function draw() {
    background(204, 235, 197);
    
    //Flower Pot
    noStroke();
    fill(236, 211, 207);
    strokeWeight(1);
    stroke(0);
    quad(134, 325, 316, 325, 281, 375, 169, 375);
    ellipse(width/2, 430, 180, 140);
    noStroke();
    quad(135, 325, 315, 325, 280, 375, 170, 375);
    fill(205, 179, 176);
    strokeWeight(1);
    stroke(0);
    ellipse(width/2, 325, 182, 30);

    //Flower Leaves
    push();
    noStroke();
    rotate(radians(45));
    fill(82, 100, 35);
    ellipse(358, 12, 20, 50);
    pop();

    push();
    noStroke();
    rotate(radians(42));
    fill(82, 100, 35);
    ellipse(330, 60, 50, 20);
    pop();

    noFill();
    stroke(82, 100, 35);
    strokeWeight(6);
    //Yellow Flower Stem
    arc(50+430-90, 55+236+46, 70+330-100, 70+280-100, PI, PI+QUARTER_PI);
    //Orange Flower Stem
    arc(50+105, 55+274, 70+50, 70+50-30, PI+90, QUARTER_PI-19.5);
    //Pink Flower Stem
    arc(50+83, 55+269, 70+50+70, 70+50-30+100+170, PI+90, QUARTER_PI-19.5);

    noStroke();

    var darkpink = color(194, 20, 69); 
    var mediumpink = color(249, 109, 170);
    var lightpink = color(233, 186, 193);

    //Center of Pink Flower
    fill(253, 184, 50);
    ellipse(flowerx+80, flowery, 57, 57);
    fill(243, 121, 33);
    ellipse(flowerx+80, flowery, 57-15, 57-15);
    fill(243, 82, 30);
    ellipse(flowerx+80, flowery, 57-30, 57-30);

    var mil = millis();

    //Pink Flower Second Hand
    push();
    translate(flowerx+80, flowery);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(darkpink);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Pink Flower Clock
    push();
    translate(flowerx+80, flowery);
    for (var i = 0; i < 60; i++) {
        if (second() == i) {
            n = 255;
        }
        else {n = darkpink;}
        secondPetals(i, n);
    }

    for (var j = 0; j < 60; j++) {
        if (minute() == j) {
            m = 255;
        }
        else {m = mediumpink;}
        minutePetals(j, m);
    }

    for (var k = 0; k < 24; k++) {
        if (hour() == k) {
            o = 255;
        }
        else {o = lightpink;}
        hourPetals(k, o);
    }
    pop();

    var darkyellow = color(192, 152, 32);
    var mediumyellow = color(229, 220, 49);
    var lightyellow = color(250, 247, 71);

    //Center of Yellow Flower
    fill(125, 69, 67);
    ellipse(flowerx+235, flowery+100, 57, 57);
    fill(82, 38, 27);
    ellipse(flowerx+235, flowery+100, 57-15, 57-15);
    fill(48, 45, 48);
    ellipse(flowerx+235, flowery+100, 57-30, 57-30);

    //Yellow Flower Second Hand
    push();
    translate(flowerx+235, flowery+100);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(mediumyellow);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Yellow Flower Clock
    push();
    translate(flowerx+235, flowery+100);
    for (var ii = 0; ii < 60; ii++) {
        if (second() == ii) {
            nn = 255;
        }
        else {nn = darkyellow;}
        secondPetals(ii, nn);
    }

    for (var jj = 0; jj < 60; jj++) {
        if (minute() == jj) {
            mm = 255;
        }
        else {mm = mediumyellow;}
        minutePetals(jj, mm);
    }

    for (var kk = 0; kk < 24; kk++) {
        if (hour() == kk) {
            oo = 255;
        }
        else {oo = lightyellow;}
        hourPetals(kk, oo);
    }
    pop();

    var darkorange = color(243, 82, 30);
    var mediumorange = color(243, 121, 33);
    var lightorange = color(253, 184, 50);

    //Center of Orange Flower
    fill(0);
    ellipse(flowerx-20, flowery+160, 57, 57);
    fill(207, 52, 32);
    ellipse(flowerx-20, flowery+160, 57-15, 57-15);
    fill(253, 217, 101);
    ellipse(flowerx-20, flowery+160, 57-30, 57-30);

    //Orange Flower Second Hand
    push();
    translate(flowerx-20, flowery+160);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(mediumorange);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Orange Flower Clock
    push();
    translate(flowerx-20, flowery+160)
    for (var iii = 0; iii < 60; iii++) {
        if (second() == iii) {
            nnn = 255;
        }
        else {nnn = darkorange;}
        secondPetals(iii, nnn);
    }

    for (var jjj = 0; jjj < 60; jjj++) {
        if (minute() == jjj) {
            mmm = 255;
        }
        else {mmm = mediumorange;}
        minutePetals(jjj, mmm);
    }

    for (var r = 0; r < 24; r++) {
        if (hour() == r) {
            ooo = 255;
        }
        else {ooo = lightorange;}
        hourPetals(r, ooo);
    }
    pop();
}

function secondPetals(a, b) {
    push();
    noStroke();
    rotate(radians(a*6));
    fill(b);
    ellipse(0, -35, 3.5, 9);
    pop();
}

function minutePetals(c, d) {
    push();
    noStroke();
    rotate(radians(c*6));
    fill(d);
    ellipse(0, -48, 4.6, 15);
    pop();
}

function hourPetals(e, f) {
    push();
    noStroke();
    rotate(radians(e*15));
    fill(f);
    ellipse(0, -80, 20, 50);
    pop();
}

Initial Sketch of Product (petals are not drawn to scale)

mmirho – Project 6 – Blood clock

The goal of this was to create something ominous, slightly spooky, but very easy to tell the general time of day.

I really enjoyed how satisfying the millisecond smooth movement was, so it made sense to make it relate to some liquid.

sketch

var prevSec;
var millisRolloverTime;

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


function draw() {
    background(240);
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // 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);
    
    //fill(128,100,100);
    //text("Hour: "   + H, 10, 22);
    //text("Minute: " + M, 10, 42);
    //text("Second: " + S, 10, 62);
    //text("Millis: " + mils, 10, 82);
    
    var hourBarWidth   = map(H, 0, 23, 0, width-75);
    var minuteBarWidth = map(M, 0, 59, 0, width-75);
    var secondBarWidth = map(S, 0, 59, 0, width-75);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, height-75);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, height-75);
    
    noStroke();

    fill(140, 0, 0);

    //This block makes the red pool at the top
    //And connects it smoothly to the drips
    fill(140, 0, 0);
    rect(0,0,width,100);
    fill(240);
    ellipse(230,105,182,60);
    ellipse(414,105,160,60);
    ellipse(95, 105, 62, 30);
    ellipse(0, 105, 100, 50);
    fill(140, 0, 0);
    

    rect(50, 75, 15, hourBarWidth);
    ellipse(57.5, hourBarWidth + 75, 15, 35);
    //Far left, slowest blood drip

    rect(125, 75, 15, minuteBarWidth);
    ellipse(132.5, minuteBarWidth + 75, 15, 35);
    //Middle, slow blood drip

    rect(320, 75, 15, secondBarWidthSmooth);
    ellipse(327.5, secondBarWidthSmooth + 75, 15, 35);
    //Far right, fastest drip

    text("H", 50, height-10);
    text("M", 125, height-10);
    text("S", 320, height-10);
    //Labels the bloog drips

}

nahyunk1-Abstract Clock

sketch

var numObjects = 6; // number of rect/ellipses that will rotate in a circle.
var centerX; //the center x position of the rotating obj.
var centerY; // the center y pos of rotating obj.
var angle = 0; // starting angle of rotation
var distance = 50;
var redd = 255;
var greenn = 255;
var bluee = 255;
var spacing = 10; // spacing for moving rect in the background
var x = 0; // x pos of the rect
var y = 0; // y pos of the rect

function setup() {
  createCanvas(300, 600);
centerX = width / 2; // vars for rotating circles
centerY = height / 2; // vars for rotating circles
noStroke();
ellipseMode(CENTER); // rotating circles
}


function draw() {
  background(0);
  //for current time
  var Hr = hour();
  var Min = minute();
  var Sec = second();
  //mapping the time frame
  var mH = map(Hr, 0,23, 0, height);
  var mM = map(Min, 0,59, 0, height);
  var mS = map(Sec, 0,59, 0, height);
  var rectHeight =  width / 3; //constant for x distance

  noFill(); //the current hour rocket.
  stroke("red");
  rect(0.5*rectHeight, mH, 100, 95);
  stroke(0,0,255);
  rect(0.25*rectHeight, mH, 60, 55);
  rect(1.125*rectHeight, mH, 60, 55);
  stroke("orange");
  triangle(0.5*rectHeight,95+mH, 0.5*rectHeight+100, 95+mH, 0.5*rectHeight+50, 150+mH);
  stroke("pink");
  ellipse(0.5*rectHeight,mH, 20, 70);
  ellipse(0.5*rectHeight+100, mH, 20, 70);

  stroke("pink"); // minute indicator
  strokeWeight(2);
  rect(1*rectHeight, mM, 50, 50);
  fill("pink");
  text("FLY!", 1.125*rectHeight, mM+30);

  noFill();// solar system indicator of the seconds.
  stroke("cyan");
  ellipse(2.4*rectHeight, mS-200, 30, 30);
  ellipse(2.4*rectHeight, mS-100, 70, 70);
  ellipse(2.4*rectHeight, mS, 100, 100);
  stroke("yellow");
  strokeWeight(2);
  ellipse(2.4*rectHeight, mS, 50, 50);
  stroke(255);
  ellipse(2.4*rectHeight, mS-250, 20, 20);
  ellipse(2.4*rectHeight, mS-300, 10, 10)
  ellipse(2.4*rectHeight, mS-100, 90, 20);
  ellipse(2.4*rectHeight, mS-400, 5, 5)
  ellipse(2.4*rectHeight, mS-500, 2, 2)
  stroke("red");
  ellipse(2.4*rectHeight, mS-200, 40, 40);

  //the rotating clock in the middle.
  var angleObject = 360 / numObjects; //space between each object.
    for (var i = 0; i < numObjects; i++) {
  angle += frameCount*i /20;
  push();
  translate(centerX, centerY); // the obj. rotate around the center.
  rotate(radians(i * angleObject + angle));
  stroke("skyblue"); // the lightblue rectangles rotating around.
  rect(distance-10, mS/6, 15, 15); // rotation indicates the seconds.
  stroke("yellow"); // the dark blue circles rotating around.
  strokeWeight(1);
  ellipse(distance, mM/4, 10, 10); // rotation indicates the minutes.
  stroke(0,255,0); // the green small rects rotating around.
  rect(distance, mH/24, 5, 5); // rotation indicates the hour.
  pop();
  }


}

My abstract clock is based on a space theme. The rocketship indicates the hour, the pink box with the text “FLY!” indicates the minutes, and the linear solar system indicates the seconds as they all descend from the top of the canvas. The rotation that is occurring in the middle of the canvas also indicates the hour, minute, and seconds with the squares and the ellipses. As you can see from the code, the skyblue squares rotation enlarges each time the seconds increase form 0 to 60. Similarly, the rest of the other objects that rotate, enlarge proportionally as the hour and the minutes flow by.

hdw – Project 6 – Abstract Clock

sketch

//Helen Wu
//hdw@andrew.cmu.edu
//Project 6
//Section A

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {

  var rSpring = 180
  var gSpring = 299
  var bSpring = 123

  var rSummer = 255
  var gSummer = 224
  var bSummer = 114

  var rFall = 255
  var gFall = 191
  var bFall = 135

  var rWinter = 255
  var gWinter = 107
  var bWinter = 107

  var season = month()

  //set colors of tree outline to month

  if (season == 3 || 4 || 5){
    var r = rSpring;
    var g = gSpring;
    var b = bSpring;
  }

  if (season == 6 || 7 || 8){
    var r = rSummer;
    var g = gSummer;
    var b = bSummer;
  }

  if (season == 9 || 10 || 11){
    var r = rFall;
    var g = gFall;
    var b = bFall;
  }

  if (season == 12 || 1 || 2){
    var r = rWinter;
    var g = gWinter;
    var b = bWinter;
  }

  //background changes with respect to hour.
  //from = color(206, 242, 255), to = color(255, 198, 220)
  var proportion = hour()/60;
  background(206+49*proportion,242-44*proportion,255-35*proportion);

  //draw trees
  tree1(-35,115,200,r,g,b)
  tree3(115,115,200,r,g,b)
  tree2(-185,115,200,r,g,b)
  tree2(265,115,200,r,g,b)

  tree1(width-190,height-200,100,r,g,b);
  tree2(width-340,height-200,100,r,g,b);
  tree3(width-490,height-200,100,r,g,b);

}

//set strokeWeight 's'
var s = 3

//falling leaf pattern 1
function tree1(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is mapped with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==1){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);


  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==0){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==1){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==2){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==3){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==0){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==1){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==2){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();
}

//falling leaf pattern 2
function tree2(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is colored with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==2){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);

  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==1){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==2){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==3){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==0){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==1){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==2){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==0){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();

}

//falling leaf pattern 3
function tree3(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is mapped with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==0){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);


  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==2){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==3){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==0){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==1){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==2){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==0){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==1){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();

}

I chose to represent time with a forest. The leaves fall to seconds, the background color is mapped to hours of the day, and the tree outline rotates by minutes. The color of the trees correlate with seasons. At first I struggled with how to make this piece dynamic because my movement was very simple, so I created a recursion and repeated different tree patterns.