2d:null 2e:["$","title",null,{"children":"Scoring the Spelt Air | John Cayley | Observable"}] 33:Ta6e,#### Introductory This code notebook is accompanied by an essay of the same title (in Other Americas: The Dark Side, the Province, Cyberspace, edited by Salvatore Marano and Gigliola Nocera, 117-124. Lugano: Agorà & Co., 2025). The notebook sets out one possible framework and working procedure – using the contemporary web ‘stack’ of HTML, CSS, JavaScript – for composing texts that are intended to be arranged spatially in two dimensions and animated such that the words, phrases, or other periods of the composition are displayed and, optionally, removed from view according to durations that are scored by their author. For poetic practice, since the advent of typographic reading on programmable screens, we might have imagined that this would, by now, have become a common practice, well supported, for example, by the ‘word processing’ infrastructure of ‘personal computing’ (and what personal computing has now become). Some informed speculation on why this has not happened can be found in the essay. The author of the essay and this notebook first proposed a ‘scoring of the spelt air’ publicly in 1996. [[1]](#notes) Earlier (late 1970s I believe) I had made one of my first pieces of digital language art, *wine flying*; initially for the BBC microcomputer with Basic as the programming language, later reengineering the piece for HyperCard on a Mac SE, coded in HyperTalk. [[2]](#notes) The text of this piece is based on my own translation of a classical Chinese quatrain by Qian Qi (710-782). Shortly after the Hypercard version was issued, the text was also published in an artist’s book, within which pages represented different phases of the animation. [[3]](#notes). This basic implementation – and live-notebook annotation – of a scoring framework for text, revisits the original *wine flying*. The chief difference in this implementation – apart from the new web stack platform and the generalization of underlying principles and concepts – is that timed scoring for the appearance of words, in this notebook, is based on audio recordings of readings by myself, the translator of the Chinese quatrain and author of this notebook. Thanks to [Reduct](https://reduct.video), timestamp [data for readings](#data) in the various orders of the now-animated words was extracted from aligned audio as JSON. For two examples of more extensive pieces using, basically, these same techniques and similar conventions, please visit *[Eme-Sal](https://thelaob.com/a0/emesal/)* by Florence Wallis, and ‘[While wishing this was someone else’s dream](https://thelaob.com/a0/while/)’ by myself.34:T8ce,play = { var idx, loopCount, loopMsg, rdnScore, score, scoreNum, secondsBeforeAndBetween, yieldMsg; secondsBeforeAndBetween = 3; loopCount = 0; yield "wait for it ..."; await Promises.delay(secondsBeforeAndBetween * 1000); // an initial pause while (true) { // loop forever ... loopMsg = `loop: ${loopCount++}`; for (scoreNum = 0; scoreNum < scores.length; scoreNum++) { // Following on here there is a slight complication in the algorithm that introduces an element of indeterminancy into our poetic translation, something else that is not easily possible in print. // readThrough_rdnPath(), below, constructs a version of the score named readThrough_path with a random order of this score’s constituent ‘lines.’ Each time round the loop, we inject this newly constructed score into the last two elements of our scores array so that on first encounter in each loop the lines become visible in the constructed order and then on second encounter (last in the scores array) they are rendered invisible in the same order. if (scoreNum === scores.length - 2) { // are we two from the end of the array? rdnScore = readThrough_rdnPath(); // if so make a random line order scores[scores.length - 2] = scores[scores.length - 1] = rdnScore; // put it into the last two } score = scores[scoreNum]; // This is where we inner-loop through each item in the current score and display the string of its spel for the length of time in its pause property. for (idx = 0; idx < score.length; idx++) { // provide some info: let spelId = score[idx].id; yieldMsg = loopMsg + `, score: ${scoreNum}, item: ${idx}, id: ${spelId}, `; yieldMsg += `string: '${spels.get(spelId).string}', pause: ${score[ idx ].pause.toFixed(2)}`; yield yieldMsg; // these two lines do all the work: document.getElementById(spelId).classList.toggle("visible"); // triggers fade in/out await Promises.delay(score[idx].pause * 1000); // pauses taken from the temporal data } await Promises.delay(secondsBeforeAndBetween * 1000); // longer pause between readings } } }35:T467,The text that has been scored – in temporal terms, by the `score` items that are `play`’ed – had previously been typed into the next cell, which is named `draft`. If you `forked` this notebook for your own project, you might start to make your own changes by drafting and arranging your language here, or by experimenting first with replacing, say, some of the existing words. The `draft` cell follows certain conventions. * The cell is configured as `HTML` and the contents of the text must be surrounded by `pre` tags with a `class` of `set` (for ‘type`set`’): `

`
* The element should be styled, with respect to font properties in particular, in the `CSS` (for which there is a [cell in the notebook](#css)).
* Horizontal positioning is achieved simply by typing space characters (and running the cell to see the effects).
* Any other spatial arrangement – especially to enhance the simple line spacing for vertical arrangement – could be done with any valid `html`.
* You will get what you see in the end, but only what you see **after (re)excution of the `draft` cell** containing your text.36:T58d,CSS
37:[{"id":"dfa636706f6b7a53a8c290218b3c177d6be1d3abbb7577b92f1e6314b3b642c59fb7a6e6dc059d89226ef1e3675b8dccafaa5c432d9599ed288eed19bb8a0ea8","href":"https://static.observableusercontent.com/files/dfa636706f6b7a53a8c290218b3c177d6be1d3abbb7577b92f1e6314b3b642c59fb7a6e6dc059d89226ef1e3675b8dccafaa5c432d9599ed288eed19bb8a0ea8","name":"wf_linear@2.json","type":"application/json","lastModified":1654785105193.954,"size":2214},{"id":"497afa6fbf76ff797eb6fa78d6ae6b1454a5de2de5bc37a5bb0ee1872371c86bbed3db7a230d348b3b548a4d7bc1d40e46b70b1a3694614ee05d3d0b1b5e5532","href":"https://static.observableusercontent.com/files/497afa6fbf76ff797eb6fa78d6ae6b1454a5de2de5bc37a5bb0ee1872371c86bbed3db7a230d348b3b548a4d7bc1d40e46b70b1a3694614ee05d3d0b1b5e5532","name":"wf_parallel@1.json","type":"application/json","lastModified":1654785105193.954,"size":2297},{"id":"7c8014976c70449191ef5223818da2f0b04d7f8c039f4bd0a3f08f4eab69112059f96a7ab8ab7d20b0f4a5dc692937e50f35202f46c8084795465a91f418a63b","href":"https://static.observableusercontent.com/files/7c8014976c70449191ef5223818da2f0b04d7f8c039f4bd0a3f08f4eab69112059f96a7ab8ab7d20b0f4a5dc692937e50f35202f46c8084795465a91f418a63b","name":"wf_path@1.json","type":"application/json","lastModified":1654785105193.954,"size":2233},{"id":"4787833041c8dd2b7ef83803d3cb606b42a2c3cca7bfdacabe2b5f5ebd32ce978b8d450d8fa1efd0cb865184e1c231a50975ca5f98d33f021a36acf918d6e51b","href":"https://static.observableusercontent.com/files/4787833041c8dd2b7ef83803d3cb606b42a2c3cca7bfdacabe2b5f5ebd32ce978b8d450d8fa1efd0cb865184e1c231a50975ca5f98d33f021a36acf918d6e51b","name":"NotoSerif-Regular.ttf","type":"font/ttf","lastModified":1654785105193.954,"size":375148},{"id":"33ff16ae2e07542fab1aae9aefba8bbc030b7026a56be0b463c467019b755f43e7f00f53957554d0e2a0491df10804f6997b808f813a25409a2b791de7221825","href":"https://static.observableusercontent.com/files/33ff16ae2e07542fab1aae9aefba8bbc030b7026a56be0b463c467019b755f43e7f00f53957554d0e2a0491df10804f6997b808f813a25409a2b791de7221825","name":"NotoSerif-Regular.woff2","type":"font/woff2","lastModified":1654785105193.954,"size":178240},{"id":"1ebc8b374c91dbd324350f9f5f3bfef933c12281979460d40292695d1a79768479c65f7fbaf53710493590b8c517968a7260a88c578faa011a37a7fe511b647f","href":"https://static.observableusercontent.com/files/1ebc8b374c91dbd324350f9f5f3bfef933c12281979460d40292695d1a79768479c65f7fbaf53710493590b8c517968a7260a88c578faa011a37a7fe511b647f","name":"NotoSerif-Regular.woff","type":"font/woff","lastModified":1654785105193.954,"size":239984},{"id":"1534c49917525edb5e26a8587653720c290afb844bb03fe304887b3c1e53dcc6dfb8d68a1f614a32ba4e018a1c40e3eda9b236f13f62a5a32e251ec12279842b","href":"https://static.observableusercontent.com/files/1534c49917525edb5e26a8587653720c290afb844bb03fe304887b3c1e53dcc6dfb8d68a1f614a32ba4e018a1c40e3eda9b236f13f62a5a32e251ec12279842b","name":"cq_linear.json","type":"application/json","lastModified":1663792312183.302,"size":2220},{"id":"3a9acbac801d271fa4f41befb2c1fa3d8f32b6ba479dcbe5006fb04b9a0989d3807f434e931b80374162e0ad83ca581f256b3a7b9b310f938067bea0c4861754","href":"https://static.observableusercontent.com/files/3a9acbac801d271fa4f41befb2c1fa3d8f32b6ba479dcbe5006fb04b9a0989d3807f434e931b80374162e0ad83ca581f256b3a7b9b310f938067bea0c4861754","name":"cq_parallel.json","type":"application/json","lastModified":1663792312193.962,"size":2303},{"id":"fdfc6519967ace15b1e5daa29d04e897439ff57a121433e983de4e689114788e8d826d7511d2b660f3b0b7deb46e1e124f6578a10a26dcb5115bfeef2482f1a2","href":"https://static.observableusercontent.com/files/fdfc6519967ace15b1e5daa29d04e897439ff57a121433e983de4e689114788e8d826d7511d2b660f3b0b7deb46e1e124f6578a10a26dcb5115bfeef2482f1a2","name":"cq_path.json","type":"application/json","lastModified":1663792403746.431,"size":2239}]
31:{"id":"b2a9765b2ca3e3be","slug":"stsa","title":"Scoring the Spelt Air","thumbnail":"a4a1b5854a638dad9f26f922487f39795b92163e4089c38b62456f731b782204","access_level":"public","create_time":"$D2022-06-09T14:31:45.193Z","update_time":"$D2026-09-09T20:56:10.217Z","view_time":null,"first_public_time":"$D2022-06-09T14:32:19.368Z","has_unpublished_edits":null,"fork":{"id":"c9ff4ef445fb9280","slug":"stsa-lcs","title":"StSA - with LCS","owner":{"id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":"pro_2024"},"version":3142,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c3cbd6193f712f7","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":null}],"members":[{"type":"individual","id":"5c3cbd6193f712f7","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"d82373961f237124","slug":"scoring-the-spelt-air","title":"Scoring the Spelt Air","owner":{"id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley"}},"type":"notebook","body":{"title":"Scoring the Spelt Air","cells":[{"id":0,"value":"# Scoring the Spelt Air\nJohn Cayley","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2659,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"intro","database":"$undefined"},{"id":2735,"value":"---\n#### Code Commentary\nThe cell following this one, named `frame`, displays the looping animation. One ‘loop’ is about 4 minutes in duration. Code-generated and animated `span` elements are inside a `div` element with `id=\"display\"`. Please read other commentary cells below for further information on the implementation, and please also examine the live code in some of these cells below along with the code’s embedded comments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"\n  ${spelsObject.spansString}
\n
","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"frame","database":"$undefined"},{"id":2700,"value":"The following cell, named `play`, contains the main program for the animation. In the reactive live-coding context of Observable, a simple Javascript infinite `while` loop keeps everything running and is also able to `yield` results from the animation’s current state. For example, you can see what `play`, the cell, *is equal to* (what it is `yield`’ing), immediately below.\n\nInside the infinite loop, the cell reads through an array of [`scores`](#scores) and, one by one, each of these scores a reading path through the text, displaying words and phrases in the order and according to the durations in the current `score`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1906,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":582,"value":"draft = html`\nrich  scarlet\n                                   deepens\n                                                          herb          path\nfaint turquoise\n                                   fills\n                                                          mountain window\n\nenvy     you\nbutterfly\n                                   through dreams\n                                   under    flowers\n\nwine          flying\n
`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2282,"value":"The following cell, name `draftSpanned`, is generated by the notebook from the cell `draft`. Basically other code in the notebook recreates what the author of the text types into the `draft` cell and puts `span` tags around its (the draft’s) [`spels`](#spels). Once this is done, other code in other cells can get access to 2D positioning information. This is used, finally, by the spatialized, animated [`frame`](#frame) cell above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1026,"value":"draftSpanned = {\n  // Build the spanned markup as an HTML string, then parse it into real DOM\n  // nodes (rather than relying on the html`` tagged template, which escapes\n  // interpolated strings rather than parsing them as markup).\n  const wrapper = document.createElement(\"div\");\n  wrapper.innerHTML = await addSpansTo(draft);\n  const pre = wrapper.firstElementChild;\n\n  // Attach off-screen (but connected to the live document, and NOT\n  // visibility:hidden, which would make .innerText report \"\") so that\n  // offsetLeft/offsetTop measurements taken later (in buildSpels) reflect\n  // real CSS layout.\n  wrapper.style.position = \"absolute\";\n  wrapper.style.left = \"-9999px\";\n  wrapper.style.top = \"0\";\n  document.body.appendChild(wrapper);\n  invalidation.then(() => wrapper.remove());\n\n  return pre;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2780,"value":"The following `addSpansTo` cell, a function, does the job of adding spans to what it finds in the `draft` cell. It is called by the cell above, `draftSpanned`, which generates `HTML`.\n\nFor other projects, this code would likely require customizing. In the current project, the [`spels`](#spels) of the piece are words, so all we have to do is find all the words and make them the `spels` of the piece.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":974,"value":"addSpansTo = (draftElem) => {\n  let newText = ``; // this will hold html for the new draftSpanned cell\n  let text = draftElem.innerHTML; // get existing innerHTML from from the pre element of draft cell\n  let spelStart = text.search(/\\S/); // find the first spel by finding first nonwhitespace\n  while (spelStart != -1) {\n    newText += text.substr(0, spelStart); // grab everything up to that point\n    text = text.substr(spelStart); // put the rest in text\n    let spelEnd = text.search(/\\s/); // find where whitespace starts again\n    if (spelEnd == -1) spelEnd = text.length; // text ends with nonwhitespace\n    // wrap the spel we've found in span tags\n    newText += `` + text.substr(0, spelEnd) + ``; // add this to newText\n    text = text.substr(spelEnd); // put the rest in text\n    spelStart = text.search(/\\S/); // find the next nonwhitespace (if any)\n  }\n  return `${newText}
`; // wrap in pre tags of same class\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2215,"value":"#### Spels\nMy name for the scored elements of an animated text is ‘spels.’ I give them this special name because, in principle, they could be at any level of linguistic structure according to the requirements of the author’s project: letters, syllables, words, phrases, clauses, lines, sentences, etc. In the current project a `spel` is a JavaScript `Object` with just three properties: `string`: the letters or words to be animated/displayed, `leftvw`: horizontal positioning, `topvw`: vertical positioning (expressed in `vw` or viewport width).\n\n[`spels`](#spels), the data strucuture, is a `Map`. Its `keys` are `id`’s for a project’s `spels` and these `keys` also serve as `span` element `id`’s.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1166,"value":"spels = spelsObject.spels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2846,"value":"The `buildSpels` cell, a function, is defined below and returns an `Object.` The `spels` cell above shows one of this `Object`’s properties, `spels`, which references their `Map`. `buildSpels` is passed the `HTML` that has been generated in `draftSpanned` with its added `span` tags around each word. (In this project, words are the `spel`’s of the piece.)\n\nThe other property of the `Object` returned by `buildSpels`, `spansString`, is a string of `html` that is referenced in the `display` `div` of the main [`frame`](#frame) cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":844,"value":"buildSpels = (draftSpannedElem) => {\n  // builds the spels array of spel objects and returns styled spans for display\n  let spansString = ``;\n  let spels = new Map();\n  let verseSpans = Array.from(draftSpannedElem.children);\n  verseSpans.forEach((span, idx) => {\n    let spel = {};\n    let spelId = \"s\" + idx;\n    spel.string = span.innerText;\n    spel.leftvw = pxToVw(span.offsetLeft);\n    spel.topvw = pxToVw(span.offsetTop);\n    spels.set(spelId, spel);\n    spansString += `${span.innerHTML}`;\n  });\n  return { spansString, spels };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2865,"value":"`buildSpels` returns the following `spelsObect` when called on `draftSpanned`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2861,"value":"spelsObject = buildSpels(draftSpanned)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2109,"value":"### Scores\n`scores` is an array of one or more `score`’s. A `score` is an array of simple `Objects`, each with an `id` property that serves as `key` to the `spels Map` and a `pause` property which is a number of seconds.\n\nThe code in the [`play`](#play) cell takes each of the `scores` and plays its elements in turn. `play` gets positioning information and string contents by using the element’s `id` to get a `spel Object` from the `spels Map`. The `spel id` is the same as that of the relevant `span` element in the `display HTML div`. Timing information comes from the `score` element’s `pause` property.\n\nThe follow cell holds the `scores` array for this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"scores = [\n  readThrough_linear,\n  toggleAll,\n  parallel_segments,\n  path_fading,\n  // randomly chosen segments will be injected into\n  // the following scores when play runs\n  readThrough_path,\n  readThrough_path\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2220,"value":"In other contexts, the `scores` and score-building utilities will be bespoke and/or manually composed for each project.\n\nFor temporal composition, these `scores` are where poetic process – of author and/or reader – interfaces with the basic temporal algorithmic processes of animation.\n\n**Note** that words, phrases, or strings in the text will not necessarily be unique and so cannot be used as data structure `keys` for the `spels Map`.\n\nThe following cell defines one `score array`, the first element in the enclosing `scores` array. This `score` provides the most straightforward read through of *wine flying*’s text. The `pause`’s are based on [data](#data) extracted from the ‘alignment’ of a recorded reading by myself, using [the services of Reduct](#data). But other sources could have been used or the `score` might be composed from scratch, manually. You could edit the data in this cell in a fork of this notebook and see for yourself what the effects would be.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2928,"value":"readThrough_linear = [\n  { id: \"s0\", pause: 0.5999999999999999 },\n  { id: \"s1\", pause: 1.35 },\n  { id: \"s2\", pause: 1.2499999999999996 },\n  { id: \"s3\", pause: 0.5200000000000005 },\n  { id: \"s4\", pause: 2.01 },\n  { id: \"s5\", pause: 0.5800000000000001 },\n  { id: \"s6\", pause: 1.5199999999999996 },\n  { id: \"s7\", pause: 1.1500000000000004 },\n  { id: \"s8\", pause: 0.6299989999999998 },\n  { id: \"s9\", pause: 2.4000009999999996 },\n  { id: \"s10\", pause: 0.41000000000000014 },\n  { id: \"s11\", pause: 0.9500000000000011 },\n  { id: \"s12\", pause: 1.879998999999998 },\n  { id: \"s13\", pause: 0.48000100000000145 },\n  { id: \"s14\", pause: 1.3799990000000015 },\n  { id: \"s15\", pause: 0.3299999999999983 },\n  { id: \"s16\", pause: 1.759999999999998 },\n  { id: \"s17\", pause: 0.5200000000000031 },\n  { id: \"s18\", pause: 0.5799999999999983 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2959,"value":"The following, for comparison, is a cell with the same array automatically extracted from the audio data. The function that assembles the `score` is [`alignedSpels`](#alignedSpels).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":947,"value":"readThrough_linear_generated = alignedSpels(temporalData.linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2962,"value":"The following cells contain code that generates other `score`s used in this notebook. If you are designing your own projects, you might compose or generate your `score`s in an entirely different manner, as appropriate. Here, I provide commentary on what I’ve done in case others using this framework find the processes useful or interesting.\n\n`toggleAll` is a `score` that toggles the visibility for all the `spels` of the piece.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1335,"value":"toggleAll = {\n  let newScore = [];\n  for (let [id, spel] of spels) {\n    newScore.push({ id: id, pause: 0 });\n  }\n  return newScore;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2965,"value":"The following cell generates a `score` with a reading order that emphasizes the orginal Chinese quatrain’s parellism of both syntax and sense. It uses another set of imported timestamp data for a live reading.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2052,"value":"readThrough_parallel = alignedSpels(temporalData.parallel)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2968,"value":"Then the straight through parallel reading is enhanced by adding interlevaved parts of a new `score` such that, for example, parallel phrases in the first four elements of the `score` are repeated, with the effect that the words of the phrases will first be displayed and then faded out before the next set of phrases is displayed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1356,"value":"parallel_segments = {\n  let p = readThrough_parallel;\n  let newScore = [];\n  newScore = addFade(p.slice(0, 4), newScore);\n  newScore = addFade(p.slice(4, 6), newScore);\n  newScore = addFade(p.slice(6, 10), newScore);\n  newScore = addFade(p.slice(10, 13), newScore);\n  newScore = addFade(p.slice(13, 15), newScore);\n  newScore = addFade(p.slice(15, 19), newScore, 1.5);\n  return newScore;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2970,"value":"`readThroug_path` uses a third set of temporal data to `score` a reading that wanders through the words of the text in non-conventional order. ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1302,"value":"readThrough_path = alignedSpels(temporalData.path)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2973,"value":"... and `path_fading`, in a manner similar to that for `parallel_segments`, provides a version of its read through that fades a set of words as if they were separate, wandering lines of verse, articulating the poem differently.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1431,"value":"path_fading = {\n  let p = readThrough_path;\n  let newScore = [];\n  newScore = addFade(p.slice(0, 6), newScore);\n  newScore = addFade(p.slice(6, 11), newScore);\n  newScore = addFade(p.slice(11, 14), newScore);\n  newScore = addFade(p.slice(14, 19), newScore, 1.5);\n  return newScore;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2154,"value":"#### Score-building utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2987,"value":"`addFade` is passed one segment of a `score` to fade. It copies this segments and adds this copy to the `score` array immediately after the segment’s occurence so that the segment fades out after it is display (visibility is toggled). A pause between the display of the text and its fadeout is, optionally, added.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1366,"value":"addFade = (segmentToFade, scoreSoFar, interPause = 0) => {\n  scoreSoFar = scoreSoFar.concat(segmentToFade);\n  if (interPause > 0) {\n    scoreSoFar[scoreSoFar.length - 1].pause = interPause;\n  }\n  segmentToFade.forEach((item) => scoreSoFar.push({ id: item.id, pause: 0 }));\n  scoreSoFar[scoreSoFar.length - 1] = segmentToFade[segmentToFade.length - 1];\n  return scoreSoFar;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2991,"value":"`alignedSpels` is a function that takes in alignment – recorded audio timestamping – data and a `Map` of `spels` and generates a `score` from this data in the order of the recording.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":948,"value":"alignedSpels = (alignmentJSON, _spels = spels) => {\n  let allWords = [];\n  // extract all the words (strings) from the alignment data\n  Object.keys(alignmentJSON).forEach((segment) => {\n    alignmentJSON[segment].forEach((speech) => {\n      allWords = allWords.concat(speech.wdlist);\n    });\n  });\n  // build spels based of these words\n  let aSpels = [];\n  allWords.forEach((alignedWord, idx) => {\n    let p = alignedWord.end - alignedWord.start;\n    if (idx < allWords.length - 1) {\n      p = p + (allWords[idx + 1].start - alignedWord.end);\n    }\n    let string = alignedWord.word.match(/\\w*/)[0];\n    // TODO: needs serious work! this function is project-dependent,\n    // only works here because all words in the alignment data are unique\n    let id, spel;\n    for ([id, spel] of _spels) {\n      if (spel.string === string) break;\n    }\n    aSpels.push({ id: id, pause: p }); // spels[idx]\n  });\n  return aSpels;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2993,"value":"`readThrough_rdnPath` is a function that divides an existing `score` into segments, shuffles those segments and then joins them back up into a single ‘shuffled’ `score`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1672,"value":"readThrough_rdnPath = () => {\n  let segments = readThrough_path.slice(0);\n  segments[segments.length - 1].pause = 2.5;\n  segments = shuffle([\n    segments.slice(0, 6),\n    segments.slice(6, 11),\n    segments.slice(11, 14),\n    segments.slice(14)\n  ]);\n  let flattened = segments.reduce((a, b) => a.concat(b), []);\n  return flattened;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2995,"value":"`css` for the piece is fairly straightforward. The transistion from (abstract) `visible` is hard-coded as a 1.5 second fade, but there are any number of possibilities that could be implemented while still using this or a similar framework.\n\nTry, for example, commenting the `opacity` property for `.text` and `.text.visible` and uncommenting the `color` property.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"$36","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"css","database":"$undefined"},{"id":2821,"value":"To get the extact width and height of the typeset text content after it has been spatially composed we need to run the following cell and, for now, manually copy the resultant values into the css for the `div` with `id=\"display\"`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2579,"value":"widthHeight = {\n  let width = pxToVw(\n    Array.from(draftSpanned.children).reduce(\n      (a, b) => Math.max(a, b.offsetLeft + b.offsetWidth),\n      0\n    )\n  );\n  let height = pxToVw(\n    Array.from(draftSpanned.children).reduce(\n      (a, b) => Math.max(a, b.offsetTop + b.offsetHeight),\n      0\n    )\n  );\n  return `width: ${width}, height: ${height}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2088,"value":"#### General utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1051,"value":"// converts pixel measurements to the more flexible vw (viewport width) measurement of css\npxToVw = (px) => px * (100 / document.documentElement.clientWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"// shuffles an array\nshuffle = (a) => {\n  let i = a.length;\n  while (--i > 0) {\n    let j = ~~(Math.random() * (i + 1)); // ~~ is a common optimization for Math.floor\n    let t = a[j];\n    a[j] = a[i];\n    a[i] = t;\n  }\n  return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"#### File attachment references\n\nThese JSON files contain data kindly produced by [reduct.video](https://reduct.video) thanks to the good offices of Robert Ochshorn. They contain alignment information: *start* and *end* timestamps for the accoustic images of words in audio recordings of texts performed vocally. In this case the audio recordings were made by myself, reading the words of my own translation from a Chinese quatrain in three different orders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"data","database":"$undefined"},{"id":1513,"value":"temporalData = ({\n  linear: await FileAttachment(\"wf_linear@2.json\").json(),\n  parallel: await FileAttachment(\"wf_parallel@1.json\").json(),\n  path: await FileAttachment(\"wf_path@1.json\").json()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2663,"value":"### Notes\n[1.](#intro) Cayley, John. 'Beyond Codexspace: Potentialities of Literary Cybertext.' *Visible Language* 30, no. 2 (1996): 164-83. Somewhat revised and expanded in *Media Poetry: An International Anthology*, edited by Eduardo Kac, 105-125. Bristol: Intellect Books, 2007.\n   \n[2.](#intro) Cayley, John. *wine flying*.  London: Wellsweep, 1988. Issued for Macintosh computers on 3.5\" floppy disk. This version of the work is available, emulated, [on the web at the Internet Archive](https://archive.org/details/hypercard_wine-flying).\n\n[3.](#intro) Cayley, John. wine flying. London: Wellsweep Press, 1989. This little book was not designed as such but can almost be manipulated as a ‘flip book’ to actualize certain of the animations. Chinese for the author and title of the quatrain: 錢起 。 題崔逸人山亭. Qian Qi, ‘Written in the Mountain Pavilion of Cui, the recluse.’","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"notes","database":"$undefined"}],"files":"$W37","stdlib":"2","titling":"auto"}}
32:"$31:body"