Inspiration
Our inspiration came from kids science books, other simulations and images found on the web.
What it does
Our project shows the Earth's rotation around the sun and it is interactive, meaning, the kids can play around with it. They can pause the animation and observe how the Earth is positioned at a certain time with respect to the Sun. We also provide some general information about the Earth that might be interesting for the kids such as fun facts and try to visually represent how the cycle of the Earth affects seasons.
How we built it
To build this project we used CSS, html, and javascript and the library p5.js. We mostly used CSS for the design of the webpage and html for the design and the information. Javascript was used to create the animation and interactions.
Challenges we ran into
First of all, this was the first hackathon for two of our members and three of our members are new programmers so there was a learning curve on how to divide the work and get used to work as a team. Then, our team was rusty in trigonometrical and vectorial applications which lead to many mathematical mistakes but after Google search we managed to refresh our memory.
Accomplishments that we're proud of
Catalina: I am proud of how easily and fast I was able to code the design. Matilda: I am proud of learning and participating since this experiences allowed me to learn a lot! Yi Ran: I am proud of figuring out how to make the Earth have an elliptical trajectory. Teresa: I am proud of keeping calm and being able to deliver a very good looking project.
What we learned
Catalina: I learned how to put GIFs as a background and how to incorporate better fonts in my design. Matilda: I learned how to calculate the position of elements in the canvas (considering a different coordinate system). Yi Ran: I learned how to animate my drawings (how to change the position of objects with time) Teresa: I learned how to use transforms in p5.js
What's next for The Sun and Earth system
We would like to have a integrated game regarding the seasons. We would also like to explore how to represent temperature in our platform.

Log in or sign up for Devpost to join the conversation.