Generates ASCII art, animations and video from uploaded files using HTML & Javascript
This code allows for ascii art and ascii animations to be generated on the fly in the browser with decent performance, high detail, and colour accuracy.
There are two variations of this project:
-
Fully fledged easy to use accurate website that generates ascii art using an image/video file or animations using a horizontal/vertical frame by frame spritesheet.
-
Basic use version intended for embeding on any website. (Video conversion comming soon)
- Demo: https://media.nyeku.xyz epilepsy warning.
The Option 1 HTML file requires no setup. Just download the file and open it up. Adapting it to fit your needs is up to you.
This guide will focus on setting up Option 2
-
Within you html file embed this code:
<html> <head> <style> body{background-color:black;} /* optional */ #ascii {font-size: 3px; line-height: 70%;} #sprite { display: none; } #container { position: relative; z-index: 1;} </style> </head> <img src="./yourImage.png" id="sprite" /> <div id="container"> <pre id="ascii" style="color: #bebebe;"></pre> </div> <script src="./ascii.js"></script> </html>
-
Move the
ascii.jsfile into your site root -
Generate a sprite sheet, this can be done from a gif on an online converter such as https://ezgif.com/gif-to-sprite . I suggest keeping the resolution something such as 50x50, 100x100, etc per tile and keep it set to
stack horizontal. -
Once you have your sprite move it into your web root and change the html img tag acordingly.
-
Open up ascii.js and look for:
const frames = 8;
Edit the fps to fit the fps of your sprite sheet
In my case ill set it to 8
Save the file and proceed to open index.html -
You should now see an ascii animation based on your spritesheet.
It is up to you on how you want to implement this within your sites such as https://media.nyeku.xyz/ . -
Common Errors:
yourImage.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
These errors usually occur when you're not running these files on a web server.
- You have now setup an ascii animation.
- If you wish to have just a static ascii image then just set
const frames = ;to1and use a normal image.
Note
The ascii image quality is dependant on source image quality. To resize you can put the pre tag in a div/container.
