Hello!
I’m doing the game of life in vanilla JS and I got stuck in some basic loop logic 
http://codepen.io/Pontus/pen/vxQpNe
Why it doesn’t randomize every row differently but every row is the same?
for(var y = 0, colLen = arr.length; y < colLen; y++) {
for(var i = 0, rowLen = arr[0].length; i < rowLen; i++) {
arr[y][i] = Math.round(Math.random());
}
}
}```
Thank you for looking at it! I really cannot figure it out, my logic says it should work..Just a passing glance, I don’t fully understand your code but, reading through it I noticed that you called for the variables “i” and “y” in three different places.
Quickly swapping those out, produced a new random assortment of rows for me.
Hope that helps.
Thank you! But I see in your pen the same problem… codepen’s console says it is a circular object Array. Variables y and i are in their own function inner scope.
what’s colLen and rowLen - I don’t see those variables defined.
Let me double check what you’re looking for, you want the columns to randomly populate on each refresh?
If so, I am getting that with my small edit on my browser, Chromium. Here are some screen shots:
Or, maybe I’m way off.
Your problem is this function.
function createArr(rows, columns) {
var rowArr = [];
for(var i = 0; i < columns; i++) {
rowArr.push(0);
}
for(var y = 0; y < rows; y++) {
gridArr.push(rowArr);
}
}
Notice this line
gridArr.push(rowArr)
What does it do?
It does not a create a new row array. All it does is copy reference of the same row array.
Check this:-
createArr(10,20)
console.log(gridArr[0]===gridArr[1]) // gives => true, should give false
Change your code like this-
function createArr(rows, columns) {
for(var y = 0; y < rows; y++) {
gridArr.push(new Array(columns));
}
}
And you should be fine.
If you really need to fill your array with zeros.
function createArr(rows, columns) {
for(var y = 0; y < rows; y++) {
var newRowArray = Array.apply(null, new Array(columns)).map(()=>0);
gridArr.push(newRowArray);
}
}
Feel free to ask for further explanation.
Side Note:- If you don’t want to deal with 2d arrays and make your life simpler, you could just use 1d arrays.
Create a new array and randomly fill them with 1s or 0s-
function createArrayWithRandomValues(size) {
var arr = [];
for (var i=0; i<size; i++) {
arr[i] = Math.round(Math.random());
}
return arr;
}
When you want to convert 2d indices to 1d ones, like - [3][7] to corresponding 1d index (and vice versa) values it can be done on demand.
Your logic for creating the grid is correct. Here is my pen, just open the console. I messed a bit with the variable names for my own clarity, but the created grid is randomized.
Your issue must be int he display logic, which I did not dissect
Thank you all for your help!
@burzax , colLen and rowLen are defined after x and y. You can define variables at the same time like this: var x, y, z;
@Spazcool, thank you for looking at it, I maybe didin’t explain so well, I meant randomize evrry row differently 
@yasserhussain1110 thank you! I didn’t know it was a reference to the same array, I thought the function populateGrid would have anyway overwritten all the values. I think I have a theory hole about how memory works…
@AdventureBear I don’t see the grid, but thank you anyway for putting your time into it!
Just to clarify a bit further.
populateGrid would have anyway overwritten all the values
Yeah it does, but it overwrites the value of the same array over and over again.
Here is the thing, your 2d array does not have 1d rows with same values.
It is filled with the exact same 1d row.
Checking that is pretty straightforward.
2darray[0] === 2darray[1] // if false, all’s well. If true you have a problem.
Just open the console. here is a screenshot. The randomization routine worked. It’s your display routine that has the bug in it:
