28:null 29:["$","title",null,{"children":"Asynchronous Metronome | Steve Kasica | Observable"}] 2e:T4ea,viewof playback = { const f = html``; f.value = { play: true, sound: false }; f.play.onclick = event => { event.preventDefault(); // Prevent form submission f.value.play = !f.value.play; f.play.value = f.value.play ? 'Stop' : 'Start'; f.dispatchEvent(new CustomEvent('input')); }; f.sound.onclick = event => { event.preventDefault(); // Prevent form submission f.value.sound = !f.value.sound; f.sound.value = f.value.sound ? "Sound off" : "Sound on"; f.dispatchEvent(new CustomEvent('input')); }; f.fullscreen.onclick = event => { event.preventDefault(); // Prevent form submission const metronome = document.getElementById('metronome'); const container = metronome.parentElement; container.parentElement.setAttribute('style', 'background-color:#ffffff'); container.parentElement.requestFullscreen(); // metronome.setAttribute('height', '100%'); // container.setAttribute('height', '100%'); }; f.addEventListener('submit', event => event.preventDefault()); return f; }2f:Ta94,vis = { if (main_controls.pulse > main_controls.period) throw Error('Pulse value cannot be greater than period value'); if (isNaN(main_controls.pulse)) throw Error('Pulse value is unset'); if (isNaN(main_controls.period)) throw Error('Period value is unset'); // Define settings const r = inner_radius; const height = notebook_height || 600; const extent = Math.min(width, height); const margin = 10; const max_radius = Math.min(width / 2, height / 2) - stroke_width - margin; const expand_duration = main_controls.pulse; const contract_duration = main_controls.period - main_controls.pulse; // Construct SVG components const container = d3 .select(document.createElement('DIV')) .attr('id', 'container'); const svg = container .append('svg') .attr('width', "100%") .attr('viewBox', `0 0 ${extent} ${extent}`) .attr('id', 'metronome'); const outer_circle = svg .append("circle") .attr("r", max_radius) .attr("cx", "50%") .attr("cy", "50%") .attr('opacity', 1) .attr('fill', '#ffffff') .attr("stroke", boundary_color) .attr("stroke-width", 2) .attr('stroke-dasharray', 5); const circle = svg .append("circle") .attr("r", r) .attr("cx", "50%") .attr("cy", "50%") .attr("fill", circle_color); const inner_circle = svg .append("circle") .attr("r", inner_radius) .attr("cx", "50%") .attr("cy", "50%") .attr('fill', circle_color) .attr('opacity', 1) .attr("stroke", boundary_color) .attr("stroke-width", 2) .attr('stroke-dasharray', 5); const text = container .append('p') .attr('class', 'label') .style('font-family', font_family) .style('font-weight', font_weight) .style('color', font_color) .style('font-size', `${font_size}px`) .style('opacity', font_opacity) .style('letter-spacing', `${letter_spacing}em`) .html(expand_text); const ease = d3[ease_style]; yield container.node(); while (true) { yield container.node(); if (playback.play) { contract_audio.pause(); contract_audio.currentTime = 0; expand_audio.play(); await circle .transition() .delay(transition_delay * 1000) .ease(ease) .duration(expand_duration * 1000) .attr('r', max_radius) .end(); expand_audio.pause(); expand_audio.currentTime = 0; contract_audio.play(); text.text(contract_text); await circle .transition() .ease(ease) .delay(transition_delay * 1000) .duration(contract_duration * 1000) .attr('r', r) .end(); text.text(expand_text); } } }30:T868,viewof main_controls = { const f = html` `; // Set default values f.freq.value = round(60 / +f.period.value); f.cycle.value = round((+f.pulse.value / +f.period.value) * 100); f.value = formValue(f); // Setup events f.addEventListener('submit', event => event.preventDefault()); f.addEventListener('input', event => { // Update form viewof values const prevValue = f.value[event.target.name]; f.value[event.target.name] = +event.target.value; // Update other values const key = event.target.name; switch (key) { case 'period': // Make total duration the max value of trial duration f.pulse.max = f.value.period; f.freq.value = f.value.freq = round(60 / f.value.period); case 'pulse': // Update duty cycle f.cycle.value = f.value.cycle = round( (f.value.pulse / f.value.period) * 100 ); break; case 'cycle': // Update trial duration f.pulse.value = f.value.pulse = round( f.value.period * (f.value.cycle / 100) ); break; case 'freq': f.period.value = f.value.period = round(60 / f.value.freq); break; } }); return f; }31:[{"id":"1f75e606830a7b6494adcc6964f3a6edfbdee6cc0688dc68ecd12e5945f1cc8d0d5204af3e6d60243344ace0d0558a29be4c938e66d09f82ab6a8be3bd40a216","href":"https://static.observableusercontent.com/files/1f75e606830a7b6494adcc6964f3a6edfbdee6cc0688dc68ecd12e5945f1cc8d0d5204af3e6d60243344ace0d0558a29be4c938e66d09f82ab6a8be3bd40a216","name":"250Hz_44100Hz_16bit_05sec.mp3","type":"audio/mpeg","lastModified":1604896510077.441,"size":80666},{"id":"c50b2d6db9f467c59aa06be8817ea81cb4df089cfa658aff847128a9ae3a7e568668d4cfaca1c569ddbecbcd46f58bd8ce9e9a17f89fb41519de2df4b28e1bc1","href":"https://static.observableusercontent.com/files/c50b2d6db9f467c59aa06be8817ea81cb4df089cfa658aff847128a9ae3a7e568668d4cfaca1c569ddbecbcd46f58bd8ce9e9a17f89fb41519de2df4b28e1bc1","name":"440Hz_44100Hz_16bit_05sec.mp3","type":"audio/mpeg","lastModified":1604896510065.375,"size":80666}] 2c:{"id":"38aabaa8d465e7ea","slug":"async-metronome","title":"Asynchronous Metronome","thumbnail":"10ac707b41541f995dafec38a33d9a920fd2e624d5343460a897b963d1034c5b","access_level":"public","create_time":"$D2020-10-13T20:27:28.539Z","update_time":"$D2021-03-26T01:34:11.675Z","view_time":null,"first_public_time":"$D2020-11-09T04:36:59.301Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1cebfd5d1e47fa9b","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":"starter_2024"},"version":1874,"publish_version":1874,"role":null,"authored":false,"authors":[{"type":"individual","id":"a483da0cdef190cc","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":null}],"members":[{"type":"individual","id":"a483da0cdef190cc","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Asynchronous Metronome","cells":[{"id":0,"value":"md`\n# Asynchronous Metronome\n\nAn asynchronous metronome.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`\n## Metronome Controls\n\nThese are the basic metronome controls.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1354,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`\n## Advanced Settings\nThese settings control the presentation of the metronome\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"md`\n### Circle properties\n\nThese settings adjust properties of the circle\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof inner_radius = slider({\n min: 1,\n max: 200,\n value: 25,\n step: 1,\n title: 'Minimum circle radius',\n description: \"Change the minimum radius of the circle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof stroke_width = slider({\n min: 1,\n max: 25,\n value: 10,\n step: 1,\n title: 'Circle border width',\n description: \"Change the width of the outer line\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof circle_color = color({\n value: \"#0c2344\",\n title: \"Circle color\",\n description: \"Change the color of the expanding-contracting circle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"viewof boundary_color = color({\n value: \"#aaaaaa\",\n title: \"Circle boundary color\",\n description:\n \"Change the color of dotted line marking the extent of the circle radius during expansion and contraction\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"md`\n### Text properties\n\nThese settings adjust the text and text style at the center of the animation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"viewof expand_text = text({\n title: 'Expanding text',\n description: 'Change the inner text as the circle grows',\n value: 'Expand'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"viewof contract_text = text({\n title: 'Contracting text',\n description: 'Change the inner text as the circle shrinks',\n value: 'Contract'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"viewof font_size = number({\n title: 'Font size',\n description: 'Change how large the inner text, in points',\n min: 8,\n max: 1000,\n value: 60,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"viewof font_style = select({\n title: 'Font style',\n options: ['Normal', 'Italic', 'Oblique'],\n value: 'normal',\n description: 'Change the inner text style, e.g. normal, italic, or oblique'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"viewof font_weight = number({\n title: 'Font weight',\n step: 100,\n value: 800,\n max: 1000,\n min: 100,\n description: 'Change the boldness of the text'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"viewof font_family = select({\n title: 'Font Family',\n value: 'Georgia',\n options: ['courier', 'helvetica', 'monospace'],\n description: 'TK'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"viewof font_color = color({\n title: 'Text color',\n description: 'Change the color of both the expanding and contracting text',\n value: '#aaaaaa'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"viewof font_opacity = slider({\n title: 'Text opacity',\n description: 'Change the opacity of the text',\n min: 0,\n max: 1,\n value: 0.75\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"viewof letter_spacing = slider({\n title: 'Letter Spacing',\n value: 0.1,\n max: 0.5,\n min: 0.0,\n step: 0.01,\n description: 'Modify the horizontal spacing behavior between text characters'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1237,"value":"md`\n### Animation properties\nThese settings adjust properties of the expansion-contraction animation other than speed\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"viewof ease_style = select({\n title: 'Ease style',\n options: [\n {\n label: 'Linear',\n value: 'easeLinear'\n },\n {\n label: 'Cubic',\n value: 'easeCubicIn'\n },\n {\n label: 'Sinusodial',\n value: 'easeSinIn'\n },\n {\n label: 'Exponential',\n value: 'easeExpIn'\n },\n {\n label: 'Symmetric exponential',\n value: 'easeExpInOut'\n },\n {\n label: 'Circular',\n value: 'easeCircleIn'\n }\n ],\n value: 'Linear',\n description: 'Distort the time to completion in the animation'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"viewof transition_delay = slider({\n min: 0,\n max: 1,\n value: 0,\n title: 'Transition delay',\n format: x => `${x} secs`,\n description: 'Pause between expanding and contracting (in seconds)'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"md`You shouldn't need to change anything below this line`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1645,"value":"notebook_height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"contract_audio = new Audio(\n await FileAttachment('250Hz_44100Hz_16bit_05sec.mp3').url()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"expand_audio = new Audio(\n await FileAttachment('440Hz_44100Hz_16bit_05sec.mp3').url()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"audio = {\n if (!playback.sound || !playback.play) {\n expand_audio.volume = 0.0;\n contract_audio.volume = 0.0;\n } else {\n expand_audio.volume = 1.0;\n contract_audio.volume = 1.0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"function round(num, places = 2) {\n var x = 10 * places;\n return Math.round((num + Number.EPSILON) * x) / x;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"import { slider, text, select, number, color, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"import { formValue } from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"

Timing