r/learnjavascript • u/codeobserver • May 01 '19

Solar system simulation using JavaScript

262 Upvotes

98% Upvoted

22 comments sorted by

12

u/codeobserver May 01 '19

See code in JavaScript playground: https://codeguppy.com/code.html?planets

4

u/octaw May 02 '19

That is awesome. Math like that blows my mind.

1

u/codeobserver May 02 '19

The code makes use of Polar Coordinates. There are a few example of Polar Coordinates on codeguppy.com ...

2

u/codeobserver May 02 '19

Thanks all for the nice comments. Feel free to "remix / save-as" the code if you want ;-)

1

u/albertothedev May 02 '19

Is it okay for anybody to edit/use your code?

3

u/codeobserver May 02 '19

Absolutely!!! Please feel free to edit and re-share your code.

5

u/merdianii May 02 '19

Well, good job man.

Watching this project from you makes me forget about login popups I made lol

4

u/[deleted] May 02 '19 edited May 02 '19

Here's the same thing without any JavaScript at all, just CSS:

https://jsfiddle.net/k1rzxumv/

Oh and the planets rotate too. =)

1

u/j_sidharta May 02 '19

I didn't think you could do something like this without js. Amazing!

1

u/throwies11 May 02 '19

For future reference you can set border-radius: 50% to all square objects that you want to make circular, regardless of their size in pixels.

1

u/[deleted] May 02 '19

For sure! This is something I hacked together in a hurry. It can most certainly be greatly improved.

1

u/riskybusinesscdc May 02 '19

Can you explain what's going on in your keyframe CSS?

2

u/[deleted] May 02 '19

Sure.

100% { transform: rotate(360deg); }

Whenever any ongoing transformation is complete (or when the element is first rendered) the transform property, which is responsible for any movement/animation, is getting set to rotate(360deg), which then takes this element and rotates it full circle.

3

u/[deleted] May 02 '19

When I see this beautiful thing. I tell myself that I am not intelligent. Then I keep pushing myself to get better at programming.

2

u/ENx5vP May 02 '19

You got my upvote but why not using ES6?

2

u/zampoukos May 02 '19

Interesting. You included Pluto in your planets array.

Just kidding, great work!

1

u/albertothedev May 02 '19

This is awesome!

1

u/jaymcdan May 02 '19

Amazing. For all the table models I've seen, I've never until now grasped the huge differences between the inner and outer orbit times.

0

u/[deleted] May 03 '19

[deleted]

2

u/codeobserver May 04 '19

enter() is an event handler for the program. It is automatically called in codeguppy when that particular scene is displayed (only once per scene).