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.
Public
Edited
Feb 11
text00 = {
let getRandomElemLocal = function(array) {
return array[(array.length * Math.random()) | 0];
};
let possessive = [
"my",
"your",
"his",
"her",
"their",
"our",
"your",
"their"
];
let noun = ["inferiority", "interiority"];
let verb = ["embarrasses", "impresses", "frightens", "attracts"];
let pronoun = ["me", "you", "him", "her", "them", "us", "you", "them"];
let textArray = new Array();
textArray[0] = getRandomElemLocal(possessive);
textArray[1] = getRandomElemLocal(noun);
textArray[2] = getRandomElemLocal(verb);
textArray[3] = getRandomElemLocal(pronoun);
return textArray.join(" ");
}
text01 = `${randomWord(possessives)} ${randomWord(nouns)} ${randomWord(
verbs
)} ${randomWord(pronouns)}`
text02 = {
while (true) {
yield await Promises.tick(4000).then(assembleText);
// what was spelt out in text01 has been moved to a function
}
}
ticker03 = {
let seconds = 5;
while (true) {
yield await Promises.tick(seconds * 1000).then(fader);
}
}
fader = () => {
let theElem = document.getElementById('text03');
// yield theElem.classList.contains('visible');
if (!theElem.classList.contains('visible'))
theElem.innerHTML = assembleText();
theElem.classList.toggle('visible');
return md`\`fader\` promises ticking away ...`; // purely cosmetic in the notebook
}
ticker04 = {
let seconds = 5;
while (true) {
yield await Promises.tick(seconds * 1000).then(
crossfader(buildText(assembled, [...assembled.keys()]), 'allSyntagms')
);
}
}
crossfader = (theText, classSelector = 'singleSyntagm') => {
let theElems = document.getElementsByClassName(classSelector);
for (let i = 0; i < theElems.length; i++) {
if (!theElems[i].classList.contains('visible')) {
theElems[i].innerHTML = theText;
}
theElems[i].classList.toggle('visible');
}
}
ticker05 = {
let seconds = 7;
while (true) {
yield await Promises.tick(seconds * 1000).then(
crossfader(buildText(assembled05, [randInt(4)]))
);
}
}
ticker06 = {
let seconds = 7;
while (true) {
yield await Promises.tick(seconds * 1000).then(
crossfader(buildText(assembled06, [randInt(4)], syntagms06), 'index06')
);
}
}
ticker07 = {
let seconds = 2;
while (true) {
yield await Promises.tick(seconds * 1000).then(
crossfader(buildText(assembled07, [randInt(4)], syntagms07), 'index07')
);
}
}
ticker08 = {
let seconds = 9;
while (true) {
yield await Promises.tick(seconds * 1000).then(
crossfader(buildText(assembled08, [randInt(4)], syntagms08), 'index08')
);
}
}
sifther10 = {
let seconds = 9;
while (true) {
// let indexes = shuffle([0, 1, 2, 3]); // ...Array(4).keys()
// for (let i of indexes) {
yield await Promises.tick(seconds * 1000).then(() => {
let i = randInt(4);
assembled10[i] = randWord(syntagms07[i].words, assembled10[i]);
crossfader(assembled10[i], 'w' + i);
});
// }
}
}
assembleText = () =>
`${randomWord(possessives)} ${randomWord(nouns)} ${randomWord(
verbs
)} ${randomWord(pronouns)}`
buildText = (
currentAssembly,
whichChange = [...Array(4).keys()],
syntagms = [
{ words: possessives, pad: maxLength(possessives) },
{ words: nouns, pad: maxLength(nouns) },
{ words: verbs, pad: maxLength(verbs) },
{ words: pronouns, pad: maxLength(pronouns) }
],
pad = true
) => {
let theText = '';
for (let i = 0; i < currentAssembly.length; i++) {
let word;
if (whichChange.includes(i)) {
// passing the current word to randWord avoids immediate repetition
currentAssembly[i] = randWord(syntagms[i].words, currentAssembly[i]);
}
if (pad) {
// when padding: add an extra space between the two large words:
let cosmeticSpace = pad && i == 1 ? ' ' : ''; // HARD CODING HERE
word = currentAssembly[i].padEnd(syntagms[i].pad) + cosmeticSpace;
} else word = currentAssembly[i];
theText += word + ' ';
}
return theText;
}
function randomWord(wordArray, currentWord) {
// only works with flat arrays of words
let safetyCounter = 0,
word;
do {
word = wordArray[randInt(wordArray.length)];
} while (
currentWord != undefined &&
word == currentWord &&
safetyCounter++ < 100
);
return word;
}
randInt = maxPlusOne => (maxPlusOne * Math.random()) | 0
rpad = strings => {
let padded = []; // make this 'pure' - doesn't alter the strings array
for (let s of strings) {
padded.push(s.padEnd(maxLength(strings), ' '));
}
return padded;
}
function maxLength(strings) {
let allStrings = [];
strings.forEach(object => {
if (typeof object == 'string') allStrings.push(object);
else allStrings = allStrings.concat([...object.pair]);
});
return allStrings.sort(function(a, b) {
return b.length - a.length;
})[0].length;
}
{
return randWord(nounPairs, "nationalism");
}
function randWord(wordArray, currentWord) {
let wordObject,
pickedWordObject,
safetyCounter = 0;
// first, don't pick the same string:
do {
wordObject = wordArray[randInt(wordArray.length)];
// console.log(`wordObject ${wordObject}, currentWord ${currentWord}`);
} while (typeof wordObject == 'string' && wordObject == currentWord);
let wordArrayIndex = pairIndex(currentWord, wordArray);
// if we have picked a different string and
// the currentWord is not from a pair, return it
if (typeof wordObject == 'string' && wordArrayIndex == -1) {
// console.log(`returning a string: ${wordObject}`);
return wordObject;
} else {
if (wordArrayIndex == -1) {
// currentWord comes from another pair
// console.log(`currentWord ${currentWord} comes from another wordObject`);
// and so we reset here:
wordObject.display = true; // [true, true];
let pairIndex = randInt(2);
// wordObject.display[pairIndex] = false;
// console.log(`new pair, return either one ${wordObject.pair[pairIndex]}`);
return wordObject.pair[pairIndex];
} else {
// console.log(`currentWord ${currentWord} comes from picked pair`);
wordObject = wordArray[wordArrayIndex];
if (wordObject.display == false) {
// && wordObject.display[1] == false
// console.log(`both members of the pair have been displayed`);
return randWord(wordArray, wordObject);
}
let mateIndex = (wordObject.pair.indexOf(currentWord) + 1) % 2;
wordObject.display = false; // mateIndex
// console.log(`display other word in pair: done`);
return wordObject.pair[mateIndex];
}
}
}
function pairIndex(item, arr) {
let index = -1;
for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] != 'string') {
let j = arr[i].pair.indexOf(item);
if (j != -1) {
// console.log(`found ${item} at ${i} in wordArray`);
index = i;
}
}
}
return index;
}
{
return shuffle([...Array(4).keys()]);
}
shuffle = (arr) => {
for (let i = arr.length - 1; i >= 0; i--) {
let randomIndex = randInt(i + 1); // Math.floor(Math.random() * (i + 1));
let itemAtIndex = arr[randomIndex];
arr[randomIndex] = arr[i];
arr[i] = itemAtIndex;
}
return arr;
}
css = html`
<style>
@font-face {
font-family: 'AndaleMono';
src: url('${await andaleMono.url()}');
}
.sifther {
min-height: 90px;
padding-top: 30px;
}
.sifther10 {
position: relative;
min-height: 220px;
}
.mono {
font-family: 'AndaleMono', monospace;
font-size: 32px;
white-space: pre;
}
.overlaid {
position: absolute;
}
.regular {font: 36px 'Minion Pro';}
.text {
color: rgba(0,0,0,0);
transition: color 1.5s ease-in-out;
}
.text.visible {
color: rgba(0,0,0,255);
/* starts readable */
}
.w0 {
position: absolute;
top: 20px;
left: 120px;
}
.w1 {
position: absolute;
top: 60px;
left: 120px;
}
.w2 {
position: absolute;
top: 100px;
left: 120px;
}
.w3 {
position: absolute;
top: 140px;
left: 120px;
}
</style>
`
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.
