/* 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); }