ticker = {
while (true) {
yield await Promises.tick(seconds * 1000).then(shimmerer);
}
}
shimmerer = () => {
let object = 0,
replacement = 1;
let indexOfObjectLetter = randInt(letters[object].length);
let objectLetter = letters[object].substr(indexOfObjectLetter, 1);
if (mutable rindex == 0) shuffle(shuffledArray);
mutable rindex = mutable rindex + 1;
if (mutable rindex >= shimmeringArray.length) {
mutable rindex = 0;
}
let wordIndex = shuffledArray[rindex];
let shimmeringWord = shimmeringArray[wordIndex];
let len = shimmeringWord.length;
let indexOfLetterToReplace = -1;
// do nothing if we are surfacing and we've already got the supply word
if (mutable surface && shimmeringWord === supplyArray[wordIndex]) return;
if (heads()) {
// search for letter from beginning or up to halfway thru the word
let indexSearchStart = randInt(Math.floor(len / 2));
indexOfLetterToReplace = shimmeringWord.indexOf(
objectLetter,
indexSearchStart
);
} else {
// search for letter from end or down to halfway thru the word
let indexSearchStart = randIntBetween(Math.ceil(len / 2), len);
indexOfLetterToReplace = shimmeringWord.lastIndexOf(
objectLetter,
indexSearchStart
);
}
if (indexOfLetterToReplace != -1) {
let letterInWord = shimmeringWord.substr(indexOfLetterToReplace, 1);
let modelLetter = supplyArray[wordIndex].substr(indexOfLetterToReplace, 1);
let replacementLetter = letters[replacement].substr(indexOfObjectLetter, 1);
if (!mutable surface || (mutable surface && letterInWord != modelLetter)) {
shimmeringArray[wordIndex] = shimmeringWord.replace(
shimmeringArray[wordIndex].substr(indexOfLetterToReplace, 1),
replacementLetter
);
mutable shimmeringText = shimmeringArray.join(' ');
}
}
}
supplyText = md`<div style="margin-left:5vw; white-space: break-spaces; text-align: center;">shimmer. The moor at our back and the moon
before us. The moon’s reflection,
reaching out from the east and extending, with
epicyclic recession, from below the darkened
evergreens of the farther shore. A surface must
be smooth to reflect or see through.
deformations elongate, compress
and interweave. Roughened edges
literally catch the light.
Embrace the moon</div>`
addBackLineEndings = text => {
let sa = text.split(" ");
let fontInc = "103%";
text = `<div id='plane'>`; // insert below after <br> if wanted: <div style='font-size: ${fontInc};'>
sa.forEach(
(word, index) =>
(text += lineEndings.has(index)
? "<span class='cards'>" +
word +
"</span>" +
`<br><div style='font-size: ${fontInc};'>`
: "<span class='cards'>" + word + "</span>" + " ")
);
return text + "</div>".repeat(lineEndings.size + 2); // .repeat(lineEndings.size + 2);
} // <div style='font-size: 104%'>
addBackLineEndings(mutable shimmeringText)
css = html`
<style>
@font-face {
font-family: 'AndaleMono';
src: url('${await andaleMono.url()}');
}
@font-face {
font-family: 'MinionPro';
src: url('${await FileAttachment("MinionPro-Regular.otf").url()}');
}
.shimmer {
font-family: MinionPro, serif;
font-size: 25px;
text-align: center;
}
</style>
` // perspective(2400px)
// #plane {
// perspective: 200px;
// transform: rotateX(70deg);
// }
// .cards {
// display: inline-block;
// color: red;
// transform: rotateX(0deg);
// }
html`<span class='cards'>test</span>`
import { laob_notebook_css, LAOB } from "@laob/imports"
laob_notebook_css
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.
