Category: Project-06-Abstract-Clock

Project-06-Abstract-Clock

For this project, I wanted to make the time easy to tell. I did not want the viewer to have to analyze every detail to be able to understand what time it was. Therefore I tried to keep it simple by having the boxes represent the hour number, the sky background represent what time of the day it is, and the coins to represent how many minutes have passed. I also made the piranha plant rise with respect to every second. When a minute passes, the piranha plant starts back at the base of the pot. While doing this project, I had a lot of difficult making each detail of Mario. I did not want to just import an image of him, and wanted to challenge myself by creating him through layers of shapes. In my thought process, I wrote down a lot of color combinations for each part of Mario, but I mainly referred to an actual image/screenshot of a Mario game (attached below.) Also attached to this post is some progress photos I took as I worked on the project.

sketch
//Annie Kim
//anniekim@andrew.cmu.edu
//SectionB
//Project-06

function setup() {
    createCanvas(480, 480);
    background(95, 201, 247); 

}
function draw() {
	var h = hour(); 
	var s = second();


	if (h < 18 & h > 6) { 
	//if it is morning time, background = light color
		background(95, 201, 247);
	}
	else {
	//if it is night, background = dark color
		background(20, 25, 68);
	}
	//yellow ovals in background
	fill(220, 137, 20);
	stroke(180, 107, 40);
	ellipse(5, 360, 60, 100); //shape
	line(0, 320, 23, 320); //lines on air balloons
	line(0, 330, 28, 330);
	line(0, 340, 32, 340);
	line(0, 350, 34, 350);
	line(0, 360, 35, 360);
	ellipse(100, 350, 90, 130);
	line(100, 315, 138, 315);
	line(100, 330, 142, 330);
	line(100, 345, 144, 345);
	line(90, 360, 140, 360);
	line(90, 375, 140, 375);
	ellipse(240, 345, 80, 90);
	line(207, 320, 273, 320);
	line(200, 345, 280, 345);
	line(207, 370, 273, 370);
	ellipse(275, 380, 60, 110);
	line(245, 380, 305, 380);
	line(240, 365, 303, 365);
	line(242, 360, 302, 360);
	line(244, 355, 301, 355);
	line(246, 350, 300, 350);
	line(246, 345, 297, 345);
	line(255, 340, 294, 340);
	ellipse(470, 370, 70, 85);
	line(445, 340, 480, 340);
	line(443, 345, 480, 345);
	line(441, 350, 480, 350);
	line(439, 355, 480, 355);
	line(437, 360, 480, 360);
	line(435, 365, 480, 365);
	line(437, 370, 480, 370);
	line(437, 375, 480, 375);
	line(437, 380, 480, 380);
	line(437, 385, 480, 385);
	ellipse(400, 390, 100, 110);
	line(350, 390, 450, 390);
	line(352, 375, 449, 375);
	line(361, 355, 445, 355);

    //trees in background
	fill(75, 165, 75);
	noStroke();
	rect(0, 400, 480, 80);
	circle(10, 400, 80);
	circle(8, 360, 30);
	circle(75, 400, 40);
	circle(105, 400, 30);
	circle(135, 400, 70);
	circle(113, 380, 30);
	circle(135, 370, 40);
	circle(160, 380, 30);
	circle(165, 400, 40);
	circle(195, 400, 50);
	circle(260, 400, 80);
	circle(245, 370, 40);
	circle(260, 360, 40);
	circle(275, 370, 40);
	circle(315, 400, 30);
	circle(350, 400, 60);
	circle(400, 400, 40);
	circle(450, 400, 60);

	//clouds
	fill(250, 130); //half transparent alpha
	noStroke();
	ellipse(40, 60, 100, 28);
	ellipse(240, 190, 190, 40);
	ellipse(350, 15, 130, 20);
	ellipse(420, 100, 180, 30);

    //** MARIO **
    //the ground of the scene
    noStroke();
    fill(250, 220, 103); //orange-yellow layer
    rect(0, 445, 480, 35);
    orangecircles(); //call for orange curtain pattern
    fill(108, 220, 68);
    rect(0, 430, 480, 17); //green layer
    greencircles(); //call for green curtain pattern

    //Mario's left shoe
    fill(105, 67, 45); //brown color
    circle(33, 407, 32); //heel of shoe
    circle(80, 415, 36); //mid of shoe
    circle(89, 416, 39); //toe of shoe
    quad(33, 422, 80, 432.5, 80, 400, 33, 400); //sole of shoe

    //Mario's left leg that is planted on the ground
    fill(31, 73, 180);
    quad(60, 300, 130, 300, 80, 395, 25, 390); //leg
    ellipse(53, 395, 61, 27); //hem of pants
    stroke(31, 73, 180); //filling in spaces for the shape
    line(78, 370, 80, 395);

    //Mario's left arm 
    fill(244, 44, 42); //red
    noStroke();
    quad(148, 235, 110, 205, 155, 140, 180, 150); //arm
    fill(255); //white glove
    ellipse(162, 140, 60, 50); //glove

    //visor part of hat
    fill(147, 42, 43); //red
    ellipse(158, 118, 140, 30);
    
    //Mario's head
    fill(248, 217, 191); //skin tone
    ellipse(125, 115, 95, 110);
    ellipse(124, 148, 85, 90);
    rect(70, 105, 50, 100); //neck

    //Mario's nose
    fill(248, 217, 191); //skin tone
    ellipse(175, 152, 30, 25); //tip of nose
    ellipse(160, 162, 45, 10);

    //Mario's hair
    fill(74, 45, 32); //brown hair
    rect(60, 65, 35, 100);
    ellipse(90, 155, 20, 25); //behind ear
    circle(63, 158, 20);
    circle(75, 160, 30);
    triangle(135, 100, 130, 150, 100, 100); //sideburn
    ellipse(122, 135, 15, 30);
    ellipse(123, 140, 15, 23);
    circle(128, 144, 14);
    triangle(133, 145, 135, 100, 125, 125);

    //red Mario hat
    fill(224, 44, 42); //red
    noStroke();
    rect(60, 75, 120, 40);
    beginShape(); //connecting shape to make rounded top
    curveVertex(80, 98);
    curveVertex(80, 98);
    curveVertex(80, 58);
    curveVertex(105, 43);
    curveVertex(130, 42);
    curveVertex(150, 41);
    curveVertex(160, 39);
    curveVertex(170, 38);
    curveVertex(179, 60);
    curveVertex(177, 70);
    curveVertex(177, 70);
    endShape();
    line(175, 30, 180, 30);
    noStroke();
    ellipse(177, 73, 60, 75);
    ellipse(67, 85, 50, 60);

    //white Mario logo on hat
    fill(255); //white circle
    stroke(255);
    ellipse(197, 80, 20, 40);
    //red M letters
    stroke(224, 44, 42);
    strokeWeight(4);
    line(195, 70, 193, 92);
    line(195, 70, 198, 80);
    line(198, 81, 201, 68);
    line(201, 68, 203, 89);

    //Mario's ear
    fill(248, 217, 191);
    stroke(208, 177, 151);
    strokeWeight(1);
    ellipse(100, 128, 30, 40); 
    stroke(238, 207, 181); //inner ear crevice
    ellipse(100, 128, 15, 20);

    //Mario's eye
    fill(255); //white of his eye
    ellipse(160.5, 135, 14, 30);
    fill(105, 180, 255); //blue of eye
    noStroke();
    ellipse(163, 139, 8, 20);
    fill(0); //black of eye
    ellipse(164, 141, 5, 10);

    //Mario's eyebrow
    stroke(60, 50, 50);
    strokeWeight(3);
    noFill();
    arc(162, 128, 10, 25, PI + QUARTER_PI, 0);

    //darker red of visor part of cap
    fill(204, 2, 3);
    noStroke();
    arc(195, 100, 80, 40, 0 + 0.5*QUARTER_PI, PI, CHORD);
    triangle(155, 100, 195, 100, 227, 114);

	//drawing Mario's abdomen
	fill(41, 93, 200); //blue jean clothing color
	noStroke();
	ellipse(100, 250, 100, 130);
	circle(90, 210, 80, 50);
	circle(100, 225, 80);
	circle(80, 280, 70); //butt area

	//the following lines fill space to make smooth abdomen
	strokeWeight(10);
	stroke(41, 93, 200); 
    line(55, 250, 51, 270); 
	line(80, 310, 100, 310);
	line(55, 220, 55, 250);

	//Mario's right shoe in the air
	fill(105, 67, 45); //brown color
	noStroke();
	circle(164, 362, 32); //heel of shoe
	circle(201, 350, 36); //mid of shoe
	circle(207, 347, 39); //toe of shoe
    quad(165, 377, 205, 366.5, 195, 340, 165, 350); //sole of shoe

    //Mario's right leg that is in the air
    fill(41, 93, 200);
    noStroke();
    ellipse(125, 290, 120, 50);
    circle(165, 280, 50); //knee cap
    quad(140, 300, 190, 280, 201, 330, 150, 345); //calf
    quad(200, 329, 203, 328, 150, 355, 150, 344); //calf
    
    //pant hem
    beginShape(); //curve shape so the hem looks curved
    curveVertex(150, 354);
    curveVertex(150, 354);
    curveVertex(160, 352);
    curveVertex(180, 347);
    curveVertex(195, 335);
    curveVertex(200, 330);
    curveVertex(202, 327);
    curveVertex(202, 327);
    endShape();
    strokeWeight(10);
    stroke(41, 93, 200);
    line(165, 259, 145, 255); //line making thigh look filled
    
    //making jean lines
    stroke(31, 83, 170);
    strokeWeight(3);
    line(90, 200, 90, 270); //side seam
    line(118, 246, 149, 251); //line on top thigh
    line(145, 313, 163, 288); //line at knee
    line(172, 305, 180, 345); //line at right calf
    stroke(21, 63, 140); //darker line for darker leg
    line(90, 317, 50, 407); //left leg line
    noStroke();

    //Mario's right arm that goes off the screen
    fill(244, 44, 42);
    noStroke();
    ellipse(85, 200, 60, 50);
    quad(45, 160, 95, 180, 90, 225, 45, 210); //bicep area
    quad(45, 160, 0, 180, 0, 230, 45, 210); //forearm

    //yellow button on Mario's overalls
    fill(255, 253, 104);
    ellipse(135, 220, 10, 20);

    //Mario's mustache
    fill(35, 23, 17);
    //edge of mustache
    arc(145, 160, 20, 10, 0, PI + QUARTER_PI); 
    //inner part of mustache
    arc(158, 164, 15, 10, 0, PI + QUARTER_PI); 
    //Mario's smile
    stroke(100);
    noFill();
    strokeWeight(2);
    arc(158, 170, 20, 10, 0.5*PI, PI); 

    //PIRANHA PLANT MOVES WITH SECONDS

    //stem of plant growing with seconds
    stroke(79, 145, 45);
    strokeWeight(10);
    //line(425, 366, 425, 366 - s);
    quad(423, 380, 423, 340 - s, 427, 340 - s, 427, 380);

    //piranha red head
    fill(215, 15, 15);
    noStroke();
    circle(425, 330 - s, 80); //red circle
    fill(255);
    circle(423, 360 - s, 13); //white spots on piranha head
    circle(395, 325 - s, 13);
    circle(405, 345 - s, 15);
    circle(435, 340 - s, 13);
    circle(457, 325 - s, 10);
    circle(455, 345 - s, 10);

    //making the mouth of piranha open
    if (h < 18 & h > 6) {
    	//using light blue color to match background
    	fill(95, 201, 247); 
    }
    else {
    	//using dark blue color to match bckground
    	fill(20, 25, 68);
    }
    triangle(425, 345 - s, 340, 280 - s, 510, 280 - s);
    
    //teeth of piranha mouth
    stroke(220); //outline color = grayish
    fill(245); //white teeth
    strokeWeight(1);
    triangle(418, 320 - s, 416, 340 - s,  408, 330 - s); 
    triangle(405, 310 - s, 403, 330 - s, 395, 320 - s);
    triangle(434, 320 - s, 441, 330 - s, 431, 340 - s);
    triangle(450, 310 - s, 457, 320 - s, 447, 330 - s);

    //white lips of piranha mouth
    fill(245);
    noStroke();
    circle(382, 315 - s, 15);
    triangle(377, 320 - s, 425, 345 - s, 385, 308 - s); //left lip
    circle(468, 315 - s, 15);
    triangle(463, 309 - s, 425, 345 - s, 473, 320 - s); //right lip

    //pot for the plant
    fill(75, 118, 68);
    noStroke();
    rect(400, 380, 50, 50); //base of pot
    stroke(55, 98, 48);
    strokeWeight(1);
    rect(390, 370, 70, 20); //top part of pot

    //draws coin for each minute
    for (m = 0; m < minute(); m ++) {
    	row = Math.floor(m / 4);
    	//15 rows of coins, 4 columns of coins
    	coins(240 + (m - 4 * row) * 28, 19 + (29 * row)); 
    }
    //draws boxes for each hour
    for (h = 0; h < hour(); h ++) {
    	row1 = Math.floor(h / 6);
    	//3 rows of boxes,
    	//4 columns in each row
    	boxes(336 + (h - 6 * row1) * 24, 10 + (35 * row1));
    }

    //MUNCHKIN stomach
    fill(143, 121, 91);
    noStroke();
    ellipse(210, 429, 18, 11);
    ellipse(210, 426, 16, 4);

    fill(134, 80, 50); //brown body color
    //munchkin feet
    ellipse(202, 433, 13, 8);
    ellipse(218, 433, 13, 8);
	noStroke();
	//layering body shaper
	ellipse(210, 400, 30, 40); 
	circle(203, 410, 30);
	circle(217, 410, 30);
	rect(203, 410, 14, 15);
	triangle(200, 385, 190, 403, 210, 400);
	triangle(220, 385, 230, 403, 210, 400);
	// munchkin eyes
	fill(255); //white of eyes
	stroke(230);
	ellipse(204, 400, 6, 13);
	ellipse(217, 400, 6, 13);
	fill(0); //black of eyes
	ellipse(205, 399, 5, 8);
	ellipse(216, 399, 5, 8);
	fill(255); //white dot in eyes
	circle(205, 398, 1);
	circle(216, 398, 1);
	//munchkin mouth
	fill(255);
	stroke(210);
	strokeWeight(1);
	triangle(197, 414, 199, 408, 202, 412); //teeth
	triangle(223, 414, 221, 408, 218, 412); //teeth
	stroke(0);
	strokeWeight(2);
	noFill();
	arc(210, 415, 25, 4, PI, 0); //frown line
	
	//munchkin left eyebrow
	stroke(0);
	strokeWeight(2);
	noFill();
	beginShape();
	curveVertex(193, 384)
	curveVertex(193, 384);
	curveVertex(195, 383);
	curveVertex(197, 383);
	curveVertex(199, 384);
	curveVertex(202, 387);
	curveVertex(203, 389);
	curveVertex(205, 392);
	curveVertex(207, 394);
	curveVertex(207, 394);
	endShape();
    //munchkin right eyebrow
	beginShape();
	curveVertex(213, 394);
	curveVertex(213, 394);
	curveVertex(215, 392);
	curveVertex(217, 389);
	curveVertex(219, 387);
	curveVertex(221, 384);
	curveVertex(223, 383);
	curveVertex(225, 383);
	curveVertex(228, 384);
	curveVertex(228, 384);
	endShape();
}

function coins(x, y) { 
	fill(242, 220, 95); //yellow color
	stroke(222, 200, 75); //darker yellow to highlight shape
	ellipse(x, y, 13, 25); //shape of coin
	fill(222, 200, 75);
	rect(x - 1, y - 10, 3, 21); //vertical line on coin
}

function boxes(x, y) {
	fill(151, 88, 53); //brown color
	strokeWeight(2); //outline of box
	stroke(0); 
	square(x, y, 24); //size of each box
	strokeWeight(1); //thickness of brick lines
	line(x, y + 8, x + 24, y + 8); //lines to make bricks
	line(x, y + 16, x + 24, y + 16);
	line(x + 12, y, x + 12, y + 8);
	line(x + 8, y + 8, x + 8, y + 16);
	line(x + 16, y + 8, x + 16, y +16);
	line(x + 12, y + 16, x + 12, y + 24);
}

function greencircles() { //will "curtain" the green grass
	for (var a = 0; a < 485; a += 20) {
		fill(108, 220, 68); //green color
		circle(a, 445, 20);
	}
}

function orangecircles() { //layer that will "curtain" yellow grass
    for (var b = 0; b < 485; b += 25) {
        fill(238, 117, 40); //dark orange color
        ellipse(b, 463, 35, 17);
        fill(250, 220, 103); //orange-yellow color
        ellipse(b, 457, 35, 17);
        
    }
}
Here is the first progress picture I had, which somewhat highlights the difficulty I had in creating Mario from scratch.
Here is a progress pic as I started layering shapes to create Mario’s body. I had the easiest time making the piranha plant because it was based on simpler shapes.
This is the image I was referring to as I made my project. It was not very easy because I was limiting myself to a smaller canvas, and had to leave out some details that I really wanted to include. (Such as the Toad Mushrooms).

Project-06-Abstract Clock

For the clock I wanted to create something that had a gradient, and where the time could not always be seen at every second, to get people to focus a bit more on the changing condition. Eventually I settled on a clock which had a gradient of boxes which changed every two seconds, and slowly revealed the time in the middle of the smallest box, with circles. I also liked the idea of using the same shape for both the minutes and hours, with only the size to differentiate the two.

sketchDownload
var theta = [];
var side = [];
var c = [];
var s;
var h;
var mx = [];
var my = [];


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

    h = hour();

    for (let i = 0; i <= 29; i++) {
      theta[i] += 2;
      c[i] = ((8.5*i));
      if (i == 0) {
        side[i] = 480
      } else if (i > 0) {
        side[i] = (side[i-1])-((side[i-1])/40);
      }
    }

    for (let i = 0; i < 60; i++) {
      if (i %6 == 0) {
        mx[i] = -5;
      } else {
        mx[i] = mx[i-1]+20;
      }
      if (i < 6) {
        my[i] = -90;
      } else {
        my[i] = my[i-6]+20;
      }
    }
}

function draw() {
  s = floor((second())/2);
  translate(240,240);
  rectMode(CENTER);

  for (let i = 0; i <= s; i++) {
    noStroke();
    rotate(radians(theta[i]));
    fill(c[i]);
    rect(0,0,side[i],side[i]);
  }

  if (h > 12) {
    h = h-12;
  }

  if (h < 7) {
    for (let i = 1; i <= h; i ++) {
      fill(0);
      circle(-80,-122+(i*35),30);
    }
  } else {
    for (let i = 1; i <= 6; i ++) {
      circle(-80,-122+(i*35),30);
    }
    for (let i = 1; i <= h-6; i++) {
      circle(-45,-122+(i*35),30);
    }
  }

  for (let i = 0; i < minute(); i++) {
    circle(mx[i],my[i],17);
  }
}

Project-06-Abstract Clock

sketchDownload
var walking = 0;
var rising = 230;
function setup() {
    createCanvas(480, 480);
    background(0);
    
    
}

function draw() {

	background(98, 97, 153);

	noStroke();
    
    fill(135, 154, 206);
  //moon
	ellipse(380, 126, 228, 228);

	var hr = map(hour(), 0, 59, 152, 620);
  //circle eclipses moon at hourly pace
    push();
	fill(98, 97, 153);
	ellipse(hr, 126, 228, 228);
	pop();

  //background graves
  fill(22, 13, 71);
	ellipse(370, 408,1074, 311);

	 for(var g = 304; g < 440; g+=52){
            graves2(g, 225);
        
    }

  //backgroung fence
  fence2(435, 203, 0.4);


  //zombie moves at seconds pace
    push();
    translate(map(second(), 0, 59, -20, width+ 20), walking);
	zombie();
	pop();

	fill(38, 34, 98);
	ellipse(57, 480,1074, 311);

  //foreground fence
	fence1(12, 200);


	

   //foreground graves
   for(var d = 47; d < 370; d+=130){
            graves1(d, 292);
        
    }

  //hand raises from ground at minute pace
  push();
  translate(rising, map(minute(), 0, 59, 500, 410));
	hand();
	pop();

	
	
  //ground in front of hand
  fill(38, 34, 98);
	rect(0, 410, 400, 200);
}

function graves1(x,y) {

           push();
           translate(x,y);
           noStroke();
           


           fill(22, 13, 71);
           rect(-13, 0, 67, 100);
           //grave front
           fill(38, 34, 98);
           rect(0, 0, 67, 100);

           fill(22, 13, 71);
           rect(9, 12, 51, 5);
           fill(22, 13, 71);
           rect(8.5, 24, 51, 5);


           
	       pop();
	              

}

function graves2(x,y) {

           push();
           translate(x,y);
           noStroke();
         


           fill(22, 13, 71);
           rect(0, 0, 27, 41);


           
	       pop();
	              

}

function fence1(x,y) {

           push();
           translate(x,y);
           noStroke();
         

           fill(38, 34, 98);
           rect(-24, 15, 145, 8);

           rect(0, 0, 8, 139);

           rect(30, 0, 8, 139);

           rect(60, -5, 8, 139);

           rect(90, -2, 8, 139);

          

           
	       pop();
	              

}

function fence2(x,y,s) {

           push();
           translate(x,y);
           scale(s);
           noStroke();
         

           fill(22, 13, 71);
           rect(-24, 15, 145, 8);

           rect(0, 0, 8, 139);

           rect(30, 0, 8, 139);

           rect(60, -5, 8, 139);

           rect(90, -2, 8, 139);

          

           
	       pop();
	              

}

function zombie() {

           push();
           
           noStroke();
         

           fill(38, 34, 98);

           //head
           ellipse(7, 238, 14, 20);

           //shoulders
           ellipse(7, 250, 14, 4.5);

           //arm1
           rect(10, 255, 29, 4);
           ellipse(39, 260, 5.5, 10);

           //neck
           rect(4, 246, 5.5, 7.5);

           //torso
           rect(0, 250, 14, 26);

           //leg1
           rect(0, 276, 8, 35);



           //foot1
           rect(0, 311, 16, 3);

           ellipse(8, 311, 16, 6);

           //arm2
           push();
           rotate(radians (-20));
           translate(-86,235);
           rect(5, 5, 29, 4);
           pop();
           ellipse(34, 248, 5.5, 10);

           push();
           rotate(radians (-20));
           translate(-86,235);
           //leg1
           rect(-3, 26, 8, 35);

           //foot1
           rect(-3, 61, 16, 3);

           ellipse(5, 61, 16, 6);
           pop();
	       pop();
	              

}

function hand() {

           push();
           
           scale(1.7);
           noStroke();
           push();
           
           fill(22, 13, 71);

           beginShape();
           vertex(0, 0);
           vertex(0, -18);
           vertex(-6, -25);
           vertex(-5.8, -30.8);

           vertex(-4.5, -34);
           vertex(-2.7, -33);
           vertex(-3, -28);
           vertex(-0.2, -26);

           vertex(0.2, -36);
           vertex(-1.5, -38);
           vertex(0, -40);
           vertex(3, -36.7);

           vertex(3, -28.5);
           vertex(4.5, -37);
           vertex(2.25, -40.5);
           vertex(3.9, -42.25);

           vertex(6.7, -38);
           vertex(6.7, -30);
           vertex(8.6, -37);
           vertex(7.2, -41);

           vertex(8.6, -42.7);
           vertex(11.2, -37.4);
           vertex(9.8, -28.3);
           vertex(12, -34.8);

           vertex(12, -38);
           vertex(13.5, -38.5);
           vertex(14.1, -34.5);
           vertex(10.8, -20);

           vertex(10.5, 0);


           endShape(CLOSE);
         
           pop();

          

           
	       pop();
	              

}

Project-06-Abstract Clock

For this project I wanted to create a hospital scene to demonstrate time, and how lucky we are to experience time and have a beating heart. The IV drip represents minutes with markers indicating mid and quarter points. The heart monitor represents seconds, and the window scene outside indicates if it is morning or evening. Additionally, I threw in some moving clouds and spinning stars to make the window view more dynamic! Below are also pictures of how it looks during day and night time.

graanak-06
//Graana Khan
// Section B
// graanak@andrew.cmu.edu
// Porject-06

/* Seconds is shown by the heart monitor, minutes are shown by the blood bag IV decreasing,
and hours are shown by whether the window displays a nighttime or daytime scene. */

function setup() {
    createCanvas(480, 480);
    background(220);
    var x = 0;   
}

function draw() {
    let h = hour();
    let m = minute();

	background(237, 237, 239);
	noStroke();
	fill(56, 46, 35);
	rect(0, 407, 481, 73);

	//window frame 
	noStroke();
	fill(190, 195, 198);
	rect(164, 268, 258, 20);
	rect(175, 30, 235, 241);

	//iv drip
	fill(216);
	rect(18, 457, 80, 5, 10);
	rect(56, 127, 5, 333, 10);
	rect(59, 134, 48, 5, 10);
	rect(103, 135, 4, 9, 10);

	//iv drip bag and wire  
	stroke(225, 224, 252);
	strokeWeight(2);
	noFill();
	rect(88.5, 144, 34, 62.5, 10);
	strokeWeight(1);
	fill(147, 6, 6);
	beginShape();
	curveVertex(103, 206);
	curveVertex(103, 206);
	curveVertex(103, 293);
	curveVertex(106, 322);
	curveVertex(128, 342);
	curveVertex(182, 357);
	curveVertex(291, 357);
	curveVertex(292, 353);
	curveVertex(182, 353);
	curveVertex(129, 338);
	curveVertex(109, 319);
	curveVertex(107, 293);
	curveVertex(107, 206);
	curveVertex(107, 206);
	endShape();

	//iv blood with changing minutes 
	noStroke();
	fill(147, 6, 6);
	rect(90, 145+m, 30, 60-m, 10);
   
    // iv bag lines showing mid points of the minutes
    stroke(225, 224, 252);
	strokeWeight(2);
	line(89, 160, 93, 160);
	line(89, 175, 99, 175);
	line(89, 190, 93, 190);

    //window appearance
	if(h < 18 & h > 5){
		daytime();
	} else{
		nighttime();
	}

	//table
	noStroke();
	fill(255);
	rect(92, 308, 6, 141, 10);
	rect(338, 308, 6, 141, 10);
	rect(92, 305, 252, 12, 10);

	//flower vase
	stroke(50, 132, 50);
	strokeWeight(2);
	line(312, 302, 312, 243);

	stroke(225, 224, 252);
	strokeWeight(1);
	noFill();
	rect(298, 263, 28, 46, 7);

    //water 
	fill(187, 201, 249, 100);
	noStroke();
	rect(298, 280, 28, 29, 7);

	//flower
	noStroke();
	fill(244, 132, 196);
	ellipse(307, 244, 11, 2);
	ellipse(318, 244, 11, 2);
	push();
	translate(308, 247);
	rotate(radians(-40));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(317, 247);
	rotate(radians(40));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(310, 249);
	rotate(radians(-70));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(314, 249);
	rotate(radians(70));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(308, 242);
	rotate(radians(20));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(317, 242);
	rotate(radians(-20));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(310, 239);
	rotate(radians(60));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(320, 260);
	rotate(radians(-60));
	ellipse(0, 0, 11, 2);
	pop();
	fill(255, 223, 87);
	ellipse(312, 244, 4, 3);    

	//heart monitor 
	fill(255);
	rect(143, 202, 135, 103, 20);
	fill(49, 49, 51);
	rect(147, 206, 128, 97, 20);
	fill(194, 255, 69);
	rect(240, 290, 19, 8, 10);
	fill(72, 72, 255);
	ellipse(233, 294, 8, 8);

	//hospital bed 
	fill(180, 178, 191);
	rect(73, 364, 310, 16, 20);
	rect(73, 331, 15, 45, 20);
	push();
	translate(450, 268);
	rotate(radians(45));
	rect(10, 0, 18, 134, 20);
	fill(199, 221, 239);
	rect(-17, 15, 27, 117, 40);
	pop();
	fill(199, 221, 239)
	rect(89, 337, 285, 27, 20);

	fill(180, 178, 191);
	rect(80, 368, 5, 93, 10);
	rect(378, 368, 5, 93, 10);
	
	stroke(216);
	strokeWeight(3);
	fill(255);
	ellipse(82, 461, 18, 18);
	ellipse(380, 461, 18, 18);

	//heart monitor seconds tracker
	let sec = map(second(), 0, 60, 0, 120);
	var x = sec;
	heartmonitor(x);

}

function daytime(){
	noStroke();
	fill(213, 231, 247);
	rect(186, 42, 211, 217);
	fill(255, 255, 255, 150);
	rect(210 + (mouseX/50), 55, 52, 21, 20);
	rect(238 + (mouseX/50), 68, 39, 21, 10);
	rect(331 + (mouseX/50), 86, 48, 28, 10);
	rect(261 + (mouseX/50), 168, 38, 21, 10);
	rect(244 + (mouseX/50), 179, 38, 21, 10);
    fill(247, 221, 109, 100);
    circle(292, 80, 63);
    fill(247, 221, 109);
    circle(292, 80, 50);
}

function nighttime(){
	noStroke();
	fill(12, 33, 48);
	rect(186, 42, 211, 217);
	noFill();
	stroke(234, 234, 139, 200);
	strokeWeight(2);
	push();
	translate(360, 75);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(357, 166);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(226, 121);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(292, 80);
	noStroke();
	fill(255, 255, 255, 100);
    circle(0, 0, 63);
    fill(255);
    circle(0, 0, 50);
    pop();
}

function heartmonitor(x){
	noStroke();
	fill(247, 8, 162);
	beginShape();
	curveVertex(149 + x, 255);
	curveVertex(149 + x, 255);
	curveVertex(148 + x, 254);
	curveVertex(147 + x, 255);
	curveVertex(149 + x, 258);
	curveVertex(151 + x, 255);
	curveVertex(150 + x, 254);
	curveVertex(150 + x, 254);
	endShape();
}
Daytime view.
Nighttime view.

Project 06- Abstract Clock

sketchDownload


//Shruti Prasanth
//Section C
//Project 6 - Abstract Clock

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

    
    push(); 
    background(175, 298, 173); //mint green
    translate(width / 2, height / 2); //origin now center canvas
    pop(); 

    var s = second(); 
    var m = minute(); 
    var h = hour();

    let sAngle = map(s, 0, 60, 0, 360); 
    let mAngle = map(m, 0, 60, 0, 360);
    let hAngle = map(h, 0, 24, 0, 360); 

    translate(width / 2, height / 2); 
    
    //drawing the second hand ring 
    fill(255);
    noStroke(); 
    push(); 
    for (var i = 0; i < s; i ++){
        rotate(radians(sAngle)); //creates a pattern based on current second 
        ellipse(0, -200, 20, 20); 
    }
    pop(); 

    //drawing the minute hand ring 
    push();
    fill(207, 187, 208); //purple
    for (var j = 0; j < m; j ++){
        rotate(radians(mAngle)); // pattern based on what minute it is 
        ellipse(0, -130, 30, 30); 
    }
    pop(); 

    //the hour hand ring
    push();
    fill(43, 97, 109);
    for (var k = 0; k < h; k ++){ 
        rotate(radians(hAngle)); // pattern based on hour 
        ellipse(0, -50, 40, 40); 

    }
    pop();

// drawing the middle clover
    circle(0,0,20);
    circle(0,15,20);
    circle(0,-15,20);
    circle(15,0,20);
    circle(-15,0,20);
     
}

Project – 06

sketch
//Shaun Murray, Section B

var x
var y
var cDisPos = 0
var cDisNeg = 0


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

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

	//ground
	push();
	noStroke();
	fill(0, 150, 50);
	rect(x, y + 145, width, 180);
	fill('Brown');
	rect(x, y + 150, width, 180);
	pop();

	x = width/2
	y = height/2

	//cloud
	push();
    translate(cDisPos, y - 100);
    cloud(0, );
    cDisPos += 1
    if (cDisPos > width + 50) {
    	cDisPos = -50
    }
    pop();

    push();
    translate(cDisNeg, y);
    cloud(0, 0);
    cDisNeg -= 1
    if (cDisNeg < -width) {
    	cDisNeg = width
    }
    pop();

	//pipes
	pipe(x , y + 45);
	pipe(x - 150, y + 45);
	pipe(x + 150, y + 45);

    //stars
	push();
    translate(width * 0.813, height * .15 + second() * 6.8); //6.8 is the scale for seconds on the Y axis of 'pipe'
    rotate(frameCount / 50);
    star(0, 0, 13, 26, 5);

    //eyes
    rotate(radians(50));
    fill(1);
    ellipse(-5, 0, 3, 10);
    ellipse(5, 0, 3, 10);
    pop();

    push();
    translate(width * 0.5, height * .15 + minute() * 6.8);//6.8 is the scale for minutes on the Y axis of 'pipe'
    rotate(frameCount / 50);
    star(0, 0, 13, 26, 5);

    //eyes
    fill(1);
    rotate(radians(50));
    ellipse(-5, 0, 3, 10);
    ellipse(5, 0, 3, 10);
    pop();

    push();
    translate(width * 0.19, height * .15 + hour() * 17);//17 is the scale for hours on the Y axis of 'pipe'
    rotate(frameCount / 50);
    star(0, 0, 13, 26, 5);

    //eyes
    rotate(radians(50));
    fill(1);
    ellipse(-5, 0, 3, 10);
    ellipse(5, 0, 3, 10);
    pop();


    
}


function pipe(x, y) {
	
	rectMode(CENTER);
	push();
	translate(x, y);
	fill(0, 255, 50);
	rect(0, 0, 75, height);
	fill('Green');
	rect(0, 0, 50, height);
    fill(0, 200, 50);
    stroke(1);
    rect(0, -250, 90, 30);
    fill(0, 200, 150);
    noStroke();
    rect(-25, -250, 20, 28);
	pop();
}

function star(x, y, rad1, rad2, points) {
  let angle = TWO_PI / points;
  let halfAngle = angle / 2;
  beginShape();
  fill(255, 255, 0);
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * rad2;
    let sy = y + sin(a) * rad2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * rad1;
    sy = y + sin(a + halfAngle) * rad1;
    vertex(sx, sy);

  }
  endShape(CLOSE);
}


function cloud(x, y) {
	push();
    translate(x, y);

    //cloud 
	noStroke();
	fill(255);
	ellipse(-5, -17, 43, 43);
	fill(245);
	ellipse(-3, -15, 40, 40);
	//eyes
	fill(1);
	ellipse(-10, -25, 3, 10);
	ellipse(0, -25, 3, 10);

	fill(255);
	ellipse(18, -12, 30, 30);
	fill(245);
	ellipse(20, -10, 27, 27);

	fill(255);
    ellipse(-20, -9, 25, 23);
    fill(245);
    ellipse(-17, -6, 23, 20);

	fill(255);
	ellipse(0, 0, 80, 10);
	fill(245);
    ellipse(5, 1, 75, 8);

    pop();

}

Super Clock World. The pipes represent hour, minute, and second.

Project 6 – Abstract Clock

I was inspired by the idea of the lunar cycles and the moon’s effect on the oceans for this project.

sketch
//hollyl
//abstract clock assignment
//section D

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

function h(){								//hour wave
	var x = hour()*20;
	var y = width/2;
	noStroke();
	fill(58, 63, 139);
	rect(x-120, y/2, 240, y/2);
	ellipse(x, y/2, 120, y);
	rect(0, y, 480, y);
	fill(30, 30, 75);
	arc(x-120, y/2, 120, y, 0, PI);
	arc(x+120, y/2, 120, y, 0, PI);
}

function mn(){								//minute wave
	var x = minute()*8;
	var y = 180
	noStroke();
	fill(58, 91, 139);
	rect(x-90, height/2, y, y/2);
	ellipse(x, height/2, 90, y);
	rect(0, 330, 480, y);
	fill(58, 63, 139);
	arc(x-90, height/2, y/2, y, 0, PI);
	arc(x+90, height/2, y/2, y, 0, PI);
}

function s(){								//second wave
	var x = second()*8;
	var y = 120;
	noStroke();
	fill(59, 104, 172);
	rect(x-(y/2), 330, y, y/2);
	ellipse(x, 330, y/2, y);
	rect(0, height-90, 480, 90);
	fill(58, 91, 139);
	arc(x-(y/2), 330, y/2, y, 0, PI);
	arc(x+(y/2), 330, y/2, y, 0, PI);
}

function draw(){
	background(30, 30, 75);
	h();
	mn();
	s();
	fill(54, 146, 169);						//remnants of the millisecond wave that
	rect(0, height-45, 480, 45);			//moved way too fast
}

Notes:

Project_06_abstract clock

as_clockDownload
	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var x  ;
var y  ;
var mx ;
var my ;
var hx ;
var hy ;
var bigR = 200 ;
var mbigR = 100;
var hbigR = 50 ;
var size = 10 ;
var theta = 0;
var theta2 = 30;
var theta3 = 60;
var traceX = [];
var traceY = [];





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


function draw() {
    background(180);
   

    push();
    translate(240,240);
    fill(0);
    circle(0,0,3);

    fill(150,50,30);  // for the hour circle
    hx = hbigR * cos(radians(theta3));
    hy = hbigR * sin(radians(theta3));
    circle ( hx,hy,30);

    theta3 += 360/60/60;

    fill(240,100,80); // for the minutes circle
    mx = mbigR * cos(radians(theta2));
    my = mbigR * sin(radians(theta2));
    circle(mx,my,20);

    theta2 += 360/60/60;

    print("m"+ theta2);



    
    noStroke();
    fill(240,144,105);  //for the second circle
    x = bigR * cos(radians(theta));
    y = bigR * sin(radians(theta));
    circle(x,y,size);

    theta += 360/60;

    if(bigR <= 200){  // the radius is shortening when time passes
        bigR = bigR - 200/59;
    }
    if(bigR<=0){
        bigR = 200;
    }

    //print(bigR);

    traceX.push(x);  // the doc after the second circle
    traceY.push(y);
    for(var i =0; i < traceX.length; i++ ){
        fill(120,100,30);

        circle(traceX[i],traceY[i],3);    
        


    }

    if (traceX.length > 20){ // the length of the docs
        traceX.shift();
        traceY.shift();
    }


    pop();

    
}

Project 06 – Abstract Clock

//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 06

function setup() {
    createCanvas(400, 480);
    frameRate(15);
}

function draw() {

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

	//mapping the seconds so it fits width of...
	var mapS = map(s, 0, 59, 0, 108); //glass of pink lemonade
	var mapM = map(m, 0, 59, 0, 129); //coaster

    background(255, 181, 101);

	//blue table
	noStroke();
	fill(63, 85, 157);
	rect(1, 335, 320, 146);

	//window frame
	noStroke();
	fill(215, 126, 31);
	rect(31, 31, 305, 233);


	//sky during certain hours
	noStroke();
	fill(193, 210, 246);
	rect(40, 38, 287, 219);

	for (var i=1; i<=h; i++) {
		if (i>=8 & i<=12) {
			noStroke();
			fill(255, 196, 137);
			rect(40, 38, 287, 219);
		}
		if (i>12 & i<=18) {
			noStroke();
			fill(193, 210, 246);
			rect(40, 38, 287, 219);
		}
		if (i>18 & i<=24) {
			noStroke();
			fill(29, 42, 117);
			rect(40, 38, 287, 219);
		}
	}

	//sun & moon (changes during certain hours)
	for (var i=1; i<=h; i++) {
		if (i>=7 & i<=12) { //morning sun
			noStroke();
			fill(253, 241, 142); //color of layer1
			ellipse(116, 112, 83, 83);
			fill(251, 243, 175); //color of layer2
			ellipse(116, 112, 69, 69);
			fill(249, 245, 215); //color of layer3
			ellipse(116, 112, 53, 53);
		}
		if (i>12 & i<=18) { //afternoon sun
			noStroke();
			fill(255, 152, 68);
			ellipse(116, 112, 83, 83);
			fill(255, 205, 68);
			ellipse(116, 112, 69, 69);
			fill(252, 228, 108);
			ellipse(116, 112, 53, 53);
		}
		if (i>18 & i<=24) { //moon -- night time
			noStroke();
			fill(119, 119, 119); //color of layer 1
			ellipse(116, 112, 83, 83);
			fill(170, 170, 170); //color of layer 2
			ellipse(116, 112, 69, 69);
			fill(209, 209, 209); //color of layer 3
			ellipse(116, 112, 53, 53);
		}
		if (i>=1 & i<8) { //night to dawn
			noStroke();
			fill(119, 119, 119); //color of layer 1
			ellipse(116, 112, 83, 83);
			fill(170, 170, 170); //color of layer 2
			ellipse(116, 112, 69, 69);
			fill(209, 209, 209); //color of layer 3
			ellipse(116, 112, 53, 53);
		}
	}

	//cloud 1
	noStroke();
	fill(255);
	ellipse(230, 96, 36, 18);
	ellipse(248, 87, 36, 18);
	ellipse(279, 87, 36, 18);
	ellipse(261, 99, 36, 18);

	//cloud 2
	noStroke();
	fill(255);
	ellipse(248, 186, 36, 18);
	ellipse(230, 198, 36, 18);
	ellipse(217, 186, 36, 18);
	ellipse(199, 195, 36, 18);

	//cloud 3
	noStroke();
	fill(255);
	ellipse(117, 154, 36, 18);
	ellipse(99, 166, 36, 18);
	ellipse(86, 154, 36, 18);
	ellipse(68, 163, 36, 18);

	//head
	noStroke();
	fill(249, 245, 215);
	ellipse(370, 222, 160, 221);

	//eyes
	stroke(0);
	strokeWeight(1);
	fill(0);
	beginShape();
	curveVertex(301, 347);
	curveVertex(309, 245);
	curveVertex(316, 241);
	endShape();

	//shirtAndarms
	noStroke();
	fill(155, 178, 145);
	ellipse(370, 448, 100, 240);


	//hair
	noStroke();
	fill(88, 72, 72);
	ellipse(376, 174, 171, 151);
	ellipse(397, 305, 65, 255);

	//coaster changes color by minutes(0, 15, 30, 45)
	for (var i=0; i<=m; i++) {
		if (i>=0 & i<15) { //blue coaster
			noStroke();
			fill(108, 121, 164);
			ellipse(145, 413, 120+mapM, 35+mapM);
		}
		if (i>=15 & i<30) { //pink coaster
			noStroke();
			fill(226, 61, 110);
			ellipse(145, 413, 120+mapM, 35+mapM);
		}
		if (i>=30 & i<45) { //green coaster
			noStroke();
			fill(63, 255, 86);
			ellipse(145, 413, 120+mapM, 35+mapM);
		}
		if (i>=45 & i<=59) { //purple coaster
			noStroke();
			fill(201, 147, 255);
			ellipse(145, 413, 120+mapM, 35+mapM);
		}
	}

	//bottomAndmiddleOfcup
	stroke(0);
	strokeWeight(1);
	fill(237, 244, 181);
	rect(105, 284, 80, 131);
	ellipse(145, 413, 80, 23);

	//topOfcup
	stroke(0);
	strokeWeight(1);
	fill(239, 244, 201);
	ellipse(145, 285, 80, 23);

	//drink
	noStroke();
	fill(255, 175, 175); //pink lemonade
	ellipse(145, 413, 60, 13);
	rect(115, 414, 60, -mapS); //fills up each second
	


}

For this project, I wanted to show the different times during the day through the setting of my working area and my favorite beverage to drink. During the day, the window would show the sun and blue sky. During the evening, the window would show the moon and dark sky. Therefore, it changes depending on the hour. As for minutes, I decided to change the size and color of the coaster whenever the time hits 00, 15, 30, or 45. Lastly, the seconds are shown through the increasing amount of pink lemonade within the glass. Below is a drawing I made in photoshop to help me create this project.

Project 06 – Abstract Clock

candles

function setup() {
    createCanvas(480, 480);
    background(46, 27, 61);

   
}

function draw() {
	var sec = second();
    var min = minute();
    var hr = hour();

    background(122, 49, 0);
	noStroke();

	fill(255, 236, 202, 30);
	ellipse(240, 128+sec, 730, 505);
	ellipse(240, 200+(2*min), 540, 330);
	ellipse(240, 30+(13*hr), 368, 230);
	// cast lighting

	fill(0, 0, 0, 60);
	ellipse(240, 425, 420, 75);
	// plate shadow

	fill(146, 138, 183);
	ellipse(240, 415, 400, 75);
	fill(177, 175, 232);
	ellipse(240, 410, 320, 45);
	// plate

    
    fill(255, 242, 233);
    rect(210, 100+(13*hr), 60, 312-(13*hr));
    ellipse(240, 412, 60, 15);
    stroke(255, 205, 171);
    strokeWeight(0.5);
    ellipse(240, 100+(13*hr), 60, 15);
    // middle candle (takes the whole day to melt)

    push();
    fill(255, 210, 110);
    circle(240, 70+(13*hr), 35);
    triangle(225, 61+(13*hr), 255, 61+(13*hr), 240, 30+(13*hr));
    fill(255, 237, 202);
    circle(240, 73+(13*hr), 26); 
    pop();
    // middle candle flame

    var min = minute();
    noStroke();
    rect(160, 292+(2*min), 30, 120-(2*min));
    rect(290, 292+(2*min), 30, 120-(2*min));
    ellipse(175, 412, 30, 8);
    ellipse(305, 412, 30, 8);
    stroke(255, 205, 171);
    strokeWeight(0.5);
    ellipse(175, 292+(2*min), 30, 8);
    ellipse(305, 292+(2*min), 30, 8);
    // candles on either side of the middle candle (take an hour to melt)

    push();
    fill(255, 210, 110);
    circle(175, 270+(2*min), 22);
    circle(305, 270+(2*min), 22);
    triangle(175, 245+(2*min), 166, 264+(2*min), 184, 264+(2*min));
    triangle(305, 245+(2*min), 296, 264+(2*min), 314, 264+(2*min));
    fill(255, 237, 202);
    circle(175, 272+(2*min), 16);
    circle(305, 272+(2*min), 16);  
    pop();
    // flames for hour candles

    
    noStroke();
    rect(120, 352+sec, 20, 60-sec);
    rect(340, 352+sec, 20, 60-sec);
    ellipse(130, 412, 20, 5);
    ellipse(350, 412, 20, 5);
    stroke(255, 205, 171);
    strokeWeight(0.5);
    ellipse(130, 352+sec, 20, 5);
    ellipse(350, 352+sec, 20, 5);    
    // outermost candles (take 1 min to melt)

    push();
    fill(255, 210, 110);
    circle(130, 339+sec, 13);
    circle(350, 339+sec, 13);
    triangle(130, 325+sec, 124, 336+sec, 136, 336+sec);
    triangle(350, 325+sec, 356, 336+sec, 344, 336+sec);
    fill(255, 237, 202);
    circle(130, 340+sec, 9);
    circle(350, 340+sec, 9);
    pop();
    // flames for minute candles
}

For my abstract clock, I used a set of candles melting to represent the time. The biggest candle in the middle takes the entire day to “melt,” the ones on either side of it both take one hour to melt, and the smallest candles on the ends each take one minute to melt. The flames and cast lighting move accordingly, and the candles reset with the time.

I began with a preliminary sketch: