Published
Edited
Apr 27, 2021
2 forks
md`----
## O K O K O K O K O
## K O K O K O K O K
## O K O K O K O K O
## K O K O K O K O K
## O K O K O K O K O
## K O K O K O K O K
## O K O K O K O K O
## K O K O K O K O K
## O K O K O K O K O
`
md`Then the attempt will be to flicker between *O K O* and *E Y E.* The letter **O** flips with **E** and **K** with **Y** at "random" rates. This is a poem that translates itself.
**OK NOT RANDOM RATES!** To get a timing on the flicker, I will make a recording of my face and then say "blink" every time I blink. **Update this is up on REDUCT under "blink"....now to get the timings over to here...** I will then put this recording into **reduct** and get the time stamps on each word. We can use that time stamp on a loop and have the letters click one at a time. at random or maybe two at a time (we can try and see what works!) until the entire *O K O* turns into *E Y E* and then we can click backwards and have it go back into *O K O*`
(eyopulse,
rs`----
## (O|E) (K|Y) (O|E) (K|Y) (O|E)
## (K|Y) (O|E) (K|Y) (O|E) (K|Y)
## (O|E) (K|Y) (O|E) (K|Y) (O|E)
`)
seconds = .5
eyopulse = pulse(seconds * 1000)
gridSize = 9
inflectedOko = true;
async function laob_blink(blinkLang) {
let pauseIndex = 0;
while (true) { // for (let i = 0; i < 10; i++) {
blinkLang = blinkLang == "po" ? "en" : "po";
let hBlinks = shuffle(horizEyes());
let vBlinks = shuffle(vertiEyes());
while ((hBlinks.length + vBlinks.length) > 0) {
let pause = pauses[pauseIndex] * 1000;
pauseIndex = ++pauseIndex >= pauses.length ? 0 : pauseIndex;
if (heads()) { // horizontal //
if (hBlinks.length > 0) await hBlink(hBlinks.pop(), pause, blinkLang);
}
else { // vertical
if (vBlinks.length > 0) await vBlink(vBlinks.pop(), pause, blinkLang);
}
}
}
return "Done.";
}
hBlink = (gi,pause,blinkLang) => {
let color = "";
if (!eyeClosed(gi,blinkLang)) return;
// let p = new RegExp(langs[blinkLang].pattern);
// if (p.test(textOf(gi)) && p.test(textOf(gi + 1)) && p.test(textOf(gi+2))) return;
return Promises.delay(pause).then(() => {
for (let i = 0; i < 3; i++) {
let letter = textOf(gi+i);
color = blinkLang == "en" ? color = "black" : "red";
let newLetter = swap(letter, blinkLang);
if (inflectedOko && i == 2 && blinkLang == "po") {
newLetter = ["O","A","U"][randIntBetween(0,3)];
}
setHtmlOf(gi+i,`<b style='color: ${color};'>` + newLetter + "</b>");
}
});
}
eyeClosed = (gi, blinkLang, factor = 1) => {
let p = new RegExp(langs[blinkLang].pattern);
let result = true;
for (let i = 0; i < (3 * factor); i = i + factor) {
if (p.test(textOf(gi + i))) {
result = false;
break;
}
}
return result;
}
vBlink = (gi,pause, blinkLang) => {
let color = "";
if (!eyeClosed(gi,blinkLang, gridSize)) return;
// let p = new RegExp(langs[blinkLang].pattern);
// if (p.test(textOf(gi)) && p.test(textOf(gi + gridSize)) && p.test(textOf(gi+(2 * gridSize)))) return;
return Promises.delay(pause).then(() => {
for (let i = 0; i <= (2 * gridSize); i += gridSize) {
let letter = textOf(gi+i);
color = blinkLang == "en" ? color = "black" : "red";
let newLetter = swap(letter, blinkLang);
if (inflectedOko && (i == (2 * gridSize)) && blinkLang == "po") {
newLetter = ["O","A","U"][randIntBetween(0,3)];
}
setHtmlOf(gi+i,`<b style='color: ${color};'>` + newLetter + "</b>");
}
});
}
langs = ({
en: { letter1: "E", pattern: "[EY]" },
po: { letter1: "O", pattern: "[OKUA]" }
})
textOf = (gi) => laob_display.children[gi].innerText
setHtmlOf = (gi, value) => laob_display.children[gi].innerHTML = value;
okoye = html`<div style="font: bold 5vw/1.4 Didot">EY<span style="color: red">OKO</span></div>`
okoye.innerText
{ let i = 0;
while (true) {
await Promises.tick(3000).then(() => {okoye.innerHTML = (okoye.innerText == "EYEKO") ? `EY<span style="color: red">OKO</span>` : `EYE<span style="color: red">KO</span>`; return "working"});
}
}
async function laob_unshuffledBlink(blinkLang) {
let pauseIndex = 0;
while (true) { // for (let i = 0; i < 10; i++) {
blinkLang = blinkLang == "po" ? "en" : "po";
let hBlinks = horizEyes().slice(0);
let vBlinks = vertiEyes().slice(0);
while ((hBlinks.length + vBlinks.length) >= 1) {
let pause = pauses[pauseIndex] * 1000;
pauseIndex = ++pauseIndex >= pauses.length ? 0 : pauseIndex;
if (heads() && hBlinks.length >= 1) { // horizontal //
let eye = Math.floor(hBlinks.length/2);
let gi = hBlinks.splice(eye,1);
gi = gi[0];
// console.log(`h: ${gi} ${hBlinks}`);
if (hBlinks.length >= 0) await hBlink(gi, pause, blinkLang); // shift()
}
else if (vBlinks.length >= 1) { // vertical
let eye = Math.floor(vBlinks.length/2);
let gi = vBlinks.splice(eye,1);
gi = gi[0];
// console.log(`v: ${gi} ${vBlinks}`);
if (vBlinks.length >= 0) await vBlink(gi, pause, blinkLang); // pop()
}
}
}
return "Done.";
}
css = html`
<style>
h2 {
font-family: "Courier New";
}
.display {
white-space: break-spaces;
font-family: "Courier New";
font-size: 5vw;
}
.grid {
display: grid;
color: red;
font-family: Didot;
font-size: 5vw;
font-weight: bold;
line-height: 1em;
grid-template-columns: 1em 1em 1em 1em 1em 1em 1em 1em 1em;
}
.gridItem {
overflow: hidden:
height: 1em;
transition: height 1s linear;
}
.gridItem.squish {
height: 1px;
}
</style>
`
display = // making this 'display' in html cause it is easier to control
// style as needed with css
html`
<hr>
<div class="display">O K O K O
O K O K O
O K O K O
O K O K O</div>
<hr>`
blink = {
await Promises.delay(3000);
let eye = 0; // this is a joke, it will be the i(ndex) of the letter we blink
while (true) {
let childNum = 1; // the number of display's children whose text we want to change
// this is blinking after something random between 2 and 10 seconds
await Promises.delay(randIntBetween(500,2000)).then(() => {
let text = display.children[childNum].innerText;
let eyeLetter = text[eye];
if (/[EYOK]/.test(eyeLetter)) {
let blinkLetter = swap(eyeLetter);
display.children[childNum].innerText = text.substr(0,eye) + blinkLetter + text.substr(eye + 1);
}
eye++
if (eye >= text.length) eye = 0;
});
}
}
// just to show what this evaluates to:
swap(display.innerText)
swap = function(eyeText, lang) {
// following line is a quick hack for grid-based blink piece
// would not work for eyeText longer than one letter
if (lang !== undefined && new RegExp(langs[lang].pattern).test(eyeText)) return eyeText;
let oldText = Array.from(eyeText)
let newText = [];
for (let i = 0; i < oldText.length; i++) {
// could be done more 'elegantly'
switch (oldText[i]) {
case "K":
newText.push("Y");
break;
case "E":
newText.push("O");
break;
case "Y":
newText.push("K");
break;
default:
newText.push("E"); // for O, A or U
}
}
return newText.join("");
}
reductJson = ({"segments": [{"speaker_id": "Speaker 1", "speaker_name": "Speaker 1", "wdlist": [{"start": 6.35, "end": 6.79, "word": "blink "}, {"start": 7.989999999999999, "end": 8.309999999999999, "word": "blink, "}, {"start": 9.41, "end": 9.86, "word": "blink "}, {"start": 11.309999999999999, "end": 11.739999999999998, "word": "blink, "}, {"start": 14.43, "end": 14.79, "word": "blink, "}, {"start": 14.84, "end": 15.28, "word": "blink, "}, {"start": 15.58, "end": 16.009999999999998, "word": "blink, "}, {"start": 16.35, "end": 16.759999999999998, "word": "blink, "}, {"start": 16.93, "end": 17.4, "word": "blink, "}, {"start": 17.68, "end": 18.11, "word": "blink, "}, {"start": 20.119999999999997, "end": 20.54, "word": "blink, "}, {"start": 21.79, "end": 22.229999999999997, "word": "blink, "}, {"start": 23.259999999999998, "end": 23.68, "word": "blink, "}, {"start": 24.719999, "end": 25.119999, "word": "blink, "}, {"start": 25.28, "end": 25.659999999999997, "word": "blink, "}, {"start": 26.47, "end": 26.810000000000002, "word": "blink, "}, {"start": 28.25, "end": 28.629999999999995, "word": "blink, "}, {"start": 31.869999999999997, "end": 32.3, "word": "blink, "}, {"start": 32.46, "end": 32.76, "word": "blink, "}, {"start": 33.11, "end": 33.47, "word": "blink, "}, {"start": 33.47, "end": 33.519999999999996, "word": "blink, "}, {"start": 33.519999999999996, "end": 33.57, "word": "blink, ", "unaligned": true}, {"start": 33.57, "end": 33.62, "word": "blink, ", "unaligned": true}, {"start": 33.62, "end": 33.67, "word": "blink. ", "unaligned": true}], "start": 6.35, "end": 33.67, "tx_id": "1619107914032635331", "media_id": "8816b49c1341"}]})
makeAlignedWordedFrom = function(reductJson, secondsAtEndOfText = 3) {
let a = [];
Object.keys(reductJson).forEach(segments => {
reductJson[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);
word.unit = "u" + index;
});
return a;
}
pauses = makeBlinkPausesFrom(makeAlignedWordedFrom(reductJson))
import { pulse, rs, heads, shuffle } from "@dla/imports"
import { randIntBetween } from "@dla/functions"
import { Button } from "@observablehq/inputs"
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.
