Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*---------------------------------------------+
| Filename:   alarm_clock                      |
| Created by: Diane "Iya" Downey               |
| Date:       Sept 21, 2016                    |
| Desciption: This interactive drawing is an   |
| old fashioned alarm clock. Moving the mouse  |
| right-to-left controls the hour hand, while  |
| moving the mouse up & down moves the minute  |
| hand.  You can also click & the alarm bells  |
| will ring.                                   |
+---------------------------------------------*/

// Set up the size & Modes
void setup() {
  size(400, 400);
  ellipseMode(CENTER);
  rectMode(CORNERS);
  smooth();
}

// When mousePressed the alarm goes off
void mousePressed() {
  
  // Slow the framerate to see the lines
  frameRate(5);
  
  // Draw the motion lines
  strokeWeight(2);
  stroke(0);
  noFill();
  
  // Left Bell
  arc(90, 90, 140, 140, radians(135), radians(200));
  arc(90, 90, 140, 140, radians(250), radians(315));
  arc(90, 90, 160, 160, radians(130), radians(205));
  arc(90, 90, 160, 160, radians(245), radians(320));
  
  // Right Bell
  arc(310, 90, 140, 140, radians(225), radians(290));
  arc(310, 90, 140, 140, radians(340), radians(405));
  arc(310, 90, 160, 160, radians(220), radians(295));
  arc(310, 90, 160, 160, radians(335), radians(410));
  
}

// Draw functions
void draw() {
  // Restore framerate after mousePressed
  frameRate(60);
  
  // Draw the background
  background(186, 208, 216);
  noStroke();
  fill(72, 51, 39);
  triangle(0, 330, 400, 240, 400, 330);
  rect(0, 330, 400, 400);
  

  // Clock feet
  fill(224, 20, 20);
  stroke(152, 15, 15);
  strokeWeight(5);
  triangle(80, 290, 160, 340, 80, 360);
  triangle(240, 340, 320, 360, 320, 290);

  // Bell & Button stems
  strokeWeight(15);
  line(60, 60, 100, 100);
  line(200, 60, 200, 30);
  line(300, 100, 340, 60);

  // Clock edge
  strokeWeight(5);
  ellipse(200, 200, 300, 300);

  // Clock bells & Button
  fill(255, 248, 206);
  strokeWeight(3);
  stroke(60, 60, 50);
  arc(90, 90, 120, 120, radians(140), radians(310));
  arc(310, 90, 120, 120, radians(230), radians(400));
  ellipse(200, 30, 80, 20);

  // Clock face
  fill(255, 248, 206);
  strokeWeight(3);
  stroke(60, 60, 50);
  ellipse(200, 200, 240, 240);

  // Time numbers
  strokeWeight(2);

  // XII
  line(188, 90, 200, 110);
  line(200, 90, 188, 110);
  line(205, 90, 205, 110);
  line(212, 90, 212, 110);
  line(185, 90, 215, 90);
  line(185, 110, 215, 110);

  // III
  line(285, 190, 285, 210);
  line(295, 190, 295, 210);
  line(305, 190, 305, 210);
  line(280, 190, 310, 190);
  line(280, 210, 310, 210);

  // VI
  line(188, 290, 196, 310);
  line(196, 310, 205, 290);
  line(210, 290, 210, 310);
  line(185, 290, 215, 290);
  line(185, 310, 215, 310);

  // IX
  line(95, 190, 95, 210);
  line(100, 190, 116, 210);
  line(100, 210, 116, 190);
  line(90, 190, 120, 190);
  line(90, 210, 120, 210);

  // Time points
  fill(60, 60, 50);
  noStroke();

  // 1 & 2
  ellipse(250, 115, 7, 7);
  ellipse(285, 155, 7, 7);

  // 4 & 5
  ellipse(285, 245, 7, 7);
  ellipse(250, 285, 7, 7);

  // 7 & 8
  ellipse(150, 285, 7, 7);
  ellipse(115, 245, 7, 7);

  // 10 & 11
  ellipse(115, 155, 7, 7);
  ellipse(150, 115, 7, 7);

  // Clock hands
  stroke(0);

  // Minute hand
  strokeWeight(4);
  line( (200+80*cos(radians(mouseY) ) ), (200+80*sin(radians(mouseY) ) ), 200, 200);

  // Hour hand
  strokeWeight(6);
  line( (200+65*cos(radians(mouseX) ) ), (200+65*sin(radians(mouseX) ) ), 200, 200);

  // Center
  fill(0);
  noStroke();
  ellipse(200, 200, 15, 15);
}