How to dynamically print figlet text in javascript browser

Question

I am generating a figlet text in java script using this code snippet but I want it to make animated like printing the characters line by line and at the end, final figlet.

Code to generate figlet

function writeFiglet(){
figlet("Ausi", 'Dancing Font', function(err, text) {
  if (err) {
    console.log('something went wrong...');
    console.dir(err);
    return;
  }
  // typeWriter(text);
  document.write("<pre>"+text+"</pre>");
});

This one generate a normal instant figlet but I want to take some time to get printed.

I tried a following trick to treat figlet text as string and use delay for animation but it didn't worked well

function typeWriter(text) {
  var i = 0;
  var speed = 50;
  if (i < text.length) {
    document.getElementById("demo-pre-element").innerText += text.charAt(i);
    ++i;
    setTimeout(typeWriter, speed);
  }
}

score 0 · Accepted Answer · answered Jun 16 '18 at 09:56

actually your logic makes sense. Please try something like this

var charac = [];
function showFiglet(){
figlet("Ausi", 'Dancing Font', function(err, text) {
  if (err) {
    console.log('something went wrong...');
    console.dir(err);
    return;
  }
  var i = 0;
  var lengths = text.length;
  console.log("length is "+ lengths);
  while (i < lengths) {
    ++i;
    charac.push(text.charAt(i));
  }
  console.log(charac.toString());
    typeWriter();
});

var i = 0;
var speed = 50;
function typeWriter() {

  if (i < charac.length) {
    console.log(charac[i] + " element at " + i);
    document.getElementById("demo").innerText += charac[i];
    i++;
    setTimeout(typeWriter, speed);
  }
}

How to dynamically print figlet text in javascript browser

1 Answers1