256 Kilobytes

ASCII art is an iconic piece of Internet history. If you don't love ASCII art, PM me so that I can permaban you. But, did you know that you can animate ASCII art relatively easily using JavaScript? This tutorial will show you how.

Using JavaScript to Interact with ASCII Art

While there are various different approaches to animating ASCII art, the general process is along the lines of these three steps:

  1. Put ASCII art into a <div> or other container tag
  2. Give the container an ID (or similar)
  3. Use JavaScript to identify and interact with the container

Example: Colorization of Nyan Cat ASCII Art

An example of this process being used can be seen with this Nyan Cat ASCII art, which is given a random color every 100 milliseconds:

.......................................
..........====================.........
........=*............=.......*=.......
........#..=....=..............#.......
........#............=#==..=...#.===...
.=====..#......*....*#..*=.....#**.##..
.##=*##=#...=.......##....*****....##..
..*##=*##........*.##*.............*##.
....*####.*....=...##...=$....=.=$..##.
.......*#....=.....##....=...=..=...##.
.......=#=...........*=..********..=*..
......#**#########****############*....
......####*..###*......*###..*##*......
.......................................

Source Code

As can be seen in the source code, the ASCII art is in a <pre> tag (the container) with an ID and then JavaScript is used to interact with the container by applying random colors.

<pre id="nyan_cat">.......................................
..........====================.........
........=*............=.......*=.......
........#..=....=..............#.......
........#............=#==..=...#.===...
.=====..#......*....*#..*=.....#**.##..
.##=*##=#...=.......##....*****....##..
..*##=*##........*.##*.............*##.
....*####.*....=...##...=$....=.=$..##.
.......*#....=.....##....=...=..=...##.
.......=#=...........*=..********..=*..
......#**#########****############*....
......####*..###*......*###..*##*......
.......................................</pre>

<script>
// Ever 100 milliseconds, apply a random color
setInterval(function(){ 
  var color = Math.floor(Math.random()*16777215).toString(16);
  document.getElementById("nyan_cat").style.color = "#" + color;
}, 100);
</script>

This process could be refined further by, for example, using this technique for selecting complimentary color pallets or potentially HSL colors to allow smooth transitions between different colors, saturations, and so on.

Using Animation Frames

Using the basic process described above, it is possible to add additional complexity for more interesting animations. One way to do this is to have a parent wrapper element with multiple children that act as frames.

Example: Sleeping Person ASCII Animation

This technique can be seen below in this ASCII animation of a sleeping person:

(-.-)
(-.-) Z
(-.-) Zz
(-.-) Zzz
(-.-) Zzz.
(-.-) Zzz..
(-.-) Zzz...

Source Code

<div id="sleeping_animation">
<pre class="active"><code>(-.-)</code></pre>
<pre               ><code>(-.-) Z</code></pre>
<pre               ><code>(-.-) Zz</code></pre>
<pre               ><code>(-.-) Zzz</code></pre>
<pre               ><code>(-.-) Zzz.</code></pre>
<pre               ><code>(-.-) Zzz..</code></pre>
<pre               ><code>(-.-) Zzz...</code></pre>
</div>

<style>
#sleeping_animation pre:not(.active) { display:none; }
</style>

<script>
// Ever 100 milliseconds, move to the next frame
setInterval(function(){ 
  // Get the current active frame
  var frame = document.querySelector("#sleeping_animation .active");
  var next  = document.querySelector ("#sleeping_animation .active + pre");
  
  // If last, loop around
  if (!next)
    next = document.querySelector("#sleeping_animation pre");
  
  // Remove the active class from the current frame and add it to the next frame  
  next.classList.add("active");  
  frame.classList.remove("active");
}, 100);
</script>

Speech Bubbles and Text Animations

You can also add elements within elements to animate specific parts of frames without including the full ASCII drawing repeatedly. For example, you can animate this high quality ASCII art from, like, 2008.

--_____.._,,,,ll|||||||||||||||||||||||||||||||||||||||||||||||ll,_
___.._,lll|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||l,_. ,
__..l|!'',l|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||ll!
__l||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||ll
_..l|||||||||||||||||||||||||||||||||||||||||||||||||lllll!!!!!!!!!!!!!!!!!ll|||||||||||||||||l
.,l|||||||||||||||||||||||||||||||||||||ll!!!!!^''''_ . . . . . . . . ._'^||||||||||||||l
l!'||||||||||||||||||||||||||||^''__ . . . . . . . . . . . . . . . . .'l||||||||||||ll
||||||||||||||||||||||||||||'__. . . . . . . . . . . . . . . . . . . .'l|||||||||l,_
||||||||||||||||||||||||||||l. . . . . . . . . . . . . . . . . . . . . . . .'!||||||||||||
|||||||||||||||||||||||||||||l,. . . . . . . . . . . . . . . . . . . . . . . .!|||||||||!'
!||||||||||||||||||||||||||||||l, . . . . . . . . . . . . . . . . . ._,,lll||||l, !|||||||l'
.'!|||||||||||||||||||||||||||!!' . . . .,lll|||||ll!!!!!!!llll_ . . . . llll!'_ . '!l'||||||!
...'!||||||||||||||||||||||!' . . . .l||!!'' ,-~'~-_. . ., . .,'_-'_,__`-, .'||'
.._,l|||!''''^!l|||||||||| . . . . .' . .''('_') . `''. . , . \ \_'-',-' . '|l
..'!|||| ,' . '\ .'!||||||| . . . . . . `~ _ .~*'`. . . , . \ . . . . . . |
_,l||||||l,', . .\ . '!ll!. . . . . . . . . . . . . . . . ., . .\, . . . . . | 
l|!'!|||||||l, . . '( . . . . . . . . . . . . . . . . ._- . . . . \_ . . . . |  
.l|||||||||||||, . .`l . . . . . . . . . . . . . . .,^' ._,_ . . . ,) . . . .|
..'||||||||||||||l,. . . . . . . . . . . . . . ., ' .'~-~_''~-^' ' , . . '|_'~-,_
..|||||||||||||||||||||lll, . . . . . . . . . ., ' . . . . . . _ . . . . .' . . |;:;:;:;:_''^~--,,,________,-~-,
,-';:'!!|||||||||||||||||' . . . . . . . . .,' . ,,-~**~--~*'',l' ., . .,/:;:;:;:;:;:;:;:;:;:;:;:'-,__......_.f . . . |__________.._,,_
;:;:;:;:''!!!||||||||!''\ . . . . . . . . . . .!'_''~~--~^\_'| . . . /:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;_'|___| . . . .|_________,,-~'_ . ,'
:;:;:;:;:;:;:;:;:;|: :'\, . . . . . .' . . . '^=,,,_____,-'/, . . ./;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;_^-,_..| . . .f_______,-^'_ . . _,-^'
;:;:;:;:;:;:;:;:;:'l: : :`-, . . . . . ', . . . . .- ,___,, -' . . /'l:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;|: : : `-,,/ . . .|____..._,-* . . . _,-^'__,,-~^~,
:;:;:;:;:;:;:;:;:;:'\; : : :`,-_. . . . ', . . . . . . . . . . . ./') );:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;|': : : : /' . . . |___._-~'_. . . .,-~-,-~^'_. . .__,-'
;:;:;:;:;:;:;:;:;:;:;'-,: :/ :_,__'-,_ . . . . , . . . . . . . /,-',-';:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;|: : : ,/ . . . . . _'**'_ . . . . .,~' . . / . __,,-~'_
:;:;:;:;:;:;:;:;:;:;:;:;'-,\: '-': : :\_'~-,,_ .' , . . . ._,-'/'/:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:,': : :/ . . . . . . ./. . ' . . . .,-'. . ._,-',~'_
;:;:;:;:;:;:;:;:;:;:;:;:;:'-,\: : : : :'\_ . . ._'~---~': //;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:,': : :/ . . . . . ., '.,^''*, . . ., . . .,-'_
:;:;:;:;:;:;:;:;:;:;:;:;:;:;:'-\ : : : : :_'~, . ,/ : : : : :/;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:,': : 'f . . . . . . . .| . . \-~' . . ,-'
\:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;'\: : : : : : : _/' : : : : : /;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:,': : : | . . . . . . . . 'l . . .'-, .,-'
. \;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:'\: : : : : : :/: : : : : :/:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:/: : :,-'| . . . ., - ~ - ,\_ . . . ')

Source Code

<pre style="font-family:sans-serif;" id="jerry" style="font-size:70%;">
--_____.._,,,,ll|||||||||||||||||||||||||||||||||||||||||||||||ll,_
___.._,lll|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||l,_. ,
__..l|!'',l|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||ll!
__l||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||ll
_..l|||||||||||||||||||||||||||||||||||||||||||||||||lllll!!!!!!!!!!!!!!!!!ll|||||||||||||||||l
.,l|||||||||||||||||||||||||||||||||||||ll!!!!!^''''_ . . . . . . . . ._'^||||||||||||||l
l!'||||||||||||||||||||||||||||^''__ . . . . . . . . . . . . . . . . .'l||||||||||||ll
||||||||||||||||||||||||||||'__. . . . . . . . . . . . . . . . . . . .'l|||||||||l,_
||||||||||||||||||||||||||||l. . . . . . . . . . . . . . . . . . . . . . . .'!||||||||||||
|||||||||||||||||||||||||||||l,. . . . . . . . . . . . . . . . . . . . . . . .!|||||||||!'
!||||||||||||||||||||||||||||||l, . . . . . . . . . . . . . . . . . ._,,lll||||l, !|||||||l'
.'!|||||||||||||||||||||||||||!!' . . . .,lll|||||ll!!!!!!!llll_ . . . . llll!'_ . '!l'||||||!
...'!||||||||||||||||||||||!' . . . .l||!!'' ,-~'~-_. . ., . .,'_-'_,__`-, .'||'
.._,l|||!''''^!l|||||||||| . . . . .' . .''('_') . `''. . , . \ \_'-',-' . '|l
..'!|||| ,' . '\ .'!||||||| . . . . . . `~ _ .~*'`. . . , . \ . . . . . . |
_,l||||||l,', . .\ . '!ll!. . . . . . . . . . . . . . . . ., . .\, . . . . . | <span id="speech"></span>
l|!'!|||||||l, . . '( . . . . . . . . . . . . . . . . ._- . . . . \_ . . . . | 
.l|||||||||||||, . .`l . . . . . . . . . . . . . . .,^' ._,_ . . . ,) . . . .|
..'||||||||||||||l,. . . . . . . . . . . . . . ., ' .'~-~_''~-^' ' , . . '|_'~-,_
..|||||||||||||||||||||lll, . . . . . . . . . ., ' . . . . . . _ . . . . .' . . |;:;:;:;:_''^~--,,,________,-~-,
,-';:'!!|||||||||||||||||' . . . . . . . . .,' . ,,-~**~--~*'',l' ., . .,/:;:;:;:;:;:;:;:;:;:;:;:'-,__......_.f . . . |__________.._,,_
;:;:;:;:''!!!||||||||!''\ . . . . . . . . . . .!'_''~~--~^\_'| . . . /:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;_'|___| . . . .|_________,,-~'_ . ,'
:;:;:;:;:;:;:;:;:;|: :'\, . . . . . .' . . . '^=,,,_____,-'/, . . ./;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;_^-,_..| . . .f_______,-^'_ . . _,-^'
;:;:;:;:;:;:;:;:;:'l: : :`-, . . . . . ', . . . . .- ,___,, -' . . /'l:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;|: : : `-,,/ . . .|____..._,-* . . . _,-^'__,,-~^~,
:;:;:;:;:;:;:;:;:;:'\; : : :`,-_. . . . ', . . . . . . . . . . . ./') );:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;|': : : : /' . . . |___._-~'_. . . .,-~-,-~^'_. . .__,-'
;:;:;:;:;:;:;:;:;:;:;'-,: :/ :_,__'-,_ . . . . , . . . . . . . /,-',-';:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;|: : : ,/ . . . . . _'**'_ . . . . .,~' . . / . __,,-~'_
:;:;:;:;:;:;:;:;:;:;:;:;'-,\: '-': : :\_'~-,,_ .' , . . . ._,-'/'/:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:,': : :/ . . . . . . ./. . ' . . . .,-'. . ._,-',~'_
;:;:;:;:;:;:;:;:;:;:;:;:;:'-,\: : : : :'\_ . . ._'~---~': //;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:,': : :/ . . . . . ., '.,^''*, . . ., . . .,-'_
:;:;:;:;:;:;:;:;:;:;:;:;:;:;:'-\ : : : : :_'~, . ,/ : : : : :/;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:,': : 'f . . . . . . . .| . . \-~' . . ,-'
\:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;'\: : : : : : : _/' : : : : : /;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:,': : : | . . . . . . . . 'l . . .'-, .,-'
. \;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:'\: : : : : : :/: : : : : :/:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:/: : :,-'| . . . ., - ~ - ,\_ . . . ')
</pre>

<script>
var txt = 'What is the deal with airline food?          ';
var iii   = 0;
var speed = 50;

//function clear() { document.getElementById("speech").innerHTML = ""; }


setInterval(function(){ 
  //var delay = 10;
  
  if (iii < txt.length) {
    document.getElementById("speech").innerHTML += txt.charAt(iii++);
    //delay = speed;
  } else {
    document.getElementById("speech").innerHTML = "";
    iii = 0;
    //delay = speed*5;
  }
}, speed);
</script>

In Conclusion

Hell yeah.

Users Who Have Downloaded More RAM:
eeeeeeee (1 week ago)
Scuffed Dog (1 week ago)
🐏 ⨉ 2
Posted by August R. Garcia 1 week ago 🕓 Posted at 06 June, 2019 09:11 AM PDT

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
๐Ÿ—Ž 149 ๐Ÿ—จ 769 ๐Ÿ 211
Site Owner

Grahew Mattham

August Garcia is some guy who used to sell Viagra on the Internet. He made this website to LARP as a sysadmin while posting about garbage like user-agent spoofing, spintax, the only good keyboard, virtual assitants from Pakistan, links with the rel="nofollow" attributeproxiessin, the developer console, literally every link building method, and other junk.

Available at arg@256kilobytes.com, via Twitter, or arg.256kilobytes.com. Open to business inquiries based on availability.


Account created 6 months ago.
149 posts, 769 comments, and 211 RAMs.

Last active 1 day ago:
Commented in thread [Video] 8 Things You Didnโ€™t Know Were Keyword Research Tools

Profile Photo - Scuffed Dog Scuffed Dog Horse racing tipster Horseshoe Bay
๐Ÿ—Ž 0 ๐Ÿ—จ 43 ๐Ÿ 26
Quality User

Lmao that's genius. Can you please animate this one for me? Thanks.

               .            
            ___|_____       
           /   |    /|      
          /________/ |      
         |.........| |      
         |.........|{|   _  
         |.........{{{__/|  
         |.........{{____/  
         |.........{{{      
         |.........|{|      
         |.........| |      
         |.........| |      
         |.........| |      
         |.........| |      
         |.........| |      
         |         |        
                            
Users Who Have Downloaded More RAM:
eeeeeeee (1 week ago)
🐏 ⨉ 1
Posted by Scuffed Dog 1 week ago 🕓 Posted at 12 June, 2019 12:20 PM PDT
Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
๐Ÿ—Ž 149 ๐Ÿ—จ 769 ๐Ÿ 211
Site Owner
               .            
            ___|_____       
           /   |    /|      
          /________/ |      
         |.........| |      
         |.........|{|   _      
         |.........{{{__/|  
         |.........{{____/  
         |.........{{{      
         |.........|{|      
         |.........| |      
         |.........| |      
         |.........| |      
         |.........| |      
         |.........| |      
         |         |        
                            
Users Who Have Downloaded More RAM:
Hash Brown (5 days ago)
eeeeeeee (6 days ago)
Scuffed Dog (6 days ago)
🐏 ⨉ 3
Posted by August R. Garcia 6 days ago 🕓 Posted at 12 June, 2019 22:28 PM PDT

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.