Zhy*_*zhy 9 javascript jquery json
编辑:我还没有.我已经在这个问题上放了一笔赏金,因为我真的可以回答这个问题.我已经想到了代表不围绕中心旋转的行星的元素.因此,您可以跳过第1步和第2步,直接转到3,试图帮助我.
原文:我正在开展一个有趣的小项目.这是一个太阳系,行星围绕太阳旋转.我认为这是一个三个重要步骤的模拟.
第一步:用8个行星创建一个功能性旋转太阳系.
第二步:创建一个函数,添加围绕同一个太阳旋转的新行星,点击一个按钮,其具体信息是随机的(即:与太阳的距离,行星的颜色,行星的大小等)
我迈出了第三步,我不希望事情变得随机.对我来说,第三步对我来说是最困难的,因为我对JSON没什么经验.我从NASA网站获得太阳系以外的所有系外行星的数据,我想用添加物体的功能将这些个体物体(行星)添加到模拟中.
我的问题是:我的代码如何在我的代码中查看你在JSON数组中看到的每条记录,作为一个远离屏幕中心黑色斑点的元素(见小提琴)在一个随机的角度,所以它不是全部对齐相同.最后,我希望有数千个小斑点代表屏幕上显示的行星,其中目前只能看到的黑色斑点是太阳.
这是因为在我的JSON文件中有成千上万个这样的行星,我想看到它们都与它们各自与太阳"距离[pc]"的距离一致,它们各自的大小"Planet Radius [Jupiter radii]".当然,科学不需要准确,但它应该有所不同.例如,具有最大距离[pc](parsec中的距离)的行星需要距离最远,但仍然能够在屏幕上看到,即使它只是一点点斑点.
现在我知道有一些数学涉及根据距离属性适当地定位每个行星,因为它们被列为parsec中的距离,一些转换方法是为了将它们全部放在同一个屏幕上,而它们仍然是可见.
这是我的代码,但不是全部.要查看所有内容,请单击此代码下发布的链接.
//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.
}
}
这个小提琴掌握了基本代码.注意:此链接包含代码中的所有3000多个行星,因此它可能会在加载方面对您起作用.只需在URL中键入1而不是2即可进入草案,其中只有几个hte行星示例,如果您的浏览器正在对您进行操作.
让我尝试一下：
看看这个小提琴。距离是对数的，以便所有行星都适合屏幕。
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。小提琴。
| 归档时间： |
|
| 查看次数： |
331 次 |
| 最近记录： |