API tools faq
paste
Guest User

Untitled

a guest
Feb 25th, 2018
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>Gears Clock</title>
  6. </head>
  7. <body>
  8. <script src="//d3js.org/d3.v4.min.js"></script>
  9. <style>
  10. .sec path, .min path, .hour path {
  11. fill: #ffffff;
  12. }
  13.  
  14. .msec0 path {
  15. fill: #FF7F00;
  16. }
  17.  
  18. .sec0 path, .min0 path, .hour0 path {
  19. fill: #8B795E;
  20. }
  21.  
  22. .msec1_out path, .msec3_out path, .sec1_out path, .sec3_out path, .sec5 path, .min1_out path, .min3_out path {
  23. fill: #8B8989;
  24. }
  25.  
  26. .msec2_out path, .msec4_out path, .sec2_out path, .sec4_out path, .min2_out path, .min4_out path {
  27. fill: #CDC0B0;
  28. }
  29.  
  30. .msec1_in path, .msec3_in path, .sec1_in path, .sec3_in path, .min1_in path, .min3_in path {
  31. fill: #CDC0B0;
  32. }
  33.  
  34. .msec2_in path, .msec4_in path, .sec2_in path, .sec4_in path, .min2_in path, .min4_in path {
  35. fill: #FFEFDB;
  36. }
  37. </style>
  38.  
  39.  
  40. <script>
  41. function gear(d) {
  42. var n = d.teeth,
  43. r2 = Math.abs(d.radius),
  44. r0 = r2 - 4,
  45. r1 = r2 + 4,
  46. r3 = 4,
  47. da = Math.PI / n,
  48. a0 = -Math.PI / 2,
  49. i = -1,
  50. path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
  51. while (++i < n) path.push(
  52. "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
  53. "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
  54. "L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
  55. "A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
  56. "L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0),
  57. "L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0));
  58. if (d.center) {
  59. path.push("M0,", -r3 * 4, "A", r3 * 4, ",", r3 * 4, " 0 0,0 0,", r3 * 4, "A", r3 * 4, ",", r3 * 4, " 0 0,0 0,", -r3 * 4);
  60. }
  61. path.push("Z");
  62. return path.join("");
  63. }
  64.  
  65. function pointer(d) {
  66. var r = 4;
  67. var path = ["M0,", -r, "A", r * 16, ",", r, " 0 0,0 0,", r, "A", 4 * r, ",", r, " 0 0,0 0,", -r, "Z"];
  68. return path.join("");
  69. }
  70.  
  71. var width = 960,
  72. height = 500,
  73. radius = 64;
  74.  
  75. var svg = d3.select("body").append("svg")
  76. .attr("width", width)
  77. .attr("height", height)
  78. .append("g")
  79. .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(.55)")
  80. .append("g");
  81.  
  82. var frame = svg.append("g")
  83. .datum({radius: Infinity});
  84.  
  85. var start_x = width - 4.5 * radius;
  86. var start_y = -4.5 * radius;
  87.  
  88. var msec0_r = radius * 2;
  89. var msec0_x = start_x;
  90. var msec0_y = start_y;
  91.  
  92. var msec1_out_r = radius;
  93. var msec1_in_r = radius / 2;
  94. var msec1_x = msec0_x;
  95. var msec1_y = msec0_y + msec0_r + msec1_out_r;
  96.  
  97. var msec2_out_r = radius;
  98. var msec2_in_r = radius / 2;
  99. var msec2_x = msec1_x;
  100. var msec2_y = msec1_y + msec1_in_r + msec2_out_r;
  101.  
  102. var msec3_out_r = radius;
  103. var msec3_in_r = radius / 3;
  104. var msec3_x = msec2_x;
  105. var msec3_y = msec2_y + msec2_in_r + msec3_out_r;
  106.  
  107. var sec0_r = radius * 2;
  108. var sec0_x = msec3_x;
  109. var sec0_y = msec3_y + msec3_in_r + sec0_r;
  110.  
  111. var sec1_out_r = radius;
  112. var sec1_in_r = radius / 2;
  113. var sec1_x = sec0_x - sec0_r - sec1_out_r;
  114. var sec1_y = sec0_y;
  115.  
  116. var sec2_out_r = radius;
  117. var sec2_in_r = radius / 2;
  118. var sec2_x = sec1_x - sec1_in_r - sec2_out_r;
  119. var sec2_y = sec1_y;
  120.  
  121. var sec3_out_r = radius;
  122. var sec3_in_r = radius / 3;
  123. var sec3_x = sec2_x - sec2_in_r - sec3_out_r;
  124. var sec3_y = sec2_y;
  125.  
  126. var sec4_out_r = radius;
  127. var sec4_in_r = radius / 5;
  128. var sec4_x = sec3_x - sec3_in_r - sec4_out_r;
  129. var sec4_y = sec3_y;
  130.  
  131. var sec5_r = radius;
  132. var sec5_x = sec4_x - sec4_in_r - sec5_r;
  133. var sec5_y = sec4_y;
  134.  
  135. var min0_r = radius * 2;
  136. var min0_x = sec5_x - sec5_r - min0_r;
  137. var min0_y = sec5_y;
  138.  
  139. var min1_out_r = radius;
  140. var min1_in_r = radius / 2;
  141. var min1_x = min0_x - min0_r - min1_out_r;
  142. var min1_y = min0_y;
  143.  
  144. var min2_out_r = radius;
  145. var min2_in_r = radius / 2;
  146. var min2_x = min1_x - min1_in_r - min2_out_r;
  147. var min2_y = min1_y;
  148.  
  149. var min3_out_r = radius;
  150. var min3_in_r = radius / 3;
  151. var min3_x = min2_x - min2_in_r - min3_out_r;
  152. var min3_y = min2_y;
  153.  
  154. var hour0_r = radius * 2;
  155. var hour0_x = min3_x - min3_in_r - hour0_r;
  156. var hour0_y = min3_y;
  157.  
  158. frame.append("g")
  159. .attr("class", "msec0")
  160. .attr("transform", "translate(" + msec0_x + "," + msec0_y + ")")
  161. .datum({teeth: 60, radius: -msec0_r})
  162. .append("path")
  163. .attr("d", gear);
  164.  
  165. frame.append("g")
  166. .attr("class", "msec1_out")
  167. .attr("transform", "translate(" + msec1_x + "," + msec1_y + ")")
  168. .datum({teeth: 30, radius: -msec1_out_r, center: true})
  169. .append("path")
  170. .attr("d", gear);
  171.  
  172. frame.append("g")
  173. .attr("class", "msec1_in")
  174. .attr("transform", "translate(" + msec1_x + "," + msec1_y + ")")
  175. .datum({teeth: 15, radius: -msec1_in_r, center: true})
  176. .append("path")
  177. .attr("d", gear);
  178.  
  179. frame.append("g")
  180. .attr("class", "msec2_out")
  181. .attr("transform", "translate(" + msec2_x + "," + msec2_y + ")")
  182. .datum({teeth: 30, radius: -msec2_out_r, center: true})
  183. .append("path")
  184. .attr("d", gear);
  185.  
  186. frame.append("g")
  187. .attr("class", "msec2_in")
  188. .attr("transform", "translate(" + msec2_x + "," + msec2_y + ")")
  189. .datum({teeth: 15, radius: -msec2_in_r, center: true})
  190. .append("path")
  191. .attr("d", gear);
  192.  
  193. frame.append("g")
  194. .attr("class", "msec3_out")
  195. .attr("transform", "translate(" + msec3_x + "," + msec3_y + ")")
  196. .datum({teeth: 30, radius: -msec3_out_r, center: true})
  197. .append("path")
  198. .attr("d", gear);
  199.  
  200. frame.append("g")
  201. .attr("class", "msec3_in")
  202. .attr("transform", "translate(" + msec3_x + "," + msec3_y + ")")
  203. .datum({teeth: 10, radius: -msec3_in_r, center: true})
  204. .append("path")
  205. .attr("d", gear);
  206.  
  207. frame.append("g")
  208. .attr("class", "sec0")
  209. .attr("transform", "translate(" + sec0_x + "," + sec0_y + ")")
  210. .datum({teeth: 60, radius: -sec0_r, pointer: true})
  211. .append("path")
  212. .attr("d", gear);
  213.  
  214. frame.append("g")
  215. .attr("class", "sec")
  216. .attr("transform", "translate(" + sec0_x + "," + sec0_y + ")")
  217. .datum({})
  218. .append("path")
  219. .attr("d", pointer);
  220.  
  221. frame.append("g")
  222. .attr("class", "sec1_out")
  223. .attr("transform", "translate(" + sec1_x + "," + sec1_y + ")")
  224. .datum({teeth: 30, radius: -sec1_out_r, center: true})
  225. .append("path")
  226. .attr("d", gear);
  227.  
  228. frame.append("g")
  229. .attr("class", "sec1_in")
  230. .attr("transform", "translate(" + sec1_x + "," + sec1_y + ")")
  231. .datum({teeth: 15, radius: -sec1_in_r, center: true})
  232. .append("path")
  233. .attr("d", gear);
  234.  
  235. frame.append("g")
  236. .attr("class", "sec2_out")
  237. .attr("transform", "translate(" + sec2_x + "," + sec2_y + ")")
  238. .datum({teeth: 30, radius: -sec2_out_r, center: true})
  239. .append("path")
  240. .attr("d", gear);
  241.  
  242. frame.append("g")
  243. .attr("class", "sec2_in")
  244. .attr("transform", "translate(" + sec2_x + "," + sec2_y + ")")
  245. .datum({teeth: 15, radius: -sec2_in_r, center: true})
  246. .append("path")
  247. .attr("d", gear);
  248.  
  249. frame.append("g")
  250. .attr("class", "sec3_out")
  251. .attr("transform", "translate(" + sec3_x + "," + sec3_y + ")")
  252. .datum({teeth: 30, radius: -sec3_out_r, center: true})
  253. .append("path")
  254. .attr("d", gear);
  255.  
  256. frame.append("g")
  257. .attr("class", "sec3_in")
  258. .attr("transform", "translate(" + sec3_x + "," + sec3_y + ")")
  259. .datum({teeth: 10, radius: -sec3_in_r, center: true})
  260. .append("path")
  261. .attr("d", gear);
  262.  
  263. frame.append("g")
  264. .attr("class", "sec4_out")
  265. .attr("transform", "translate(" + sec4_x + "," + sec4_y + ")")
  266. .datum({teeth: 30, radius: -sec4_out_r, center: true})
  267. .append("path")
  268. .attr("d", gear);
  269.  
  270. frame.append("g")
  271. .attr("class", "sec4_in")
  272. .attr("transform", "translate(" + sec4_x + "," + sec4_y + ")")
  273. .datum({teeth: 6, radius: -sec4_in_r, center: true})
  274. .append("path")
  275. .attr("d", gear);
  276.  
  277. frame.append("g")
  278. .attr("class", "sec5")
  279. .attr("transform", "translate(" + sec5_x + "," + sec5_y + ")")
  280. .datum({teeth: 30, radius: -sec5_r, center: true})
  281. .append("path")
  282. .attr("d", gear);
  283.  
  284. frame.append("g")
  285. .attr("class", "min0")
  286. .attr("transform", "translate(" + min0_x + "," + min0_y + ")")
  287. .datum({teeth: 60, radius: -min0_r, pointer: true})
  288. .append("path")
  289. .attr("d", gear);
  290.  
  291. frame.append("g")
  292. .attr("class", "min")
  293. .attr("transform", "translate(" + min0_x + "," + min0_y + ")")
  294. .datum({})
  295. .append("path")
  296. .attr("d", pointer);
  297.  
  298. frame.append("g")
  299. .attr("class", "min1_out")
  300. .attr("transform", "translate(" + min1_x + "," + min1_y + ")")
  301. .datum({teeth: 30, radius: -min1_out_r, center: true})
  302. .append("path")
  303. .attr("d", gear);
  304.  
  305. frame.append("g")
  306. .attr("class", "min1_in")
  307. .attr("transform", "translate(" + min1_x + "," + min1_y + ")")
  308. .datum({teeth: 15, radius: -min1_in_r, center: true})
  309. .append("path")
  310. .attr("d", gear);
  311.  
  312. frame.append("g")
  313. .attr("class", "min2_out")
  314. .attr("transform", "translate(" + min2_x + "," + min2_y + ")")
  315. .datum({teeth: 30, radius: -min2_out_r, center: true})
  316. .append("path")
  317. .attr("d", gear);
  318.  
  319. frame.append("g")
  320. .attr("class", "min2_in")
  321. .attr("transform", "translate(" + min2_x + "," + min2_y + ")")
  322. .datum({teeth: 15, radius: -min2_in_r, center: true})
  323. .append("path")
  324. .attr("d", gear);
  325.  
  326. frame.append("g")
  327. .attr("class", "min3_out")
  328. .attr("transform", "translate(" + min3_x + "," + min3_y + ")")
  329. .datum({teeth: 30, radius: -min3_out_r, center: true})
  330. .append("path")
  331. .attr("d", gear);
  332.  
  333. frame.append("g")
  334. .attr("class", "min3_in")
  335. .attr("transform", "translate(" + min3_x + "," + min3_y + ")")
  336. .datum({teeth: 10, radius: -min3_in_r, center: true})
  337. .append("path")
  338. .attr("d", gear);
  339.  
  340. frame.append("g")
  341. .attr("class", "hour0")
  342. .attr("transform", "translate(" + hour0_x + "," + hour0_y + ")")
  343. .datum({teeth: 60, radius: -hour0_r, pointer: true})
  344. .append("path")
  345. .attr("d", gear);
  346.  
  347. frame.append("g")
  348. .attr("class", "hour")
  349. .attr("transform", "translate(" + hour0_x + "," + hour0_y + ")")
  350. .datum({})
  351. .append("path")
  352. .attr("d", pointer);
  353.  
  354. var gear_speed = 1 / 1000 * 6 * 12;
  355. var pointer_speed = 1 / 1000 * 6;
  356.  
  357. var date = new Date();
  358.  
  359. var hour_start = Date.now() - (90 + (date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 3600) * 30) / pointer_speed * 60 * 60;
  360. var min_start = Date.now() - (90 + (date.getMinutes() + date.getSeconds() / 60) * 6) / pointer_speed * 60;
  361. var sec_start = Date.now() - (90 + date.getSeconds() * 6) / pointer_speed;
  362.  
  363. var msec0_start = Date.now() - (90 + date.getSeconds() * 6) / gear_speed;
  364.  
  365. d3.timer(function () {
  366. var hour_angle = (Date.now() - hour_start) * pointer_speed / 60 / 60;
  367. frame.selectAll(".hour").select("path").attr("transform", function (d) { return "rotate(" + hour_angle + ")"; });
  368.  
  369. var min_angle = (Date.now() - min_start) * pointer_speed / 60;
  370. frame.selectAll(".min").select("path").attr("transform", function (d) { return "rotate(" + min_angle + ")"; });
  371.  
  372. var sec_angle = (Date.now() - sec_start) * pointer_speed;
  373. frame.selectAll(".sec").select("path").attr("transform", function (d) { return "rotate(" + sec_angle + ")"; });
  374.  
  375. var msec0_angle = (Date.now() - msec0_start) * gear_speed;
  376. frame.selectAll(".msec0").select("path").attr("transform", function (d) { return "rotate(" + msec0_angle + ")"; });
  377.  
  378. var msec1_angle = msec0_angle * 2;
  379. frame.selectAll(".msec1_in").select("path").attr("transform", function (d) { return "rotate(" + -msec1_angle + ")"; });
  380. frame.selectAll(".msec1_out").select("path").attr("transform", function (d) { return "rotate(" + -msec1_angle + ")"; });
  381.  
  382. var msec2_angle = msec1_angle / 2 + 6;
  383. frame.selectAll(".msec2_in").select("path").attr("transform", function (d) { return "rotate(" + msec2_angle + ")"; });
  384. frame.selectAll(".msec2_out").select("path").attr("transform", function (d) { return "rotate(" + msec2_angle + ")"; });
  385.  
  386. var msec3_angle = msec2_angle / 2 + 6;
  387. frame.selectAll(".msec3_in").select("path").attr("transform", function (d) { return "rotate(" + -msec3_angle + ")"; });
  388. frame.selectAll(".msec3_out").select("path").attr("transform", function (d) { return "rotate(" + -msec3_angle + ")"; });
  389.  
  390. var sec0_angle = msec3_angle / 6;
  391. frame.selectAll(".sec0").select("path").attr("transform", function (d) { return "rotate(" + sec0_angle + ")"; });
  392.  
  393. var sec1_angle = sec0_angle * 2 + 6;
  394. frame.selectAll(".sec1_in").select("path").attr("transform", function (d) { return "rotate(" + -sec1_angle + ")"; });
  395. frame.selectAll(".sec1_out").select("path").attr("transform", function (d) { return "rotate(" + -sec1_angle + ")"; });
  396.  
  397. var sec2_angle = sec1_angle / 2 - 3;
  398. frame.selectAll(".sec2_in").select("path").attr("transform", function (d) { return "rotate(" + sec2_angle + ")"; });
  399. frame.selectAll(".sec2_out").select("path").attr("transform", function (d) { return "rotate(" + sec2_angle + ")"; });
  400.  
  401. var sec3_angle = sec2_angle / 2 + 3;
  402. frame.selectAll(".sec3_in").select("path").attr("transform", function (d) { return "rotate(" + -sec3_angle + ")"; });
  403. frame.selectAll(".sec3_out").select("path").attr("transform", function (d) { return "rotate(" + -sec3_angle + ")"; });
  404.  
  405. var sec4_angle = sec3_angle / 3;
  406. frame.selectAll(".sec4_in").select("path").attr("transform", function (d) { return "rotate(" + sec4_angle + ")"; });
  407. frame.selectAll(".sec4_out").select("path").attr("transform", function (d) { return "rotate(" + sec4_angle + ")"; });
  408.  
  409. var sec5_angle = sec4_angle / 5;
  410. frame.selectAll(".sec5").select("path").attr("transform", function (d) { return "rotate(" + -sec5_angle + ")"; });
  411.  
  412. var min0_angle = sec5_angle / 2 + 3;
  413. frame.selectAll(".min0").select("path").attr("transform", function (d) { return "rotate(" + min0_angle + ")"; });
  414.  
  415. var min1_angle = min0_angle * 2 + 6;
  416. frame.selectAll(".min1_in").select("path").attr("transform", function (d) { return "rotate(" + -min1_angle + ")"; });
  417. frame.selectAll(".min1_out").select("path").attr("transform", function (d) { return "rotate(" + -min1_angle + ")"; });
  418.  
  419. var min2_angle = min1_angle / 2 - 3;
  420. frame.selectAll(".min2_in").select("path").attr("transform", function (d) { return "rotate(" + min2_angle + ")"; });
  421. frame.selectAll(".min2_out").select("path").attr("transform", function (d) { return "rotate(" + min2_angle + ")"; });
  422.  
  423. var min3_angle = min2_angle / 2 + 3;
  424. frame.selectAll(".min3_in").select("path").attr("transform", function (d) { return "rotate(" + -min3_angle + ")"; });
  425. frame.selectAll(".min3_out").select("path").attr("transform", function (d) { return "rotate(" + -min3_angle + ")"; });
  426.  
  427. var hour0_angle = min3_angle / 6 + 3;
  428. frame.selectAll(".hour0").select("path").attr("transform", function (d) { return "rotate(" + hour0_angle + ")"; });
  429. });
  430.  
  431. </script>
  432. </body>
  433. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!