Category: Uncategorized

Shariq M. Shah – Project 06 – Abstract Clock

shariqs-06-project




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

}

function draw() {

    background(0);

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

    // map times to canvas proportions
    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 timeArray = [mappedH, mappedM, mappedS]

    var x = width / 2 - 20;

    push();

    translate(width / 2, height / 2);

    noFill();


  for(s = 0; s < 60; s++) {

    strokeWeight(0.1);

    stroke(0 + mappedS, 300, 20);

    ellipse(0, 0, mappedS, x);

    rotate(radians(s * 0.2));

  }


    for(m = 0; m < M; m++) {

    strokeWeight(0.1);

    stroke(0 + mappedM, 60, 20);

    ellipse(0, 0, mappedM, x);

    rotate(radians(m * 0.2));

  }

    for(h = 0; h < H; h++) {

    strokeWeight(0.1);

    stroke(200, 60, 20);

    ellipse(h, 0, mappedH, x);

    rotate(radians(H * 0.1))


  }

    pop();


    text(H, (width / 2 )- 6, height / 2);
    fill(300);

    text(M, (width / 2) - 6, height / 2 + 15);
    fill(300);

    text(S, (width / 2) - 6, height / 2 + 30);

    fill(300);



}

In this project, I explored the practices of timekeeping in relation to abstract line geometries that rotated and overlapped based on the corresponding time. Different colors represent the different time increments, and complex geometries emerge as a result of the time keeping computation. These processes result in a clock that is dynamic and presents interesting and complex geometries as a result of time.

rbd test

rbdtest

var sun = 220;
var moon = 235;
var cloud = 260;

var s;
var m;
var h;

function setup() {
    createCanvas(480, 480);
    frameRate(1);  
    s = second();
    m = minute();
    h = hour();
}

function draw() {
    background(0);
    noFill();
  
    if (s % 2 === 0) {
    if (h >= 8 & h < 13) {
      background(182, 224, 239);
      // base()
      // morning()
    } else if (h >= 13 & h < 17) {
      background(141, 194, 214);
      // base()
      // afternoon()
    } else if (h >= 17 & h < 22) {
      background(79, 130, 150);
      // base()
      // twilight()
    } else if (h >= 22 & h < 23.5) {
      background(34, 79, 96);
      // base()
      // night();
    }
    } else if (h >= 0 & h < 8) {
      base()
    }
  
    //minutes
    for (var j = 0; j < minute(); j ++){
      sun = map(j, 0, 70, 220, 255);
      moon = map(j, 0, 60, 125, 255);
      cloud = map(j, 0, 50, 280, 255);
      stroke(sun, moon, cloud);
      fill(37, 179, 255);
      ellipse(240, 240, 9*j, 9*j);
    } 
     push();
  
    //seconds
     noFill();
     translate(width/2, height/2);
    for (var i = 0; i < second(); i ++) {
      sun = map(i, 0, 70, 210, 71);
      moon = map(i, 0, 60, 345, 204);
      cloud = map(i, 0, 50, 0, 234);
      stroke(sun, moon, cloud);
      stroke(50, 75, 255);
      rotate(radians(3));
      ellipse(0, 0, 30, 450);
    } 
    
      pop();
  
      
    {
      
    } 
   
     strokeWeight(2);
     noFill();
     translate(width/2, height/2);
    //hours
    for (var k = 0; k < hour(); k ++){
      sun = map(k, 0, 70, 255, 255);
      moon = map(k, 0, 60, 255, 255);
      cloud = map(k, 0, 60, 102, 255);
      stroke(sun, moon, cloud, 190);
      rotate(radians(8));
      ellipse(0, 0, 150, 400);
      
        
    }		
    
}

Shannon Ha- Project 06 – Abstract Clock


sketch

For this project, I wanted to explore how to use a variety of shapes to express time so I used a combination of lines, circles and squares in a rotating motion simulate the effect of a clock.

//Shannon Ha
//sha2@andrew.cmu.edu
//Section D
//Project 06

function setup() {
    createCanvas(400, 400);
    angleMode (DEGREES); //converts radians to degrees
}

function draw() {
    var H = hour();
    var M = minute();
    var S = second();

      background(H * 5,M,S); // background color changes according to time

      //small circle for hours
      for (var h = 0; h < H; h++){
        var r=150;
        var g=200;
        var b=50;

          push();
          translate (width/2, height/3 - 30);
          rotate((15*h)-0.25*360) //24 squares to count hours
          noStroke();
          fill(r-H, g-M, b-S); //color alternates as time changes
          rect(35,0,20,20);
          pop();
      }

      //bigger circle for minutes
        for(var m = 0; m < M; m++){
          var r=250;
          var g=130;
          var b=10;
            push();
            translate (width/2, height/2 + 50);
            rotate((6*m)+ 0.25 *360); //60 circles to count min
            noStroke();
            fill(r+H, g+M, b+S); //color alternates as time changes
            ellipse(72, 0, 15, 15);
            pop();
          }


      //line seconds
        for(var s = 0; s < S; s++) {
        var r=160;
        var g=105;
        var b=60; //sets b value
        push();
        translate (width/2, height/2 + 50);
        rotate((6*s)- 0.50 * 360); //60 rotating lines
        stroke(H, M, S*2); //color alternates as time changes
        strokeWeight(2);
        line(100,100,10,10);
        pop();
    }


}

Nadia Susanto – Project 06 – Abstract Clock

sketch

/* Nadia Susanto
   nsusanto@andrew.cmu.edu
   Section B
   Project-06-Abstract Clock */

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


   function draw() {
     background(255,255, 255);
     translate(200, 200);


     var hr = hour();
     var min = minute();
     var sec = second();

     push();
     textSize(30);
     text(nf(hr%12,2)+":"+nf(min,2)+":"+nf(sec,2) , -50, -20, 50, 100)
     pop();

     strokeWeight(4);
     var b = map(sec, 0, 60, 0, 255);
     stroke(color(100, b, 255));
     noFill();
     var secondAngle = map(sec, 0, 60, 0, 360);
     arc(0, 0, 300, 300, 0, 360-secondAngle);

     strokeWeight(5);
     var c = map(min, 0, 60, 0, 255);
     stroke(color(0, 255, c));
     noFill();

     var minuteAngle = map(min, 0, 60, 0, 360);
     arc(0, 0, 280, 280, 0, 360-minuteAngle);


     strokeWeight(3);
     var d = map(hr, 0, 60, 0, 255);
     stroke(color(d, c, b));
     noFill();
     var hourAngle = map(hr % 12, 0, 12, 0, 360);
     arc(0, 0, 260, 260, 0, 360-hourAngle);

   }

It was hard thinking of a very abstract concept, so I kept it simple. I wanted to stay simple but add the abstract element. The arc if hours, minutes, or seconds “disappears” to show the time passing by. Even though it looks simple, I think it looks pretty nice and I’m happy with the outcome.

Claire Yoon – Project 06 – Abstract clock

 sketch

/* Claire
   Section E
   claireyo@andrew.cmu.edu
   Project-06-Abstract-Clock*/

function setup() {
    createCanvas(400, 400);
    noStroke();
}
function draw() {
    background(166, 243, 247);
    noStroke();

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

// mapping time variables
    var shadowcolor = map(H, 0, 8, 0, 37, 0, 44)
    var creamfall = map(M, 0, 6, 0, 7);

//shadow gets darker with hours
    var shadow = color(166 - shadowcolor, 243 - shadowcolor, 247 - shadowcolor);
    fill(shadow);
    noStroke();
    quad(145, 272, 229, 77, 501, 328, 339, 473);

//Popsicle part that does not move
    noStroke();
    //popsicle stick
    fill(239, 198, 142);
    rect(190, 247, 22, 108, 30);
    //popsicle
    fill(252, 234, 68);
    rect(144, 115, 111, 171, 20);
    //dent on popsicle
    fill(239, 220, 43);
    rect(168, 120, 22, 134, 10);
    rect(212, 120, 22, 134, 10);
    //cream
    fill(250, 120,119);
    ellipse(199.5, 125, 112, 112);

//cream that is falling with minutes
    rect(144, 121, 28, 90 + creamfall, 14);
    rect(156, 121, 50, 68 + creamfall, 23);
    rect(197, 121, 43, 94 + creamfall, 21.5);
    rect(236, 121, 20, 106 + creamfall, 10);

//drooling drops that falls down every second
    push();
    translate(249, 213);
    fill(250, 120,119);
    s = (millis()) % 800;
    s = map(s, 0, 800, 0, 213);
    ellipse(0, s, 10, 12);
    pop();

//sun
    fill(255, 224, 0);
    ellipse(29, 6, 191, 191);

// Time
    fill(255);
    text(H + ":" + M + ":" + S, 40, 50);

   }

I enjoyed this project and the concept of creating an graphic art piece that evolves around time. I based my clock on how a popsicle drips and melts as time goes by.

Charmaine Qiu – LookingOutwards – 06


Image of the artwork “3 Standard Stoppages”

Marcel Duchamp was a French American artist who enjoyed the creation of conceptual art. He created an artwork in 1913-14 called “3 Standard Stoppages”. The artist dropped three meter long threads from one meter above three canvases, and the threads naturally adhered to the canvases with the random curves upon landing. The canvas was later cut along the threads, and the shapes were being preserved. The artwork was intended as a satire against the metric system that Duchamp described as an “intellectual construct rather than a universal absolute”(moma.org). I found it interesting how Duchamp utilized chance operations to distort the unit of length, creating a breakthrough to conventional measuring systems. The artwork is now displayed in MoMA in Manhattan.

Sarah Kang-Project-06-Abstract Clock

clockk

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-06-clock

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

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

    //remap
    var RMH = map(H, 0, 23, 0, 360);
    var RMM = map(M, 0, 59, 0, 360);
    var RMS = map(S, 0, 59, 0, 360);
    var sec = S / 60;

    var rad = 100;
    var dim = 80;
    var dim2 = 40;
    var dim3 = 30;
    var x1 = 220;
    var y1 = 160;
    var x2 = 350;
    var y2 = 260;
    var x3 = 200;
    var y3 = 340;
    var x4 = 80;
    var y4 = 390;
    var x5 = 400;
    var y5 = 60;

    angleMode(DEGREES);

    //first bubble
    fill(63, 57, 64);
    noStroke();
    ellipse(220, 160, sec * dim, sec * dim); //center
    //big ring for hours
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x1, y1, rad + 80, rad + 80, 0, RMH);
    //med ring for minutes
    stroke(240, 192, 201);
    strokeWeight(4);
    arc(x1, y1, rad + 50, rad + 50, 0, RMM);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(7);
    arc(x1, y1, rad, rad, 0, RMS);


    //second bubble
    fill(94, 86, 93);
    noStroke();
    ellipse(350, 260, sec * dim, sec * dim); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(4);
    arc(x2, y2, rad + 100, rad + 100, 0, RMS);
    //med ring for minutes
    stroke(240, 192, 201);
    strokeWeight(8);
    arc(x2, y2, rad + 75, rad + 75, 0, RMM);
    //small ring for hours
    stroke(201, 231, 255);
    strokeWeight(12);
    arc(x2, y2, rad + 20, rad + 20, 0, RMH);

    //third bubble
    fill(99, 101, 115);
    noStroke();
    ellipse(200, 340, sec * dim2, sec * dim2); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x3, y3, rad + 40, rad + 40, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x3, y3, rad + 20, rad + 20, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x3, y3, rad, rad, 0, RMS);

    //4th bubble
    fill(140, 143, 161);
    noStroke();
    ellipse(80, 390, sec * dim2, sec * dim2); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x4, y4, rad, rad, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x4, y4, rad - 10, rad - 10, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x4, y4, rad - 20, rad - 20, 0, RMS);

    //5th bubble
    fill(149, 140, 161);
    noStroke();
    ellipse(400, 60, sec * dim3, sec * dim3); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x5, y5, rad - 20, rad - 20, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x5, y5, rad - 30, rad - 30, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x5, y5, rad - 45, rad - 45, 0, RMS);

}

I wanted to make a bubble clock and vary the hour, minute, and second variables by the layers of the bubbles. To make the frame changes more apparent, I used more seconds variables in the visualization.

Sarah Choi – Project – 06 – Abstract Clock

My representation of the clock showed three different parts of the clock. I wanted to portray hours, minutes, and seconds in three different manners. By doing this, I was able to code the outside of the circle with an arc, showing the hour. I made an inner loop with the minutes by using stroke lines. And finally, the seconds were done with the squares in the perimeter.

project-06

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-06

var x = 0;
var y = 0;
var dX = 1;
var dY = 1;

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

function draw() {
    var h = hour();
    var m = minute();
    var s = second();
    var rects = [];

    background(0);

    //seconds
    //top half right side
    stroke(0);
    strokeWeight(1);
    for (i = 0; i < 8; i++) {
        x1 = 281 - (37.5 / 2) + i * 37.5;
        y1 = 0;
        rects.push([x1, y1, s > i]);
    }

    for (i = 8; i < 25; i++) {
        x1 = 600 - 37.5;
        y1 = (i - 8) * 37.5;
        rects.push([x1, y1, s > i]);
    }

    for (i = 25; i < 39; i++) {
        x1 = 600 - (37.5 * (i - 23));
        y1 = 600 - 37.5;
        rects.push([x1, y1, s > i]);
    }

    for (i = 39; i < 55; i++) {
        x1 = 0;
        y1 = 600 - (37.5 * (i - 38));
        rects.push([x1, y1, s > i]);
    }

    for (i = 55; i < 61; i++) {
        x1 = (i - 54) * 37.5;
        y1 = 0;
        rects.push([x1, y1, s > i]);
    }

    for (i = 0; i < 61; i++) {
        if (rects[i][2]) {
            x1 = rects[i][0];
            y1 = rects[i][1];
            fill(255);
            rect(x1, y1, 37.5, 37.5);
        } 
        else {
            x1 = rects[i][0];
            y1 = rects[i][1];
            fill(255, 153, 0);
            rect(x1, y1, 37.5, 37.5);
        }
    }

    //minute
    for (a = 0; a < m; a++) {
        fill(255);
        circle(300, 300, 300 - (5 * a), 300 - (5 * a));
    }

    //hour
    noFill();
    strokeWeight(20);
    stroke(0, 0, 255);
    arc(300, 300, 360, 360, -HALF_PI, TWO_PI * (h / 12) - HALF_PI);

    //time
    noStroke();
    fill(0);
    textSize(30);
    text(nf(h % 12, 2, 0) + ":" + nf(m, 2, 0) + ":" + nf(s, 2, 0), 240, 285, 300, 300);
}

Jina Lee – Project 06

This was my draft about what I wanted my abstract clock to be like.

My clock is of a pizza and soda. At first, I wanted the hours to portrayed by slices, so as the hours go by, a slice of the pizza gets eaten. While doing so, I realized that the seconds and minutes did not have much space when the hours went by. The seconds and minutes were the topics of the pizza. Due to that issue, I changed it so that the minutes and seconds continues to be added on to the pizza, while the hours was a separate object. I created a soda so that the drink can do down as the time gets closer to 12:00. Once it hits 12:00, the drink is refilled. I really enjoyed this project because there was so much you could do with it.

sketch

//Jina Lee
//jinal2@andrew.cmu.edu
//Section E
//Project 06

var h;
var s;
var m;
var g;
var pepperonix = [];
var pepperoniy = [];
var greenPepperx = [];
var greenPeppery = [];

function setup() {
    createCanvas(480, 480);
    background(176, 223, 229);

    //seconds
    //clarifying there are 60 seconds
    for (i = 0; i <= 59; i++) {
        //random location of pepperonix
        pepperonix[i]= random(60, 270);
        //random location of pepperoniy
        pepperoniy[i] = random(70, 250);
    }

    //minutes
    //clarifying there are 60 minutes
    for (g = 0; g <= 59; g++) {
        //random location of pepperonix
        greenPepperx[g]= random(60, 270);
        //random location of pepperoniy
        greenPeppery[g] = random(70, 250);
    }
}

function draw() {
    //the hours are in 12 not 24
    h = hour() % 12;
    s = second();
    m = minute();
    //variable that fits the hours to specific area
    var mapH = map(h, 12, 0, height / 3, 0);

    //light blue
    background(176, 223, 229);

    //crust
    noStroke();
    fill(128, 90, 70);
    ellipse(170, 170, 300, 300);
    fill(174, 141, 103);
    ellipse(170, 170, 260, 260);

    //cheese
    fill(248, 222, 126)
    ellipse(170, 170, 200, 200);
    fill(248, 222, 126)
    ellipse(170, 170, 200, 200);
    ellipse(100, 100, 80, 80);
    ellipse(200, 130, 150, 150);
    ellipse(200, 200, 150, 200);
    ellipse(220, 170, 150, 200);
    ellipse(150, 170, 200, 200);
    ellipse(160, 200, 200, 200);

    //drink
    fill(255);
    rect(340, 260, 100, 200);
    fill(176, 223, 229);
    rect(350, 260, 80, 190);
    fill(63, 32, 6);
    rect(350, 303, 80, 147);

    //straw
    strokeWeight(9);
    stroke(141, 2, 31);
    line(420, 240, 370, 430);
    line(420, 240, 460, 240);

    //hour
    //as the hours go on the drink slowly goes away
    //once the hour hits 12, the drink refills
    fill(176, 223, 229);
	  noStroke();
	  rect(350, 303, 80, mapH);

    //straw
    strokeWeight(9);
    stroke(141, 2, 31);
    line(420, 240, 370, 430);
    line(420, 240, 460, 240);

    //ice cube
    push();
    rotate(PI / 10.0);
    noStroke();
    fill(200);
    rect(500, 250, 20, 20);
    rect(440, 160, 20, 20);
    pop();
    push();
    noStroke();
    rotate(PI / 5);
    fill(200);
    rect(510, 70, 20, 20);
    pop();

    //number of seconds on clock
    //each pepproni is a second
    for (i = 0; i < s; i++) {
        //pepperoni
		    fill(141, 2, 31);
		    ellipse(pepperonix[i], pepperoniy[i], 5, 5);
	  }

    //number of minutes on clock
    //each greenpepper is a minute
    for (g = 0; g < m; g++) {
        //green pepers
		    stroke("green");
        arc(greenPepperx[g], greenPeppery[g], 10, 10, 0, PI + QUARTER_PI);
	  }
}

project- 06 – clock

sketch


var circlecenter = 0;

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


function draw() {

    // variables for time, hour, minute, second
    var h = hour();
    var m = minute();
    var s = second();

    // variables for color mapping
    var colorR = map(h, 0, 23, 0, 255);
    var colorG = map(m, 0, 59, 0, 255);
    var colorB = map(s, 0, 59, 0, 255);
    // variables for lighter color mapping
    var lightcolorR = map(h, 0,23, 180, 255);
    var lightcolorG = map (m, 0, 59, 180, 255);
    var lightcolorB = map (s, 0, 59, 180, 255);

    // time keeping seconds
    var exactSecond = (h*60)+(m*60)+s;



    // background to change color as day progresses
    background(colorR, colorG, colorB);

    // interlapping pattern of circles that change color with the time
    for (var y = 0; y < height+50; y += width/2) {
        for (var x = 0; x < width+50; x += width/3) {
            fill(255-colorG,255-colorB, 255-colorR,30);
            ellipse(x, y, width/2, width/2);
            noStroke();
        }
    }

    // tiny little dots
    for (var y = 0; y < height+10; y += 2) {
        for (var x = 0; x < width+50; x += 2) {
            fill(lightcolorR,lightcolorG,lightcolorB);
            ellipse(x, y, 1, 1);
            noStroke();
        }
    }

    // mapping for exact second along the x axis 
    var secondMapX = (exactSecond, 0, 86400, 0, width);
    // mapping for exact second  along the y axis 
    var secondMapY = (exactSecond, 0, 86400, 0, height);

    // circle for current second
    ellipse(secondMapX,secondMapY,2,2);
    fill(255, 255, 255);

}

I wanted to create a clock that emphasized how time is a fluid progression of movement, difficult to conceptualize at times. I decided to do this through a slow gradient of color, that shifts with the time. I wanted to create something that would emphasis both the fluidity of time, as well as how it can be broken into the tiniest of chucks. I did this through overlaying the smallest of dots on top of the work.

Ideally, I would like to make a clock that was rooted to the moon cycles of Lithuania, where my family is from. I think it would be interesting to show how our ancestry, what we adopt from those before us roots us especially in the way it affects our unconscious and when we sleep. I had some trouble figuring out how to embed API data into processing, but I would love to learn this sometime.