Another day another project. This one tackles one of my insecurities… Design. Yes, whenever I have a project that deals with some art I get so nervous and anxious one might think I’m giving a speech [which is much more comforting that design] Anywho, I need to face this. I’ve been meaning to do a project that deals with the solar system for some time now, and what better time than now.

My first step is designing the graphics. I used Sketch to do the graphics, one reason is its simplicity and the simple interface. I’m not going to lie, designing these silly planets took so long and for god’s sake, they were only shapes! I need to remind myself “Baby steps Athoug, baby steps”. but finally, after some hours I had them ready!

Now it’s time for where I shine, coding! First I prepared the stage

Then slowly populate it with Planets

And this is where I hit a slump. How do I rotate Mercury around its axes? After some googling and 5 articles later, we got closer

okay let’s fix the animation a bit and playing around with the translate value

oh, come on! Okay, okay let’s really work on the math and not just through numbers in

Yay! Okay now I want to have some info about the plant when hovered on so let’s get working on that

Yay now let’s have it work when the planet actually moves.

Hey, come here. Stop, wait. Oh brother can’t I for once do a project with no errors [HA yeah sure that will happen] okay another session of googling and

[happy dance!] Now let’s create the universe, shall we.

Adding the final touches to complete this project

Not bad if I say so myself. You can check out the final result here. Sorry for the short progress I actually live updated the project on Instagram and got carried away. If you would like to check my progress live you can follow me on Instagram. This was a fun one.

Now a list of the helpful resources for this project:

What have you guys been working on? I’d like to know.

If you’re reading this. You are awesome for keeping it until the end. [virtual hug]

Happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *