用javascript伪造太阳系模型系统

这个东西，是我在读在职研的课堂上无聊的时候随便弄的，实现了椭圆和圆形的轨道运转。这些东西吧，其实都是很简单的，在游戏领域，轨道运动是很有意义的，我就顺便把代码po出来，做备忘吧。

由于是无聊时的即兴之作，并没有考虑性能优化和使用html5的canvas或者svg，只是用了最简单的div而已，要想用html5请自行实现了。

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body style="width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden; background-color: rgb(42,42,42);"></body>
<script type="text/javascript">
function id(x){return document.getElementById(x);}function print(x){console.log(x);}function random(lower,upper){return lower+Math.floor(Math.random()*(upper-lower+1));}Array.prototype.filter = function(){var tmp = [];for(var i=0;i<this.length;i++){if(typeof(this[i]) !== 'undefined'){tmp.push(this[i]);}}return tmp;
}var w = window.innerWidth;
var h = window.innerHeight;
var Planets = [];
function Planet(x,y,radius,color){var v = this;v.x = x;v.y = y;v.color = color || 'skyblue';v.radius = radius || 10;v.rotateangle = 0;v.body = document.createElement('div');v.body.style = "position:absolute;top:"+ (v.y-v.radius) +"px;left:"+ (v.x-v.radius) +"px;background-color:"+v.color+";border-radius:" +(v.radius*2)+"px;width:"+(v.radius*2)+"px;height:"+(v.radius*2)+"px;";document.body.appendChild(v.body);v.runType = false;v.target = null;v.rotateradius = null;v.longradius = null;v.shortradius = null;v.offsetx = null;v.offsety = null;v.anglespeed = 0;v.isRotated = false;v.rotatetheta = null;v.rotateanglespeed = 0;v.strange = false;var vx,vy;v.update = function(lerp){if(v.rotatetheta>Math.PI*2) v.rotatetheta -= Math.PI*2;if(v.runType == "circle"){if(!v.rotateangle){v.rotateangle = Math.random()*Math.PI*2;}v.rotateangle += v.anglespeed/10000 * lerp;if(v.rotateangle>Math.PI*2) v.rotateangle -= Math.PI*2;v.x =  Math.cos(v.rotateangle)*v.rotateradius;v.y =  Math.sin(v.rotateangle)*v.rotateradius;}else if(v.runType == "eclipse"){if(!v.rotateangle){v.rotateangle = Math.random()*Math.PI*2;}v.rotateangle += v.anglespeed/10000 * lerp;if(v.rotateangle>Math.PI*2) v.rotateangle -= Math.PI*2;v.x = Math.cos(v.rotateangle)*v.longradius + v.offsetx;v.y = Math.sin(v.rotateangle)*v.shortradius + v.offsety;}if(v.isRotated){v.rotatetheta += v.rotateanglespeed/10000 * lerp;if (v.strange){v.x =  v.x*Math.cos(v.rotatetheta) - v.y*Math.sin(v.rotatetheta);v.y =  v.x*Math.sin(v.rotatetheta) + v.y*Math.cos(v.rotatetheta);}else{vx = v.x;vy = v.y; //如果不用两个vx vy临时变量保存的话，则和上面的圆形环绕或椭圆环绕连用的时候会出现诡异的变扁现象，相当有立体感v.x =  vx*Math.cos(v.rotatetheta) - vy*Math.sin(v.rotatetheta);v.y =  vx*Math.sin(v.rotatetheta) + vy*Math.cos(v.rotatetheta);}}if(v.target){v.x += v.target.x;v.y += v.target.y;}v.body.style.left = (v.x-v.radius) + "px";v.body.style.top = (v.y-v.radius) + "px";}v.circleRun = function(target,rotateradius,anglespeed){v.runType = "circle";v.target = target;v.rotateradius = rotateradius;v.anglespeed = anglespeed * (Math.random()>0.5?-1:1);}v.eclipseRun = function(target,longradius,shortradius,offsetx,offsety,anglespeed){v.runType = "eclipse";v.target = target;v.longradius = longradius;v.shortradius = shortradius;v.offsetx = offsetx;v.offsety = offsety;v.anglespeed = anglespeed * (Math.random()>0.5?-1:1);}v.rotate = function(target,rotatetheta,rotateanglespeed,strange){v.isRotated = true;v.target = target;v.rotatetheta = rotatetheta;v.rotateanglespeed = rotateanglespeed;v.strange = strange;}v.suicide = function(){document.body.removeChild(v.avator);delete v;}Planets.push(v);
}var center = new Planet(w/2,h/2,1,'black');for(var i=0;i<1000;i++){var star = new Planet(0,0,0.5,"white");star.eclipseRun(center,random(5,10)/10*w,Math.random()*h,0,0,-1);star.rotate(center,0,-Math.random());
}var sun = new Planet(w/2,h/2,50,'orange');
sun.circleRun(center,8,10);var mercury = new Planet(0,0,7,'blue');
var venus = new Planet(0,0,8,'rgb(255,100,0)');
var earth = new Planet(0,0,10,"deepskyblue");var moon = new Planet(0,0,5,'yellow');
var mars = new Planet(0,0,9,'red');
var jupter = new Planet(0,0,24,'rgb(243,174,129)');
var saturn = new Planet(0,0,22,'rgb(191,149,21)');
var uranus = new Planet(0,0,20,'deepskyblue');
var neptune = new Planet(0,0,17,'rgb(16,201,175)');
var pluto = new Planet(0,0,8,'rgb(112,146,190)');mercury.circleRun(sun,80,9.4);
venus.circleRun(sun,110,8);
earth.circleRun(sun,160,4.8);moon.circleRun(earth,20,-15.2);
mars.circleRun(sun,200,5.4);
jupter.circleRun(sun,270,5.1);
saturn.circleRun(sun,340,4.8);
uranus.circleRun(sun,400,5.2);
neptune.circleRun(sun,450,4.6);
pluto.circleRun(sun,520,5.21);for(var i=0;i<50;i++){var star = new Planet(0,0,1,"white");star.eclipseRun(jupter,Math.random()*2+40,Math.random()*2,0,0,10);star.rotate(jupter,0,2);
}for(var i=0;i<50;i++){var star = new Planet(0,0,1,"white");star.eclipseRun(saturn,Math.random()*2+30,Math.random()*2,0,0,10);star.rotate(saturn,2.5,1);
}for(var i=0;i<50;i++){var star = new Planet(0,0,1,"rgb(209,238,245)");star.eclipseRun(uranus,Math.random()*2+30,Math.random()*2,0,0,10);star.rotate(uranus,2.5,0.1);
}for(var i=0;i<50;i++){var star = new Planet(0,0,1,"rgb(192,250,221)");star.eclipseRun(neptune,Math.random()*2+25,Math.random()*2,0,0,10);star.rotate(neptune,-2.5,-0.1);
}var halley = new Planet(0,0,5,"white");
halley.eclipseRun(sun,460,130,-150,0,20);
halley.rotate(sun,Math.random()*5,Math.random()*1);for(var i=0;i<100;i++){var star = new Planet(0,0,1,"white");star.eclipseRun(sun,Math.random()*10+230,Math.random()*10+200,0,0,10);star.rotate(sun,0,2,true);
}var lastTime = new Date();
var thisTime = lastTime;
var lerp = 0;
function update(){thisTime = new Date();lerp = thisTime - lastTime;for(var i=0,j=Planets.length;i<j;i++){Planets[i].update(lerp);}requestAnimationFrame(update);lastTime = thisTime;
}update();
</script>
</html>

用javascript伪造太阳系模型系统相关推荐

OpenGL/C++实战——C++实现太阳系行星系统
注:本教程版权归实验楼所有,有兴趣的同学也可点进官网蓝桥网课:C++实现太阳系行星系统学习(免费课程) 文章目录框架设计认识 OpenGL 和 GLUT 类设计 stars.hpp solarsy ...
C++ 实现太阳系行星系统（OpenGL）
基本框架设计一.介绍本次实验将使用 OpenGL GLUT 编写一个简单的太阳系运行系统. 实验涉及的知识点 C++ 语言基础基本的 Makefile 基本的 OOP 编程思想 OpenGL G ...
OpenGL实现太阳系模型 —— Juwend
OpenGL实现太阳系模型发表于 2012 年 12 月 30 日由 Juwend OpenGL是一个非常强大的图形引擎.传说当下最流行的图形引擎有两套,其中之一就是Windows平台上最常用的D ...
WxGL应用实例：绘制高精度的3D太阳系模型
文章目录 1 坐标系的选择 1.1 黄道坐标系 1.2 三维空间直角坐标系 2 使用JPL星历表计算轨道 2.1 日期时间 2.2 特定时刻天体的位置 2.3 天体运行轨道 3 太阳系模型 3. 1 ...
对标GPT-3、AlphaFold，智源研究院发布超大规模智能模型系统“悟道1.0”
出品 | AI科技大本营(ID:rgznai100) 3月20日,北京智源人工智能研究院发布我国首个超大规模智能模型系统"悟道1.0"."悟道1.0"由智源研究 ...
北京超前布局通用人工智能我国首个超大规模智能模型系统发布
原标题:北京超前布局通用人工智能我国首个超大规模智能模型系统发布北京超前布局通用人工智能发展获重要进展.北京智源人工智能研究院近日举办"智源悟道1.0 AI研究成果发布会暨大规模预训练模 ...
OSGI 面向Java的动态模型系统
OSGI (面向Java的动态模型系统) OSGi(Open Service Gateway Initiative)技术是Java动态化模块化系统的一系列规范.OSGi一方面指维护OSGi规范的OSG ...
OSGI(面向Java的动态模型系统)和它的实现Equinox
equinox 报错英 ['ikwnks; 'ekw-] 美 ['ikwnɑks] 全球发音跟读口语练习 n. 春分:秋分:昼夜平分点 OSGi(Open Service Gateway In ...
【理论篇】IC间通信的时序模型——系统同步、源同步和自同步
目录 1.系统同步 2.源同步 3.自同步有三种用于两个IC间通信的时序模型--系统同步.源同步和自同步. 1.系统同步系统同步:两片IC之间进行通信时,使用一个共用时钟,用于数据发送和接收. 如 ...

用javascript伪造太阳系模型系统

用javascript伪造太阳系模型系统相关推荐

最新文章

热门文章