31:T632,coupletPhrases_fadeInFadeOut = [ // first couplet { id: "u0", pause: 7 }, // myriad mountains { id: "u1", pause: 1.5 }, // { id: "u0", pause: 2.5 }, // would fade out by phrase // { id: "u1", pause: 0 }, { id: "u5", pause: 2.5 }, // numberless pathways { id: "u6", pause: 1.1 }, // this way four word faded in, then { id: "u0", pause: 2.5 }, // faded out { id: "u1", pause: 0 }, { id: "u5", pause: 0 }, { id: "u6", pause: 0 }, { id: "u2", pause: 2.4 }, // bird flights { id: "u3", pause: 1.4 }, // { id: "u2", pause: 2.4 }, // { id: "u3", pause: 0 }, { id: "u7", pause: 2.4 }, // human traces { id: "u8", pause: 1.4 }, { id: "u2", pause: 2.4 }, // fade out { id: "u3", pause: 0 }, { id: "u7", pause: 0 }, { id: "u8", pause: 0 }, { id: "u4", pause: 2.4 }, // end { id: "u4", pause: 2.4 }, { id: "u9", pause: 2.5 }, // dust { id: "u9", pause: 2.5 }, // second couplet { id: "u10", pause: 3 }, // lone canoe { id: "u11", pause: 1.2 }, { id: "u15", pause: 2.5 }, // lonely line { id: "u16", pause: 1.4 }, { id: "u10", pause: 2.5 }, // fade out { id: "u11", pause: 0 }, { id: "u15", pause: 0 }, { id: "u16", pause: 0 }, { id: "u12", pause: 2.2 }, // gore-text hooded { id: "u13", pause: 1.4 }, { id: "u17", pause: 2.5 }, // cold river { id: "u18", pause: 2.0 }, { id: "u12", pause: 2.5 }, // fade out { id: "u13", pause: 0 }, { id: "u17", pause: 0 }, { id: "u18", pause: 0 }, { id: "u14", pause: 2.0 }, // zen { id: "u14", pause: 2.4 }, { id: "u19", pause: 2.4 }, // snow { id: "u19", pause: 2.4 } ]32:[{"id":"ab290b37e7bbcb08d9c9834701a1a9810c9d1f939731eb705e7fa677b527d3436bfcc3d8b08aec2790a9ff7b75989c1fa06e2db77e3e4006d0a0cf2e1958a7ed","href":"https://static.observableusercontent.com/files/ab290b37e7bbcb08d9c9834701a1a9810c9d1f939731eb705e7fa677b527d3436bfcc3d8b08aec2790a9ff7b75989c1fa06e2db77e3e4006d0a0cf2e1958a7ed","name":"emptyIslands.json","type":"application/json","lastModified":1613068955968.868,"size":1911}] 2f:{"title":"Scoring the Spelt Air","cells":[{"id":0,"value":"md`# Scoring the Spelt Air`","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"md`This notebook is derived from [@shadoof](https://observablehq.com/@shadoof)’s first Observable experiment with animating poetic texts, [@shadoof/carhartt/](https://observablehq.com/@shadoof/carhartt), which is the engine for amongst other things.
\n Here I further abstract and generalize the techiques and code in that notebook with the ultimate intention of providing \\`import\\`-able cells and/or snaggable code for your own projects. Fork at will.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"textcontainer = html`\n

\n${spans}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"play = {\n while (true) {\n yield \"playing [while (true)]\";\n for (let score in scores) {\n let theScore = scores[score];\n for (let unit = 0; unit < theScore.length; unit++) {\n await scorepause(theScore[unit].pause, theScore[unit].id);\n // console.log(`index: ${i}`);\n }\n }\n }\n yield \"not playing [while (false)]\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"scorepause = (pause, id) => {\n return Promises.delay(pause * 1000).then(() => {\n let theElem = document.getElementById(`${id}`);\n theElem.classList.toggle('visible');\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"md`*TODO: If \\`toggleVisible(id)\\` is put in as the \\`.then()\\` function above, this breaks the desired asynchronous animation. Perhaps due to \\`id\\` becoming a variety of cross-cell reference? Needs investigating!*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"toggleVisible = id => {\n let theElem = document.getElementById(`${id}`);\n theElem.classList.toggle('visible');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`Your maker-composed text can be typed in here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"text = md`

like a dragon you have\ndeposited venom on the land\nwhen you roar at the\nworld like thunder no vegetation

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"md`Lines are useful for maker-composition but establishing lines in the data structures would complicate the coding unnecessarily. Postioning information for whatever the maker decides is the appropriate unit has to be maker-coded anyway, so we should just parse the content of the \\`text\\` cell into the units required.
\n    Here I want to use words as my units so we’ll parse the lines into a flat Array of words, but we’ll preface the associated constants with \\`unit\\` to remind ourselves that they could be any size: letter, word, phrase, clause, sentence, etc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"unitStrings = {\n let words = [];\n let lines = text.innerText.split('\\n');\n for (let l = 0; l < lines.length; l++) {\n words.push(...lines[l].split(' '));\n }\n // this little parser could, btw, be written in a more concise\n // and arguably more elegant manner:\n words = [];\n // before reinitializing in the immediately previous line\n // words has the same value as it does on the actual return below\n lines = text.innerText.split('\\n');\n lines.forEach((line, l) => words.push(...lines[l].split(' ')));\n return words;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"checkUnitsMatchPositions = unitStrings.length == positions.length\n ? \"They match.\"\n : \"They do NOT match yet!\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"md`The following cell contains maker-determined position information to be rendered by CSS, one Array per \\`unit\\`, with \\`[topvw, leftvw]\\` :
\n*(When I began developing notebooks like this I recorded fall-back \\`px\\` tops and lefts (\\`[toppx, topvw, leftpx, leftvw]\\`) for browsers not supporting \\`vw\\` (viewport width percentages) as CSS units. This now seems unncessarily complicated.
\n    Also: I am not implementing this here in this notebook, but I've realized that, for this kind of use-case – with words as units, a monospaced font and patterned horizontal positioning – it would be fairly easy to calculate positioning information using the CSS \\`ch\\` unit of measurement, which gives the width of a font’s ‘\\`0\\`’ (zero) character.)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"positions = [\n [0, 1],\n [0, 21],\n [4, 38],\n [4, 54],\n [4, 70.5],\n // line 2\n [7.5, 1],\n [7.5, 21],\n [11.5, 38],\n [11.5, 54],\n [11.5, 70.5],\n // line 3\n [17.5, 1],\n [17.5, 21],\n [21, 38],\n [21, 54],\n [21, 70.5],\n // line 4\n [24.5, 1],\n [24.5, 21],\n [28, 38],\n [28, 54],\n [28, 70.5]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"md`At the moment, the only *visual behavior* we are experimenting with is *visibility* – the fading in and out of linguistic units. *Positions* information is considered static or constant. But in the future we may want to move units around, so it probably makes sense to collect all the information – including maker-composed information – relating to our units in an Object with \\`id\\`s as the keys :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"units = {\n let us = {};\n unitStrings.forEach((unitString, u) => {\n let id = 'u' + u;\n us[id] = {};\n let unit = us[id];\n unit['unit'] = unitString;\n unit['topvw'] = positions[u][0];\n unit['leftvw'] = positions[u][1];\n });\n\n return us;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"md`Now we’ll generate a long string of initial HTML from the \\`units\\` Object. This will be a string of HTML \\`span\\` elements with appropriate \\`id\\`s, a \\`class\\` attribute to set, amongst other possibilities, their \\`postion\\`s to \\`absolute\\`, and a \\`style\\` attribute with the position information that was maker-determined and input into the \\`positions\\` array:
\n*(See the end of the notebook for a note on making reliable references to DOM elements.)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"spans = {\n let spanString = \"\";\n Object.keys(units).forEach(key => {\n let unit = units[key];\n spanString += `${unit['unit']}`;\n });\n return spanString;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"md`Finally, we create an Array to hold one or more \\`scores\\` in it.
\n    The \\`score\\`s themselves are Arrays of Objects, corresponding to the units we’ve used so far. Currently, each Object consists of an \\`id\\` for the element (\\`span\\`s in our case) in the HTML/DOM and a \\`pause\\` in seconds before any animated behavior. Putting these Arrays in separate constants allows us to give them descriptive names such as those in this notebook: \\`readThrough_fadeIn_thenOut\\` and \\`coupletPhrases_fadeInFadeOut\\`. It also allows for easy editing of the actual \\`scores\\` Array to give us different arrangements of the individual scores.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"scores = [\n readThrough_aligned, // first time fades in\n readThrough_aligned // second time fades out\n // coupletPhrases_fadeInFadeOut\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"readThrough_toggleFade = [\n // fade the words in (or out) one-by-one:\n { id: \"u0\", pause: 7 },\n { id: \"u1\", pause: 1.5 },\n { id: \"u2\", pause: 2.4 },\n { id: \"u3\", pause: 1.4 },\n { id: \"u4\", pause: 1.8 },\n // line 2\n { id: \"u5\", pause: 3 },\n { id: \"u6\", pause: 1.1 },\n { id: \"u7\", pause: 2.7 },\n { id: \"u8\", pause: 1.4 },\n { id: \"u9\", pause: 2 },\n // line 3\n { id: \"u10\", pause: 3 },\n { id: \"u11\", pause: 1.2 },\n { id: \"u12\", pause: 2.2 },\n { id: \"u13\", pause: 1.4 },\n { id: \"u14\", pause: 1.6 },\n // line 4\n { id: \"u15\", pause: 2.5 },\n { id: \"u16\", pause: 1.4 },\n { id: \"u17\", pause: 2.2 },\n { id: \"u18\", pause: 2.0 },\n { id: \"u19\", pause: 2.0 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"audioAlignment_JSON = FileAttachment(\"emptyIslands.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"alignedWords_JSON = {\n let a = [];\n Object.keys(audioAlignment_JSON).forEach(segments => {\n audioAlignment_JSON[segments].forEach(speech => {\n a = a.concat(speech.wdlist);\n });\n });\n a.forEach((word, index) => {\n index < a.length - 1\n ? (word.gap = a[index + 1].start - word.end)\n : (word.gap = 4);\n });\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"readThrough_aligned = {\n let a = [];\n let l = alignedWords_JSON.length - 1;\n let p = 0;\n alignedWords_JSON.forEach((word, index) => {\n let o = {};\n o.id = 'u' + index;\n let i = index - 1;\n if (index > 0)\n p =\n alignedWords_JSON[i].end -\n alignedWords_JSON[i].start +\n alignedWords_JSON[i].gap;\n else\n p =\n alignedWords_JSON[l].end -\n alignedWords_JSON[l].start +\n alignedWords_JSON[l].gap;\n\n o.pause = p;\n a.push(o);\n });\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"md`The last two cells here provide examples of techniques for handling CSS niceties *within* Observable. The \\`import\\` cell imports a cell from another notebook where a font file is attached. The \\`css\\` cell is an HTML \\`\\` block that ensures the special font is loaded and used, and then also sets out a little more CSS that is needed for the notebook to look right. The CSS performs the actual fade-in’s and fade-out’s for example. Versions of this CSS would also be needed in a website that is prepared for the notebooks cells to be embedded.
\n    I’ve made a very simple version of such a website at: .
\n    The only cells that *need* to be embedded are \\`textcontainer\\` and \\`play\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import { andaleMono } from \"@shadoof/sifther\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"css = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"md`**Note:** If we were going to keep this sketch entirely *within* Observable, we would make DOM (Document Object Model) objects that were referenced by cells, like this: (see ‘Re-selecting Elements’ in [this useful notebook](https://observablehq.com/@tmcw/observable-anti-patterns-and-code-smells))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"reliablyReferencedElement = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":821,"value":"(reliablyReferencedElement.innerText =\n 'This is my reliably referenced element.')","pinned":true,"hidden":false,"mode":"ojs"},{"id":827,"value":"md`But we are *not* going to publish this as notebook-only, we are going to embed selected cells and these cells will be driven, in real internet time, by the notebook.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}