Month: October 2017

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 – Looking Outwards – Random

There wasn’t much on the internet about this image, it was simply referenced in a few places as being random art, but it really stuck out to me.

I could have created this myself, it’s simply a circle spread across three rings, with color changing slightly each ring. Then, the ring set is spanned across a random pattern, yet even with such simple rules, the result is incredibly satisfying.

There was no found author, and it’s likely a student like myself made it.

I’m inspired by this to try random stuff with JavaScript, to make up a set of simple rules and let the computation do the rest. If something even remotely as intricate as this results, I’ll be beyond happy.

I think the appealing part of the image is not only the beautiful color variation but the blur of circles. At first glance, you appear to be able to discern the location of every ring and see the full structure of every circle. However, if you start to push your vision back, everything becomes indiscernible. It feels good to look at, and the code behind it is very simple.

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

}

ablackbu-Looking-Outwards-06

______________________

For this looking outwards entry I found a very interesting algorithm based brand identity that is used by the Exploratorium in San Francisco.

______________________

______________________

The artist created a program that randomizes lines around a certain areas to create an outcome that has infinite variation.

______________________

With this, he as created a very interesting alphabet that is used in all of their design language. Above is an example of the “e” that is made of of strings computed by his program.

What made me so interested with this project is the branding side of this computation. The designer is using random computation to explore brand identity. The strings he makes are 100% random by definition, but all of them in a room would look like they are similar.

In the designers words, “It allows for infinite variation of the lettermark and exists in a duality of spontaneity and energy grounded by math and logic.” As I am studying letterform, it is very interesting for me to see a typeface that is grounded in randomness.

 

More info can be found at:

http://paulhoppe.info/new-gallery-1/

monicah1-lookingoutward-06

Nothing There by Brendan Dawes, 2004

Nothing There is a computational work made from the soundtrack within the movie, The Man Who Wasn’t There. In the piece, each element is dictate by the amount of sound present during that movie frame. The piece is a representation of silences and pauses within the film.

I is interested in the seemingly not organized, randomness, of this piece, is actually generated from a specific movie and specific timing within the movie. It is powerful to concise a movie silences and pauses frames visually in one piece. The black and white color choice add into to topic of silence. Looking at each element closely and standing back and look them as one piece of work, I do feel the pauses and silences that the Dawes want to represent. It is interest to see the precise informations generating the sense of randomness in the piece.

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.

atraylor – Project 06 – Section B

sketch

// atraylor@andrew.cmu.edu
// Section B
// Project 06

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

function draw() {
    background(255, 230, 154);
    var offset = sin(millis()) * 2; // movement of hour circle

    var h = hour();
    var m = minute();
    var s = second();

    var hCol = map(h, 0, 23, 0, 255); //mapping hour to shade

    fill(hCol);
    ellipse(width/2, height/2 + offset, 50, 50); // hour circle

    for (var i = 0; i < s; i++) { //drawing second dots
        c = color(0);

        drawSec(i, c);
    }

    for (var i = 0; i < m; i++){ //drawing minute circles
        c = color(0, 40);
        drawMin(i, c);
    }
}

function drawSec(count, col, offset, offset2) { // fucntion for second dots
    push();
    offset = cos(millis()/ 350) * random(20, 50); // creating random oscillation
    offset2  = sin(millis()/ 350) * random(20, 50);
    translate(200, 200);
    rotate(radians(count * 6));
    fill(col);
    ellipse(150 + offset, 0 + offset2, 8, 8);
    pop();
}

function drawMin(count, col, offset, a){ // function for minute circles
    push();
    a = random(50, 70);
    offset = sin(millis()) * random(1, 2);
    translate(200, 200);
    rotate(radians(count * 6));
    fill(col);
    ellipse(60 + offset, 0, a, a);
    pop();
}

Time keeping is an interesting subject to me, especially when you begin to think about inaccuracy. My design is inspired by time keeping by measuring oscillation and resonance. I remember visiting NIST in elementary school to see their atomic clock which measures the resonance frequency of cesium to determine a second, and is the basis of time keeping in the US. While my design doesn’t illustrate a cesium atom’s resonance or the mechanics of atomic clocks, I was inspired to represent oscillation.

hyt-Project-06: Clock Works

hyt-06-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-06-clock


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


function draw() {

    // current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // color palette
    var transparency = 170; // alpha value
    var red = color(255, 0, 0, 170);
    var orange = color(255, 100, 0, 170);
    var green = color(7, 150, 70, 170);
    var yellow = color(255, 250, 55, transparency);
    var blue = color(0, 155, 250, 170);
    var purple = color(142, 78, 201, 170);

    // draw rainbows
    var hDiff = 30;// height difference each time
    var initialHL = 190; // initial height on the left
    var initialHR = 20; // initial height on the right

    background(200 - H, 255 - M * 0.5, 210 - S * 0.7); // bg color randomizes as time goes by

    
    //red
    strokeWeight(25); // line thickness
    stroke(red);
    line(0, initialHL, width, initialHR);
    //orange
    stroke(orange);
    line(0, initialHL + hDiff, width, initialHR + hDiff);
    //green
    stroke(green);
    line(0, initialHL + hDiff * 2, width, initialHR + hDiff * 2);
    //blue
    stroke(blue);
    line(0, initialHL + hDiff * 3, width, initialHR + hDiff * 3);
    //purple
    stroke(purple);
    line(0, initialHL + hDiff * 4, width, initialHR + hDiff * 4);

//----------------------------


    // HOURS dots
    for (var dotH = 1; dotH <= 24; dotH++) {
        noStroke();
        fill(yellow); 
        rect(20 * H, initialHL + 30 - 7.1 * H, 3, 3); 
        // pacman shape
        noStroke();
        fill(yellow);
        var angle1 = 20; 
        var angle2 = 310;
        arc(20 * H - 20, initialHL + 40 - 7.1 * H, 20, 20, angle1, angle2);
    }


    // MINUTES dots
    for (var dotM = 1; dotM <= 60; dotM++) {
        noStroke();
        fill(yellow);
        rect(7.9 * M, initialHL + 60 - 2.8 * M, 3, 3); 
        // pacman shape
        noStroke();
        fill(yellow);
        var angle1 = 20; 
        var angle2 = 310;
        arc(7.9 * M - 20, initialHL + 70 - 2.8 * M, 20, 20, angle1, angle2);
    }



    // SECONDS dots
    for (var dotS = 1; dotS <= 60; dotS++) {
        noStroke();
        fill(yellow);
        rect(7.9 * S, initialHL + 90 - 2.8 * S, 3, 3); 
        // pacman shape
        var angle1 = 20; 
        var angle2 = 310;
        arc(7.9 * S - 20, initialHL + 100 - 2.8 * S, 20, 20, angle1, angle2);
    }


    // clock time shown on the left top side
    fill(0, 100);
    rotate(-20);
    textFont("Courier New", [60]);
    time = H + ":" + M + ":" + S; 
    text(time, -10, 163); 

}

For this project, I had several ideas in mind, and somehow thought of the viral Nyan cats looped video on Youtube. Inspired by that, I decided to make a rainbow background with each Pacman moving as a way of representing the clock’s hour, minute, and seconds.

(A really rough sketch for ideation phase)

However, later I realized the extreme difficulty of drawing an arc movement for the Pacman, and resorted to a simpler version of straight lines of rainbow. Some of the variations within the projects are play with colors, transparency, movements and the background color gradient throughout time. I like how the final results turned out, and also enjoyed the process of making.