HTML and CSS Reference
In-Depth Information
// Set the size of the canvas
canvas.width = viewportWidth;
canvas.height = viewportHeight;
// Initialize the grid. By default, it will be empty,
// so we'll need to "paint" all the cells
for ( ; i < gridRows ; ++i ) {
for ( j = 0 ; j < gridCols ; ++j ) {
if (Grid[i] === undefined) {
Grid[i] = [];
}
// Flag all the cells as "modified"
Grid[i][j] = 1;
}
}
// Call the update loop for the first time
requestAnimationFrame(update);
function update(ts) {
// Calculate the delta between the previous timestamp and the new one
delta = ts - previousTs;
// Performing a calculation here means that it will be
// executed every 16.67 ms. at 60 frames per second
// Check whether or not something needs to be repainted in the scene
// Only execute the paint routine if the delta is bigger
// than the interval and the shouldRepaint flag is set to true
if (delta > interval && shouldRepaint) {
// This bit will be executed only if it's bigger than the
// interval and therefore will be executed every 33.33 ms.
// at 30 frames per second (or the value of the "fps" variable)
// Paint the "background"
var i = 0,
j = 0;
for ( ; i < gridRows ; ++i ) {
for ( j = 0 ; j < gridCols ; ++j ) {
