Character and color cycling effect in JavaScript

Few weeks ago, I stumbled upon a cute little Javascript textmode library to generate text mode stuff inside the browser using the canvas element. Of course, I had to try to do something with it, and I quickly came up with this simple but efficient character and color cycling effect. You can see it in action here.

Cycling effect

Here is the code :

cycling-effect.jsview raw
var screenManager;

var characterIndex = 0;
var colorIndex = 0;

// Define character and color arrays
var arrayCharacters = [0x5c,0x7c,0x2f,0x2d];
var arrayColors = [0xf,0xb,0x9,0x1,0x9,0xb];

// The font that we will use
var sourceFont = new Image();
sourceFont.src = "font.png";


/*****************************************************************************/
/* Initialization */
/*****************************************************************************/

function init() {
// Initialize the textmode library
screenManager = new TextModeScreen(40, 25, "mainCanvas", sourceFont);

// Call our main loop at 10fps
setInterval(mainLoop, 1000 / 10);
}


/*****************************************************************************/
/* Main Loop */
/*****************************************************************************/

function mainLoop() {

for (offset = 0; offset < screenManager.charsHigh * screenManager.charsWide; offset++) {
// Write character and color data
screenManager.charBuffer[offset] = arrayCharacters[characterIndex];
screenManager.colourBuffer[offset] = arrayColors[colorIndex];

// Increment the color index
colorIndex = (colorIndex+1 < arrayColors.length) ? colorIndex+1 : 0;
}

// Increment the character index
characterIndex = (characterIndex+1 < arrayCharacters.length) ? characterIndex+1 : 0;

// Print footer text
screenManager.print(0, 24, " Simple character+color cycling example ", 0x1e);

// Render the textmode screen to our canvas
screenManager.presentToScreen();
}