Question

编辑：我还没有。我已经在这个问题上放了一笔赏金，因为我真的可以回答这个问题。我已经想到了代表不围绕中心旋转的行星的元素。因此，您可以跳过步骤1和步骤1。 2然后直奔3来试图帮助我。

ORIGINAL ：我正在开发一个有趣的小项目。它是一个太阳系，行星围绕太阳旋转。我认为这是一个三个重要步骤的模拟。

第一步：用8个行星创建一个功能性旋转太阳系。

第二步：创建一个函数，添加围绕同一个太阳旋转的新行星，点击一个按钮，其具体信息是随机的（即：距太阳的距离，行星的颜色），行星的大小等。）

我是第三步，我不想让事情变得随机。对我来说，第三步对我来说是最困难的，因为我对JSON没什么经验。我从NASA网站获得太阳系以外的所有系外行星的数据，我想用添加物体的功能将这些个体物体（行星）添加到模拟中。

我的问题是：我的代码如何在我的代码中查看您在JSON数组中看到的每条记录，作为一个放置的元素屏幕中心的黑色斑点（见小提琴）是一个随机的角度，所以它并不是全部对齐。最后，我希望有数以千计的小斑点代表屏幕上显示的行星，其中目前只能看到的黑色斑点是太阳。

这是因为在我的JSON文件中有成千上万个这样的行星，我想看到它们都与它们各自与太阳的距离和距离[pc]＆＃34;，它们各自的大小＆＃34;行星半径[木星半径]＆＃34;。当然，科学不需要准确，但它应该有所不同。例如，具有最大距离[pc]（parsec中的距离）的行星需要距离最远，但仍然能够在屏幕上看到，即使它只是一点点斑点。

现在我知道有一些数学涉及根据距离属性适当地定位每个行星，因为它们被列为parsec中的距离，一些转换方法是为了将它们全部放在同一个屏幕上，而它们＆＃39;仍然可见。

这是我的代码，但不是全部。要查看所有内容，请单击此代码下发布的链接。

        //this is an array that holds all of the json data
           var arr=   [
                 {
                   "rowid": 1,
               "Host name": "11 Com",
               "Number of Planets in System": 1,
               "Planet Mass or M*sin(i)[Jupiter mass]": 19.4,
               "Planet Radius [Jupiter radii]": null,
               "Planet Density [g": {
                  "cm**3]": null
               },
               "Distance [pc]": 110.62,
               "Effective Temperature [K]": 4742,
               "Date of Last Update": "5/14/2014"
            },
             {
               "rowid": 2,
               "Host name": "11 UMi",
               "Number of Planets in System": 1,
               "Planet Mass or M*sin(i)[Jupiter mass]": 10.5,
               "Planet Radius [Jupiter radii]": null,
               "Planet Density [g": {
                  "cm**3]": null
               },
               "Distance [pc]": 119.47,
               "Effective Temperature [K]": 4340,
               "Date of Last Update": "5/14/2014"
            },
             {
               "rowid": 3,
               "Host name": "14 And",
               "Number of Planets in System": 1,
               "Planet Mass or M*sin(i)[Jupiter mass]": 4.8,
               "Planet Radius [Jupiter radii]": null,
               "Planet Density [g": {
                  "cm**3]": null
               },
               "Distance [pc]": 76.39,
               "Effective Temperature [K]": 4813,
               "Date of Last Update": "5/14/2014"
            },
             {
               "rowid": 4,
               "Host name": "14 Her",
               "Number of Planets in System": 1,
               "Planet Mass or M*sin(i)[Jupiter mass]": 4.64,
               "Planet Radius [Jupiter radii]": null,
               "Planet Density [g": {
                  "cm**3]": null
               },
               "Distance [pc]": 18.15,
               "Effective Temperature [K]": 5311,
               "Date of Last Update": "5/14/2014"
            }];

//these variables hold specific properties
    var distance;
    var planetRadius;
    var rowid;
    var hostName;

    for(var i=0;i<arr.length;i++){

       rowid= arr[i]["rowid"];
       distance= arr[i]["Distance [pc]"];
       hostName= arr[i]["Host name"];
       planetRadius=arr[i]["Planet Radius [Jupiter radii]"];//This is the idea how we should access the json objects, as your operations are not clear to us just I'm giving the idea
      // Do what ever you want with  individual object
           if(planetRadius !== null){
               // If planet radius not null do whatever you want.
            }
    }

此fiddle包含基本代码。 注意：此链接包含代码中的所有3000多个行星，因此在加载方面可能会对您产生影响。只需在URL中键入1而不是2即可转到草稿，其中只有几个hte行星示例，如果您的浏览器正在对您进行操作。

Answer 1

让我试一试：

见fiddle。距离是对数的，因此所有行星都适合屏幕。

var arr=   [
     {
       "rowid": 1,
       "Host name": "11 Com",
       "Number of Planets in System": 1,
       "Planet Mass or M*sin(i)[Jupiter mass]": 19.4,
       "Planet Radius [Jupiter radii]": null,
       "Planet Density [g": {
          "cm**3]": null
       },
       "Distance [pc]": 110.62,
       "Effective Temperature [K]": 4742,
       "Date of Last Update": "5/14/2014"
    },
     {
       "rowid": 2,
       "Host name": "11 UMi",
       "Number of Planets in System": 1,
       "Planet Mass or M*sin(i)[Jupiter mass]": 10.5,
       "Planet Radius [Jupiter radii]": null,
       "Planet Density [g": {
          "cm**3]": null
       },
       "Distance [pc]": 119.47,
       "Effective Temperature [K]": 4340,
       "Date of Last Update": "5/14/2014"
    },
     {
       "rowid": 3,
       "Host name": "14 And",
       "Number of Planets in System": 1,
       "Planet Mass or M*sin(i)[Jupiter mass]": 4.8,
       "Planet Radius [Jupiter radii]": null,
       "Planet Density [g": {
          "cm**3]": null
       },
       "Distance [pc]": 76.39,
       "Effective Temperature [K]": 4813,
       "Date of Last Update": "5/14/2014"
    },
     {
       "rowid": 4,
       "Host name": "14 Her",
       "Number of Planets in System": 1,
       "Planet Mass or M*sin(i)[Jupiter mass]": 4.64,
       "Planet Radius [Jupiter radii]": null,
       "Planet Density [g": {
          "cm**3]": null
       },
       "Distance [pc]": 18.15,
       "Effective Temperature [K]": 5311,
       "Date of Last Update": "5/14/2014"
    }];
var distance;
var planetRadius;
var rowid;
var hostName;


var svg=document.getElementById("Layer_1");
for(var i=0;i<arr.length;i++){

   rowid= arr[i]["rowid"];
   distance= arr[i]["Distance [pc]"];
   hostName= arr[i]["Host name"];
   planetRadius=arr[i]["Planet Radius [Jupiter radii]"];//This is the idea how we should access the json objects, as your operations are not clear to us just I'm giving the idea
  // Do what ever you want with  individual object
       if(planetRadius !== null){
           // If planet radius not null do whatever you want.
           var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");
           circle.setAttribute("class","fillblack");
           circle.setAttribute("cx","0");
           circle.setAttribute("cy","0");
           circle.setAttribute("r",planetRadius.toString());
           var logDist=Math.log(distance+1)*50;
           var angle=0; // change this based on the current time, if you would like an animation
           circle.setAttribute("transform","translate(500 300.8) rotate("+angle+") translate("+logDist+")");
           svg.appendChild(circle);
        }
}
window.requestAnimationFrame(function(){
    // do your animations here
});

如果需要，可以通过根据当前时间更改变换中的angle变量来添加动画。 SVG转换使得数学变得非常简单，因为您可以连接转换。

然而，我怀疑使用当前计算机<svg>可以以60 fps动画3000多个行星。如果您想要平滑的动画，可能需要查看<canvas>。

编辑：它非常流畅，但对我来说看起来不像是60 fps。 fiddle

Answer 2

如果您需要每个单独的对象来执行操作，请使用for循环。

     var arr=   [
         {
           "rowid": 1,
           "Host name": "11 Com",
           "Number of Planets in System": 1,
           "Planet Mass or M*sin(i)[Jupiter mass]": 19.4,
           "Planet Radius [Jupiter radii]": null,
           "Planet Density [g": {
              "cm**3]": null
           },
           "Distance [pc]": 110.62,
           "Effective Temperature [K]": 4742,
           "Date of Last Update": "5/14/2014"
        },
         {
           "rowid": 2,
           "Host name": "11 UMi",
           "Number of Planets in System": 1,
           "Planet Mass or M*sin(i)[Jupiter mass]": 10.5,
           "Planet Radius [Jupiter radii]": null,
           "Planet Density [g": {
              "cm**3]": null
           },
           "Distance [pc]": 119.47,
           "Effective Temperature [K]": 4340,
           "Date of Last Update": "5/14/2014"
        },
         {
           "rowid": 3,
           "Host name": "14 And",
           "Number of Planets in System": 1,
           "Planet Mass or M*sin(i)[Jupiter mass]": 4.8,
           "Planet Radius [Jupiter radii]": null,
           "Planet Density [g": {
              "cm**3]": null
           },
           "Distance [pc]": 76.39,
           "Effective Temperature [K]": 4813,
           "Date of Last Update": "5/14/2014"
        },
         {
           "rowid": 4,
           "Host name": "14 Her",
           "Number of Planets in System": 1,
           "Planet Mass or M*sin(i)[Jupiter mass]": 4.64,
           "Planet Radius [Jupiter radii]": null,
           "Planet Density [g": {
              "cm**3]": null
           },
           "Distance [pc]": 18.15,
           "Effective Temperature [K]": 5311,
           "Date of Last Update": "5/14/2014"
        }];
var distance;
var planetRadius;

for(var i=0;i<arr.length;i++){

   distance= arr[i]["Distance [pc]"];
   planetRadius=arr[i]["Planet Radius [Jupiter radii]"];//This is the idea how we should access the json objects, as your operations are not clear to us just I'm giving the idea
  // Do what ever you want with  individual object
       if(planetRadius !== null){
           // If planet radius not null do whatever you want.
        }
}

Answer 3

我不会为你编写代码，但我会给你提示如何。

第一个问题 - 适合屏幕：找到距离中心点最远的边缘，然后将所有距离转换为适合该距离，但要准确保持相对距离。为此，您需要3个输入数字以及您要找到的内容：

R＆＃39; max =到屏幕最远边缘的距离（可能以像素为单位）。
D＆＃39; max =距离太阳最远的行星距离。
D＆＃39; planet =要转换为相对距离的距离。
R＆＃39; planet =您需要查找的屏幕上的行星距离（可能以像素为单位）。

公式：

R'planet = D'planet / (R'max / D'max);

第二个问题 - 将行星放在屏幕上：你需要行星与太阳在屏幕上的距离（R＆＃39;行星 - 你从上一步开始），以及太阳的角度（0 - 360度 - 你说你可以做随机）。然后你可以像这样计算屏幕坐标：

R＆＃39;行星 - 屏幕上的距离。
A＆＃39;行星 - 与太阳的屏幕角度。
X＆＃39; planet - 行星的X坐标（假设太阳位于[0,0]）。
Y＆＃39; planet - 行星的Y坐标（假设太阳位于[0,0]）。

公式：

X'planet = cos(A'planet) / R'planet;
Y'planet = sin(A'planet) / R'planet;

请记住，如果太阳位于[0,0]，这些坐标为真。因此，要将行星放置在屏幕上，您需要将X＆＃39;行星添加到X＆＃39;太阳，并将Y＆＃39行星添加到Y＆＃39;太阳。

第三个问题 - 屏幕上行星的大小：再次，类似于上面的第一个问题，只需确定屏幕上最大行星大小是什么，然后再划分实际再次按比例大小。

Radius'screen = Radius'actual / (Radius'actualmax / Radius'maxpx);

有很多方法可以绘制它，或者是svg，或者只是将div与行星图像放在一起并相应地调整大小。

这应该是它。

使用一些数学

3 个答案: