Our main inspiration behind Colexo was the increasing push for the colonization of new planets, with Mars as our reference point. We aimed to create an experience that takes the users through a journey of equilibrium and balance, forming a future home for humanity.

What it does

Colexo allows any user on the Internet to collaborate and slowly make changes to the planet on the website. Using custom-made assets, the planet shifts between phases depending on how its water content, flora levels, albedo, and oxygen content are changed.

Upon reaching the maximum habitation level, the planet is listed as complete, and a potential rocket animation will be shown.

How we built it

Colexo is made up of a few main components.

The first component is the 3D viewer for the planets, and we displayed it using p5js and some clever mathematics to make the planets rotate by default. Next, we use several data tables and dictionaries that determine what planet characteristics are possible at specific stages. We used classes and button clicks to control changes to the planets, and changes are animated based on a global timer. The front-end is composed primarily of HTML/CSS, and the back-end is composed of Javascript.

We also have over 30 base images that we created in order to display ever-changing water and flora levels. In order to create the assets used for the planets and logo design, Adobe Photoshop and Adobe Illustrator were the main tools of choice.

Challenges we ran into

Short answer: Pretty much the entire project

Long answer: The main challenges we faced were related to updating the images and animations to match our database, and ensuring that the transitions to and from the animations were smooth. Getting the display to work in the first place was also challenging, but we managed to make it work given enough time. Another key problem that we had was getting the web-page to update universally, and unfortunately we weren't quite able to deploy that feature in time for submissions.

Accomplishments that we're proud of

What we learned

Vedaant: I learned how to code in Javascript, which was essentially completely new to me, and I got to a relatively proficient level (up to understanding syntax and creating classes and functions). I also generally got to learn new graphic design techniques and tricks when it comes to making logos and planet graphics. It was pretty interesting to learn how noise can be applied to images to achieve terrain-like features. 3D projection was also something I got to learn more about. Lastly, I enjoyed messing around with data tables and trying to create a balance which the user would try to achieve with Colexo.

Vishnu: I learned how to do a lot more front-end development, specifically creating animations. I also got to learn a whole lot more about Javascript, which is a fairly new language for me. In general, I definitely gained a deeper sense and intuition for graphic and web design, and I'm looking forward to improving even more.

Christina: Since I did a lot of the work on the back-end, I had to learn how to use p5.js, and it was an interesting challenge to link up all of the functions to get the desired animations. Almost every characteristic that we control is interdependent, so representing that in code was something that I had to learn/improve upon.

Altogether: We all learned about some of the key factors for making a planet habitable, and we gained a deeper understanding of how all of them are linked. We hope that we were able to create a unique visual representation of that through our website, and that others can learn just as much as we did.

What's next for Colexo

Currently, the global online features aren't fully functional for Colexo, and improving upon that is the natural next step. Additionally, the CSS responsiveness of the website is limited, so that can be developed upon. In general, we want to be able to leverage more advanced computer-generated techniques for our planet graphics, potentially being able to procedurally generate starting planets.

Currently, once the "Habitation %" reaches the maximum, the planet is reset to its original state. However, we would like to get it to a point where a random planet is generated at each iteration. Additionally, since there are unique ways to obtain higher and higher population capacities, we would like to keep some sort of leaderboard or record of progress.

+ 2 more
Share this project: