Loading repository data…
TheGreatRambler / repository
ASCII art animation library in Javascript using Canvas
ASCII art animation library in Javascript using Canvas. Check out demo here.
Have you ever wanted to make ASCII art but it didnt seem interesting enough? Well, take ASCII art to the next level with AnimASCII. AnimASCII makes it possible to make videos and movies in javascript with only the canvas and a whole heck of a lot of letters!
Features
<html>
<head>
<script src="js/ROT.js"></script>
<script src="js/animascii.js"></script>
</head>
<body>
<!-- Do whatever you want here -->
<div id="container"></div>
<script>
var animation = new animascii({src: "animation.txt", display: document.getElementById("container")}, function() {
console.log("finished!");
});
</script>
</body>
</html>
new animascii(options, callback);
Create animascii instance and run an animation.
// use vanilla javascript...
display: document.getElementById("put-id-here")
// or use jQuery!
display: $("#put-id-here")[0]
Pass in an element object in order to create a display.
// Can be path to animation file...
src: "path/to/animation.txt"
// or array
src: [["()______",
"00------"],
["_()_____",
"-00-----"],
["__()____",
"--00----"],
["___()___",
"---00---"],
["____()__",
"----00--"],
["_____()_",
"-----00-"],
["______()",
"------00"]]
Either a string or array. If it is a string, it will be parsed as a path to an animation file. Read about animation files here. If it is an array, it will be parsed as a raw animation.
// default
delay: 200
// delay of one second
delay: 1000
Specifies delay between each frame of the animation.
// default
repeat: 1
// infinite
repeat: -1
// repeat any number of times
repeat: 42
Specifies amount of times to repeat animation.
// default
letter_padding: 1
// very small spacing
letter_padding: 0
// XXXX
// XXXX
// XXXX
// XXXX
// very large padding
letter_padding: 4
// X X X X
//
// X X X X
//
// X X X X
//
// X X X X
Use this option in order to either increase or decrease the padding between letters.
// default
font_family: "monospace"
// can use system font or use your own
font_family: "arial"
Specify font family of resulting animation. Font must be loaded before you call AnimASCII, or the font will not be loaded onto the display.
// default
font_size: 25
// small
font_size: 10
// big
font_size: 100
Specify font size in pixels.
// default
background_color: "white"
// can accept named color...
background_color: "green"
// or any css-valid color
background_color: "#ffa100"
Specify background color.
// default
foreground_color: "black"
// can accept named color...
foreground_color: "purple"
// or any css-valid color
foreground_color: "#ffa100"
Specify foreground color.
new animascii(options, function() {
console.log("Finished!");
});
Function executed after animation has finished. This is optional. If options.repeat is infinite, callback will never run unless you run stop().
var animation = new animascii(options);
animation.stop();
Stop the animation even if repeat is set to -1 (infinite). Works for both infinite repeats and repeats that aren't infinite
Dont forget to :star: if you like!
It has come to my attention that there is already a haskell package with this name. I am sorry to have taken the name, but I will continue to market this as animascii.js, so there is no confusion.
Selected from shared topics, language and repository description—not editorial ratings.
collidingScopes /
Turn videos into ASCII pixel art using js and html canvas
bejd /
An ASCII art music video animated with JavaScript
lettercrap /
Reincarnation of a JavaScript library that generates dynamic ASCII art on the web
jcubic /
Zero dependencies isomorphic ASCII-Art globe renderer in JavaScript
CanArslanDev /
A browser-based tool that converts images into colored ASCII art with edge-detected glow effects, real-time animations, and multi-format export. Built with vanilla HTML, CSS, and JavaScript -- no frameworks, no build tools, no npm.
oZaGGo /
This is a project I made while learning about functions, arrays, and file reading in JavaScript. You can upload an ASCII art text file made with '*' characters, and it will create a basic fluid simulation. It's a fun way to practice coding while exploring ASCII art and basic animations.