2f: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 } ]30:[{"id":"ab290b37e7bbcb08d9c9834701a1a9810c9d1f939731eb705e7fa677b527d3436bfcc3d8b08aec2790a9ff7b75989c1fa06e2db77e3e4006d0a0cf2e1958a7ed","href":"https://static.observableusercontent.com/files/ab290b37e7bbcb08d9c9834701a1a9810c9d1f939731eb705e7fa677b527d3436bfcc3d8b08aec2790a9ff7b75989c1fa06e2db77e3e4006d0a0cf2e1958a7ed","name":"emptyIslands.json","type":"application/json","lastModified":1739304643753.673,"size":1911}] 2d:{"title":"Scoring Air - early work","cells":[{"id":0,"value":"md`# Scoring Air - early work`","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 = async (pause, id) => {\n return await 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`

empty islands never see humans\nyet hear human language echoes\nreturning sunlight enters under boughs\nagain gleaming green mosses canopy

`","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":952,"value":"md`The following \\`readThrough\\` was maker-composed: I typed in the pauses for each unit, here each word, the pause comes before the word is faded in.`","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":958,"value":"md`And this following \\`coupletPhrases_fadeInFadeOut\\` was also maker-composed:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"md`But \\`scores\\` above is currently an array with two instances of \\`readThrough_aligned\\` and this score is calculated from timing data that was generated by [Reduct](https://app.reduct.video). I uploaded an audio recording of myself reading the quatrain and Reduct produce the JSON that I have attached to this notebook. ...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"audioAlignment_JSON = FileAttachment(\"emptyIslands.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"md`... Then, I parsed this JSON to produce a much simpler Array of word objects from the quatrain and the timestamps associated with my actual reading. You see the parsing code in this cell, and the cell’s value is \\`return\\`ed as the simpler Array. ...`","pinned":false,"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":972,"value":"md`... Finally, I parse and process the aligned words Array into any even simpler Array that can be – and is – used as a \\`score\\` in the \\`scores\\` Array above.`","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 than 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`---\n**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`

` // div is empty when defined ...","pinned":true,"hidden":false,"mode":"ojs"},{"id":821,"value":"(reliablyReferencedElement.innerText =\n 'This is my reliably referenced element.') // but reliably referenced and filled in by this cell, reactively","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":"$W30","stdlib":"1","titling":"auto"}