31:T485,Introduced in 2021, the Joker Dracula watch by Konstantin Chaykin is a striking horological piece of pop art. The timepiece features a distinctive dial that displays Dracula’s face, with rotating eyes representing the hours and minutes, and a wild smile with a playful red tongue indicating the moon phase. Dracula’s facial expression changes according to the current time and moon phase. In addition, as night falls, the watch undergoes a mesmerizing transformation: Dracula’s iconic fangs emerge at 10:00 PM (22:00), reaching full extension between midnight and 3:40 AM. By 3:40 AM, the fangs begin to retract, fully disappearing by 5:30 AM with the dawn’s first light. This module is mounted on the automatic winding Caliber ETA 2824-2. *Here is how the Dracula watch looks like at **${Hours}:${Minutes.toString().padStart(2, '0')}** (Moon age: **${Moon_phase.toFixed(1)} day${currentMoonAge < 1 ?html`` : html`s`}**).*32:Tb45,// 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*1.2353); // 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_E1"); const minutes_center = svg.select("#circle_E2"); const tooth_1_center = svg.select("#circle_T1"); const tooth_2_center = svg.select("#circle_T2"); // 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})`); // Move teeth (fangs) const tooth_1 =svg.select("#Tooth_1"); const cx_tooth_1 = parseFloat(tooth_1_center.attr("cx")); const cy_tooth_1 = parseFloat(tooth_1_center.attr("cy")); const tooth_2 =svg.select("#Tooth_2"); const cx_tooth_2 = parseFloat(tooth_2_center.attr("cx")); const cy_tooth_2 = parseFloat(tooth_2_center.attr("cy")); var angle_fangs = calculateAngleFangs(); tooth_1.attr("transform", `rotate(${angle_fangs}, ${cx_tooth_1}, ${cy_tooth_1})`); tooth_2.attr("transform", `rotate(${-angle_fangs}, ${cx_tooth_2}, ${cy_tooth_2})`); // 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 }33:[{"id":"740fd3a53f562c59c398161d7dbca76df972dbaa86bd63425342a5f05aa87734004edc65bd70b323302407d8b76a1ce2c5bdcd9e9798602c20e177b275df3cc6","href":"https://static.observableusercontent.com/files/740fd3a53f562c59c398161d7dbca76df972dbaa86bd63425342a5f05aa87734004edc65bd70b323302407d8b76a1ce2c5bdcd9e9798602c20e177b275df3cc6","name":"Dracula_Konstantin_Chaykin.svg","type":"image/svg+xml","lastModified":1748897952434.037,"size":5843744}] 2f:{"title":"🧛 Dracula Watch, Konstantin Chaykin","cells":[{"id":0,"value":"# 🧛 Dracula Watch, Konstantin Chaykin","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"$32","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: 500, 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":440,"value":"
\n### Other observable notebook\nDiscover the captivating [Joker watch](https://observablehq.com/@christophe-yamahata/joker-watch-by-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(\"Dracula_Konstantin_Chaykin.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"viewof bkg_color = Inputs.color({label: \"Background color\", value: \"#2c0c1d\"});","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"},{"id":361,"value":"// Set angle_fangs based on time of day\nfunction calculateAngleFangs() {\n\n var Time = Hours + Minutes / 60;\n \n // Fangs start to appear at 22:00 \n // They are fully extended from 23:50 until 3:40\n // Frangs start tro retract at 3:40. \n // They are fully retracted after 5:30\n\n const fully_retracted = 10; // No shadow \n const retracted = 8; // Fangs' shadows start to become visible\n const extended = 0;\n var angle_fangs;\n \n if (Time >= 22 || Time <= 5.5) {\n if (Time >= 23 + 5/6 || Time <= 3 + 2/3) { // Fangs completely extended from 0:00 to 3:40\n angle_fangs = extended;\n } else if (Time > 3 + 2/3 && Time <= 5.5) {// Fangs slowly retract from 3:40 until 5:30\n angle_fangs = 4.3636 * Time - 16;\n } else { // Growing fangs from 22:00 until 1:00\n angle_fangs = - 4.3636 * Time + 104;\n }\n } else { // No fangs from 5:30 AM to 22:00\n angle_fangs = fully_retracted;\n }\n\n return angle_fangs;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}