Unable to set 2D Javascript array inside nested loop

Question

I am trying to convert a 2D grid of (x, y) points to a sphere in space. I loop through all of the points in the grid and set the value to an object {x: someX, y: someY, z: someZ}. But for some reason, the value I get inside the loop is different from the value outside. Do I have a typo or is this something about JS I don't understand yet? Here is the exact section causing issues:

for (let y = 0; y < GRID_WIDTH; y++) {
  for (let x = 0; x < GRID_WIDTH; x++) {
    points[y][x] = grid2Sphere(x, y); //returns {x: someX, y: someY, z: someZ}. This works.
    console.log(points[y][x]);  // This logs the correct values
  }
  console.log(points[y]); // This is always equal to the row where y = 0. It's as if everything that happened in the inner loop did not get set.
}

For those interested, here is the entire file. I am using p5.js:

let R;
let points;
const GRID_WIDTH = 20;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  stroke("#000");
  R = 100;
  angleMode(RADIANS);
  points = new Array(GRID_WIDTH).fill(new Array(GRID_WIDTH).fill({}));
  
  // Calculate and draw each point.
  for (let y = 0; y < GRID_WIDTH; y++) {
    for (let x = 0; x < GRID_WIDTH; x++) {
      points[y][x] = Object.assign({}, grid2Sphere(x, y));
      console.log(points[y][x]);
    }
    console.log(points[y]);
  }
  
  drawPoints(points);
}


function draw() {
  noLoop();
}

function drawPoints(pArray) {
  for (let y = 0; y < GRID_WIDTH; y++) {
    for (let x = 0; x < GRID_WIDTH; x++) {
      let p = pArray[y][x];
      point(p.x, p.y, p.z);
    }
  }
}

function grid2Sphere(x, y) {
  var radX = map(x, 0, GRID_WIDTH - 1, -1 * PI * R, PI * R);
  var radY = map(y, 0, GRID_WIDTH - 1, -1 * PI / 2 * R, PI / 2 * R);
  var lon = radX / R;
  var lat = 2 * atan(exp(radY / R)) - PI / 2;
  var x_ = R * cos(lat) * cos(lon);
  var y_ = R * cos(lat) * sin(lon);
  var z_ = R * sin(lat);

  return {x: x_, y: y_, z: z_};
}

George Profenza · Accepted Answer · 2022-09-21T02:16:55.377

I think you're on the right track, the confusion stems from here actually:

points = new Array(GRID_WIDTH).fill(new Array(GRID_WIDTH).fill({}));

to break it down:

new Array(GRID_WIDTH).fill({}) creates an array of empty objects
new Array(GRID_WIDTH).fill(new Array(GRID_WIDTH).fill({})); makes a new array that is filled with references (not copies) of the first array (e.g. if the first array of {},{},... was called myData, the nested array would contain: myData,myData,... 20 times)

You could assign/allocate a new array on each y loop:

// Calculate and draw each point.
  for (let y = 0; y < GRID_WIDTH; y++) {
    // ensure this is a new array (and not the same reference)
    points[y] = [];
    for (let x = 0; x < GRID_WIDTH; x++) {
      points[y][x] = grid2Sphere(x, y);
      console.log(x, y, points[y][x]);
    }
    console.log(y, points[y]);
  }

Here's a modified version of your code:

let R;
let points;
const GRID_WIDTH = 20;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  background(255);
  stroke("#000");
  R = 100;
  points = new Array(GRID_WIDTH).fill(new Array(GRID_WIDTH).fill({}));
  
  // Calculate and draw each point.
  for (let y = 0; y < GRID_WIDTH; y++) {
    // ensure this is a new array (and not the same reference)
    points[y] = [];
    for (let x = 0; x < GRID_WIDTH; x++) {
      points[y][x] = grid2Sphere(x, y);
      console.log(x, y, points[y][x]);
    }
    console.log(y, points[y]);
  }
  
  // move camera for visual debugging purposes only
  camera(300, -100, 0, 0, 0, 0, 0, 1, 0);
  drawPoints(points);
}

function drawPoints(pArray) {
  for (let y = 0; y < GRID_WIDTH; y++) {
    for (let x = 0; x < GRID_WIDTH; x++) {
      let p = pArray[y][x];
      point(p.x, p.y, p.z);
    }
  }
}

function grid2Sphere(x, y) {
  var radX = map(x, 0, GRID_WIDTH - 1, -1 * PI * R, PI * R);
  var radY = map(y, 0, GRID_WIDTH - 1, -1 * PI / 2 * R, PI / 2 * R);
  var lon = radX / R;
  var lat = 2 * atan(exp(radY / R)) - PI / 2;
  var x_ = R * cos(lat) * cos(lon);
  var y_ = R * cos(lat) * sin(lon);
  var z_ = R * sin(lat);

  return {x: x_, y: y_, z: z_};
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>

You could simplify further by just using an empty array that gets populated later (without worrying about filling it ahead of time):

let R = 100;
let points;
const GRID_WIDTH = 20;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  background(255);
  stroke("#000");
  points = [];
  
  // Calculate and draw each point.
  for (let y = 0; y < GRID_WIDTH; y++) {
    points[y] = [];
    for (let x = 0; x < GRID_WIDTH; x++) {
      points[y][x] = grid2Sphere(x, y);
      console.log(x, y, points[y][x]);
    }
    console.log(y, points[y]);
  }
  
}

function draw(){
  background(255);
  orbitControl();
  drawPoints(points);
}

function drawPoints(pArray) {
  beginShape(POINTS);
  for (let y = 0; y < GRID_WIDTH; y++) {
    for (let x = 0; x < GRID_WIDTH; x++) {
      let p = pArray[y][x];
      vertex(p.x, p.y, p.z);
    }
  }
  endShape();
}

function grid2Sphere(x, y) {
  var radX = map(x, 0, GRID_WIDTH - 1, -PI * R, PI * R);
  var radY = map(y, 0, GRID_WIDTH - 1, -HALF_PI * R, HALF_PI * R);
  var lon = radX / R;
  var lat = 2 * atan(exp(radY / R)) - PI / 2;
  
  return {
    x: R * cos(lat) * cos(lon),
    y: R * cos(lat) * sin(lon),
    z: R * sin(lat)
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>

You can simplify even further by using a flat (1D) array (which you can easily set the size of if you need to):

let R = 100;
const GRID_WIDTH = 20;
const NUM_POINTS = GRID_WIDTH * GRID_WIDTH; 
let points = new Array(NUM_POINTS);

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  for(let i = 0; i < NUM_POINTS; i++){
    let x = i % GRID_WIDTH;
    let y = i / GRID_WIDTH; // this is a float (ok for now, but with image indices floor() it)
    points[i] = p5.Vector.fromAngles(map(x, 0, GRID_WIDTH - 1, 0, PI), 
                                     map(y, 0, GRID_WIDTH - 1, 0, TWO_PI), 
                                     R);
  }
}

function draw(){
  background(255);
  orbitControl();
  drawPoints(points);
}

function drawPoints(pArray) {
  beginShape(POINTS);
  pArray.forEach(p => vertex(p.x, p.y, p.z));
  endShape();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>

Here, I'm also using beginShape() / endShape() / vertex() which should be more efficient than point() (though for your static image won't make a difference) and using p5.Vector which on top of providing x,y,z properties has a bunch of nice linear algebra utilities (e.g. computing angles between vectors, perpendiculars to vectors, etc.) as well as p5.Vector.fromAngles() which does the spherical to cartesian coordinate conversion for you.

An even shorter version of the above (though less readible):

let R = 100;
const GRID_WIDTH = 20;
let points = new Array(GRID_WIDTH * GRID_WIDTH).fill();

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  points.forEach((p,i) => points[i] = p5.Vector.fromAngles((i % GRID_WIDTH) / GRID_WIDTH * PI,
                                                           (i / GRID_WIDTH) / GRID_WIDTH * TWO_PI,                                                               R));
}

function draw(){
  background(255);
  orbitControl();
  drawPoints(points);
}

function drawPoints(pArray) {
  beginShape(POINTS);
  pArray.forEach(p => vertex(p.x, p.y, p.z));
  endShape();
}

Thank you for the answer. That was the most thorough and clear response to an answer I've had in a while. I'd upvote more if I could — JBrown, Sep 21 '22 at 12:28
It was a lucky coincidence I answered [a similar question a while ago](https://stackoverflow.com/questions/71455816/how-to-get-sphere-intersection-points-with-p5-js/71475396#71475396) (you might find the link to the c++ article there handy in terms of face indices, if you need that later on). This time around `p5.Vector.fromAngles()` caught my attention: very convenient. (You might like `p5.Vector.random3D().mult(R)` for a sphere with random points (not as grid) ([example](https://editor.p5js.org/george.profenza/sketches/TZmqXgVeJ))) — George Profenza, Sep 21 '22 at 13:29
Nice answer. FYI you can omit `new` in front of `Array`. `.forEach((p,i) => points[i]...` seems clearer as `points = points.map(_, i) => p5.Vector...`, avoiding a mutation. Also, since the object in `.fill({})` is overwritten, maybe leave it out completely or use spread syntax, which doesn't have the aliasing gotcha. As you state in the next bullet, "`new Array(GRID_WIDTH).fill({})` creates an array of empty objects"` actually creates an array of one empty object referenced `GRID_WIDTH` times. — ggorlen, Sep 21 '22 at 13:43

Unable to set 2D Javascript array inside nested loop

1 Answers1