Category: 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.”

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

}

sketch

//Michael Miller
//Section A
//mmiller5@andrew.cmu.edu
//Project-06

//Coordinates for pandas
var pandaX = [30, 90, 150, 210, 270, 330, 390, 450,
	      30, 90, 150, 210, 270, 330, 390, 450,
	      30, 90, 150, 210, 270, 330, 390, 450];
var pandaY = [298, 298, 298, 298, 298, 298, 298, 298,
	      455, 455, 455, 455, 455, 455, 455, 455, 
	      200, 200, 200, 200, 200, 200, 200, 200];

function setup() {
    createCanvas(480, 480);
    frameRate(1);
    noStroke();
}

function draw() {
    //relates time to ratio of circular motion for sun and moon
    var hourRat = ((hour() + (minute() / 60)) / 24) * 2 * PI;
    var bambooX = [];
    var bambooY = [];
    //darkens during night, brightens during day
    var bgCol = color(49, 49, constrain(160 + 120 * -cos(hourRat), 49, 200));
    background(bgCol);
    //sun
    fill(255, 255, 0);
    ellipse(width / 2 - sin(hourRat) * 200, height / 2 + cos(hourRat) * 200,
	    150, 150);
    //moon
    fill(230);
    ellipse(width / 2 + sin(hourRat) * 200, height / 2 - cos(hourRat) * 200,
	    100, 100);
    fill(bgCol);
    ellipse(width / 2 + sin(hourRat + .2) * 200,
	    height / 2 - cos(hourRat + .2) * 200,
	    75, 75);
    //midground
    fill(116, 116, 55);
    rect(0, 2 * height / 3 - 100, width, 2 * height / 3 - 100);
    //foreground
    fill(154, 116, 55);
    rect(0, 2 * height / 3, width, 2 * height / 3);
    //time tracking mechanics
    bambooFall(width / 2, 2 * height / 3);
    //every hour, a new panda comes to feast on the accumulated bamboo
    for(var i = 0; i < hour(); i ++) {	
	panda(pandaX[i], pandaY[i]);
    }
    bambooGrow(width / 2, 2 * height / 3);
}
//central bamboo grows one stalk per second, making happy pandas
function bambooGrow(x, y) {
    for(var sec = 0; sec < second(); sec ++) {
	    fill(120, 180, 56);
	    rect(x, y - 4 * sec, 3, 3);
	    fill(128, 75, 35);
	    rect(x, y - 4 * sec - 1, 3, 1);
	}
}
//when bamboo gets too tall, it falls in a half circle, stacking up every minute
function bambooFall(x, y) {
    for(var min = 0; min < minute(); min ++) {
	fill(177, 200, 60);
	push();
	translate(x, y);
	rotate(radians(2 + (min / 60) * 176));
	rect(0, 0, 180, 3);
	pop();
    }
}
//panda and its body parts
function panda(x, y) {
    pandaBody(x, y);
    pandaHead(x, y - 40);
}
function pandaHead(x, y) {
    fill(255);
    ellipse(x, y, 50, 50);
    fill(0);
    ellipse(x - 20, y - 20, 15, 15);
    ellipse(x + 20, y - 20, 15, 15);
    ellipse(x - 10, y, 10, 10);
    ellipse(x + 10, y, 10, 10);
    ellipse(x, y + 7, 8, 6);
    fill(255);
    ellipse(x - 9, y - 1, 2, 4);
    ellipse(x + 9, y - 1, 2, 4);
}
function pandaBody(x, y) {
    fill(255);
    ellipse(x, y, 55, 50);
    fill(0);
    ellipse(x - 18, y - 12, 20, 25);
    ellipse(x + 18, y - 12, 20, 25);
    ellipse(x - 19, y + 13, 25, 23);
    ellipse(x + 19, y + 13, 25, 23);
}

Yep, more bamboo.  Why?  I was inspired by the exceptional speed at which bamboo grows, but then I thought, “Now what if it grew super fast?”  The consequences of lightning bamboo are staggering — potential building material, fuel, and of course, food for pandas!  Imagine an infinity ice cream dispenser, except that you never get full (or fat, we’ll ignore that too) — that’s exactly what this is for pandas!  I think word of this would spread pretty quickly, but pandas are slow so they take a while to get there (1 hour exactly, actually.  Punctual pandas).

Now I don’t actually do all that much art, so my product probably doesn’t look as amazing as it could — the pandas are a buncha colored circles — but I think it works.  The coding was pretty fun for this project, and it took me some time to figure out how to make the time countable.  I probably would’ve been more comfortable doing something more abstract, but I thought I’d give this a try, and I think it worked out in the end.

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.