What is Asciify?

Asciify is a small library for converting images, videos, and 3D renders into rasterized ASCII art.

• Demos 🙌✨
  • Three.js Spiral Shader
  • Bouncing Ball Animation
  • Image Upload
• API Documentation
• Source Code

Why use Asciify?

🏃‍♀️ Fast

Asciify rasterizes directly to a canvas element, so it's much faster than other libraries that use the DOM to render text nodes. This comes at the cost of an actual textual representation, but if you're looking for a fast way to convert 3D animations to ASCII art, Asciify is a perfect fit.

🔍 Small

Weighing in at less than 7kb when minified and gzipped, Asciify is small enough to be added to your project without worrying about bloat. And Asciify has zero dependencies, so it's easy to integrate with your existing codebase.

🤸‍♀️ Flexible

Asciify can rasterize images, videos, and 3D scenes. Anything that can be rendered to a canvas can be converted to ASCII art. Asciify also supports custom fonts and character sets, so you can use it to create text art for any purpose!

Asciify is also written in TypeScript and includes type definitions with full documentation.

Installation

NPM

yarn add @sister.software/asciify
# or
npm install --save @sister.software/asciify

Deno

import { Asciify } from 'https://deno.land/x/asciify/mod.ts'

Usage

import { Asciify, readFromThreeJS } from '@sister.software/asciify'

// Create an Asciify instance and attach it to a canvas...
const canvas = document.createElement('canvas')
const asciify = new Asciify(canvas)

const renderer = new THREE.WebGLRenderer({
  powerPreference: 'high-performance',
  precision: 'lowp',
})

const rendererContext = renderer.getContext()

asciify.setSize(window.innerWidth, window.innerHeight)
// Set the size of the 3D renderer so that each pixel of ASCII art
// corresponds to a single pixel in the 3D scene...
renderer.setSize(rasterizer.columnCount, rasterizer.rowCount)

// Render a 3D scene...
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
renderer.render(scene, camera)

// Rasterize the scene into ASCII art!
asciify.rasterizeWebGLRenderer(renderer, rendererContext)

Check out our examples for more info on how Asciify can be used!

Alternatives

• Three.js's ASCII Effect - A Three.js effect that converts a 3D scene into ASCII art. Significantly slower than Asciify, but more flexible if you're already using Three.js and need text output.
• JSASCII - A JavaScript library for converting images into text based ASCII art. Slow, but has a lot of flexibility.

License

Asciify is licensed under the MIT License. If you use Asciify in your project, let us know at @SisterSoftware! We would love to see what you're working on.