Observable aspects of my digital language art. I like to ask people to read nllf.net, some of which is driven by notebooks made here.
<div id="frame"><div id="display">${buildSpels(verseSpanned).spansStr}</div></div>
play(NB)
<pre id="verse">
rich scarlet
deepens
herb path
faint turquoise
fills
mountain window
envy you
butterfly
through dreams
under flowers
wine flying
</pre>
verseSpanned = html`${await addSpansTo(verse)}`
verseWidth = pxToVw(
Array.from(verseSpanned.children).reduce(
(a, b) => Math.max(a, b.offsetLeft + b.offsetWidth),
0
)
)
verseHeight = pxToVw(
Array.from(verseSpanned.children).reduce(
(a, b) => Math.max(a, b.offsetTop + b.offsetHeight),
0
)
)
scores = [
readThrough_linear,
toggleAll,
parallel_segments,
path_fading,
// randomly chosen segments will be injected into the following on play()
readThrough_path,
readThrough_path
]
<h2>CSS</h2>
<style>
@font-face {
font-family: 'NotoSerif';
src: local('NotoSerif'),
url(${await FileAttachment("NotoSerif-Regular.woff2").url()}) format('woff2'),
url(${await FileAttachment("NotoSerif-Regular.woff").url()}) format('woff'),
url(${await FileAttachment("NotoSerif-Regular.ttf").url()}) format('ttf')
}
:root {
--ffam: NotoSerif, serif;
--fsize: 2.3vw;
}
#frame {
position: relative;
background-color: ghostwhite;
padding: 1vw;
width: max-content;
}
#display {
position: relative;
background-color: floralwhite;
font-family: var(--ffam);
font-size: var(--fsize);
color: slate;
cursor: none;
overflow: hidden;
width: 54.9163179916318vw; /* This value is calculated in the verseWidth cell, manually */
height: 44.8744769874477vw; /* This value is calculated in the verseHeight cell, manually */
}
#verse {
margin: 0;
font-family: var(--ffam);
font-size: var(--fsize);
}
.text {
position: absolute;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.text.visible {
opacity: 1;
}
</style>
pxToVw = (px) => px * (100 / document.documentElement.clientWidth)
wfJSON = ({
linear: await FileAttachment("wf_linear@2.json").json(),
parallel: await FileAttachment("wf_parallel@1.json").json(),
path: await FileAttachment("wf_path@1.json").json()
})
import {
cleanCsMd, // this import not needed for compilation; only needed if explicitly called in your notebook
compileCsMd
} from "@shadoof/coffeescript-markdown-in-observable"
NB = ({
buildSpels, // not used in the CoffeeScript but the ref here ensures that spels are built by Observable
spels,
readThrough_rdnPath,
scores,
Promises
})
CS = require("coffeescript")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
