2c:null 2d:["$","title",null,{"children":"🤡. Joker Watch by Konstantin Chaykin | Christophe Yamahata | Observable"}] 32:T7bd,Joker_watch_Konstantin_Chaykin = { const watch = await Joker.text(); const doc = (new DOMParser()).parseFromString(watch, "image/svg+xml"); const svg = d3.select(doc.documentElement); // Set explicit SVG dimensions svg .attr("width", SVG_width) .attr("height", SVG_width); // Hide static reference elements & update background svg.select("#Rotations").style("display", "none"); svg.select("#BKG_x5F_color").style("fill", bkg_color); if (uniform_bkg) { svg.select("#Pattern").style("display", "none"); } // Robust helper to extract center coordinates function resolveCenter(selector) { const sel = svg.select(selector); if (sel.empty()) return { x: 0, y: 0 }; const node = sel.node(); if (node.hasAttribute("cx")) { return { x: parseFloat(sel.attr("cx")), y: parseFloat(sel.attr("cy")) }; } const bbox = node.getBBox(); return { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 }; } // Rotate hours const hours_center = resolveCenter("#circle_1"); const angle_Hours = Hours * (360 / 12) + Minutes * (30 / 60); svg.select("#Eye_1") .attr("transform", `rotate(${angle_Hours}, ${hours_center.x}, ${hours_center.y})`); // Rotate minutes const minutes_center = resolveCenter("#circle_2"); const angle_Minutes = Minutes * (360 / 60); svg.select("#Eye_2") .attr("transform", `rotate(${angle_Minutes}, ${minutes_center.x}, ${minutes_center.y})`); // Rotate Moon disc const moon_disc_center = resolveCenter("#circle_moon"); const angle_Moon = (0.5 - Moon_phase / lunarMonth) * 180; svg.select("#Moon_disc") .attr("transform", `rotate(${angle_Moon}, ${moon_disc_center.x}, ${moon_disc_center.y})`); // Create container const container = d3.create("div") .style("border", "2px solid black") .style("display", "inline-block") .style("line-height", "0") .style("padding", "0px"); container.node().appendChild(svg.node()); return container.node(); }33:T47b,joker_svg = { const rawText = await Joker.text(); const parsedDOM = (new DOMParser()).parseFromString(rawText, "image/svg+xml"); const svgNode = parsedDOM.documentElement; const svg = d3.select(svgNode) .attr("viewBox", `0 0 ${svgNode.getAttribute("width") || 1000} ${svgNode.getAttribute("height") || 1000}`) .attr("preserveAspectRatio", "xMidYMid meet") .style("width", "100%") .style("height", "auto"); // Hide static reference layers svg.select("#Rotations").style("display", "none"); // Helper to resolve center points safely via cx/cy or BBox function getCenter(selector) { const el = svg.select(selector); if (el.empty()) return { x: 0, y: 0 }; const node = el.node(); if (node.hasAttribute("cx")) { return { x: parseFloat(el.attr("cx")), y: parseFloat(el.attr("cy")) }; } const bbox = node.getBBox(); return { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 }; } // Pre-calculate rotation centers once svgNode.centers = { hours: getCenter("#circle_1"), minutes: getCenter("#circle_2"), moon: getCenter("#circle_moon") }; return svgNode; }34:[{"id":"b1d84ea8a1e01275a2e7fb7c31b720912a8b788e3b93e64f06a1af493b1e837a26e0cab8ab55525beaa1a2b8532dc7f8ac91ef8f5a4348848bcf6e0721ee15c4","href":"https://static.observableusercontent.com/files/b1d84ea8a1e01275a2e7fb7c31b720912a8b788e3b93e64f06a1af493b1e837a26e0cab8ab55525beaa1a2b8532dc7f8ac91ef8f5a4348848bcf6e0721ee15c4","name":"Joker_Konstantin_Chaykin.svg","type":"image/svg+xml","lastModified":1726244759483.82,"size":5800775}] 30:{"id":"767e4f004a6afa3a","slug":"joker-watch-by-konstantin-chaykin","title":"🤡. Joker Watch by Konstantin Chaykin","thumbnail":"3242a79341731272a2188d348ba4b0496e64374d679970cfb9e1a7a3ee53fa5f","access_level":"public","create_time":"$D2024-09-13T13:11:21.668Z","update_time":"$D2026-09-05T13:43:33.162Z","view_time":null,"first_public_time":"$D2024-09-13T15:23:14.338Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":327,"publish_version":327,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"53ef52938384acb8","slug":"horology","title":"Horology","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"titling":"auto","title":"🤡. Joker Watch by Konstantin Chaykin","cells":[{"id":0,"value":"# 🤡. Joker Watch by Konstantin Chaykin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof Hours = Inputs.range([0, 23], {value: Hours_now, step: 1, label: htl.html`Hours`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof uniform_bkg = Inputs.toggle({label: htl.html`Uniform background`, value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"
\n\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"\n
\n${display_inspect == \"none\"? html`

⇣ Appendix is hidden ...

` : html`

Appendix

`}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"Joker = FileAttachment(\"Joker_Konstantin_Chaykin.svg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"viewof bkg_color = Inputs.color({label: \"Background color\", value: \"#141b2e\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"// Refresh time (in seconds)\nwait_duration = 60;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"// Average length of a lunar month\nlunarMonth = 29.53058867;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"