mJORNO ('-' * 6)
A Pen by Captain Anonymous on CodePen.
<h2>ASCII Animation Editor/Viewer</h2> | |
<table style="margin-left:auto;margin-right:auto"> | |
<tr><td style="text-align:center"> | |
Enter the frames below, separated by "<code>=====</code>".</td> | |
<td style="text-align:center"> | |
<input type="button" value="Play the Animation" onclick="PlayAnimation();"> | |
</tr> | |
<tr><td><textarea id="frameArea" rows=25 cols=55 style="font-size:8pt"> | |
o | |
/#\ | |
_|_ | |
===== | |
\o/ | |
# | |
_/ \_ </textarea></td> | |
<td><textarea id="displayArea" rows=25 cols=55 style="font-size:8pt"> | |
</textarea></td> | |
</tr> | |
</table> | |
mJORNO ('-' * 6)
A Pen by Captain Anonymous on CodePen.
function PlayAnimation() | |
// Assumes: frameArea contains the text of an ASCII animation | |
// Results: displays each frame of the animation in succession (0.25 sec. apart) | |
{ | |
var frameStr; | |
frameStr = document.getElementById('frameArea').value; | |
if (frameStr.indexOf('\r\n') != -1) { // SOME BROWSERS/PLATFORMS | |
frameSeq = frameStr.split('=====\r\n'); // USE \r\n FOR LINE ENDINGS, | |
} // OTHERS USE \n | |
else { // SPLIT INTO FRAMES AND | |
frameSeq = frameStr.split('=====\n'); // STORE IN A GLOBAL ARRAY | |
} | |
currentFrame = 0; // STORE THE CURRENT FRAME # | |
setInterval('ShowNextFrame()', 750); | |
} | |
function ShowNextFrame() | |
// Assumes: frameSeq is the (global) array of animation frames, and | |
// currentFrame is the (global) index of the current frame | |
// Results: displays the current frame in displayArea & increments the index | |
{ | |
document.getElementById('displayArea').value = frameSeq[currentFrame]; | |
currentFrame = (currentFrame + 1) % frameSeq.length; | |
} |