cellviz-usage.js

// The problem space.
var numColumns = 2048;
var cellsPerColumn = 4;
var lengthLargestSide = 64;

// Translate into cell dimensions.
// x = left->right
// y = down->up
// z = near->far
var x = numColumns / lengthLargestSide;
var y = cellsPerColumn;
var z = lengthLargestSide;

// The Cells interface is how to update the visualization inside the canvas.
var cells = new HtmCells(x, y, z);

// The HtmCellVisualization object handles all interactions with the DOM.
var cellviz = new HtmCellVisualization(
    cells, {elementId: 'container'}
);

// Renders the canvas with empty cells into the DOM and canvas.
cellviz.render();

// Update cells with random colors every so often and redraw.
setInterval(function() {
    // Throw in a bunch of random colored cells.
    colorCellsRandomly(cells);
    // The canvas is not repainted until this happens.
    cellviz.redraw();
}, 500);

function colorCellsRandomly(myCells) {
    for (var cx = 0; cx < x; cx++) {
        for (var cy = 0; cy < y; cy++) {
            for (var cz = 0; cz < z; cz++) {
                myCells.update(
                    cx, cy, cz, 
                    getRandomIntInclusive(0, 2)
                );
            }
        }
    }
}

function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}