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 {alignWords} from "@shadoof/utils"
alignWords = function (reduct_json, secondsAtEndOfText = 3) {
let a = [];
Object.keys(reduct_json).forEach((segments) => {
reduct_json[segments].forEach((speech) => {
a = a.concat(speech.wdlist);
});
});
a.forEach((word, index) => {
word.word = word.word.trim();
index < a.length - 1
? (word.gap = a[index + 1].start - word.end)
: (word.gap = secondsAtEndOfText);
});
return a;
}
fadeInByWord = (wordsArray, displayElement, milliseconds) => {
displayElement.innerHTML = wordsArray
.map((word) => '<span class="faded-word">' + word + "</span>")
.join(" ");
let wordsForFading = document.querySelectorAll(".faded-word");
wordsForFading.forEach((word) => {
word.addEventListener("transitionend", startNextWordAnimation);
});
function startNextWordAnimation(e) {
let nextWord = e.target.nextElementSibling;
if (nextWord) {
nextWord.classList.add("faded-activated");
}
}
startSequence(displayElement);
function startSequence(displayElement) {
if (!displayElement) {
return;
}
setTimeout(() => {
displayElement
.querySelector(".faded-word")
.classList.add("faded-activated");
}, milliseconds);
}
}
/*
<style>
#display {
height: 30vw;
width: 45vw;
font-size: 3vw;
background-color: ivory;
color: black;
overflow: hidden;
}
.faded-word {
display: inline-block;
opacity: 0;
}
.faded-activated {
transition: opacity .7s ease-in-out;
opacity: 1;
}
</style>
*/
heads = () => {
return randInt(2) == 0;
}
mod = function (n, m) {
// mod function that handles negative numbers, usage: mod(num, modulous)
return ((n % m) + m) % m;
}
// a Map object keys: from RiTa's ARPABET phones encodings to values: single-letter versions
// in the obj4editing
// values are the single-letter codes from https://en.wikipedia.org/wiki/ARPABET
// comments beside entries are values I chose before finding the above authority
PHONES_SL = {
let obj4editing = {
aa: "a",
ae: "@", // should be @ V could be F, H, J, L, M, N, P, Q, q, X
ah: "A",
ao: "c", // X
aw: "W",
ay: "Y",
b: "b",
ch: "C",
d: "d",
dh: "D",
eh: "E",
er: "R",
ey: "e",
f: "f",
g: "g",
hh: "h",
ih: "I",
iy: "i",
jh: "j",
k: "k",
l: "l",
m: "m",
n: "n",
ng: "G", // N
ow: "o",
oy: "O",
p: "p",
r: "r",
s: "s",
sh: "S",
t: "t",
th: "T",
uh: "U",
uw: "u",
v: "v",
w: "w",
y: "y",
z: "z",
zh: "Z"
};
return obj4editing;
}
randElement = (array) => array[randInt(array.length)]
randIntBetween = (min, max) => {
return Math.floor(Math.random() * (max - min) + min);
}
randInt = (maxPlusOne) => (maxPlusOne * Math.random()) | 0
shuffle = (a) => {
let i = a.length;
if (i < 2) return a;
while (--i > 0) {
let j = ~~(Math.random() * (i + 1)); // ~~ is a common optimization for Math.floor
let t = a[j];
a[j] = a[i];
a[i] = t;
}
return a;
}
StrictObj = class {
constructor(obj) {
Object.assign(this, obj);
}
get = (property) => {
if (this.hasOwnProperty(property)) {
return this[property];
} else {
throw new Error(`object has no ${property} to get`);
}
};
set = (property, value) => {
if (this.hasOwnProperty(property)) {
this[property] = value;
return this[property];
} else {
throw new Error(`object has no ${property} to set`);
}
};
}
/*
This following cell creates and registers a custom HTML tag. NOTE that the names of custom tags must include a “-” (hyphen).
import { verseTag } from "@shadoof/utils"
*/
verseTag = {
class Verse extends HTMLElement {
constructor() {
super(); // Always call super first in constructor
this.setAttribute("style", "white-space: break-spaces");
}
}
try {
customElements.define("dla-verse", Verse);
return "<dla-verse> has been initially constructed and registered";
} catch (err) {
if (err.name == "NotSupportedError")
return "<dla-verse> is constructed and registered";
console.error(err);
}
}
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.
