ASCII Animation Library In Pure JavaScript – AnimASCII

Preview:

Description:

AnimASCII is a JavaScript library to animate ASCII characters using canvas.

How to use it:

Include the necessary rot.js and AnimASCII libraries on the web page.

<script src="rot.min.js"></script>
<script src="animascii.js"></script>

Animate the ASCII characters stored in a JavaScript array.

<div id="container1"></div>

var animation1 = new animascii({
    src: [
        ["0-----", "-----0"],
        ["-0----", "----0-"],
        ["--0---", "---0--"],
        ["---0--", "--0---"],
        ["----0-", "-0----"],
        ["-----0", "0-----"]
    ],
    display: document.getElementById("container1")
}

Animate the ASCII characters stored in a TEXT file.

<div id="container2"></div>

var animation2 = new animascii({
    src: "characters.txt",
    display: document.getElementById("container2")
}

Execute a function when the animation is completely finished.

var animation1 = new animascii({
    src: [
        ["0-----", "-----0"],
        ["-0----", "----0-"],
        ["--0---", "---0--"],
        ["---0--", "--0---"],
        ["----0-", "-0----"],
        ["-----0", "0-----"]
    ],
    display: document.getElementById("container1")
}, function() {
    alert("Done!");
});

Config the animation with the following options.

var animation1 = new animascii({
    src: [
        ["0-----", "-----0"],
        ["-0----", "----0-"],
        ["--0---", "---0--"],
        ["---0--", "--0---"],
        ["----0-", "-0----"],
        ["-----0", "0-----"]
    ],
    display: document.getElementById("container1")
    repeat: -1, // infinite loop
    letter_padding: 1, // space between characters
    font_family: "monospace",
    font_size: 25,
    background_color: "white",
    foreground_color: "black",
    delay: 200 // in milliseconds
}

Stop the animation manually.

animation1.stop();