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