Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* Jake O'Toole P01
 * Interactive Drawing: Animated Racing Watch 
 * Intro to Media Computation
 * Move mouse down or up to adjust time, Move the mouse to the left to turn on glow
 * in the dark mode, Press the mouse to turn off the watch for 2 seconds.
 */

void setup()
{
  //setting canvas size
  size(400, 400);
  smooth();
  //modes
  ellipseMode(CENTER);
  rectMode(CORNERS);
  //defaults framerate to 60
  frameRate(60);
  noCursor();
}
void draw()
{
  //background and presets//
  background(40);
  strokeWeight(1);

  //gears//
  //top gear
  fill(10);
  stroke(160);
  quad(250, 153, 283, 145, 288, 157, 260, 165);
  stroke(255);
  fill(80);
  quad(269, 145, 279, 143, 286, 160, 277, 163);
  fill(10);
  stroke(200);
  line(270, 147, 280, 145);
  line(271, 149, 281, 147);
  line(272, 150, 282, 149);
  line(273, 152, 283, 151);
  line(274, 154, 284, 153);
  line(275, 156, 285, 155);
  line(276, 158, 286, 157);
  line(267, 160, 287, 159);

  //bottom gear
  fill(10);
  stroke(160);
  quad(288, 243, 260, 235, 250, 247, 283, 255);
  stroke(255);
  fill(80);
  quad(277, 237, 286, 240, 279, 257, 269, 255);
  stroke(200);
  line(276, 239, 285, 242);
  line(275, 241, 284, 244);
  line(274, 243, 283, 246);
  line(273, 245, 282, 248);
  line(272, 247, 281, 250);
  line(271, 249, 280, 252);
  line(270, 251, 279, 254);
  line(269, 253, 278, 256);

  //gear holders
  fill(0);
  stroke(255);
  quad(250, 150, 294, 167, 294, 177, 260, 190);
  quad(260, 210, 294, 223, 294, 233, 250, 250);

  //middle gear
  fill(80);
  rect(260, 180, 295, 220, 3);
  stroke(200);
  fill(10);
  rect(295, 185, 300, 215, 5);
  stroke(180);
  strokeWeight(2);
  line(293, 183, 282, 183);
  line(293, 186, 282, 186);
  line(293, 189, 282, 189);
  line(293, 192, 282, 192);
  line(293, 195, 282, 195);
  line(293, 198, 282, 198);
  line(293, 201, 282, 201);
  line(293, 204, 282, 204);
  line(293, 207, 282, 207);
  line(293, 210, 282, 210);
  line(293, 213, 282, 213);
  line(293, 216, 282, 216);
  line(293, 219, 282, 219);
  strokeWeight(1);

  //bottom band//
  //bottom middle 
  fill(0);
  stroke(255);
  rect(180, 270, 220, 355, 2);
  fill(190);
  rect(180, 270, 220, 290, 3);
  stroke(100);
  line(180, 305, 220, 305);
  stroke(255);
  line(180, 310, 220, 310);
  fill(230);
  noStroke();
  rect(180, 313, 220, 323, 2);
  stroke(255);
  line(180, 337, 220, 337);
  fill(100);
  noStroke();
  rect(180, 338, 220, 340, 1);
  fill(210);
  noStroke();
  rect(180, 341, 220, 345, 1);

  //bottom left
  fill(0);
  quad(155, 260, 180, 270, 180, 355, 170, 355);
  fill(100);
  quad(169, 351, 180, 351, 180, 355, 170, 355);
  fill(180);
  quad(166, 337, 180, 337, 180, 340, 167, 340);
  stroke(200);
  line(165, 333, 180, 333);
  line(161, 295, 180, 295);
  noStroke();
  fill(170);
  quad(162, 303, 180, 303, 180, 327, 166, 327);
  fill(130);
  quad(164, 310, 180, 310, 180, 327, 166, 327);
  stroke(180);
  line(161, 300, 180, 300);
  noStroke();
  fill(130);
  stroke(0);
  quad(157, 265, 180, 265, 180, 290, 160, 290);
  fill(180);
  quad(157, 265, 180, 265, 180, 285, 160, 285);
  fill(0);
  quad(125, 220, 150, 220, 160, 290, 150, 290);
  fill(190);
  quad(125, 220, 150, 220, 160, 280, 150, 280);

  //bottom right
  noStroke();
  fill(0);
  quad(221, 270, 245, 260, 230, 355, 220, 355);
  fill(100);
  quad(220, 351, 230, 351, 230, 355, 220, 355);
  fill(180);
  quad(220, 337, 232, 337, 231, 340, 220, 340);
  stroke(200);
  line(220, 333, 232, 333);
  line(220, 295, 238, 295);
  noStroke();
  fill(170);
  quad(220, 303, 238, 303, 234, 327, 220, 327);
  fill(130);
  quad(220, 310, 237, 310, 233, 327, 220, 327);
  stroke(180);
  line(220, 300, 238, 300);
  noStroke();
  fill(130);
  stroke(0);
  quad(221, 265, 244, 265, 240, 290, 221, 290);
  fill(180);
  quad(221, 265, 244, 265, 240, 285, 221, 285);
  fill(0);
  quad(250, 220, 275, 220, 250, 290, 240, 290);
  fill(190);
  quad(250, 220, 275, 220, 250, 280, 240, 280);

  //top band//
  //top middle
  noStroke();
  fill(0);
  stroke(255);
  rect(180, 130, 220, 44, 2);
  fill(190);
  rect(180, 130, 220, 110, 3);
  stroke(100);
  line(180, 95, 220, 95);
  stroke(255);
  line(180, 90, 220, 90);
  fill(230);
  noStroke();
  rect(180, 87, 220, 77, 2);
  stroke(255);
  line(180, 63, 220, 63);
  fill(100);
  noStroke();
  rect(180, 62, 220, 60, 1);
  fill(210);
  noStroke();
  rect(180, 59, 220, 55, 1);
  fill(210);
  noStroke();
  rect(180, 50, 220, 47, 1);

  //top right
  noStroke();
  fill(0);
  quad(221, 45, 231, 45, 245, 140, 220, 140);
  fill(100);
  quad(222, 45, 232, 45, 230, 49, 220, 49);
  fill(180);
  quad(222, 59, 232, 59, 233, 63, 222, 63);
  stroke(200);
  line(221, 66, 232, 66);
  line(221, 105, 238, 105);
  noStroke();
  fill(170);
  quad(221, 97, 238, 97, 234, 73, 221, 73);
  fill(130);
  quad(221, 90, 237, 90, 233, 73, 221, 73);
  stroke(180);
  line(221, 100, 238, 100);
  noStroke();
  fill(130);
  stroke(0);
  quad(221, 135, 244, 135, 240, 110, 221, 110);
  fill(180);
  quad(221, 135, 244, 135, 240, 115, 221, 115);
  fill(0);
  quad(250, 112, 240, 110, 250, 180, 275, 180);
  fill(190);
  quad(250, 122, 240, 120, 250, 180, 275, 180);

  //top left
  noStroke();
  fill(0);
  quad(170, 45, 179, 45, 180, 140, 155, 140);
  fill(100);
  quad(170, 45, 179, 45, 180, 49, 170, 49);
  fill(180);
  quad(169, 59, 179, 59, 179, 63, 168, 63);
  stroke(200);
  line(166, 66, 179, 66);
  line(160, 105, 179, 105);
  noStroke();
  fill(170);
  quad(163, 97, 179, 97, 179, 73, 166, 73);
  fill(130);
  quad(163, 90, 179, 90, 179, 73, 166, 73);
  stroke(180);
  line(161, 100, 179, 100);
  noStroke();
  fill(130);
  stroke(0);
  quad(156, 135, 179, 135, 179, 110, 160, 110);
  fill(180);
  quad(156, 135, 179, 135, 179, 115, 160, 115);
  fill(0);
  quad(150, 112, 160, 110, 150, 180, 125, 180);
  fill(190);
  quad(150, 122, 160, 120, 150, 180, 125, 180);

  // outer watch
  noStroke();
  fill(0);
  stroke(0);
  ellipse(200, 200, 160, 160);
  fill(0);
  noStroke();
  ellipse(200, 200, 158, 158);
  fill(185, 220);
  noStroke();
  ellipse(200, 200, 158, 158);

  //outer watch shadows
  fill(130);
  noStroke();
  arc(200, 200, 160, 160, radians(-50), radians(50));
  fill(0);
  stroke(180);
  arc(200, 200, 160, 160, radians(-40), radians(40));
  fill(180);
  noStroke();
  arc(200, 200, 127, 127, radians(-50), radians(50));

  //outer watch units/details

  fill(255);
  noStroke();
  ellipse(200, 134, 3, 3);
  fill(255);
  noStroke();
  ellipse(134, 200, 3, 3);
  fill(255);
  noStroke();
  ellipse(266, 200, 3, 3);
  fill(255);
  noStroke();
  ellipse(200, 266, 3, 3);
  fill(255);
  noStroke();
  ellipse(249, 156, 3, 3);
  fill(255);
  noStroke();
  ellipse(151, 156, 3, 3);
  noStroke();
  ellipse(151, 243, 3, 3);
  noStroke();
  ellipse(249, 243, 3, 3);

  //inner watch
  fill(0);
  stroke(0);
  ellipse(200, 200, 122, 122);
  fill(0);
  stroke(0);
  ellipse(200, 200, 100, 100);
  fill(180);
  noStroke();
  ellipse(200, 200, 120, 120);
  fill(0);
  stroke(0);
  ellipse(200, 200, 114, 114);
  fill(255);
  stroke(0);
  ellipse(200, 200, 108, 108);
  fill(57, 255, 20, 110 - mouseX);
  ellipse(200, 200, 108, 108);

  //bottom detail inner
  fill(225);
  noStroke();
  ellipse(200, 225, 30, 30);
  fill(255);
  noStroke();
  ellipse(200, 225, 27, 27);
  fill(0);
  stroke(0);
  ellipse(200, 225, 25, 25);
  fill(225);
  noStroke();
  ellipse(200, 225, 20, 20);
  fill(255);
  noStroke();
  ellipse(200, 225, 18, 18);
  stroke(255);
  line(200, 225, 200, 237);
  stroke(255);
  line(200, 225, 185, 225);
  stroke(255);
  line(200, 225, 215, 225);
  stroke(255);
  line(200, 225, 185, 213);
  stroke(255);
  line(200, 225, 200, 185);
  stroke(255);
  line(200, 225, 225, 200);
  stroke(255);
  line(200, 225, 225, 245);
  stroke(255);
  line(200, 225, 188, 237);
  fill(0);
  noStroke();
  ellipse(200, 225, 4, 4);

  //right detail inner
  fill(225);
  noStroke();
  ellipse(225, 200, 30, 30);
  fill(255);
  noStroke();
  ellipse(225, 200, 27, 27);
  fill(0);
  stroke(0);
  ellipse(225, 200, 25, 25);
  fill(225);
  noStroke();
  ellipse(225, 200, 20, 20);
  fill(255);
  noStroke();
  ellipse(225, 200, 18, 18);
  stroke(255);
  line(225, 200, 240, 200);
  stroke(255);
  line(225, 200, 210, 200);
  stroke(255);
  line(225, 200, 225, 215);
  stroke(255);
  line(225, 200, 225, 185);
  fill(0);
  noStroke();
  ellipse(225, 200, 4, 4);

  //left detail inner
  fill(225);
  noStroke();
  ellipse(175, 200, 30, 30);
  fill(255);
  noStroke();
  ellipse(175, 200, 27, 27);
  fill(0);
  stroke(0);
  ellipse(175, 200, 25, 25);
  fill(225);
  noStroke();
  ellipse(175, 200, 20, 20);
  fill(255);
  noStroke();
  ellipse(175, 200, 18, 18);
  stroke(255);
  line(175, 200, 160, 215);
  stroke(255);
  line(175, 200, 190, 215);
  stroke(255);
  line(175, 200, 190, 185);
  stroke(255);
  line(175, 200, 160, 185);
  fill(0);
  noStroke();
  ellipse(175, 200, 4, 4);

  //top detail inner
  stroke(0);
  line(180, 180, 220, 180);
  line(185, 178, 215, 178); 
  line(182, 176, 218, 176);
  rect(182, 170, 218, 174);
  stroke(255);
  line(183, 172, 217, 172);

  // ticks //
  //1 00
  noStroke();
  fill(0);
  stroke(255);
  rect(220, 157, 226, 163, 2);

  //2 00
  fill(0);
  stroke(255);
  rect(236, 175, 242, 181, 2);

  //3 00
  fill(0);
  stroke(255);
  rect(244, 199, 250, 205, 2);

  //4 00
  fill(0);
  stroke(255);
  rect(236, 223, 242, 229, 2);

  //5 00
  fill(0);
  stroke(255);
  rect(218, 238, 224, 244, 2);

  //6 00
  fill(200);
  rect(196, 243, 203, 251, 2);
  fill(0);
  stroke(255);
  rect(197, 244, 203, 250, 2);

  //7 00
  fill(0);
  stroke(255);
  rect(173, 238, 179, 244, 2);

  //8 00
  fill(0);
  stroke(255);
  rect(158, 223, 164, 229, 2);

  //9 00
  fill(0);
  stroke(255);
  rect(156, 199, 150, 205, 2);

  //10 00
  fill(0);
  stroke(255);
  rect(158, 175, 164, 181, 2);

  //11 00
  fill(0);
  stroke(255);
  rect(174, 157, 180, 163, 2);

  //12 00
  fill(0, 0, 0);
  stroke(0);
  triangle(198, 153, 202, 153, 200, 158);

  //watch pivot point
  fill(0);
  ellipse(200, 200, 9, 9);
  fill(255);
  noStroke();
  arc(200, 200, 5, 5, 2, PI*2);
  fill(0);
  noStroke();
  ellipse(200, 200, 4, 4);

  //left fidget hand
  fill(0);
  stroke(0);
  line((175+10*-sin(3.15+radians(mouseY/1.3))), (200+10*cos(3.15+radians(mouseY/1.3))), 175, 200);

  //right fidget hand
  fill(0);
  stroke(0);
  line((225+10*-sin(3.15+radians(mouseY/0.5))), (200+10*cos(3.15+radians(mouseY/0.5))), 225, 200);

  //bottom fidget hand
  fill(0);
  stroke(0);
  line((200+10*-sin(3.15+radians(mouseY/2.5))), (225+10*cos(3.15+radians(mouseY/2.5))), 200, 225);

  //minute hand
  fill(0);
  stroke(0);
  strokeWeight(2);
  line((200+50*-sin(3.15+radians(mouseY/0.09235))), (200+50*cos(3.15+radians(mouseY/0.09235))), 200, 200);

  //hour hand
  fill(0);
  strokeWeight(3);
  stroke(0);
  line((200+35*-sin(3.15+radians(mouseY/1.108))), (200+35*cos(3.15+radians(mouseY/1.108))), 200, 200);
}

void mousePressed()
{
  //watch glow - ellipse is created for 2 seconds
  frameRate(0.5);
  fill(0, 0, 0, 130);
  ellipse(200, 200, 108, 108);
}

void mouseReleased()
{
  //frames changed back to 60
  frameRate(60);
}