Skip to content

Instantly share code, notes, and snippets.

@briehanlombaard

briehanlombaard/aframe.html

Last active May 28, 2018 14:54
Show Gist options
  • Save briehanlombaard/ad495dd3e491399893c580e36bb63f09 to your computer and use it in GitHub Desktop.
Save briehanlombaard/ad495dd3e491399893c580e36bb63f09 to your computer and use it in GitHub Desktop.
Download ZIP
sol
Raw
aframe.html
<!DOCTYPE HTML>
<html>
<head>
<title>sol</title>
<script type="text/javascript" src="/static/js/socket.io.slim.js"></script>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var socket = io();
socket.on('tick', function(c) {
requestAnimationFrame(function() {
document.getElementById('earth').object3D.position.set(
c.earth.x,
0, //c.earth.y,
c.earth.y, //c.earth.z,
);
document.getElementById('moon').object3D.position.set(
c.moon.x,
0, //c.moon.y,
c.moon.y, //c.moon.z,
);
document.getElementById('mars').object3D.position.set(
c.mars.x,
0, //c.mars.y,
c.mars.y, //c.mars.z,
);
document.getElementById('time').setAttribute('value', c.t);
});
});
};
</script>
</head>
<body>
<a-scene style="background-color: #000; background-position: center; background-repeat: no-repeat;">
<a-sky src="http://cortex.io/sol/2k_stars.jpg"></a-sky>
<a-entity light="type: directional; color: #EEE; intensity: 1000;" position="-1 1 0"></a-entity>
<a-camera position="0 3000 0" rotation="-90 0 0" look-controls wasd-controls="acceleration: 50000;">
<a-text id="time" position="0 0 -1" rotation="0 0 0" color="#ffffff" height="1" width="1" value=""></a-text>
</a-camera>
<a-entity id="sun" position="0 0 0" geometry="primitive: sphere; radius: 30; segmentsHeight: 100; segmentsWidth: 100;" material="src: http://cortex.io/sol/2k_sun.jpg; shader: flat;">
<a-animation attribute="rotation" dur="3000" from="0 0 0" to="0 360 0" repeat="indefinite" easing="linear"></a-animation>
</a-entity>
<a-entity id="earth" rotation="0 23 0" scale="1 1 1" position="0 0 0" geometry="primitive: sphere; radius: 30; segmentsHeight: 100; segmentsWidth: 100;" material="src: http://cortex.io/sol/earth_atmos_4096.jpg; shader: flat;">
<a-animation attribute="rotation" dur="3000" from="0 0 0" to="0 360 0" repeat="indefinite" easing="linear"></a-animation>
</a-entity>
<a-entity id="moon" scale="0.2727 0.2727 0.2727" position="0 0 0" geometry="primitive: sphere; radius: 30; segmentsHeight: 100; segmentsWidth: 100;" material="shader: flat;">
<a-animation attribute="rotation" dur="3000" from="0 0 0" to="0 360 0" repeat="indefinite" easing="linear"></a-animation>
</a-entity>
<a-entity id="mars" scale="0.5320 0.5320 0.5320" position="0 0 0" geometry="primitive: sphere; radius: 30; segmentsHeight: 100; segmentsWidth: 100;" material="src: http://cortex.io/sol/mars.jpg; shader: flat;">
<a-animation attribute="rotation" dur="3000" from="0 0 0" to="0 360 0" repeat="indefinite" easing="linear"></a-animation>
</a-entity>
</a-scene>
</body>
</html>
Raw
app.py
from threading import Lock
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
from astropy.coordinates import solar_system_ephemeris, get_body_barycentric
from astropy.time import Time, TimeDelta
SCALE = 100000
solar_system_ephemeris.set('jpl')
app = Flask(__name__)
socketio = SocketIO(app)
thread = None
thread_lock = Lock()
def tick():
count = 0
while True:
t = Time.now() + TimeDelta(86400 * count, format='sec')
mars = get_body_barycentric('Mars', t)
earth = get_body_barycentric('Earth', t)
moon = get_body_barycentric('Moon', t)
socketio.emit('tick', {
'earth': {
'x': round(earth.x.value / SCALE, 2),
'y': round(earth.y.value / SCALE, 2),
'z': round(earth.z.value / SCALE, 2),
},
'moon': {
'x': round(moon.x.value / SCALE, 2),
'y': round(moon.y.value / SCALE, 2),
'z': round(moon.z.value / SCALE, 2),
},
'mars': {
'x': round(mars.x.value / SCALE, 2),
'y': round(mars.y.value / SCALE, 2),
'z': round(mars.z.value / SCALE, 2),
},
't': str(t),
})
socketio.sleep(0.01)
count += 1
@app.route('/')
def index():
return render_template('aframe.html')
@socketio.on('connect')
def on_connect():
global thread
with thread_lock:
if thread is None:
thread = socketio.start_background_task(target=tick)
if __name__ == '__main__':
socketio.run(app)
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>sol</title>
<style type="text/css">
html, body, canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="/static/js/socket.io.slim.js"></script>
<script type="text/javascript">
function draw(ctx, c) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
ctx.fillText('\u2609', 0, 0);
ctx.fillText('\u2642', c.mars.x, c.mars.y);
ctx.fillText('\u2641', c.earth.x, c.earth.y);
ctx.fillText('.', c.moon.x, c.moon.y);
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
window.onload = function() {
var canvas = document.getElementById('canvas');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
var ctx = canvas.getContext('2d');
ctx.font = '32px serif';
var socket = io();
socket.on('tick', function(c) {
requestAnimationFrame(function() {
draw(ctx, c);
});
});
};
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
Raw
requirements.txt
astropy==3.0.2
eventlet==0.23.0
Flask==1.0.2
Flask-SocketIO==3.0.0
jplephem==2.7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment