The avatar for @shadoof
John Cayley
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
Jun 5, 2023
4 forks
1 star
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
config = ({
document: false,
debug: true
})
Insert cell
Insert cell
Insert cell
Insert cell
`f0`
Insert cell
`f1`
Insert cell
`f2`
Insert cell
`f3`
Insert cell
`f4`
Insert cell
`f5`
Insert cell
`f6`
Insert cell
`f7`
Insert cell
`f8`
Insert cell
`f9`
Insert cell
`f10`
Insert cell
`f11`
Insert cell
`f12`
Insert cell
`f13`
Insert cell
`f14`
Insert cell
`f15`
Insert cell
`f16`
Insert cell
`f17`
Insert cell
`f18`
Insert cell
`f19`
Insert cell
`f20`
Insert cell
`f21`
Insert cell
`f22`
Insert cell
`f23`
Insert cell
`f24`
Insert cell
`f25`
Insert cell
`f26`
Insert cell
`f27`
Insert cell
`f28`
Insert cell
`f29`
Insert cell
`f30`
Insert cell
`f31`
Insert cell
`f32`
Insert cell
`f33`
Insert cell
`f34`
Insert cell
`f35`
Insert cell
`f36`
Insert cell
`f37`
Insert cell
`f38`
Insert cell
`f39`
Insert cell
`f40`
Insert cell
`f41`
Insert cell
`f42`
Insert cell
`f43`
Insert cell
`f44`
Insert cell
`f45`
Insert cell
`f46`
Insert cell
`f47`
Insert cell
`f48`
Insert cell
`f49`
Insert cell
`f50`
Insert cell
`f51`
Insert cell
`f52`
Insert cell
`f53`
Insert cell
`f54`
Insert cell
`f55`
Insert cell
`f56`
Insert cell
`f57`
Insert cell
`f58`
Insert cell
`f59`
Insert cell
Insert cell
shimmerer = async () => {
let object = 0,
replacement = 1;
// choose one of the letters which has a
// sublitterally different pair to replace, at random
let indexOfObjectLetter = randInt(letters[object].length);
let objectLetter = letters[object].substr(indexOfObjectLetter, 1);

// if the rapidly looping rindex is zero
// shuffle an array of Array-index keys to the words of the supply text
if (mutable rindex == 0) shuffle(shuffledArray);
// rindex and shimmerer changes every seconds (a configuration cell)
// .04 is a value used in currently published versions
mutable rindex = ++mutable rindex % supplyArray.length;

// get index of a (random) word in the shuffled array
// the mutuable rindex ensures all words are checked in a random order each round
let wordIndex = shuffledArray[mutable rindex];
// remove any styling from the word
let shimmeringWord = stripTags(shimmeringArray[wordIndex]);
// do nothing if we are surfacing and we've already got the supply word
if (mutable surface && shimmeringWord === supplyArray[wordIndex]) return;

// get matches for the objectLetter in the shimmering word
let r = new RegExp(objectLetter, "g");
let a = Array.from(shimmeringWord.matchAll(r));
// return if no matches
if (a.length < 1) return;
let indexOfLetterToReplace, modelLetter;
while (a.length > 0) {
// get the index of a random match
let indexOfMatch = randInt(a.length);
// and index of where it was found in the word
indexOfLetterToReplace = a[indexOfMatch].index;
// remove this match from the array
a.splice(indexOfMatch, 1);

// get currently displayed letter
let letterInWord = shimmeringWord.substr(indexOfLetterToReplace, 1);
// get the corresponding letter in the supply text (its 'model')
modelLetter = supplyArray[wordIndex].substr(indexOfLetterToReplace, 1);
if (mutable surface) {
// do nothing if surfacing and the letter is also a modelLetter
// and there are no other choices
if (letterInWord === modelLetter && a.length == 0) return;
// otherwise try other matches by continuing
} else {
// if shimmering always do something with the letters
// by leaving the while loop
a.length = 0;
}
}
// get the sublitteral pair for the letter we are proposing to replace
let replacementLetter = letters[replacement].substr(indexOfObjectLetter, 1);

shimmeringWord = shimmeringWord.replace(
shimmeringWord.substr(indexOfLetterToReplace, 1),
replacementLetter
);
// add styling to the letter (in different circumstances, including debugging)
if (config.debug) {
let makeChange = mutable surface
? replacementLetter === modelLetter
: replacementLetter !== modelLetter;
if (makeChange)
shimmeringWord = highlight(shimmeringWord, indexOfLetterToReplace);
}
shimmeringArray[wordIndex] = shimmeringWord;
// mutable shimmeringText is referenced by the main display or display cell
mutable shimmeringText = addBackLineEndings(shimmeringArray);
}
Insert cell
highlight = (str, idx) =>
str.substring(0, idx) +
`<span class='${mutable surface ? "blue" : "pink"}'>` +
str.substr(idx, 1) +
`</span>` +
str.substring(idx + 1)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
swell = {
while (run) {
yield await Promises.delay(1000).then(() => {
mutable secondhand = ++mutable secondhand % 30;
if (mutable secondhand === 0) {
mutable surface = !mutable surface;
}
// make snapshot each second if config.document is set to true:
if (config.document) {
let s = mutable secondhand;
s = mutable surface ? s + 30 : s;
mutable shimmeringText = addBackLineEndings(shimmeringArray.slice());
frames[
s
].innerHTML = `<div class="frame">${mutable shimmeringText}</div>`;
}
});
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<style>
@font-face {
font-family: 'AndaleMono';
src: url('${await andaleMono.url()}');
}

@font-face {
font-family: 'MinionPro';
src: url('${await FileAttachment("MinionPro-Regular.otf").url()}');
}

.frame {
font-family: MinionPro, serif;
font-variant-ligatures: no-common-ligatures;
font-size: 25px;
text-align: center;
background-color: #121212;
color: floralwhite;
padding: 2em 0px;
}

/* .shimmer {
font-family: MinionPro, serif;
font-variant-ligatures: no-common-ligatures;
font-size: 25px;
text-align: center;
}
*/
.pink {
/* background-color: lightpink; */
color: lemonchiffon; /* lightgoldenrodyellow, lemonchiffon, lightyellow, gold */
text-shadow: 0 0 0.5ch white, 0 0 1.5ch white;
/* text-shadow: 0 0 0.5ch white,
0 0 1.5ch white; */
}
.blue {
/* background-color: lightblue; */
}

</style>
Insert cell
<div class="frame">This a<span class="pink">n</span>d That</div>
Insert cell
import { laob_notebook_css, LAOB } from "@laob/imports"
Insert cell
laob_notebook_css
Insert cell
shuffle(["Percival", "Rosamond", "Ronaldo", "Matthew", "Monica"])
Insert cell

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.
Learn more