zqh2945 / astro-simulations Goto Github PK

Astronomy Simulations and Animations

JavaScript/HTML ports of the Flash originals, found here: http://astro.unl.edu/animationsLinks.html (source files here: https://cse.unl.edu/~astrodev/flashdev2/)

• Small-Angle Approximation Demonstrator
• Lunar Phase Simulator
• Motions of the Sun Simulator
• Exoplanet Transit Simulator
• Eclipsing Binary Simulator
• Hydrogen Atom Simulator
• Gas Retention Simulator
• Circumstellar Habitable Zone Simulator

The original simulations are written in ActionScript 2.0. To open the .fla files, you'll need an older version of Adobe Animate than the current version (19.1). You can download a trial version of Adobe Flash Professional CS4 here and open the .fla files with this. Also, Flash Professional CS6 can also open these files. Adobe doesn't distribute Flash Professional anymore. The only way I've found to read the source files is by opening the .swf files in JPEXS Free Flash Decompiler .

To get to the code, go to Window -> Actions. The bottom-left panel should have the code hierarchy.

Here are instructions on how to develop and make changes to these simulations. If you're using Windows, replace the forward slashes with back-slashes.

• Install node.js
• Clone this repository
• Go into one of the simulations, e.g.: cd astro-simulations/lunar-phase-simulator
• Run npm install
• Run npm run serve
• Wait for the build to complete. It takes a while.
• Open http://localhost:8080 in your web browser.

You can also use the npm run dev command if all you want to do is make a development build of a simulation without using webpack-dev-server. Three.js has an overview of this in How to run things locally. Both npm run dev and npm run serve watch the src/ directory for file changes.

Here are some blog posts I've made about these simulations:

• How to animate graphical JavaScript programs
• How to make an analog clock (Part 1)
• How to work with Planes in three.js
• How to make a draggable dialog box in JavaScript
• How to Simulate Gas Particles With Matter.js

There's also the Conversion Guide that documents how to put together a new interactive.

Here are some links that may be helpful for development.

• WebGL Setup and Installation
• Three.js Fundamentals
• Learning Pixi