Published
Edited
Oct 7, 2022
md`Project description: A rendering of the first chapter of my novel that simulates the experience of receiving a brain-to-brain telepathic correspondence.`
viewof qb = Button("Press", {reduce: async () => await displayImage("pathoscripture", 2)})
startAtParagraph = 1;
typewriter = async (script,sHtml) => {
let a = script.split("");
let h = sHtml.split("");
let type = "",
name = "";
for (let i = 0; i < a.length; i++) {
textToBeTyped.innerHTML += await Promises.delay(typeSeconds * 1000, a[i]);
// parse out special tags in paragraphs:
type = "";
name = "";
if (h[0] == "<") {
let endType = h.indexOf("-");
type = h.slice(1, endType).join("");
let endName = h.indexOf(">");
name = h.slice(endType + 1, endName).join("");
if (type == "au") {
playSound(name);
}
if (type == "im") {
await displayImage(name, displayImageFor);
}
h = h.slice(endName + 1)
}
else {
h = h.slice(1);
}
}
}
typeSeconds = .045
displayImageFor = 3.5
numberOfPs = pNodes.length
pNodes = Array.from(Pathoscript1.querySelectorAll('p'))
textToBeTyped = pathoReader.querySelector("#textToBeTyped")
css = html`<style>
button {
background-color: orange;
border: 2px solid #39FF14;
border-radius: 12px;
padding: 8px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 0px 16px;
cursor: pointer;
}
.container {
position: relative;
color: #39FF14;
background-color: black;
font: 2vw "Courier";
min-height: calc(100vw * .5625);
}
img {
position: absolute;
left: 0;
top; 0;
width: 100vw;
height: calc(100vw * .5625);
}
.typedText {
padding: 2vw;
}
.veil {
opacity: 0;
transition: opacity .5s ease-in-out;
}
.veil.drawn {
opacity: 1;
}
</style>`
import { Button } from "@observablehq/inputs"
RiTa = require("rita")
$ = require("jquery")
sandy = FileAttachment("sandy.mov").url()
splash = FileAttachment("Water Splashing Sound Effect (1).mov").url()
eeking = FileAttachment("Dolphin-Sound Effect.mp3").url()
squawking = FileAttachment("Red-crowned Parrot squawking.mp3").url()
nuclear = FileAttachment("Nuclear explosion sound effect.mp3").url()
beeping = FileAttachment("Car Lock Unlock Sound Effect HD360P.mp3").url()
bubbling = FileAttachment("Bubbling Water Sound Effect [HD DOWNLOAD].mp3").url()
humming = FileAttachment("Mysterion low ship humming - Sound Effect (HD).mp3").url()
barking = FileAttachment("Dog Barking - Sound Effect.mp3").url()
chimp = FileAttachment("Chimpanzee Screams (Boosted Bonobo) - Sound Effect for editing.mp3").url()
roar = FileAttachment("Lion Roar Sound Effect.mp3").url()
elephant = FileAttachment("Elephant-Sound Effects.mp3").url()
wolf = FileAttachment("Wolf howling at night sound effect.mp3").url()
scream = FileAttachment("Scream Sound effect (funny).mp3").url()
squish = FileAttachment("Wet Squish - Sound Effect.mp3").url()
wind = FileAttachment("Gust Of Wind Sound Effect.mp3").url()
fish = FileAttachment("All Fish Sounds (Minecraft) - Sound Effects for editing.mp3").url()
sigh = FileAttachment("Sigh Sound Effect.mp3").url()
whoosh = FileAttachment("Jet Fly By Whoosh Sound Effect.mp3").url()
panting = FileAttachment("Panting Male Sound Effect.mp3").url()
kiss = FileAttachment("Kiss Sound Effect.mp3").url()
boing = FileAttachment("Cartoon Boing 2 Sound Effect (download).mp3").url
sounds = ({"dramatic": dramatic,
"forest": forest,
"rubbing": rubbing,
"spikes": spikes,
"splash": splash,
"eeking": eeking,
"squawking": squawking,
"nuclear": nuclear,
"beeping": beeping,
"bubbling": bubbling,
"humming": humming,
"barking": barking,
"chimp": chimp,
"roar": roar,
"elephant": elephant,
"wolf": wolf,
"scream": scream,
"squish": squish,
"wind": wind,
"fish": fish,
"sigh": sigh,
"whoosh": whoosh,
"panting": panting,
"kiss": kiss,
"boing": boing
})
displayImage = async (imageName, seconds) => {
console.log(`@displayImage(${imageName})`);
$("#readerImg").attr("src", images[imageName]);
$("#readerImg").show();
if (seconds !== undefined) {
await Promises.delay(seconds * 1000).then(() => hideImage());
}
}
hideImage = () => {
$("#readerImg").hide();
$("#readerImg").attr("src", "");
}
pathoscripture = FileAttachment("MOSHED-2021-3-28-21-48-13 (1) (1).gif").url()
arcology = FileAttachment("MOSHED-2021-4-5-1-50-38@1.gif").url()
mars = FileAttachment("elon-musk-mars-city-cost-10-trillion-1200x630-1 (1).jpg").url()
parrot = FileAttachment("MOSHED-2021-3-28-21-54-47 (1) (1).gif").url()
tailwalk = FileAttachment("MOSHED-2021-3-28-21-45-35 (1) (1).gif").url()
playhouse = FileAttachment("MOSHED-2021-3-28-21-42-16 (1) (1).gif").url()
desert = FileAttachment("MOSHED-2021-3-28-21-39-50 (1).gif").url()
zoo = FileAttachment("MOSHED-2021-3-28-21-37-30 (1).gif").url()
canopy = FileAttachment("MOSHED-2021-3-28-21-33-9 (1).jpg").url()
tundra = FileAttachment("MOSHED-2021-3-28-21-26-5 (1).gif").url()
beetles = FileAttachment("MOSHED-2021-3-28-21-27-50 (1).gif").url()
scrub = FileAttachment("MOSHED-2021-3-28-21-19-16@1.jpg").url()
dolphin = FileAttachment("MOSHED-2021-3-28-21-17-54 (1).gif").url()
hovercraft = FileAttachment("MOSHED-2021-3-28-21-22-29 (1).gif").url()
building = FileAttachment("MOSHED-2021-3-28-21-4-52 (1).jpg").url()
claw = FileAttachment("IMG_2928 (1) (1).gif").url()
wooden = FileAttachment("IMG_2939 (1).gif").url()
chest = FileAttachment("MOSHED-2021-4-17-19-3-38 (1).gif").url()
map = FileAttachment("MOSHED-2021-4-17-19-30-30 (1).gif").url()
ghost = FileAttachment("IMG_2930 (1).gif").url()
catfish = FileAttachment("IMG_2932 (1).gif").url()
feral = FileAttachment("IMG_2926 (1).JPG").url()
sofa = FileAttachment("MOSHED-2021-4-19-18-47-35.gif").url()
images = ({
"pathoscripture": pathoscripture,
"arcology": arcology,
"mars": mars,
"parrot": parrot,
"tailwalk": tailwalk,
"playhouse": playhouse,
"desert": desert,
"zoo": zoo,
"canopy": canopy,
"tundra": tundra,
"beetles": beetles,
"scrub": scrub,
"dolphin": dolphin,
"hovercraft": hovercraft,
"building": building,
"wooden": wooden,
"claw": claw,
"chest": chest,
"map": map,
"ghost": ghost,
"catfish": catfish,
"feral": feral,
"sofa": sofa
})
html`<figure>
<figcaption>Forest Sounds</figcaption>
<audio controls src="${forest}">
</audio>
</figure>
<figure>
<figcaption>Squeezing</figcaption>
<audio controls src="${rubbing}">
</audio>
</figure>
dramatic opening sound: https://www.youtube.com/watch?v=aNkOmR_3D2I
action potential spikes: https://www.youtube.com/watch?v=Qz40mdaDYTU
splash: https://www.youtube.com/watch?v=evUExTz5xso<br>
squawking: https://www.youtube.com/watch?v=A-Tst2R3np8<br>
dolphin eeking: https://www.youtube.com/watch?v=MGSTRJmN2VQ
nuclear explosion: https://www.youtube.com/watch?v=vxNnUU3eRD0
humming: https://www.youtube.com/watch?v=jmMUwii2tec
bubbling: https://www.youtube.com/watch?v=h8x8K0HE_cU
barking: https://www.youtube.com/watch?v=aReRSVpg298
screaming: https://www.youtube.com/watch?v=o_5uZuRDglA
roaring: https://www.youtube.com/watch?v=FAglo3Ohpes
howling: https://www.youtube.com/watch?v=8_8Pk7pwNUI
chimp screaming: https://www.youtube.com/watch?v=Stpl-99JCTc
elephant sounds: https://www.youtube.com/watch?v=t-4bIA7Uck0
car lock/unlock: https://www.youtube.com/watch?v=32Ndwh2i_2c
squirming: https://www.youtube.com/watch?v=9QfumG-1Ryk
wind: https://www.youtube.com/watch?v=H9yJsRJ9bd0
fish flopping: https://www.youtube.com/watch?v=iRKbxIUTsRY
sighing: https://www.youtube.com/watch?v=c7YPWfwKr88
whooshing: https://www.youtube.com/watch?v=BOzo7OZIpZE`
md`---
### Pseudocode:
<pre>IntroText scrolls across page, horizontally, line by line, green font on black background. A low-frequency hum
is in the background.
When IntroText finishes scrolling, "I understand" checkbox displays.
Viewer must click checkbox next to “I understand” to reveal “Continue” button.
If viewer clicks continue, IntroText disappears and Pathoscript1 begins scrolling across page.
Pathoscript1 title text runs across the page.
Title text wipes away.
"Dear Brady" appears one word at a time, then fades away.
“Accept Pathoscript? Yes/No” appears.
If No, window closes. If Yes, “Accept” text disappears.
“PRESS SPACEBAR TO PAUSE. PRESS ENTER TO SKIP TO NEXT PARAGRAPH. PRESS BACKSPACE TO RETURN TO PREVIOUS PARGRAPH.
PRESS LEFT ARROW TO SLOW DOWN, PRESS RIGHT ARROW TO SPEED UP.” blinks on screen five times for five seconds, then
disappears. (Viewer can retrieve this message when pausing with spacebar, as it will appear on the bottom of
the screen.)
Zoo noises start up, then “I can’t wait to tell you...” begins scrolling across the page at a pace of 250 words per
minute (this can be slowed to 100 words per minute or sped up to 400 words per minute at intervals of +/- 50 wpm
using the arrow keys).
During or after every paragraph, a new sound effect (and, sometimes, background image) or two will be
activated.
Text pauses for two seconds after each paragraph before continuing. Paragraphs of two lines or fewer
(e.g.
dialogue) will be displayed together with the previous paragraph before the pause.
Text of preceding paragraph wipes away as the text of the next paragraph begins to scroll. By the time the
paragraph has finished scrolling, it should be the only text on the screen. Pressing enter will stop paragraph
mid-scroll and jump immediately to next paragraph.
List of sound effects and images with associated cues (links to be provided later):
dolphin shooting out of water ("shooting") image: dolphin/Varuna
fin flapping ("flapping")
mist, jungle noises ("tropical") image: rainforest canopy
squawking ("parrot") image: African grey parrot
bomb detonating ("target") image: layout of San Diego Zoo ("Institute")
car alarm ("emitting")
humming e.g. elevator ("humming") image: San Diego zoo elephant exhibit ("playhouse")
images: rainforest canopy ("south"), scrub ("east"), tundra ("west"), desert ("immediate"), windowless white building ("white")
bubbling ("churning")
balloon squeaking to imitate dolphin skin rubbing ("squeezing")
image: dolphin tail-walking ("tail")
barking, screeching, roaring, and other inhuman vocalizations ("cacophony")
two beeps ("two")
barking ("barking")
worms squirming or beetles scuttling ("squirming") image: beetles
dolphin eeking and clicking, barking ("shrieking")
wind ("wind")
fish flopping ("catfish")
relaxed sighing ("congenial")
whooshing ("tomorrow") image: shuttle/hovercraft
</pre>`
md`<h1>Troubleshooting/things left to do</h1>
creating links for images: I want certain words to trigger mini-windows that hover over the text as it's being read
creating continuous audio loops in the background
breaking up paragraphs so that a. there's at least one image every paragraph and b. audio doesn't need to be started or cut off mid-paragraph
finding a few more images and inputting them into photomosh.com, matching them to specific words/phrases
recoding the font for the words that have links
maybe finding a couple more audio clips`
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.
