Why does my object keep getting NaN values?-CodePudding

I´ve been messing around with a library called p5.js and I encounter a problem while trying to modify the values of an object. After creating the array and pushing the objects I check for the object and it has many NaN values. This code can be run in editor.p5js.org for free in case you need it. Thanks in advance.

function setup() {
  createCanvas(600, 600);

  background(0);

  p = [];
  planetnum = 3; //Set one more 
  for (u = 0; u < planetnum; u  ) {
    p.push({
      rx: 0,
      ry: 0,
      vx: 0,
      vy: 0,
      ax: 0,
      ay: 0,
      m: 10
    });
  }
  for (u = 0; u < planetnum; u  ) {
    p[u].rx = 0;
    p[u].ry = 0;
    p[u].vx = 0;
    p[u].vy = 0;
    p[u].ax = 0;
    p[u].ay = 0;
    p[u].m = 10;
  }

  p[0].ry = 100;
  p[1].rx = 100;
  p[2].rx = -100;
  console.log(p[1]);
}

function draw() {
  background(0);
  translate(width / 2, height / 2);
  scale(1, -1);
  console.log("Working");
  color(255);
  //Calculate next position
  for (i = 0; i < planetnum; i  ) {
    p[i].ax = 0;
    p[i].ay = 0;
    console.log(p[i]);
    for (o = 0; o < planetnum; o  ) {
      if (o != i) {
        d = sqrt((p[i].ry - p[o].ry) ^ 2   (p[i].rx - p[o].rx) ^ 2);
        f = -0.001 / (d * d);
        angle = Math.atan2((p[i].ry - p[o].ry), (p[i].rx - p[o].rx));

        p[i].ax  = f * d * Math.cos(angle) / p[i].m;
        p[i].ay  = f * d * Math.sin(angle) / p[i].m;
      }
    }
    p[i].vx  = p[i].ax;
    p[i].ay  = p[i].ay;
    p[i].rx  = p[i].vx;
    p[i].ry  = p[i].vy;
  }

  //Draw circles
  for (i = 0; i < planetnum; i  ) {
    circle(p[i].rx, p[i].ry, 10);
  }
}

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

CodePudding user response：

I'm guessing that when you wrote this code:

d = sqrt((p[i].ry - p[o].ry) ^ 2   (p[i].rx - p[o].rx) ^ 2);

Your intention was to square each of those deltas. However, in JavaScript ^ is the bitwise XOR operator, not the exponent operator. This is probably resulting in your taking the square root of -1 which is NaN. This fixes the NaN problem:

d = sqrt((p[i].ry - p[o].ry) ** 2   (p[i].rx - p[o].rx) ** 2);

Note: on certain defunct browsers you might need to use Math.pow(p[i].ry - p[o].ry, 2), also you could consider the p5.js dist function: dist(p[i].rx, p[i].ry, p[o].rx, p[o].ry).

function setup() {
  createCanvas(600, 600);

  background(0);

  p = [];
  planetnum = 3; //Set one more 
  for (u = 0; u < planetnum; u  ) {
    p.push({
      rx: 0,
      ry: 0,
      vx: 0,
      vy: 0,
      ax: 0,
      ay: 0,
      m: 10
    });
  }
  for (u = 0; u < planetnum; u  ) {
    p[u].rx = 0;
    p[u].ry = 0;
    p[u].vx = 0;
    p[u].vy = 0;
    p[u].ax = 0;
    p[u].ay = 0;
    p[u].m = 10;
  }

  p[0].ry = 100;
  p[1].rx = 100;
  p[2].rx = -100;
  console.log(p[1]);
}

function mouseClicked() {
  console.log("Debug:");
  for (i = 0; i < planetnum; i  ) {
    console.log(p[i]);
  }
}

function draw() {
  background(0);
  translate(width / 2, height / 2);
  scale(1, -1);
  color(255);
  //Calculate next position
  for (i = 0; i < planetnum; i  ) {
    p[i].ax = 0;
    p[i].ay = 0;
    for (o = 0; o < planetnum; o  ) {
      if (o != i) {
        d = sqrt((p[i].ry - p[o].ry) ** 2   (p[i].rx - p[o].rx) ** 2);
        f = -0.001 / (d * d);
        angle = Math.atan2((p[i].ry - p[o].ry), (p[i].rx - p[o].rx));

        p[i].ax  = f * d * Math.cos(angle) / p[i].m;
        p[i].ay  = f * d * Math.sin(angle) / p[i].m;
      }
    }
    p[i].vx  = p[i].ax;
    p[i].ay  = p[i].ay;
    p[i].rx  = p[i].vx;
    p[i].ry  = p[i].vy;
  }

  //Draw circles
  for (i = 0; i < planetnum; i  ) {
    circle(p[i].rx, p[i].ry, 10);
  }
}

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