Multidimensional array fill - javascript
I'm trying to fill an area in a multidimensional array and not sure on the approach.
For example I have the following array:
var map = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 0, 0, 0, 0, 2, 0, 0],
[0, 2, 0, 2, 0, 0, 2, 0, 0],
[0, 2, 0, 0, 2, 0, 2, 0, 0],
[0, 0, 2, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];
And then I am trying to get the number from X and Y position and fill all those numbers (which is 0) with a number given such as 1, which will result in the following array:
var map = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 1, 1, 1, 1, 2, 0, 0],
[0, 2, 1, 2, 1, 1, 2, 0, 0],
[0, 2, 1, 1, 2, 1, 2, 0, 0],
[0, 0, 2, 1, 1, 1, 2, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];
Basically just replacing all numbers next to each other (0) with (1) within that area.
What is the correct way to do this with JavaScript?
Assuming you're given a starting position and you want to then fill all neighboring values up/down, left/right that contain the same value, you can do something like this:
var map = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 0, 0, 0, 0, 2, 0, 0],
[0, 2, 0, 2, 0, 0, 2, 0, 0],
[0, 2, 0, 0, 2, 0, 2, 0, 0],
[0, 0, 2, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];
function fill(data, x, y, newValue) {
// get target value
var target = data[x][y];
function flow(x,y) {
// bounds check what we were passed
if (x >= 0 && x < data.length && y >= 0 && y < data[x].length) {
if (data[x][y] === target) {
data[x][y] = newValue;
flow(x-1, y); // check up
flow(x+1, y); // check down
flow(x, y-1); // check left
flow(x, y+1); // check right
}
}
}
flow(x,y);
}
fill(map, 2, 2, 1);
Working demo: http://jsfiddle.net/jfriend00/C83AT/
Here's a version that doesn't use recursion and appears to work with large data sets. Your large test data set wasn't a very interesting test pattern so I wouldn't say this is tested conclusively, but it seems to work on both the small and large data set:
Large data example: http://jsfiddle.net/jfriend00/8mrhN/
Small data example: http://jsfiddle.net/jfriend00/BFTub/ (easier to see the result)
function fill(data, x, y, newValue) {
// get target value
var target = data[x][y];
// maintain list of cells to process
// put the starting cell in the queue
var queue = [{x:x, y:y}], item;
while (queue.length) {
item = queue.shift();
x = item.x;
y = item.y;
if (data[x][y] === target) {
data[x][y] = newValue;
// up
if (x > 0) {
queue.push({x:x-1, y:y})
}
// down
if (x + 1 < data.length) {
queue.push({x:x+1, y:y})
}
// left
if (y > 0) {
queue.push({x:x, y:y-1});
}
// right
if (y + 1 < data[x].length) {
queue.push({x:x, y:y+1});
}
}
}
}
This could be optimized further for performance by testing the value before putting it in the queue and by following a given direction until you find a non-matching value, if required.
This is an alternative implementation (queue-based) roughly translated, no optimisations performed. There are also others.
Javascript
var map = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 0, 0, 0, 0, 2, 0, 0],
[0, 2, 0, 2, 0, 0, 2, 0, 0],
[0, 2, 0, 0, 2, 0, 2, 0, 0],
[0, 0, 2, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];
/*
1. Set Q to the empty queue.
2. If the color of node is not equal to target-color, return.
3. Add node to Q.
4. For each element N of Q:
5. If the color of N is equal to target-color:
6. Set w and e equal to N.
7. Move w to the west until the color of the node to the west of w no longer matches target-color.
8. Move e to the east until the color of the node to the east of e no longer matches target-color.
9. For each node n between w and e:
10. Set the color of n to replacement-color.
11. If the color of the node to the north of n is target-color, add that node to Q.
12. If the color of the node to the south of n is target-color, add that node to Q.
13. Continue looping until Q is exhausted.
14. Return.
*/
function floodFill(data, node, targetValue, replacementValue) {
var Q;
if (data[node[0]][node[1]] === targetValue) {
Q = [node];
while (Q.length) {
var N = Q.shift(),
value,
index,
n,
e,
s,
w;
if (data.hasOwnProperty([N[0]]) && data[N[0]][N[1]] === targetValue) {
w = e = N[0];
do {
w -= 1;
} while (data.hasOwnProperty(w) && data[w][N[1]] === targetValue);
do {
e += 1;
} while (data.hasOwnProperty(e) && data[e][N[1]] === targetValue);
n = N[1] - 1;
s = N[1] + 1;
for (index = w + 1; index < e; index += 1) {
data[index][N[1]] = replacementValue;
if (data[index].hasOwnProperty(n) && data[index][n] === targetValue) {
Q.push([index, n]);
}
if (data[index].hasOwnProperty(s) && data[index][s] === targetValue) {
Q.push([index, s]);
}
}
}
}
}
}
floodFill(map, [2, 2], 0, 1);
map.forEach(function (m) {
console.log(JSON.stringify(m));
});
Output
[0,0,0,0,0,0,0,0,0]
[0,2,2,2,2,2,2,0,0]
[0,2,1,1,1,1,2,0,0]
[0,2,1,2,1,1,2,0,0]
[0,2,1,1,2,1,2,0,0]
[0,0,2,1,1,1,2,0,0]
[0,0,0,2,2,2,2,0,0]
[0,0,0,0,0,0,0,0,0]
On jsFiddle
Related
Text File to JavaScript Nested Array
I have this .txt file to change to a nested array:
000011000000
000100001100
000001100001
010010001000
100101000100
101010010001
001000001001
000001000111
010100100010
010010010010
000000011100
001001110000
to the format:
var data = [
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1],
[0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0],
[1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 1],
[0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1],
[0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0],
[0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
[0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0]
]
what I have done so far is:
Read the file:
function readMatrixFile(){
var inputElement = document.getElementById("adjencyMatrixInput");
var fileList = inputElement.files;
var plainMatrix = new FileReader();
plainMatrix.readAsText(fileList[0]);
plainMatrix.onload = function () {
//Add to Matrix
renderMatrix(plainMatrix)
}
}
and
2. Split the File
function renderMatrix(plainMatrix) {
var matrix = plainMatrix.result;
var mtx = [];
matrix = matrix.split("\n");
}
I know I need to push through a for loop, but not sure how to get the nested array.
Split the string by a newline, then map over each item and convert the string into an array of characters with spread syntax.
const str = `000011000000
000100001100
000001100001
010010001000
100101000100
101010010001
001000001001
000001000111
010100100010
010010010010
000000011100
001001110000`
const res = str.split("\n").map(e => [...e])
console.log(res)
To convert the characters to numbers, map over the array of characters and parse each item:
const str = `000011000000
000100001100
000001100001
010010001000
100101000100
101010010001
001000001001
000001000111
010100100010
010010010010
000000011100
001001110000`
const res = str.split("\n").map(e => [...e].map(e => +e))
console.log(res)
You turn matrix into a a string of ones and zeros, you just need to split the string and convert them to numbers
function renderMatrix(plainMatrix) {
var matrix = plainMatrix.result;
var mtx = matrix.split("\n"); // mtx is now an array of strings of ones and zeros
mtx = mtx.map(string => string.split('')); // mtx is now an array of arrays of number string
mtx = mtx.map(nested => nested.map(numberString => Number(numberString))); // mtx is now what you want
}
How to fill an 2D array with a 2D Smaller array in JavaScript
I apologize if this is not well explained. I am quite new to JavaScript. I have a 2D arrayA that is 10x10 and a 2D arrayB that is 5x8. The smaller arrayB is populated with data and the larger arrayA is just populated with 0's by default. How can i move the data from arrayB to arrayA while still leaving the leftover space of arrayA as 0's? The end result must be that arrayA should contain all of the data in the same order as arrayB but with the leftover space still just containing 0's.
Assuming I understood the question correctly, you can loop over each value of arrayB and assign it at the same indexes in arrayA:
const arrayA = Array(10).fill(0).map(_ => Array(10).fill(0))
const arrayB = Array(5).fill(0).map(_ => Array(8).fill(1))
for (let y = 0; y < arrayB.length; y++) {
for (let x = 0; x < arrayB[y].length; x++) {
arrayA[y][x] = arrayB[y][x]
}
}
console.log(arrayA.map(v => v.join(', ')).join('\n'))
The console.log is just for readability, to understand how the matrix looks.
A simple Array.map() will do the job:
const arrA = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
const arrB = [
[0,1,2,3,4],
[0,1,2,3,4],
[0,1,2,3,4],
[0,1,2,3,4],
[0,1,2,3,4],
[0,1,2,3,4],
[0,1,2,3,4],
[0,1,2,3,4],
];
const B2A = () => arrA.map(
(val, index) => val.map(
(subVal, subIndex) => {
if(arrB[index] && arrB[index][subIndex]) return arrB[index][subIndex]
return subVal;
})
)
console.log(B2A());
Use Array.from and iterate, while iterate check if the value exists in filler array. If exists use that value otherwise same array value. const fill = (arr1, arr2) => Array.from(arr1, (arr, row) => Array.from(arr, (value, col) => (arr2[row] && arr2[row][col]) || value) ); const arrA = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ]; const arrB = [ [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4], [0, 1, 2, 3, 4] ]; console.log(JSON.stringify(fill(arrA, arrB)));
How to write out n*n Matrix values in JavaScript?
I'm new to JavaScript, so I decided to try to make a simple n*n Array. When I'm trying to write it out, I get, something starnge back.
var map = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 2, 3, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 3, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
function GoTh() {
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < map[i].length; j++) {
console.log(map[i][j]);
}
}
}
GoTh();
I expected it to write all 100 values, but it gives back this:
1 2 3 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 3 1
That's because same-value console.logs are grouped together in browsers' consoles. This can usually be disabled, i.e. in Chrome & Opera: In Firefox it's in console's settings (press F1 while using console) Another option is to write more data along with the value, eg.: console.log(i, j, map[i][j]);
The problem is the ouput in the console itself. If there are multiple similar entries - like the first 10 elements of value 1 in the first row plus the 1 in the second row, it will be grouped as a single entry of 11. You can see that there are multiple if you look to the right of a particular entry.
JS and JSON - how find number of position
I have JSON file with users_id array. On this array I have active users, so this numbers are not sequential. How I can check (on jQuery) number of position users_id = 18 (answer = 3)? Next I want read value from other string so I can read json.data_todo_counter[3].
{
"users_id": [1, 2, 3, 18, 24],
"data_chat_timeread": [0, 0, 0, 0, 0],
"data_chat_timecurrent": [100, 0, 0, 0, 0],
"data_chat_counter": [4, 0, 0, 0, 0],
"data_todo_counter": [2, 0, 0, 0, 0]
}
This function searches for the key in the keyMember of input and if found, it returns the element of valueMember at the found index:
function getSomething(input, key, keyMember, valueMember) {
var index = input[keyMember].indexOf(key);
if (index >= 0) {
return input[valueMember][index];
} else {
/not found
}
}
Example usage:
getSomething({
"users_id": [1, 2, 3, 18, 24],
"data_chat_timeread": [0, 0, 0, 0, 0],
"data_chat_timecurrent": [100, 0, 0, 0, 0],
"data_chat_counter": [4, 0, 0, 0, 0],
"data_todo_counter": [2, 0, 0, 0, 0]
}, 18, "users_id", "data_todo_counter");
Animation in Visual 2D Arrays
I'm currently making a Pacman ghost with visual 2D arrays. I want the ghost to move like this:
I think I would use CSS transitions, but I'm not sure how! If there's a way to do it in javascript, that would be just as helpful. Here is my code:
<!doctype html>
<html>
<head>
<title>Visualizing 2D arrays</title>
<style>
#stage {
position:relative;
}
.cell {
position:absolute;
width:30px;
height:30px;
border:1px solid black;
background-color:black;
}
</style>
</head>
<body>
<div id="stage"></div>
<script>
// GRAB A REFERENCE TO THE STAGE
var stage = document.querySelector("#stage");
// THE 2D ARRAY THAT DEFINES THE PATTERN
var pattern = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0],
[0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,1,2,2,1,1,1,1,2,2,1,1,1,0,0],
[0,0,2,2,2,2,1,1,2,2,2,2,1,1,0,0],
[0,0,3,3,2,2,1,1,3,3,2,2,1,1,0,0],
[0,1,3,3,2,2,1,1,3,3,2,2,1,1,1,0],
[0,1,1,2,2,1,1,1,1,2,2,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,0,1,1,1,0,0,1,1,1,0,1,1,0],
[0,1,0,0,0,1,1,0,0,1,1,0,0,0,1,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
// THE SIZE OF EACH CELL
var SIZE = 30;
// THE SPACE BETWEEN EACH CELL
var SPACE = 10;
// DISPLAY THE ARRAY
var ROWS = pattern.length;
var COLS = pattern[0].length;
// CREATE THE DIVS and POSITION THEM IN THE STAGE... BUT DON'T WORRY ABOUT COLORING THEM HERE!!!!
for (var row = 0; row < ROWS; row++) {
for (var col = 0; col < COLS; col++) {
// CREATE A DIV HTML ELEMENT CALLED CELL
var cell = document.createElement("div");
// SET ITS CSS CLASS TO CELL
cell.setAttribute("class", "cell");
// GIVE EACH OF THE CREATED DIVS A UNIQUE ID
// BASED ON THE ROW# AND COL#
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
cell.setAttribute("id", "c-" + row + "-" + col);
// ADD A CLICK HANDLER TO EACH OF THE INDIVIDUAL DIVS
cell.addEventListener("click", cellClick, false);
// ADD THE DIV HTML ELEMENT TO THE STAGE
stage.appendChild(cell);
// POSITION THE CELL IN THE CORRECT PLACE
// WITH 10 PIXELS OF SPACE AROUND IT
cell.style.top = row * (SIZE + SPACE) + "px";
cell.style.left = col * (SIZE + SPACE) + "px";
}
}
colorizeDivs();
function cellClick() {
// RIP APART THE DIV ID THAT WAS CLICKED ON
// WERE HIDING THE ROW AND COLUMN IN THE ID
// THE FORMAT OF THE ID IS "C-ROW#-COL#"
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
var zpos;
// THE "this" KEYWORD RETURNS THE HTML ELEMENT THAT WAS CLICKED ON
var thisid = this.id;
zpos = thisid.indexOf("-");
thisid = thisid.substr(zpos+1);
zpos = thisid.indexOf("-");
var thisRow = thisid.substr(0,zpos);
var thisCol = thisid.substr(zpos+1);
// now that we have the row and column for this div... change the array
pattern[thisRow][thisCol] += 1;
if (pattern[thisRow][thisCol] > 7) {
pattern[thisRow][thisCol] = 0;
}
colorizeDivs();
}
function colorizeDivs() {
for (var row = 0; row < ROWS; row++) {
for (var col = 0; col < COLS; col++) {
var cell = document.querySelector("#c-" + row + "-" + col);
if (pattern[row][col] === 0) {
cell.style.backgroundColor = "black";
} else if (pattern[row][col] === 1) {
cell.style.backgroundColor = "orange";
} else if (pattern[row][col] === 2) {
cell.style.backgroundColor = "white";
} else if (pattern[row][col] === 3) {
cell.style.backgroundColor = "blue";
} else if(pattern[row][col] === 4) {
cell.style.backgroundColor = "green";
} else if(pattern[row][col] === 5) {
cell.style.backgroundColor = "red";
} else if(pattern[row][col] === 6) {
cell.style.backgroundColor = "lightblue";
} else if(pattern[row][col] === 7) {
cell.style.backgroundColor = "pink";
}
}
}
}
</script>
</body>
</html>
Thank you!
I don't believe you would be able to use CSS transitions in this case. Transitions are typically applied to an entire HTML element, while you are attempting to selectively change certain colours of the ghost. I have created a solution to your problem in this fiddle. What this solution does is add another visual pattern representing the second frame of the ghost movement, as shown below:
var patterns = [
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0],
[0, 0, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 1, 1, 0, 0],
[0, 0, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 0, 0],
[0, 1, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 1, 0],
[0, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0],
[0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
],
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0],
[0, 0, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 1, 1, 0, 0],
[0, 0, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 0, 0],
[0, 1, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 1, 0],
[0, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
];
The next important aspect for creating this animation is to create a render loop with the requestAnimationFrame function. This is simply used to run the render function as fast as possible,
var startTime = Date.now();
var SPEED = 5; // Runs 5 times per second
function render() {
requestAnimationFrame(render.bind(this));
var elapsed = (Date.now() - startTime) / 1000;
var index = Math.floor((elapsed * SPEED) % patterns.length);
colorizeDivs(patterns[index]);
}
render();
So what the render function first does is calculate how long the animation has run for in seconds, which is also known as the elapsed time. This value can then be used to retrieve the appropriate index from the patterns defined above. This calculation simply applies the floor and modulo operation so that the index is always from the bound 0 to patterns.length - 1. After the index is retrieved, the current pattern is passed into the colorizeDivs function so the cells can be updated.