2e:null 2f:["$","title",null,{"children":"Ψηφιακό ρολόι | Roman Karavia | Observable"}] 34:Ta3c,md` ## Digital analog clocks \`Ψηφιακό ρολόι\`¹ uses a collection of analog (but arguably also digital) clocks to shape a bigger digital clock. The guiding design principle is that "real" analog clocks have to be used, meaning that the movement of the hour and minute hands is constrained: The two hands are never allowed to move independently. Whenever the hour hand moves by one hour, the minute hand has to do a full turn. Similarly, when the minute hand shows "half past", the hour hand must be exactly in the middle between two full hours. ¹ Digital clock ### History I don't know who came up with the idea to assemble analog clocks into a big digital clock. The first reference I could find is [the ClockClock](https://clockclock.com/) (2008) by the Swedish design studio \`Humans since 1982\`. The ClockClock uses a 8x3 grid of clocks (24 in total, I think there is some pattern here...), a later version with the name [a million Times](https://www.humanssince1982.com/a-million-times) (2013) uses grid of 24x12 (definitely a pattern!). Since these clocks were thought up by designers rather than narrow-minded engineers such as myself, the hour and minute hands of each analog clock can move independently, which allows for beautiful patterns of movement at the expense of being wrong. If you know about earlier versions of analog digital clocks, please let me know, for example by [leaving a comment on this notebook](https://observablehq.com/@observablehq/suggestions-and-comments). --- ## Walkthrough The following paragraphs and code blocks give an overview of the building blocks of what you see above. ### Draw a single clock We start by drawing a single analog clock as a first step towards our larger goal. By drawing, we really mean creating SVG shapes using the [D3 library](https://d3js.org/), specifically the functionality from [d3-selection](https://github.com/d3/d3-selection) for creating and modifying SVG elements. A clock consists of a circle and two lines (the hour and minute hand), which are created in \`addClock()\`. The lines are then rotated according to the time provided through a [D3 data join](https://observablehq.com/@d3/selection-join) in \`updateClock()\`. Both functions can be found in the [rendering section](#rendering) further down. Note that time is expressed in hours, with minutes as fractional hours, which makes interpolating and transitioning between different states easier. For example, quarter past one is written as \`1.25\`. You can modify the value of \`hours\` below to see how both hour and minute hands are affected.`35:T46a,md` ### Transition for a single clock What is left now is to transition between different digits in our digital clock. We start again with a single clock to demonstrate the concept. The \`interpolateHours()\` function from the [animation section](#animation) is responsible for calculating transitions between two different states. It works with normalized time values for the transitions, which means that we need to calculate a value that starts at \`0\`, then slowly increases, and finally reaches \`1\` when the transition is complete. Instead of just increasing the value linearly, the transition starts slowly, then speeds up, and finally slows down again. This is achieved by using a cubic easing function from [d3-ease](https://observablehq.com/@d3/easing-animations). In order to keep the animation going forever, we use an "infinite" loop, combined with the [invalidation Promise](https://github.com/observablehq/stdlib#invalidation). This is one among several ways to update a cell continuously, more alternatives are explained in the [animation loops notebook](https://observablehq.com/@mbostock/animation-loops). `36:T535,{ // Create SVG that can fit a single clock as before and yield it const size = 2 * settings.radius; const svgNode = DOM.svg(5 * size, size); yield svgNode; // Add a clock d3.select(svgNode).call(addClock); const counter = d3 .select(svgNode) .append("text") .style("font-size", `${settings.radius / 2}px`) .style("transform", "translate(72px, 36px)"); // Set hours to transition between (01:15 => 10:30) const hoursFrom = 1.25; const hoursTo = 10.5; const interval = 4000; const delayBeforeRestart = 1000; // Update the SVG 60 times per second const framesPerSecond = 60; // Start an "infinite" loop that is stopped when the cell is re-evaluated let running = true; invalidation.then(() => (running = false)); while (running) { const intervalWithDelay = interval + delayBeforeRestart; let normalizedTime = (new Date().getTime() % intervalWithDelay) / interval; normalizedTime = Math.min(1, normalizedTime); const hours = interpolateHours(hoursFrom, hoursTo, normalizedTime); counter.text(`Normalized time: ${normalizedTime.toFixed(2)}`); // Add the clocks and set their times d3.select(svgNode) .datum(hours) .call(updateClock); // Wait until it is time for the next frame await Promises.tick(1000 / framesPerSecond); } }37:T4b1,function gridForTime(date, elapsed) { const seconds = (date % (60 * 1000)) / 1000; const transitionStart = ticks.length; const transitionSeconds = 60 - transitionStart; const normalizedTime = clamp((seconds - transitionStart) / transitionSeconds); const timeGrid = makeGrid(); drawGrid(timeGrid, separatorGrid, [2, 9]); digits.forEach(({ fromDate, column }) => { const from = fromDate(date); const to = fromDate(new Date(date.getTime() + 60 * 1000)); const digitGrid = interpolateGrid( spriteGrids[from], spriteGrids[to], normalizedTime ); drawGrid(timeGrid, digitGrid, [1, column]); }); ticks.forEach(([row, column], delay) => { let minutes = date.getMinutes() + delay / 60; if (delay >= date.getSeconds()) { minutes -= 1; } timeGrid[row][column] = date.getHours() + minutes / 60; }); const fade = 1000 * settings.fadeSeconds; if (Math.abs(elapsed) < fade) { if (elapsed > 0) { // Fade in return interpolateGrid(makeGrid(), timeGrid, elapsed / fade); } else { // Fade out return interpolateGrid(timeGrid, makeGrid(), 1 + elapsed / fade); } } else { return timeGrid; } }38:T536,function pixelsToHours(pixels) { const getPixel = (i, j) => { if (i >= 0 && i < pixels.length && j >= 0 && j < pixels[i].length) { return pixels[i][j]; } else { return 0; } }; const grid = []; for (let i = 0; i <= pixels.length; i += 1) { const row = []; for (let j = 0; j <= pixels[0].length; j += 1) { let orientation = 'empty'; const blackPixels = getPixel(i, j) + getPixel(i - 1, j) + getPixel(i, j - 1) + getPixel(i - 1, j - 1); if (blackPixels === 2) { if (getPixel(i, j) === getPixel(i - 1, j)) { orientation = 'vertical'; } else { orientation = 'horizontal'; } } else if (blackPixels === 1 || blackPixels === 3) { const oddPixel = blackPixels === 1 ? 1 : 0; switch (oddPixel) { case getPixel(i, j): orientation = 'top-left'; break; case getPixel(i - 1, j): orientation = 'bottom-left'; break; case getPixel(i, j - 1): orientation = 'top-right'; break; case getPixel(i - 1, j - 1): orientation = 'bottom-right'; break; } } row.push(hoursByOrientation[orientation]); } grid.push(row); } return grid; }39:[] 32:{"id":"ecd93569278ee9d8","slug":"roloi","title":"Ψηφιακό ρολόι","thumbnail":"7b106295173970bf880b66b27614d58b17715feaafc3c04b4121cb0a4710c688","access_level":"public","create_time":"$D2019-12-04T22:43:12.003Z","update_time":"$D2020-09-10T11:50:13.148Z","view_time":null,"first_public_time":"$D2019-12-25T11:28:28.248Z","has_unpublished_edits":null,"fork":false,"stars":96,"starred":false,"owner":{"type":"team","id":"1609e18a38defa15","login":"rkaravia","name":"Roman Karavia","avatar_url":"https://avatars-next.observableusercontent.com/72b3824f938211537b9e078b7abf49f6c915dc32300f13ca6fd111d01f51f23b","tier":"starter_2024"},"version":1274,"publish_version":1274,"role":null,"authored":false,"authors":[{"type":"individual","id":"89cab7559adfc60a","login":"rkaravia","name":"Roman Karavia","avatar_url":"https://avatars-next.observableusercontent.com/72b3824f938211537b9e078b7abf49f6c915dc32300f13ca6fd111d01f51f23b","tier":null}],"members":[{"type":"individual","id":"89cab7559adfc60a","login":"rkaravia","name":"Roman Karavia","avatar_url":"https://avatars-next.observableusercontent.com/72b3824f938211537b9e078b7abf49f6c915dc32300f13ca6fd111d01f51f23b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":{"id":"952f76d0493d2e9b","slug":"animations","title":"Animations","owner":{"id":"1609e18a38defa15","login":"rkaravia","name":"Roman Karavia"}},"type":"notebook","body":{"title":"Ψηφιακό ρολόι","cells":[{"id":0,"value":"md`# Ψηφιακό ρολόι\n\nDigital analog clocks assembled into a digital clock.\n\nHours, minutes, and seconds (if you look closely).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"digitalClock = {\n const svgNode = svg``;\n yield svgNode;\n\n const framesPerSecond = 60;\n for (const grid of run(invalidation)) {\n updateSvg(svgNode, grid);\n await Promises.tick(1000 / framesPerSecond);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"html`\n

\n \n Open in new tab\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"{\n // 01:15 expressed in hours\n const hours = 1.25;\n\n // Create SVG that can fit a clock with the configured radius\n const size = 2 * settings.radius;\n const svgNode = DOM.svg(size, size);\n\n // Add the clock and set the time\n d3.select(svgNode)\n .call(addClock)\n .datum(hours)\n .call(updateClock);\n\n return svgNode;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"md`\n### Lines and corners\n\nNext we define different time values that can be used for drawing shapes with analog clocks.\n\nThe following values can be used to draw empty areas, horizontal and vertical lines, and corners with 4 possible orientations:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"hoursByOrientation","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"{\n const clocks = Object.values(hoursByOrientation);\n\n // Create SVG that can fit all the clocks\n const size = 2 * settings.radius;\n const svgNode = DOM.svg(clocks.length * size, size);\n\n // Add the clocks and set their times\n d3.select(svgNode)\n .selectAll(\"g\")\n .data(clocks)\n .join(\"g\")\n .style(\"transform\", (d, i) => `translate(${i * size}px, 0px)`)\n .call(addClock)\n .call(updateClock);\n\n return svgNode;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"md`\n### Draw shapes with multiple clocks\n\nNow that we have the building blocks, we need to define the shapes we want to draw.\n\nFor every digit, a 3x5 pixel image is stored as a string of 0s and 1s in the [data section](#data)\nfurther down and converted to an array. If you expand the array, you should be able to recognize the\nshape of the digit \"9\" represented as 1s:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"spritePixels[9]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"md`\nBy checking neighboring pixels, we can find out how to draw the outline between pixels using our\nhorizontal and vertical lines and corners from above. This is done in the \\`pixelsToHours()\\` function in the\n[helpers section](#helpers), and the result is kept again in the [data section](#data).\n\nNote that a single pixel is represented by parts of 4 different analog clocks, so our 3x5 pixel image\nresults in a grid of 4x6 clocks.\n\nYou can expand the array to see how \"9\" is represented by a grid of time values, and see below what the same grid looks like when we draw it. Drawing is achieved by calling the \\`updateSvg()\\` function from the\n[rendering section](#rendering) which internally uses the \\`addClock()\\` and \\`updateClock()\\` function that\nwe have already seen above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"spriteGrids[9]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"{\n // Prepare SVG with width 1/5 of the viewport\n const svgNode = svg``;\n \n // Draw the sprite for the digit \"9\"\n updateSvg(svgNode, spriteGrids[9]);\n\n return svgNode;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"md`\n### Transition between shapes\n\nWe can apply the same transition to multiple clocks in parallel. The example below\nshows transitions between digits, changing to the next digit every 4 seconds.\n\nThe \\`interpolateGrid()\\` function from the [animation section](#animation)\ncalls \\`interpolateHours()\\` for every cell in the grid, again using normalized\ntime values as described above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"{\n // Prepare SVG with width 1/5 of the viewport\n const svgNode = svg``;\n yield svgNode;\n\n // Change to the next digit every 4000 milliseconds\n const interval = 4000;\n\n // Update the SVG 60 times per second\n const framesPerSecond = 60;\n\n // Start an \"infinite\" loop that is stopped when the cell is re-evaluated\n let running = true;\n invalidation.then(() => (running = false));\n\n while (running) {\n // Calculate current and next digit and normalized time\n const time = new Date().getTime();\n const digit = Math.floor(time / interval) % 10;\n const nextDigit = (digit + 1) % 10;\n const normalizedTime = (time % interval) / interval;\n\n // Update with interpolation between current and next digit\n updateSvg(\n svgNode,\n interpolateGrid(\n spriteGrids[digit],\n spriteGrids[nextDigit],\n normalizedTime\n )\n );\n\n // Wait until it is time for the next frame\n await Promises.tick(1000 / framesPerSecond);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"md`\n## Conclusion\nThis concludes the walkthrough, I hope it gave some insight into the\ninner workings of \\`ψηφιακό ρολόι\\`. There are some more functions for\ncalculating all digits and assembling them together which you can\ndiscover on your own below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"rendering = md`## Rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"function addClock(cell) {\n const clock = cell\n .append(\"g\")\n .style(\n \"transform\",\n `translate(${settings.radius}px, ${settings.radius}px)`\n );\n\n const circleStrokeWidth = settings.radius / 12;\n const handStrokeWidth = settings.radius / 6;\n clock\n .append(\"circle\")\n .attr(\"r\", settings.radius - circleStrokeWidth / 2)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#eee\")\n .attr(\"stroke-width\", circleStrokeWidth);\n\n clock\n .append(\"line\")\n .attr(\"class\", \"hour-hand\")\n .attr(\"y2\", -4 * handStrokeWidth)\n .attr(\"stroke\", \"#333\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", handStrokeWidth);\n\n clock\n .append(\"line\")\n .attr(\"class\", \"minute-hand\")\n .attr(\"y2\", -5 * handStrokeWidth)\n .attr(\"stroke\", \"#333\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", handStrokeWidth);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"function updateClock(cell) {\n cell\n .select(\".hour-hand\")\n .style(\"transform\", hours => `rotate(${(hours / 12) * 360}deg`);\n\n cell.select(\".minute-hand\").style(\"transform\", hours => {\n const minutes = (hours - Math.floor(hours)) * 60;\n return `rotate(${(minutes / 60) * 360}deg`;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"function updateSvg(svgNode, grid) {\n const width = 2 * settings.radius * grid[0].length;\n const height = 2 * settings.radius * grid.length;\n\n const rows = d3\n .select(svgNode)\n .attr(\"viewBox\", `0, 0, ${width}, ${height}`)\n .selectAll(\".row\")\n .data(grid)\n .join(enter =>\n enter\n .append(\"g\")\n .attr(\"class\", \"row\")\n .style(\n \"transform\",\n (d, row) => `translate(0px, ${2 * settings.radius * row}px)`\n )\n );\n\n rows\n .selectAll(\".column\")\n .data(d => d)\n .join(enter =>\n enter\n .append(\"g\")\n .attr(\"class\", \"column\")\n .style(\n \"transform\",\n (d, column) => `translate(${2 * settings.radius * column}px, 0px)`\n )\n .call(addClock)\n )\n .call(updateClock);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"animation = md`## Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"function* run(stopPromise) {\n const startTime = new Date().getTime();\n\n let running = true;\n stopPromise.then(() => (running = false));\n\n while (running) {\n const elapsed = settings.speedup * (new Date() - startTime);\n const date = new Date(startTime + elapsed);\n if (isGeneratingThumbnail) {\n yield gridForTime(settings.previewDate, 5000);\n } else {\n yield gridForTime(date, elapsed);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"function makeGrid() {\n return Array.from({ length: 8 }, () => Array.from({ length: 20 }, () => 0));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"function drawGrid(target, source, [row, column]) {\n source.forEach((sourceRow, i) => {\n sourceRow.forEach((cell, j) => {\n target[row + i][column + j] = cell;\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"digits = [\n {\n fromDate: date => Math.floor(date.getHours() / 10),\n column: 1\n },\n {\n fromDate: date => date.getHours() % 10,\n column: 5\n },\n {\n fromDate: date => Math.floor(date.getMinutes() / 10),\n column: 11\n },\n {\n fromDate: date => date.getMinutes() % 10,\n column: 15\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"function interpolateGrid(from, to, normalizedTime) {\n return from.map((row, i) =>\n row.map((cell, j) => interpolateHours(cell, to[i][j], normalizedTime))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"function interpolateHours(from, to, normalizedTime) {\n from %= 12;\n to %= 12;\n if (from < to) {\n if (to - from > 6) {\n from += 12;\n }\n } else {\n if (from - to > 6) {\n to += 12;\n }\n }\n if (to === from) {\n return from;\n }\n const speedup = Math.sqrt(6 / Math.abs(to - from));\n const delay = speedup - 1;\n normalizedTime = clamp(normalizedTime * speedup - delay);\n return from + d3.easeCubic(normalizedTime) * (to - from);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"data = md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"hoursByOrientation = ({\n empty: 0,\n horizontal: 9.25,\n vertical: 6,\n 'top-left': 6.25,\n 'top-right': 5.75,\n 'bottom-left': 3,\n 'bottom-right': 9\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"spriteStrings = [\n `111\n 101\n 101\n 101\n 111`,\n `001\n 001\n 001\n 001\n 001`,\n `111\n 001\n 111\n 100\n 111`,\n `111\n 001\n 111\n 001\n 111`,\n `101\n 101\n 111\n 001\n 001`,\n `111\n 100\n 111\n 001\n 111`,\n `111\n 100\n 111\n 101\n 111`,\n `111\n 001\n 001\n 001\n 001`,\n `111\n 101\n 111\n 101\n 111`,\n `111\n 101\n 111\n 001\n 111`,\n `1\n 0\n 1`\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"spritePixels = spriteStrings.map(spriteString =>\n spriteString.split('\\n').map(row => [...row.trim()].map(pixel => +pixel))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"spriteGrids = spritePixels.map(pixelsToHours)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"separatorGrid = spriteGrids[10]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"ticks = [\n [1, 10],\n [0, 10],\n [0, 11],\n [0, 12],\n [0, 13],\n [0, 14],\n [0, 15],\n [0, 16],\n [0, 17],\n [0, 18],\n [0, 19],\n [1, 19],\n [2, 19],\n [3, 19],\n [4, 19],\n [5, 19],\n [6, 19],\n [7, 19],\n [7, 18],\n [7, 17],\n [7, 16],\n [7, 15],\n [7, 14],\n [7, 13],\n [7, 12],\n [7, 11],\n [7, 10],\n [6, 10],\n [6, 9],\n [7, 9],\n [7, 8],\n [7, 7],\n [7, 6],\n [7, 5],\n [7, 4],\n [7, 3],\n [7, 2],\n [7, 1],\n [7, 0],\n [6, 0],\n [5, 0],\n [4, 0],\n [3, 0],\n [2, 0],\n [1, 0],\n [0, 0],\n [0, 1],\n [0, 2],\n [0, 3],\n [0, 4],\n [0, 5],\n [0, 6],\n [0, 7],\n [0, 8],\n [0, 9],\n [1, 9]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"settings = ({\n fadeSeconds: 4,\n previewDate: new Date(\"2020-01-01T12:24\"),\n radius: 30,\n speedup: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"helpers = md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"function clamp(normalizedTime) {\n return Math.min(Math.max(0, normalizedTime), 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"isGeneratingThumbnail = navigator.userAgent.match('HeadlessChrome')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"useThumnailSize = {\n if (isGeneratingThumbnail) {\n digitalClock.setAttribute(\"width\", 640);\n digitalClock.setAttribute(\"height\", 400);\n return true;\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"imports = md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"d3 = require(\"d3-ease@1\", \"d3-selection@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"md`---\n## Video export`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"viewof videoPreview = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"{\n videoPreview;\n\n const svgNode = svg``;\n yield svgNode;\n\n const framesPerSecond = 30;\n for (const svgFrame of getVideoFrames(svgNode, framesPerSecond)) {\n await Promises.tick(1000 / framesPerSecond);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"md`### Animated GIF\nClick this button to render the GIF, then click again to download it:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"DOM.download(\n async () => {\n const gif = new GifCompiler();\n const svgNode = svg``;\n const framesPerSecond = 30;\n const padding = [20, 60];\n for (const frame of getVideoFrames(svgNode, framesPerSecond)) {\n const canvas = await svgToCanvas(svgNode, padding, 0.5);\n gif.addFrame(canvas, 1000 / framesPerSecond);\n }\n return gif.render();\n },\n \"digital-clock.gif\",\n \"Render animated GIF [640x360]\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"md`### MP4\n\nClick the button below to export individual frames as PNG, then run \\`ffmpeg\\` to convert the PNGs to an MP4:\n\n~~~\nffmpeg -framerate 30 -i digital-clock-%04d.png -c:v libx264 -pix_fmt yuv420p digital-clock.mp4\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"{\n const form = html``;\n form.button.onclick = async event => {\n event.preventDefault();\n const svgNode = svg``;\n const framesPerSecond = 30;\n const padding = [40, 120];\n for (const frame of getVideoFrames(svgNode, framesPerSecond)) {\n const canvas = await svgToCanvas(svgNode, padding);\n const url = canvas.toDataURL();\n await download(\n url,\n `digital-clock-${String(frame).padStart(4, '0')}.png`\n );\n }\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"md`---\n## Video export helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"function* getVideoFrames(svgNode, framesPerSecond) {\n const frames = 10 * framesPerSecond;\n for (let frame = 0; frame < frames; frame += 1) {\n const t = frame < frames / 2 ? frame : frame - frames;\n const elapsed = (t * 1000) / framesPerSecond;\n const grid = gridForTime(settings.previewDate, elapsed);\n updateSvg(svgNode, grid);\n yield frame;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"function svgToCanvas(svg, padding, scale = 1) {\n return new Promise(resolve => {\n const svgSize = svg.viewBox.baseVal;\n const width = svgSize.width * scale + 2 * padding[0];\n const height = svgSize.height * scale + 2 * padding[1];\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svg);\n const image = new Image();\n image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;\n image.onload = () => {\n const context = DOM.context2d(width, height, 1);\n context.fillStyle = '#fff';\n context.fillRect(0, 0, width, height);\n addText(context, scale);\n context.drawImage(\n image,\n padding[0],\n padding[1],\n svgSize.width * scale,\n svgSize.height * scale\n );\n resolve(context.canvas);\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"function addText(context, scale) {\n function setFont(size, style = \"normal\") {\n const fontSize = size * scale;\n context.font = `${style} ${fontSize}px -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji`;\n }\n\n const { width, height } = context.canvas;\n\n context.fillStyle = '#333';\n context.textAlign = 'center';\n\n setFont(60);\n context.fillText('Ψηφιακό ρολόι', width / 2, 80 * scale);\n\n setFont(30);\n context.fillText(\n 'The digital analog digital clock.',\n width / 2,\n height - 70 * scale\n );\n setFont(30, 'italic');\n context.fillText('roloi.karavia.ch', width / 2, height - 30 * scale);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"async function download(url, name) {\n const a = document.createElement('a');\n a.download = name;\n a.href = url;\n a.style.display = 'none';\n document.body.append(a);\n a.click();\n await Promises.delay(100);\n a.remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"import { GifCompiler } from '@rkaravia/gifcompiler'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"