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.jsdownload
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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();

}