Kyle Leve-Project-06-Abstract-Clock

sketch

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-06-Abstract-Clock

var spacing = 30;
var angle = 0;
var H;
var M;
var S;
var r;
var g;
var b;

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

function draw() {
	var H = hour(); // Time variable
	var M = minute(); // Time variable
	var S = second(); // Time variable
	var r = random(0, 255); // Random color value
	var g = random(0, 255); // Random color value
	var b = random(0, 255); // Random color value

	if (S === 0) { // Sets star in the center to blink random colors every minute
		fill(r, g, b);
		textSize(70);
		text('*', width / 2 - 13, height / 2 + 37);
	}

	for (i = 0; i <= width; i += spacing) { // Sets diagonal vertical star line
		for (i = 0; i <= height; i += spacing) {
			if (H < 12) { // Makes star color white if a.m
				fill(255);
				textSize(30);
				text('*', i - 20, i);
			} else if (H >= 12) { // Makes star color yellow if p.m
				fill('yellow');
				textSize(30);
				text('*', i - 20, i);
			}
			if (M === 0 & S <= 5) { // Makes star line blink random colors every hour
				fill(random(r, g, b))
				textSize(30);
				text('*', i - 20, i);
			}
		}
	}
	for (i = 0; i <= width; i += spacing) { // Sets other diagonal star line
		for (i = 0; i <= height; i += spacing) {
			if (H < 12) { // Makes star color white in a.m
				fill(255);
				textSize(30);
				text('*', i + 10, height - i);
			} else if (H >= 12) { // Makes star color yellow in p.m
				fill('yellow');
				textSize(30);
				text('*', i + 10, height - i);
			}
			if (M === 0 & S <= 5) { // Makes star line blink random colors every hour
				fill(random(r, g, b))
				textSize(30);
				text('*', i + 10, height - i);
			}			
		}
	}
	// Every donut is set to draw after the previous one and each donut is set to be drawn in about 5 seconds

	if (S >= 0 & S < 5) { // Creates top red donut
		fill('red');
		push();
		translate(width / 2, height / 4);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 5 & S < 10) { // Creates right red donut
		fill('red');
		push();
		translate(width * 0.75, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 10 & S < 15) { // Creates bottom red donut
		fill('red');
		push();
		translate(width / 2, height * 0.75);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 15 & S < 20) { // Creates left red donut
		fill('red');
		push();
		translate(width / 4, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 20 & S < 25) { // Creates top purple donut
		fill('purple');
		push();
		translate(width / 2, height / 4);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
		if (S >= 25 & S < 30) { // Creates right purple donut
		fill('purple');
		push();
		translate(width * 0.75, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 30 & S < 35) { // Creates bottom purple donut
		fill('purple');
		push();
		translate(width / 2, height * 0.75);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 35 & S < 40) { // Creates left purple donut
		fill('purple');
		push();
		translate(width / 4, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 40 & S < 45) { // Creates top orange donut
		fill('orange');
		push();
		translate(width / 2, height / 4);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
		if (S >= 45 & S < 50) { // Creates right orange donut
		fill('orange');
		push();
		translate(width * 0.75, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 50 & S < 55) { // Creates bottom orange donut
		fill('orange');
		push();
		translate(width / 2, height * 0.75);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
	if (S >= 55 & S < 60) { // Creates left orange donut
		fill('orange');
		push();
		translate(width / 4, height / 2);
		rotate(radians(angle / 5));
		textSize(50);
		text('*', 0, 0);
		pop();
		angle = angle + 6;
	}
}

I found this project to be a little difficult because I did not have an initial idea. I decided to make something where the image would continuously change colors based off of the time. The overlapping donuts represent every 20 seconds and the stars flash random colors either every minute or every hour. In addition, the diagonal star lines are either white or yellow depending on if it is a.m or p.m respectively. This project allowed me to get more comfortable with time functions and setting things up within certain time constraints.

My initial sketch once I came up with an idea.

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.

Nexus One wallpaper

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.

sketch

Jessica Timczyk – Project 06 – Abstract Clock

Cookie Clock

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu 
// Project-06-Abstract Clock

// Global Variables
var chipX = 0; // x position of choco chip
var chipY = 0; // y positiom of choco chip
var chunkX = 0; // x position of choco chunk
var chunkY = 0; // y position of choco chunk

//--------------------------
function setup() {
    createCanvas(300, 300);
    //millisRolloverTime = 0;
    
    frameRate(1); // the chips change position every second so you can tell when a second goes by
}

//--------------------------
function draw() {
    background(183, 225, 255);
    
    // circular cookie shape
    strokeWeight(3);
    fill(206, 149, 75);
    ellipse(width / 2, height / 2, 250, 250);

    // bite out of cookie
    fill(183, 225, 255);
    noStroke();
    ellipse(width / 2 - 120, height / 2, 30, 35);
    ellipse(width / 2 - 115, height / 2 - 17, 30, 27);
    ellipse(width / 2 - 120, height / 2 - 30, 30, 35);

    // Crumbs at bite
    stroke(60, 46, 16);
    fill(206, 149, 75);
    ellipse(width / 2 - 135, height / 2 - 15, 12, 12);
    ellipse(width / 2 - 117, height / 2 - 5, 6, 6);
    ellipse(width / 2 - 120, height / 2 - 30, 9, 9);
    ellipse(width / 2 - 136, height / 2 + 35, 15, 15);
    ellipse(width / 2 - 125, height / 2 + 50, 6, 6);
    ellipse(width / 2 - 138, height / 2 + 65, 5, 5);
    ellipse(width / 2 - 140, height / 2 + 5, 7, 7);
    ellipse(width / 2 - 115, height / 2 - 65, 6, 6);
    ellipse(width / 2 - 128, height / 2 - 60, 9, 9);

    // top right corner crumbs
    ellipse(245, 26, 7, 7);
    ellipse(265, 37, 17, 17);
    ellipse(255, 55, 10, 10);

    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // number time text
    fill(255);
    text("   "   + H + "  : ", 5, 22);
    text("   " + M + "  : ", 35, 22);
    text("   " + S, 65, 22);

    // chocolate chips for the number of minutes
    for (var i = 0; i < M; i ++) {
        noStroke();
        var chipX = random(65, 240);
        var chipY = random(65, 240);
        fill(87, 64, 16);
        ellipse(chipX, chipY, 10, 10);
    }

    // chocolate chunks for the number of hours
    for (var j = 0; j < H; j ++) {
        fill(52, 39, 11);
        stroke(33, 25, 8);
        var chunkX = random(70, 220);
        var chunkY = random(70, 220);
        rect(chunkX, chunkY, 11, 22);
    }
    stroke(0);
}

I really enjoyed this project, it was fun to try to think of a way to convey time unconventionally. I finally came up with making a “cookie clock” after thinking about what I wanted to do and I am happy with how the clock turned out, looking very cartoonish and almost comical. It took me a bit to figure out how I wanted to represent each variable, hours, minutes and seconds and I eventually decided to, rather than physically represent seconds, have the seconds be represented by the pace of the movement of the chocolate chips and chunks. I tried briefly to make the cookie 3D but it ended up being too complicated for this project, but I would like to learn how to do that in the future.

My sketch for the cookie clock.

Curran Zhang- Project 06 – Abstract Clock

sketch

/*Curran Zhang
curranz
Project 6
Section A
*/

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

function draw(){
  background(204,230,255);
  angleMode(DEGREES);
  var hr = hour();
  var min = minute();
  var sec = second();
  var rSec = map(sec,0,59,50,width - 50);
  var rSec1 = map(sec,0,59,width - 50, 50);
  var rMin = map(min,0,59,50,width - 50);
  var rMin1 = map(min,0,59,width - 50,50);
  var rHr = map(hr,0,23,50,width - 50);

  //Sun(based on the hours)
    fill(255, 200, 60)
    ellipse(rHr, 100,50,50);

  //Sun Inner Rays(based on the minutes)
    for (var i = 1; i <= min; i++) {
      var x = 0
      push();
      translate(rHr,100);
      rotate(180);
      rotate(6 * i);
      stroke(255, 204, 51);
      line(0,0,0,50)
      pop();
    }

  //Sun Outer Rays(based on the seconds)
    for (var i = 1; i <= sec; i++) {
      var x = 0
      push();
      translate(rHr,100);
      rotate(180);
      rotate(6 * i);
      stroke(255, 234, 81);
      strokeWeight(1.5);
      line(rSec,0,0,50)
      pop();
    } 

  //Clouds(based on the minutes)
    fill(275);
      ellipse(rMin - 20,200, 50,50);
      ellipse(rMin - 40,220,35,30);
      ellipse(rMin,210,90,60);
      ellipse(rMin + 35,200,40,40);
      ellipse(rMin + 40,220,80,50);

      ellipse(rMin1 - 20,200, 50,50);
      ellipse(rMin1 - 40,220,35,30);
      ellipse(rMin1,210,90,60);
      ellipse(rMin1 + 35,200,40,40);
      ellipse(rMin1 + 40,220,80,50);

  //Tree
    fill(165,113,100);
      beginShape();
      vertex(530,0,590,0);
      vertex(530,0);
      vertex(540,150);
      vertex(540,180);
      vertex(530,340);
      vertex(590,340);
      vertex(580,180);
      vertex(580,150);
      vertex(590,0);
      endShape();

  //Land
    fill(255, 209, 179);
     beginShape();
      vertex(0,550);
      vertex(280,375);
      vertex(283,366);
      vertex(325,360);
      vertex(335,350);
      vertex(360,340);
      vertex(385,326);
      vertex(470,330);
      vertex(485,333);
      vertex(527,331);
      vertex(553,326);
      vertex(558,324);
      vertex(584,326);
      vertex(600,330);
      vertex(600,600);
      vertex(0,600);
      endShape(CLOSE);
 
  //Sea
    fill(0,204,255);
      noStroke();
      rect(0,400,600,300);

    for (var i = 0; i <= 10; i++) {
      fill(0,204,255);
      stroke(275);
      strokeWeight(1);

      if (i % 2 == 0) 
        {arc(30 + 60 * i ,400,60,15, 180, 0)
        }
        else { 
          if (i < 5) 
          {fill(204,230,255);
          arc(30 + 60 * i ,400,60,15, 0,180)
          }
          else{
            fill(255, 209, 179);
            arc(30 + 60 * i ,400,60,15, 0,180)
          } 
        }
    }

  //SeaFloor
    noStroke();
    fill(0,100,102);
      beginShape();
      vertex(0,557);
      vertex(10,554);
      vertex(31,540);
      vertex(40,540);
      vertex(57,538);
      vertex(93,545);
      vertex(133,557);
      vertex(182,548);
      vertex(231,544);
      vertex(241,546);
      vertex(325,584);
      vertex(403,571);
      vertex(425,567);
      vertex(469,567);
      vertex(518,548);
      vertex(580,534);
      vertex(600,526);
      vertex(600,600);
      vertex(0,600);
      endShape(CLOSE);

  //Fish (based on the seconds)
    fill('orange')
      ellipse(rSec, 500,40,25);
      triangle(rSec - 10,500,rSec - 30,515,rSec - 30,480);

    fill(255,102,204)
      ellipse(rSec1, 460,40,25);
      triangle(rSec1 + 10,460,rSec1 + 30,475,rSec1 + 30,445);

  //Text
    fill(0);
      text( "Hour:" + hr ,40,560);
      text( "Minute:" + min ,40,575);
      text( "Second:" + sec ,40,590);
}


For this project, I wanted to design a clock that shows the environment changing through time. Given how I previously done a mountain scenery, I thought it would be nice to create a beach scenery. The Sun itself has component that is linked to the hour, minute, and second. There are also other components to help show the minute and seconds more clearly.

Jaclyn Saik- Project 06

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Assignment-06-Project
*/




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


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

    var skin = ("OliveDrab");
    var earPositionX = 390;
    var earPositionY = 200;
    var noseW = 10;
    if ((S % 2) > 0) { //if statement that changes variables based on whether seconds are odd or even 
        earPositionX = 390; 
        earPositionY = 200;
        noseW = 10; //variable that changes nostril size
    } else if ((S % 2) == 0) {
        earPositionX = 380;
        earPositionY = 190;
        noseW = 15;
    }
   


    
    
    var lidPosition = 180-(map(H, 0, 23, 0, 180)); //position of eyelids, how wide the eyes are opened 
    var mouthSize = map(M, 0, 59, 10, 300); //map to create gradual transition in size of mouth

    
    //background elements
    noStroke(); 
    fill("DarkMagenta");
    ellipse(150, 200, 580, 690);
    fill("Purple")
    ellipse(150, 200, 480, 530);
    fill("DarkOliveGreen");
    rect(20, 300, 260, 300);


    //the face:
    fill(skin)
    ellipse(150, 200, 450, 500);

    fill("DarkOliveGreen");
    ellipse(40, 135, 140, 190)
    ellipse(230, 135, 140, 190)

    fill("white");
    ellipse(40, 130, 130, 180)
    ellipse(230, 130, 130, 180)

    fill(0);
    ellipse(40, 130, 50, 80);
    ellipse(230, 130, 50, 80);

    //mouth
    stroke("DarkGreen");
    strokeWeight(6);
    fill("black")
    arc(140, 240, 300, mouthSize, 0, PI, CHORD);
    noStroke();

    //ear 
    fill(skin);
    ellipse(earPositionX, earPositionY, 80, 100) //relies on seconds for x and y position

    //eyelids
    fill(skin)
    rect(-30, 40, 140, lidPosition); //eyelids gradually open as the hours get higher/day goes on 
    rect(160, 40, 140, lidPosition); //rely on mapped position variable declared above

    //right eyelash
    stroke(0);
    strokeWeight(4);
    line(163, 40+lidPosition, 300, 40+lidPosition+7); 
    line(163, 40+lidPosition, 310, 40+lidPosition-2);

    //left eyelash
    line(105, 40+lidPosition, -30, 40+lidPosition+7); 
    line(105, 40+lidPosition, -30, 40+lidPosition+3);
    line(105, 40+lidPosition, -30, 40+lidPosition-2);
    

    //eyebrow
    stroke("Purple");
    strokeWeight(8);
    noFill();
    arc(40, 60, 130, 60, PI, 0)
    arc(230, 60, 130, 60, PI, 0)

    //nose

    noStroke();
    fill(0);
    ellipse(125, 200, noseW, 20);
    ellipse(150, 200, noseW, 20);



}

 

This project was an interesting way to create an animation that relied on the entire length of the day to complete, instead of confined within the frame rate we usually declare. I had a lot of different ideas for representing time after browsing that blog post about the different ways that time was represented before modern clocks. I was drawn to the use of sunlight to create elaborate timekeeping sculptures: to me, they looked as much like tools as beautiful works of art.

My sketches. I played with the idea of using sunflowers and other solar imitations, but I really liked how funny a face could be. I was inspired by all of the moving features on a face to accommodate different units of time.

However, for this project  I wanted to include humor and pull myself away from using traditional numerical qualities to tell time. I decided on a face early on, and as I built this person I felt like making this project Halloween-themed is a fitting start to October. This was also my first time really manipulating the map function, which I’m grateful for because now I have a much better grasp on how to use it.

In this clock, I made the witch’s eyelids reliant on the hour: when it is very early in the morning, her eyes are barely open, but as the day progresses they get wider and wider. Her muppet mouth is reliant on the minute, so her mouth gets progressively wider as the minutes increase, and resets at zero every hour. Her ears and nostrils are designed to be more timekeeping devices, as they tick back and forth with each second.

 

Shirley Chen-Project-06-Abstract Clock

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project 06




var xS = []; //Create List for Second Count
var yS = [];
var xM = []; //Create List for Minute Count
var yM = [];
var xH = []; //Create List for Hour Count
var yH = [];
var dxS = []; // Velocity in x Direction for Second Bubbles
var dyS = []; // Velocity in y Direction for Second Bubbles
var dxM = []; 
var dyM = []; 
var dxH = []; 
var dyH = []; 

function setup() {
    createCanvas(400, 400);  
// Randomly Assign Position and Velocity for Second Bubbles
  for (var i = 1; i < 61; i++) { 
        xS[i] = random(100, 300);
        yS[i] = random(10, 300);
        dxS[i] = random(-5, 5);
        dyS[i] = random(-5, 5);
    }
//Randomly Assign Position and Velocity for Minute Bubbles  
    for (var i = 1; i < 61; i++) { 
        xM[i] = random(100, 300);
        yM[i] = random(20, 300);
        dxM[i] = random(-5, 5);
        dyM[i] = random(-5, 5);
    }
//Randomly Assign Position and Velocity for Hour Bubbles
    for (var i = 1; i < 25; i++) { 
        xH[i] = random(30, 400);
        yH[i] = random(30, 300);
        dxH[i] = random(-5, 8);
        dyH[i] = random(-5, 8);
    }
}

function draw() {
  var H = hour();
  var M = minute();
  var S = second();
  var cirC = [];
  var colR = 100;
  var colG = 150;
  var colB = 255;
  var launcherLength1 = 80;
  var launcherLength2 = 90;
  background(241, 223, 224);
  frameRate(8);
  noStroke();
  fill(148, 134, 186);
//Draw the Launcher
  ellipse(40, 350, 70, 70); 
  quad(60, 330, launcherLength1, 320, launcherLength2, 350, 60, 380);
//Constrain the Hours to 0 - 12
  if (H >= 12){
    H = H % 12
  }

  for (var i = 1; i < S+1; i++) { 
//Draw one Small Bubble for Every Second
//Color Become Darker for Each Bubble
    colR += 10;
    fill(colR, 183, 205);
    ellipse(xS[i], yS[i], 10);
    xS[i] += dxS[i];
    yS[i] += dyS[i];
    if (xS[i] + 10 > width || xS[i] - 10 < 90){
      dxS[i] = - dxS[i];
    }
    if (yS[i] + 10 > height || yS[i] - 10 < 1){
      dyS[i] = - dyS[i];
    }
    if (S % 2 == 0){
      fill(148, 134, 186);
      quad(60, 330, launcherLength1+10, 310, launcherLength2+10, 340, 60, 380);
//Make the Launcher Move Its "Mouth" for Every Second  
    }
  }
  for (var i = 1; i < M+1; i++) { 
//Draw one Midium Bubble for Every Minute
//Color Become Darker for Each Bubble
    colG -= 10;
    fill(255, colG, colG);
    ellipse(xM[i], yM[i], 20);
    xM[i] += dxM[i];
    yM[i] += dyM[i];
    if (xM[i] + 20 > width || xM[i] - 20 < 90){
      dxM[i] = - dxM[i];
    }
    if (yM[i] + 20 > height || yM[i] - 20 < 1){
      dyM[i] = - dyM[i];
    }
  }
  for (var i = 1; i < H+1; i++) {
//Draw one Large Bubble for Every Hour
//Color Become Darker for Each Bubble
    colB -= 60;
    fill(255, 200, colB);
    ellipse(xH[i], yH[i], 30);
    xH[i] += dxH[i];
    yH[i] += dyH[i];
    if (xH[i] + 30 > width || xH[i] - 30 < 0){
      dxH[i] = - dxH[i];
    }
    if (yH[i] + 30 > height || yH[i] - 30 < 0){
      dyH[i] = - dyH[i];
    }
  }
//Draw the Stand for the Bubble Launcher
fill(252, 205, 86);
rect(30, 355, 30, 40, 10, 10);
fill(249, 133, 133);
text('BOOM!', 30, 300);
}

For this project, I represent second, minute, and hour with bubbles with different sizes and colors. Using the for loop command, for each second there is a new small bubble coming up. I also change the RGB parameter gradually for each second, so the second bubble will change from blue to purple as time passing. Similarly, I also use for loop command to represent minute and hour with bubbles with different diameters. Moreover, I draw a “launcher” and control its outlet to contract or extend for each change in second. For odd number of seconds, its “mouth” will contract; for even number of seconds, it will extend. I also constrain the movement of the bubbles so that they bounce back when they hit the boundary.

Kevin Riordan Project-06-Abstract-Clock-Section C

kzr clock

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
Project_06_C*/
var prevSec;
var millisRolloverTime;
function setup() {
    createCanvas(480,480);
    millisRolloverTime = 0;
}

function draw() {
    background(247,202,201);
    var hours = hour();
    var minutes = minute();
    var seconds = second();
    angleMode(DEGREES);
    //making seconds smooth
    if (prevSec != seconds) {
        millisRolloverTime = millis();
    }
    prevSec = seconds;
    var mills = floor(millis() - millisRolloverTime);
    var secondsFrac = seconds + (mills / 1000);
    //making a 12 hour clock instead of a 24 hour clock
    if (hours >= 12) {
        hours = hours % 12;
    }
    //abstract hours
    push();
    translate(width/2,height/2);
    rotate(-90);
    fill(200,120,120,80);
    noStroke();
    //making arcs for the hour triangles; k=0 corresponds to the exact hour (midpoint of group of arcs)
    for (var k = 2; k >= 0; k -= 0.25) {
        fill(220 - (30 * k),120,120,80);
        arc(0,0,width * 1.5,height * 1.5,30 * (hours - k),30 * (hours + k));
    }
    pop();
    //abstract minutes
    var minutesMapped = map(minutes,0,59,0,width);
    var minutesColor = map(minutes,0,59,0,255);
    var columnWidth = width/61;
    var changeHeight = 0;
    fill(minutesColor - 50,100,minutesColor,25);
    noStroke();
    //left side of minutes pyramid
    for(var columns = -1; columns < 30; columns++) {
        push();
        translate(0,height);
        rect(columns * columnWidth,0,columnWidth,-changeHeight);
        pop();
        changeHeight+=minutesMapped/30;
    }
    //middle bar, length corresponds to minutes amount
    fill(minutesColor,150,minutesColor,90);
    rect(width/2 - columnWidth/2,height,columnWidth,-minutesMapped);
    //right side of minutes pyramid
    fill(minutesColor - 50,100,minutesColor - 30,25);
    for(var columns = 31; columns < 61; columns++) {
        changeHeight-=minutesMapped/30;
        push();
        translate(0,height);
        rect(columns * columnWidth,0,columnWidth,-changeHeight);
        pop();
    }
    //abstract seconds
    var secondsFracMapped = map(secondsFrac,0,59,0,width/2 - 15);
    var minutesMapped = map(minutes,0,59,0,width/2);
    //goes outwards from center at 0 seconds to the edge at 60 seconds
    if (minutes%2 == 0) {
    for(j = 0; j <= 360; j += 10) {
        var jColor = j;
        jColor = constrain(jColor,50,255);
        for(i = 0; i <= 360; i += 10) {
            push();
            translate(width/2,height/2);
            rotate(i);
            fill(jColor);
            noStroke();
            ellipse(j,-secondsFracMapped,4,4);
            rotate(i / 2);
            fill(100,60,60,25);
            rect(j,-secondsFracMapped / 2,3,3 + i);
            pop();
        }
    }
    }
    //odd minutes go into the center from edge at 0 seconds to center at 60.
    else {
    for(j = 0; j <= 360; j += 10) {
        var jColor = j;
        jColor = constrain(jColor,50,255);
        for(i = 360; i >= 0; i -= 10) {
            push();
            translate(width/2,height/2);
            rotate(i);
            fill(jColor);
            noStroke();
            ellipse(j,(width/2) - secondsFracMapped,4,4);
            rotate(i / 2);
            fill(100,60,60,25);
            rect(j,-secondsFracMapped / 2,3,3 + i);
            pop();
        }
    }
    }
}

I started with a very badly drawn sketch of what I wanted to do.

initial sketch at 0 seconds, and at 59/60 seconds

This project made me think about timing a lot. I started by doing the seconds, and used the example code to make it smooth using milliseconds rollover time. The seconds go out for even minutes, and in for odd minutes. I could not get the transition from going in to going out exactly right (as well as the transition from out to in), but I am okay with how it turned out. The minutes are represented by a pyramid at the bottom that grows and changes color as the minutes increase. The hours are represented in a fairly standard way, with a bunch of arcs that converge into a line that represents the hour hand on a traditional clock. This project made me think about how much stuff I can change over time, and I learned about how to change colors over a gradient as well.

Kevin Thies – Project 6 – Abstract clock

sketch

// Kevin Thies
// kthies@andrew.cmu.edu
// Section C
// Abstrack Clock

var HDEG = 360 / 24;        // constants define ration of how many degrees
var MDEG = 360 / 60;        // around a circle per unit
var SDEG = 360 / 60;
var MSDEG = 360 / 1000;

var hDim = 50;              // define the dimension of each planetoid
var mDim = 25;
var sDim = 12;
var msDim = 6;

var starNum = 70;     // how many stars are in the background
var starX = [];       // empty arrays to etermine their size and position
var starY = [];       // an how often they twinkle
var starSize = [];
var tick = [];


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

// fill empty arrays with location and size data
  for(var stars = 0; stars < starNum; stars++) {
      starX.push(random(10, 470));
      starY.push(random(10, 470));
      starSize.push(random(3, 7));
      tick.push(round(random(0, 10)));
  }
}

function draw() {

    angleMode(DEGREES); // this makes things easier for later
    background(20);
    push();

    // add a new tick value for each star, if tick is randomly 0, twinkle
    for(var stars = 0; stars < starNum; stars++) {
        tick.shift(1);
        tick.push(round(random(0, 10)));
        if(tick[stars] == 0) {
            starSize[stars] = random(3, 7);
        }

    // place stars
        fill(70);
        ellipse(starX[stars], starY[stars], starSize[stars], starSize[stars]);
    }

//==================== Hours ==============================================
    translate(240, 240); // moving origin to center of screen
    rotate(HDEG * hour());

    stroke(50, 0, 0);
    strokeWeight(3);
    noFill();
    line(0, 0, 0 , 120);    // make the hour hand
    ellipse(0,0, 240, 240); // make the orbit

    noStroke();
    fill("orange");
    ellipse (0, 0, hDim, hDim); // make the hour planetoid

//==================== Minutes ============================================
    translate(0, 120); // moving origin to end of hour hand
    rotate(MDEG * minute());

    stroke(50, 0, 0);
    strokeWeight(3);
    noFill();
    line(0, 0, 0, 50);      // make the minute hand
    ellipse(0,0, 100, 100); // make the orbit

    noStroke();
    fill("lightBlue");
    ellipse (0, 0, mDim, mDim); // make the minute planetoid

//==================== Seconds ============================================
    translate(0, 50); // moving origin to end of minute hand
    rotate(SDEG * second());

    stroke(50, 0, 0);
    strokeWeight(3);
    noFill();
    line(0, 0, 0, 20);      // make the second hand
    ellipse(0, 0, 40, 40);  // make the orbit

    noStroke();
    fill("mediumAquamarine");
    ellipse (0, 0, sDim, sDim); // make the second planetoid

//==================== Milliseconds =======================================
    translate(0, 20); // moving origin to end of second hand
    rotate(MSDEG * millis());

    stroke(50, 0, 0);
    strokeWeight(3);
    noFill();
    line(0, 0, 0, 10);      // make the millisecond hand
    ellipse(0, 0, 20, 20);  // make the orbit

    noStroke();
    fill("fireBrick");
    ellipse (0, 0, msDim, msDim);   // make the millisecond planetoid


    // add a little dot on the end of that hand
    translate(0, 10);
    fill("khaki");
    ellipse(0, 0, 4, 4);

    pop();
}

Orbit clocks are cool with their circles inside circles, but they’re easy to read and overdone, so I made a clock where each unit orbits the next highest one. The centermost one is hours, orbited by minutes, orbited by seconds, orbited by milliseconds.
It was quite a challenge putting this together, as some arrays were being really finnicky, so even though the hours, minutes, seconds, and milliseconds could have been one operation on an array, I had to brute-force it. However, what would a space-y clock be without some twinkling stars!

As far as clocks go, I like how this ended up looking, even though it would take more effort than I’d be willing to put in to read.

my first concept sketch

Eliza Pratt – abstract clock

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-06
*/


var fluffX = []; // x position of fixed seeds
var fluffY = []; // y position of fixed seeds
var angle = 0; //angle of fixed seeds

var looseX = []; //x position of floating seeds
var looseY = []; //y position of floating seeds
var dir = []; //direction of floating seeds
var w = 3; //width of fluff

var centerX = []; //x center of each hour stem
var centerY = []; // y center of each hour stem


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

    //fills arrays for fixed and floating 
    //seed positions with random numbers
    for (var i = 0; i < 60; i++) {

        //converts angle to distribute fixed seeds around the stem
        var min = 270 + map(angle, 0, 60, 0, 360);
        angle++;

        //positions for fixed seeds
        fluffX[i] = random(20, 30)*cos(radians(min));
        fluffY[i] = random(20, 30)*sin(radians(min));

        //positions for floating seeds
        looseX[i] = random(0, width);
        looseY[i] = random(0, height);

        //direction of floating seeds
        dir[i] = random(-0.5, 0.5);

    }

    var x = 28; //starting position for first stem

    //fills array for stem position
    for (var i = 0; i < 12; i++) {
        centerX[i] = x;
        x+= 38
        if (i % 2) { 
            centerY[i] = random(80, 170);
        }
        else {
            centerY[i] = random(180, 260);
        }

    }

}


function draw() {
    background("lightBlue");
    drawSeed(); //draws fixed seeds
    drawFloat(); //draws floating seeds
    drawStem(); //draws stems

}


//draws fixed and minute-based seeds
function drawSeed() {
    stroke(255);
    if (hour() == 12 || hour() == 0) {
        var flowerX = 12;
    }
    else {
        var flowerX = hour() % 12;
    }

    //draws seeds around hours that have not passed
    for (var j = 12; j >= flowerX; j--) {
        for (var i = 0; i < 60; i++) {
            stroke(240);
            line(centerX[j] + fluffX[i], centerY[j] + fluffY[i], centerX[j], centerY[j]);
            noStroke();
            ellipse(centerX[j] + fluffX[i], centerY[j] + fluffY[i], w, w);
        }
    }

    //draws seeds around hour stem corresponding to the current minute
    //depletes one seed for every minute passed
    for (var i = 60; i > minute(); i--) {
        stroke(240);
        line(centerX[flowerX - 1] + fluffX[i], centerY[flowerX - 1] + fluffY[i], centerX[flowerX - 1], centerY[flowerX - 1]);
        noStroke();
        ellipse(centerX[flowerX - 1] + fluffX[i], centerY[j] + fluffY[i], w, w);
        
    }
}


//draws floating seeds corresponding to current second
function drawFloat() {
    noStroke();

    //adds floating seed at random position for each second passed
    for (var i = 0; i < second(); i++) {
        ellipse(looseX[i], looseY[i], w, w);

        //assigns each seed a direction
        looseX[i] += dir[i];
        looseY[i] += dir[i + 1];

        //resets seed position if it floats off the canvas
        if (looseX[i] > width) looseX[i] = 0;
        else if (looseX[i] < 0) looseX[i] = width;
        if (looseY[i] > height) looseY[i] = 0;
        else if (looseY[i] < 0) looseY[i] = height;
    }
}


//draws stems and centers
function drawStem() {
    stroke(255);
    for (var i = 0; i < 12; i++) {
        line(centerX[i], centerY[i], centerX[i], centerY[i] + height);
        ellipse(centerX[i], centerY[i], 8, 8);
    }

}





How to read: The 12 stems represent hours, and the seeds that are positioned around them are the minutes. The seeds deplete each minute around the stem corresponding to the current hour. The loose bits of fluff appear each second and float aimlessly until they reset each minute.

This has been my favorite assignment so far! Learning about arrays has made many of my ideas more tangible. I knew for this assignment that I wanted to do something pictorial, and I originally considered using balloons or planets. Nevertheless, I’m very happy with how this clock turned out.
Early sketches:

Erin Fuller-Abstract-Clock

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 06-Abstract Clock

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

function draw() {
    background(60);

    var x = width / 2; //ellipse center
    var y = height / 2; //ellipse center
    var d = 350; //ellipse diameter

    fill(90); // background circle
    ellipse(x, y, d, d);

    fill(255, 146, 68, 120); // MINUTE CHORD   
    var m = map(minute() + map(second(), 0, 60, 0, 1), 59, 0, 0, PI); // map minutes to half circle
    arc(x, y, d, d, m - (PI / 4), -(m) - (PI / 4), CHORD); // -pi/4 to shrink diagonally right to left

    fill(252, 123, 129, 120); // HOUR CHORD   
    var h = map(hour() + map(minute(), 0, 60, 0, 1), 23, 0, 0, PI); // map hours to half circle
    arc(x, y, d, d, h + HALF_PI, -(h) + HALF_PI, CHORD); // +pi/2 to shrink bottom to top

    fill(215, 105, 172, 120); // SECONDS CHORD   
    var s = map(second(), 59, 0, 0, PI); // map seconds to half circle
    arc(x, y, d, d, s - (3 * PI / 4), -(s) - (3 * PI / 4), CHORD); // -3pi/4 to shrink diagonally left to right
}

My “clock” is based on three translucent chords. The data for the minutes, seconds, and hours, are mapped along half the circle and reflected. The color and opacity, allowing the colors to overlap and add on each other, were chosen for visual variety along with shifting the start of the chords in different positions along the circle.