Character and color cycling effect in JavaScript

Frederic Cambus February 19, 2013 [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:

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();
}