I’ve got a txt file like this below:
.-/+ossooooooo+/:.
`:osydhyo++: :yyyyydN@ho:`
:sho:``. .+o``d@h./N@@@@@@@@s:
-s@dd- :--@s@@@@@@@@@@@@@@@@@Ny:
/dho`. ///N@yy::@@@@N+y@dNhd@N@@+`
/ho` `@@@/- `:::sdosNdd@@@o@@@N+
.h+ :o@@@@@@@@/:---:::::o@@@@@@@@@@-
/h. `+s@@@@@@@@@@@@@@@@@@@@dy@@@@Nd@@@@o
oy` :@@@@@@@@@@@@@@@@@@@@@@Nyyo@@@yNdsh@s
+h: -od@@@@@@@@@@@@@@@@@@@@@@@@N.y@@@@@:`+@s
-@`` y@@@@@@@@@@@@@@@@@@@@@@@@@@@N@-d@@N-``o@:
h/ y@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@h--.```.s@
.NN@y.` hh@@@@@@dhhhN@@@@@@@@@@@@@@@@@@@s````-N:
/dN@@@o` `yyyyyy syN@@@@@@@@@@@@@@@@h+`````so
o@@@@@@s// h@@@@@@@@@@@@@Nd+-``````oy
+N@@@@@@@No++ h@@@@@@@@@@@@@d:.```````ss
.N@@@@@@@@@@@` /+N@@@@@@@@@@@s`````````d:
dh@@@@@@@@N/` @@@@@@@@@@@@/````````:@
-@o@@@@@@@@- yh@@@@@@@@@@@N.ydy````.d/
oy:@@@@@NNs ./@@@@@@@@@N-.:@N:````sy
syh@@@@d` o@@@@@@@Nd+``y+`````oy
+hh@@@N- oh@@@@Nd/`````````.ys
-hhN@@` oN+++:-`````````/d:
+ddd. ..````````````:yo`
`+@d: ``````````/yo`
:yh/ `````````:sy/
`/ss+- ```````-+ss/`
./oss+:-` `-::::///++oyyso/.
`-:+oooyhhhhhyso+/-`
|
.-/+ossooooooo+/:.
`:osydhhs++/. ./hsyyh@@ho:`
:sdy:` .` .+o .@@y.o@@@@@@@@s:
-sNh@o` ::.@y@@@@@@@@@@@@@@@@Ny:
/dds-`` -//@Nyy+-N@@@N+h@@Nh@N@@+`
/ds. d@@s: `:::odssNd@@@hy@@N+
.ho` -:N@@@@@@@y:---::::/o@@@NN@@@@-
/d. :o@@@@@@@@@@@@@@@@@@@@@y@@@@N@@@@o
oh` d@@@@@@@@@@@@@@@@@@@@@@yho@@@y@hyNs
+h-` +o@@@@@@@@@@@@@@@@@@@@@@@@@-o@@@@@.:@s
-@`` `@@@@@@@@@@@@@@@@@@@@@@@@@@@N@:h@@d.`-@:
h/ ` .d@@@@@@@@@@@@@@@@@@@@@@@@@@@@@d--.```/@
.Ny@@+.` :h@@@@@@Nhhhd@@@@@@@@@@@@@@@@@@@o````@:
/hh@@@@+` -yyyyyo `yh@@@@@@@@@@@@@@@@h/````so
oh@@@@@@s// `@@@@@@@@@@@@@@@o-`````oy
+h@@@@@@@@@o++. `@@@@@@@@@@@@@N/.``````ss
.N@@@@@@@@@@@@+ `+s@@@@@@@@@@@d````````d:
doN@@@@@@@@@+- :@@@@@@@@@@@o```````:@
-@-@@@@@@@@@+ :h@@@@@@@@@@@@-s@s```.d/
oy d@@@@@@Nd `.d@@@@@@@@@/.:N@-```sy
sy+@@@@@d` `N@@@@@@@ds``s/````oy
+h+N@@@@- -yN@@@Ndo````````.ys
-hod@@h -@s++/-````````/d:
+hy@o `-```````````:yo`
`+h@+ ``````````/yo`
:yd+` `````````:sy/
`/ss+- ` ```````-+ss/`
./osyo:-` ``:::////++osyso/.
`-:+oooyhhhhhyso+/-`
|
.-/+osysoooooo+/:.
`:osyhdhy+++:` -sdyhh@@ho:`
:odd/` `. -oo [email protected]@@@@@@@s:
-sN@h@: -:`Ny@@@@@@@@@@@@@@@Ny:
/dNyo . .//h@yyo-d@@@Nod@@@hNN@+`
/@y: +@@d:` `-//+dyoNd@@Nyd@N+
.dy. `:y@@@@@@@@:---::::/o@@@@@@@@-
/d- `oy@@@@@@@@@@@@@@@@@@@NyN@@@@N@@o
oh. :@@@@@@@@@@@@@@@@@@@@@@yhoN@NhNy@s
+h`/ .oh@@@@@@@@@@@@@@@@@@@@@@@@/o@@@@o.hs
-@``` o@@@@@@@@@@@@@@@@@@@@@@@@@@N@/h@@s`.@:
ho `` odN@@@@@@@@@@@@@@@@@@@@@@@@@@@@--.``:@
.N/@@@:.` ohN@@@@@@hhh@@@@@@@@@@@@@@@@@@@/```d:
/h/@@@@@+. +yyyyy: /yd@@@@@@@@@@@@@@Ny:```so
oyd@@@@@@y//. +@@@@@@@@@@@@@@o-````oy
+hh@@@@@@@@@y++/ +@@@@@@@@@@@@@/.`````ss
.No@@@@@@@@@@@@d -+d@@@@@@@@@@@```````d:
d/y@@@@@@@@@@y: h@@@@@@@@@@y``````:@
-@`o@@@@@@@@@y shN@@@@@@@@@@:s@+``.d/
oy -@@@@@@@@N. ./@@@@@@@@@+.:Nd.``sy
sy.@@@@@@@` s@@@@@@@@y``s:```oy
+h-d@@@@@- s@@@@@ds```````.ys
-h/o@@@s `@h++/-```````/d:
+h+d@: `-``````````:yo`
`+ydy. ``````````/yo`
:sdo. `````````:sy/
`/ss+- ```````-+ss/`
./ooyo/-` `.:::///++ooyso/.
`-:+oooshhhhhyso+/-`
I wanted to first load it into my index.js file, and then splitting it using split("|"). I don’t know how to import it to my JS.
I want to display every frame of this (frames are seperated by ‘|’ pipe character) with a small delay between frames on screen. (I also don’t know exactly how to put delay between the frames. Please help me with that, too)
I tried loading the file using the XMLHttpRequest() approach, but I noticed that this has been deprecated. The code below is how I used this approach:
function readTextFile(file) {
let rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function () {
if (rawFile.readyState === 4) {
if (rawFile.status === 200 || rawFile.status == 0) {
let allText = rawFile.responseText;
allTextLines = allText.split("|");
}
}
};
rawFile.send(null);
return null;
}
readTextFile("earth-anim.txt");
I even tried loading the txt file using FileReader() like here:
let reader = new FileReader();
let data = ["earth.anim.txt"];
reader.onload = function () {
allTextLines = reader.result.split("|");
};
reader.readAsText(data);
But I get this error:
index.js:27 Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
at index.js:27:8
I also tried setTimeout() to put delay between the frames (with for loop), but it didn’t work well. I used this approach like this:
for (let index = 0; index < allTextLines.length; index++) {
if (index === allTextLines.length) {
index = 0;
} else {
setTimeout(() => {
preEl.textContent = allTextLines[index];
}, 1000);
}
}