Anthony Ra – Project 06 – Abstract Clock

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-06 */

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

function draw() {

  var phoneStart = 130;
  var phoneEnd = 220;
  var screenWidth = 220;
  var screenHeight = 400;

/* phone */
  noStroke();
  fill(0);
  rect(127.5, 15, 225, 450, 20);
  fill(180);
  rect(phoneStart, 40, phoneEnd, 400, 10);

/* phone lenses */
  stroke(50);
  strokeWeight(3);
  line(width/2 - 20, 27.5, width/2 + 20, 27.5);
  noStroke();
  fill(60);
  ellipse(width/2 + 60, 27.5, 10, 10);
  ellipse(width/2 + 80, 27.5, 5, 5);

  noStroke();

/* grid lines on screen */
  for (var i = 140; i <= 340; i += 10) {
    stroke(255);
    strokeWeight(0.25);
    line(i, 40, i, 440);
  }

  for (var i = 40; i <= 430; i += 10) {
    stroke(255);
    strokeWeight(0.25);
    line(phoneStart, i, 350, i);
  }

/* current time variables */
  var D = day();
  var H = hour();
  var M = minute();
  var S = second();

/* rectangle widths */
  var mappedD = map(D, 0, 30, 0, screenWidth);
  var mappedH = map(H, 0, 23, 0, screenHeight);
  var mappedM = map(M, 0, 59, 0, screenHeight);
  var mappedS = map(S, 0, 59, 0, screenWidth);

  fill(90, 255, 70);
  rect(phoneStart, 310, mappedD, 10);
  fill(255, 204, 0);
  rect(150, 40, 10, mappedH);
  fill(255, 100, 120);
  rect(300, 40, 10, mappedM);
  fill(100, 120, 255);
  rect(phoneStart, 150, mappedS, 10);

/* apps */
  noStroke();
  /* facebook */
  fill(50, 80, 200);
  rect(width/2 - 100, 270, 35, 35, 10);
  /* snapchat */
  fill(255, 230, 0);
  rect(width/2 - 50, 270, 35, 35, 10);
  /* gmail */
  fill(255);
  rect(width/2 + 15, 270, 35, 35, 10);
  stroke(255, 0, 0);
  strokeWeight(5);
  line(258, 273, 272.5, 285);
  line(272.5, 285, 287, 273);
  /* espn */
  noStroke();
  fill(255);
  rect(width/2 - 50, 220, 35, 35, 10);
  stroke(255, 0, 0);
  strokeWeight(5);
  line(203, 230, 218, 230);
  line(200, 237, 215, 237);
  line(200, 237, 197, 244);
  line(197, 244, 212, 244);
  /* messenger */
  noStroke();
  fill(255);
  rect(width/2 + 15, 220, 35, 35, 10);
  fill(80, 120, 255);
  ellipse(width/2 + 32.5, 237.5, 30, 25);
  triangle(262, 237.5, 260, 252, 285, 237.5);
  /* spotify */
  noStroke();
  fill(0);
  rect(width/2 + 65, 270, 35, 35, 10);
  fill(0, 180, 0);
  ellipse(width/2 + 82.5, 287.5, 30, 30);
  stroke(0);
  strokeWeight(4);
  beginShape();
  curveVertex(315, 282);
  curveVertex(315, 282);
  curveVertex(322.5, 280);
  curveVertex(330, 284);
  curveVertex(330, 284);
  endShape();
  strokeWeight(3);
  beginShape();
  curveVertex(315, 288);
  curveVertex(315, 288);
  curveVertex(321, 286);
  curveVertex(328, 290);
  curveVertex(328, 290);
  endShape();
  strokeWeight(2);
  beginShape();
  curveVertex(317, 294);
  curveVertex(317, 294);
  curveVertex(321, 292);
  curveVertex(326, 295);
  curveVertex(326, 295);
  endShape();
  /* phone */
  noStroke();
  fill(0, 180, 0);
  rect(width/2 - 100, 385, 35, 35, 10);
  stroke(255);
  strokeWeight(5);
  beginShape();
  curveVertex(152, 394);
  curveVertex(152, 394);
  curveVertex(150, 400);
  curveVertex(160, 410);
  curveVertex(165, 407);
  curveVertex(165, 407);
  endShape();
  /* contact */
  noStroke();
  fill(230, 140, 0);
  rect(width/2 - 50, 385, 35, 35, 10);
  fill(255);
  ellipse(207.5, 400, 17, 20);
  triangle(208, 405, 196, 415, 220, 415);
  /* message */
  noStroke();
  fill(255, 0, 0);
  rect(width/2 + 15, 385, 35, 35, 10);
  fill(255);
  rect(width/2 + 22, 390, 23, 20, 5);
  triangle(width/2 + 22, 405, width/2 + 20, 415, width/2 + 26, 410);
  /* camera */
  noStroke();
  fill(255, 120, 255);
  rect(width/2 + 65, 385, 35, 35, 10);
  fill(255);
  rect(width/2 + 70, 395, 25, 18);
  noFill();
  stroke(255);
  strokeWeight(3);
  rect(width/2 + 75, 390, 15, 10);
  noStroke();
  fill(255, 120, 255);
  ellipse(322.5, 404.5, 12, 12);
  /* notification */
  noStroke();
  fill(255, 0, 100);
  ellipse(width/2 - 70, 275, 15, 15);
  ellipse(width/2 - 20, 275, 15, 15);
  ellipse(width/2 + 45, 275, 15, 15);
  ellipse(width/2 + 45, 225, 15, 15);
  fill(255);
  text('2', width/2 - 72, 278);
  text('1', width/2 - 22, 278);
  text('8', width/2 + 43, 278);
  text('3', width/2 + 43, 228);
/* Verizon Wireless */
  noStroke();
  fill(0);
  textSize(10);
  text('Verizon Wireless', 140, 50);



}

For some reason, the background screen for the Google Nexus One popped into my head. It is a pixelated background with a series of primary-colored (and yellow) lines moving through the screen.

I replicated that onto my current smart phone and mapped it in a way that the viewer would read the time in an abstract manner. Since most of us look at out phones to look at the time, it was a challenge for me look into way to visually tell time.