Controls

Input

  • Image(s) - Upload a frame sequence (png, jpg, jpeg) to be animated. Video upload is still in development; you can use this tool to split your video into frames then upload the resulting image sequence.
  • Video - Upload a video (mp4, mov) that is split into a frame sequence based on the animation frame count setting.
  • Webcam mode - Stream your webcam's video feed into the ASCII Animator. Use the "Start recording" and "Take picture" buttons to save video frames or individual photos to the animation frame timeline.
  • Load saved session - Upload saved data from the "Save working session" button in the Output section. ASCII string frames are stored in the saved data but source images are not.

Filtering

  • Filter - Select a filter to apply to source images before tracing them into ASCII sketches. These filters are documented here.

Tracing

  • Character density - The desired number of characters per line (in other words, the desired image width).
  • Should trace edges? - If true, an edge detection algorithm is applied during tracing.
  • Edge character - If tracing edges, this is the character used.
  • Edge detection algorithm - The only algorithm currently implemented is the Sobel operator. Additional algorithms and parameter customizations are planned for v0.3.
  • Edge detection threshold - Pixels whose gradient magnitude surpasses this threshold are assigned the specified edge character. Gradient magnitude measures how much a pixel differs from the ones around it and results in a value between 1 and 355.
  • Shading ramp (dark to light) - The array of characters used when assigning source image pixels their text equivalents. This calculation is based on a pixel's perceived lightness and results in a value between 0 and 100. That value is then linearly remapped to the length of the shading ramp array and used to access the corresponding character. Shading algorithms and parameter customization will be expanded in v0.3.

Writing

  • Propagate changes to ASCII string - It's possible to manually edit characters in individual animation frames by clicking directly on the ASCII canvas and typing. You may want edits to apply to more frames than just the one you're editing. In this case, use this setting to propagate changes. Note that while editing a given frame, a small edit icon will appear next to the frame number; wait for this icon to disappear before switching to another frame to ensure your changes are saved.

Animation

  • Animation framerate - The framerate used while playing the animation preview and exporting the animation.

Output

  • Save working session - Export your working session, including all ASCII frames and settings. Source images are not included in save data.
  • Format - Select animation export format. Export format expansion is planned for v0.2.
    • embeddable animation (html/js) - Export code that can be embedded into another website. This consists of a frames.js file containing the animation's ASCII strings, a helper function fitTextToContainer.js to make the animation responsive, and an index.html file that renders and loops the animation.
    • png (selected frame) - Export a .png image of the selected frame.
  • Export - Download animation in the selected format.
Frames