Frederic Cambus

My online presence.

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

Comments