31:T8a1,// This SVG file was created with Adobe Illustrator Joker_watch_Konstantin_Chaykin = { const watch = await Joker.text(); const document = (new DOMParser).parseFromString(watch, "image/svg+xml"); const svg = d3.select(document.documentElement); // Set the new height based on the bounding box to remove extra space svg.attr("width", SVG_width) .attr("height", SVG_width); // Use the exact height from the bounding box // Hide elements svg.select("#Rotations").style("display", "none"); svg.select("#BKG_x5F_color").style("fill", bkg_color); if(uniform_bkg) { svg.select("#Pattern").style("display", "none"); } // Rotation centers const moon_disc_center = svg.select("#circle_moon"); const hours_center = svg.select("#circle_1"); const minutes_center = svg.select("#circle_2"); // Rotate hours const Eye_hours =svg.select("#Eye_1"); const cx_Hours = parseFloat(hours_center.attr("cx")); const cy_Hours = parseFloat(hours_center.attr("cy")); var angle_Hours = Hours*(360/12) + Minutes*(30/60); Eye_hours.attr("transform", `rotate(${angle_Hours}, ${cx_Hours}, ${cy_Hours})`); // Rotate minutes const Eye_minutes =svg.select("#Eye_2"); const cx_Minutes = parseFloat(minutes_center.attr("cx")); const cy_Minutes = parseFloat(minutes_center.attr("cy")); var angle_Minutes = Minutes*(360/60); Eye_minutes.attr("transform", `rotate(${angle_Minutes}, ${cx_Minutes}, ${cy_Minutes})`); // Rotate Moon disc const Moon_disc =svg.select("#Moon_disc"); const cx_Moon = parseFloat(moon_disc_center.attr("cx")); const cy_Moon = parseFloat(moon_disc_center.attr("cy")); var angle_Moon = (0.5 - Moon_phase/lunarMonth)*180; Moon_disc.attr("transform", `rotate(${angle_Moon}, ${cx_Moon}, ${cy_Moon})`); // Create a container for the SVG and add a border const container = d3.create("div") .style("border", "2px solid black") .style("display", "inline-block") .style("line-height", "0") // Eliminate extra space from line height .style("padding", "0px"); container.node().appendChild(svg.node()); // Append SVG to the container return container.node(); // Return the container node }32:[{"id":"b1d84ea8a1e01275a2e7fb7c31b720912a8b788e3b93e64f06a1af493b1e837a26e0cab8ab55525beaa1a2b8532dc7f8ac91ef8f5a4348848bcf6e0721ee15c4","href":"https://static.observableusercontent.com/files/b1d84ea8a1e01275a2e7fb7c31b720912a8b788e3b93e64f06a1af493b1e837a26e0cab8ab55525beaa1a2b8532dc7f8ac91ef8f5a4348848bcf6e0721ee15c4","name":"Joker_Konstantin_Chaykin.svg","type":"image/svg+xml","lastModified":1726244759483.82,"size":5800775}] 2f:{"title":"🤡. Joker Watch by Konstantin Chaykin","cells":[{"id":0,"value":"# 🤡. Joker Watch by Konstantin Chaykin","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"Launched in 2017, the Joker watch by Konstantin Chaykin is a striking horological piece of pop art. The timepiece features a distinctive dial that displays the Joker's face, with rotating eyes representing the hours and minutes, and a wild smile with a playful red tongue indicating the moon phase. \nThe Joker's facial expression changes according to the current time and moon phase. \n\nThis module is mounted on the automatic winding Caliber ETA 2824-2.\n\n\n*Here is how the Joker watch looks like at **${Hours}:${Minutes.toString().padStart(2, '0')}** (Moon age: **${Moon_phase.toFixed(1)} day${currentMoonAge < 1 ?html`` : html`s`}**).*","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof Hours = Inputs.range([0, 23], {value: Hours_now, step: 1, label: htl.html`Hours`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"// Input formated to always show two digits\nviewof Minutes = Inputs.range([0, 59], {value: Minutes_now, step: 1, format: x => x.toString().padStart(2, '0'), label: htl.html`Minutes`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"// Moon phase\nviewof Moon_phase = Inputs.range([0, 29.53], {value: currentMoonAge, step: 0.5, label: htl.html`Moon Age (days)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof SVG_width = Inputs.range([400, 900], {value: 600, step: 50, label: htl.html`Illustration width/height
(size in pixels)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof uniform_bkg = Inputs.toggle({label: htl.html`Uniform background`, value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"display_bkg_color = {\n const html = uniform_bkg? htl.html`${viewof bkg_color}`: htl.html`

`;\n \n yield html\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"
\n### Other observable notebook\nDiscover the captivating [Dracula watch](https://observablehq.com/@christophe-yamahata/dracula-watch-konstantin-chaykin?collection=@christophe-yamahata/horology) by Konstantin Chaykin.","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"viewof display_inspect = Inputs.toggle({label: \"⇣ Check to inspect variables and functions used in this notebook\", values: [\"true\", \"none\"], value: \"none\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"\n
\n${display_inspect == \"none\"? html`

⇣ Appendix is hidden ...

` : html`

Appendix

`}","pinned":false,"hidden":false,"mode":"html"},{"id":9,"value":"Joker = FileAttachment(\"Joker_Konstantin_Chaykin.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"viewof bkg_color = Inputs.color({label: \"Background color\", value: \"#141b2e\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"// Refresh time (in seconds)\nwait_duration = 60;","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"// Extract the current hours\nHours_now = {\n while (true) {\n yield new Date().getHours(); // Yield the current Hours (0-23)\n await new Promise(update => setTimeout(update, wait_duration*1000)); // Wait \"wait_duration\" seconds\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"Minutes_now = {\n while (true) {\n yield new Date().getMinutes(); // Yield the current Minutes (0-59)\n await new Promise(update => setTimeout(update, wait_duration*1000)); // Wait \"wait_duration\" seconds\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"// Average length of a lunar month\nlunarMonth = 29.53058867;","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"// Moon's current phase\ncurrentMoonAge = {\n while (true) {\n yield calculateMoonAge()\n await new Promise(update => setTimeout(update, wait_duration*1000)); // Wait \"wait_duration\" seconds\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"function calculateMoonAge() {\n // Reference new moon date: \n const referenceNewMoon = new Date(Date.UTC(2024, 8, 3, 3, 55)); // 3 Sep 2024, 03:55 (a known new moon date)\n \n // Get the current date\n const today = new Date();\n\n // Calculate the difference in milliseconds between today and the reference new moon\n const diff = today - referenceNewMoon;\n\n // Convert the difference from milliseconds to days\n const diffInDays = diff / (1000 * 60 * 60 * 24);\n\n // Calculate the Moon's age by taking the modulus of the difference and the lunar month\n const moonAge = diffInDays % lunarMonth;\n\n return moonAge;\n}\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}