sntong-Project-06-Abstract-Clock

sketch

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 06 - Abstract Clock


// center of the bacteria
var cx = 240;
var cy = 220;
//radius of the moving "dial" around the color ring
var dotR = 4;
// arrays used for color assignment for each hour on the color ring
var R = [234,225,141,115,242,225,214,238,243,42,98,125];
var G = [218,160,213,100,214,152,88,51,121,165,114,198];
var B = [133,60,230,115,185,146,128,85,105,141,100,127];
// angles used to divide the ring into 12 segements
var angles = [0,30,60,90,120,150,180,210,240,270,300,330];
var nVals = angles.length;

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

function draw() {
  background(0);
  var Min = minute();
  // white petri dish background for the bacteria
  fill(255);
  ellipse(cx,cy,350,350);

// drawing the color rings that will indicate hour
  for (var i = 0; i < nVals; i++) {
    stroke(R[i],G[i],B[i]);
    strokeWeight(10);
    strokeCap(SQUARE);
    arc(cx,cy,350,350,angles[i]-105,angles[i+1]-105);
    push();
    translate(240,220);
    rotate(-90);
    var eX = cos(angles[i])*170;
    var eY = sin(angles[i])*170;
    ellipse(eX,eY,10,10);
    pop();
  }

// make bacteria rotate each minute
  push();
  translate(cx,cy);
  angleMode(DEGREES);
  var mappedMin = map(Min,0,60,0,360);
  rotate(mappedMin);
  bacteria();
  pop();

  // isolate the "seconds" dot and the text from other fill and stroke statements above
  push();
  dot();
  textAlign(CENTER);
  text("Specimen :  #",190,430);
  text(month(),240, 430);
  text("-" , 260,430);
  text(day(), 270,430);
  text("-", 280,430);
  text(year()-2000,295,430);
  pop();


}

//bacteria at the middle of the petri dish
function bacteria(){
  var H = hour();
  // introduce some jitter because bacteria are always moving
  var jitterX = random(-.8,.8);
  var jitterY = random (-.7,.7);

// body of the bacteria
  rectMode(CENTER);
  strokeWeight(5);
  stroke(0);
  strokeCap(ROUND);
  // because the color ring only has 12 colors, the hour() value must be converted to within 12 hrs.
  if (H <= 12) {
    Hr = hour();
  } if(H > 12) {
    Hr = hour()-12;
  }

// the color assignment corresponds to the color ring and hour it indicates
  fill(R[Hr],G[Hr],B[Hr],200);
  rect(0+jitterX,0+jitterY,50,150,25);

  // little legs around the bacteria
  line(0,-75,0+jitterX,-110); // minute hand for time
  line(-10,73+jitterY,-13,80);
  line(10+jitterX,73,13,85+jitterY);
  line(-25+jitterX,50,-35+jitterX,50);
  line(-25,-60+jitterY,-30+jitterX,-65);
  line(-18,-70+jitterY,-26,-80);
  line(18+jitterX,-70,20+jitterX,-73);
  line(25,-30+jitterY,30,-30);
  line(25,-40,34,-40+jitterY);

  // little dots inside the bacterias, the guts
  noStroke();
  fill(0);
  ellipse(10+jitterX,10+jitterY,dotR,dotR);
  ellipse(-10+jitterX,-40+jitterY,dotR,dotR);
  ellipse(5+jitterX,-30+jitterY,dotR,dotR);
  ellipse(-10+jitterX,40+jitterY,dotR,dotR);
  ellipse(5+jitterX,55+jitterY,dotR,dotR);
  ellipse(-5+jitterX,30+jitterY,dotR,dotR);
  ellipse(5+jitterX,-20+jitterY,dotR,dotR);
  ellipse(-6+jitterX,13+jitterY,dotR,dotR);
}

// small dot that act as the "dial" for a microscope
// moves along the ring per second
function dot(){
  var Sec = second();
  var mappedSec = map(Sec, 0,60, 0,360)-90;
  var x = cos(mappedSec)*150;
  var y = sin(mappedSec)*150;
  fill(200);
  noStroke();
  ellipse(cx+x,cy+y,10,10);
}

For this assignment I imagined as if we are viewing into a microscope to see a small bacteria that is moving around in the petri dish. The longest “leg” on the bacteria is the minute hand. The bacteria changes color according to the hour color that is found on the color ring. The specimen name is the listed as month/date/year, which completes this “clock”. I took a long time to figure out the small adjustments for each element to work together (i.e those extra 90 degree changes and shifting) and align in color, but small sketches and tables help me organize the data before I input them to arrays.