About the ASCII Animator

The original intent behind this tool was to generate plain text/ASCII art animations for web design projects. It works by tracing an image sequence into an array of strings that are rendered as <pre> elements and looped with Javascript. From that foundation, the ASCII Animator is being expanded to include more features and export formats.

Open-source project links

This project is open-source and is being developed in tandem with the trace-ascii-image npm module.

Roadmap

It's early days for the ASCII Animator and trace-ascii-image. Check out the roadmap of planned updates below.

  • v0.2
    • Refactor rendering and playback to use canvas instead of pre
    • Refactor existing pre-based frame interface for manual string edits alongside new canvas rendering
    • Add color/grayscale option
    • Add embeddable canvas + JS animation to export formats
    • Update embaddable pre + JS animation export format to be more intuitive
    • Improve comments and documentation
    • Expand import formats (video)
  • v0.3
    • Implement subpixel sampling
    • Expand/improve shading and edge detection algorithms
    • Expand export formats (video, GIF)
    • UI improvements
  • v0.4
    • Improve mobile functionality
    • Expand/improve manual ASCII string editing experience
    • Add state caching
  • v0.5
    • Refactor to Next.js 14 and the app router (or potentially Astro)
  • V?.?
    • Add AI image generation to input methods

Similar tools

There are a bunch of tools out there for generating ASCII art from images; if this site doesn't quite fit your needs, you may find luck with one of these:

Contact

Reach out at

[dev@bradysheridan.com]

[bradysheridan.com][github.com/bradysheridan][@brsheridan]

to say hello!

Please consider buying me a cup of joe or shouting out the project if you've found this tool useful <3

Frames