He estado jugando con una biblioteca llamada p5.js y encuentro un problema al intentar modificar los valores de un objeto. Después de crear la matriz y empujar los objetos, compruebo el objeto y tiene muchos valores de NaN. Este código se puede ejecutar en editor.p5js.org de forma gratuita en caso de que lo necesite. Gracias por adelantado.
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>Supongo que cuando escribiste este código:
d = sqrt((p[i].ry - p[o].ry) ^ 2 + (p[i].rx - p[o].rx) ^ 2); Tu intención era elevar al cuadrado cada uno de esos deltas. Sin embargo, en JavaScript ^ es el operador XOR bit a bit, no el operador exponente. Esto probablemente resulte en que saques la raíz cuadrada de -1, que es NaN. Esto soluciona el problema de NaN:
d = sqrt((p[i].ry - p[o].ry) ** 2 + (p[i].rx - p[o].rx) ** 2); Nota: en ciertos navegadores obsoletos, es posible que deba usar Math.pow(p[i].ry - p[o].ry, 2) , también podría considerar la función p5.js dist: 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>