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.
import { verseTag } from "@dla/imports"
verseTag
verseText = html`<dla-verse>Uniquely,
in the LAOB,
published works will link back,
seamlessly,
to the very notebooks
that are
animating, dynamically
manipulating, or
providing commentary on
what their readers experience.</dla-verse>`
verseSpanned = html`${addSpans(verseText)}`
offsets = wordOffsets(verseSpanned)
viewof play = Button("Play", {
reduce: async () => {
loop();
await Promises.delay(3500).then(() =>
document.getElementById("thevid").play()
);
}
})
// playEmbeddable = {
// loop();
// await Promises.delay(1000).then(() =>
// document.getElementById("thevid").play()
// );
// }
vurl = await FileAttachment("John_Uniquely_laob2@1.mp4").url()
wordOffsets = verseSpans => {
let array = [];
if (verseSpans == ``) return array;
let vw = document.documentElement.clientWidth;
let nodes = Array.from(verseSpans.children);
nodes.forEach((node, index) => {
if (node.offsetLeft != undefined) {
array.push([(node.offsetLeft / vw) * 100, node.offsetTop]);
}
});
return array;
}
addSpans = verseElem => {
// ensure that verseTag is registered:
verseTag;
let newText = ``;
let text = verseElem.innerText;
let wordStart = text.search(/\S/); // nonwhitespace
while (wordStart != -1) {
newText += text.substr(0, wordStart);
text = text.substr(wordStart);
let wordEnd = text.search(/\s/); // whitespace
if (wordEnd == -1) wordEnd = text.length; // text ends with nonwhitespace
newText += `<span>` + text.substr(0, wordEnd) + `</span>`;
text = text.substr(wordEnd);
wordStart = text.search(/\S/);
}
return `<dla-verse>${newText}</dla-verse>`;
}
loop = async () => {
// for (let j = 0; j < 2; j++) {
for (let i = 0; i < offsets.length; i++) {
await scorepause("u" + i, unitPauses[i].pause * 1000);
}
// }
}
scorepause = async (span, pause) => {
return await Promises.delay(pause).then(() => {
let theElem = document.getElementById(`${span}`);
theElem.classList.toggle('visible');
});
}
makeSpans()
makeSpans = () => {
let s = ``;
verseSpanned;
let spans = Array.from(verseSpanned.children);
spans.forEach((span, index) => {
if (span.offsetLeft != undefined) {
let offl = offsets[index][0];
let offt = offsets[index][1];
let wstr = index == 3 ? LAOB + "," : span.innerHTML;
s += `<span id="u${index}" class="text" style="left:${offl}vw;top:${offt}px">${wstr}</span>`;
}
});
return s;
}
mutable spans = ``
vidcss = html`<style>
@font-face {
font-family: 'PE_Std';
src: url('${await FileAttachment("PrestigeEliteStd-Bd.woff2").url()}');
}
dla-verse {
font-family: PE_Std;
font-size: 2vw;
}
.arial {
font-family: Arial;
}
.video-container {
position: relative;
}
.logospankern {
margin-left: -.06em;
}
.logokern {
letter-spacing: -.1em;
}
.pe_bld {
font-family: PE_Std;
}
.text-container {
position: absolute;
top: 20px;
left: 7vw;
}
.spans-container {
position: relative;
cursor: none;
min-height: 380px;
font-family: PE_Std;
font-size: 2vw;
}
.text {
position: absolute;
color: rgba(255,255,255,0);
transition: color 1s ease-in-out;
}
.text.visible {
color: rgba(255,255,255,255);
}
</style>`
html`${LAOB}`
LAOB
import { LAOB } from "@laob/laob"
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.
