Search code examples
javascriptjavascript-objects

How to fix all object values being NaN in JavaScript


I am currently working on a solar system physics simulator in the JavaScript canvas. I have a object named "earthState" with some info that should be used by the physics system to create earth's orbit. I have attributed a numerical value to each of the keys in the object, but when I log the object to the console it says that all values are NaN.

"earthState":

    let earthState = {
        distance: {
            value: 1.496 * Math.pow(10, 11),
            speed: 0.00
        },
        angle: {
            value: Math.PI/2,
            speed: 1.990986 * Math.pow(10, -7)
        }
    };

    console.log(earthState);

I have the object logging when the page first loads, and I have stopped the page before it finishes loading and I get the correct values in the console:

{distance: {…}, angle: {…}}
  angle: {value: 1.5707963267948966, speed: 1.9909859999999998e-7}
  distance: {value: 149600000000, speed: 0}
  __proto_: Object

But, as soon as I let the page finish loading, I get NaN as all the values:

{distance: {…}, angle: {…}}
  angle: {value: NaN, speed: NaN}
  distance: {value: NaN, speed: NaN}
  __proto_: Object

The only thing that changes when the page loads is that an animation loop starts. There are no variables that should change anything in the "earthState" object. I have had a hard time trying to figure out the problem. It may be something simple that I am not aware of. Please let me know if this is the case, and if there is anything I should change to fix this problem. Thank you in advance!


Solution

  • Thank you all for your comments and ideas! My friend has helped me debug and find the error. I was simply using the "earthState" object instead of the "sunState" object in one of the functions. Cheers!