Inspiration
We wanted to make an interactive way to measure your daily sustainability habits and compare them to your friends. People are by nature a bit competitive, so we thought we would turn that competitive nature into something productive for the environment.
What it does
The user inputs their daily sustainability habits and these inputs are taken and transformed into a fractal tree that is shown to the user. How big and healthy the tree depends on what the user did during the day. Along with the tree, tips are given for improvement in their habits.
How we built it
We used CSS and HTML for the front end of the data collection side of the program, with JavaScript on the back end. Then, once all the data was collected, Canvas HTML5 was used to create the transition explosion and create the tree, which is a fractal with changing colors, widths, and lengths for each branch.
Challenges we ran into
Brainstorming ideas proved to be difficult to get the project started. Furthermore, one of the group members had only rudimentary knowledge of HTML and JavaScript.
Accomplishments that we're proud of
The tree is an accurate representation of the user's daily sustainability habits, and the tree looks simple, yet visually appealing, and seems to appear out of nowhere from the explosion.
What we learned
We gained valuable knowledge of the HTML and JS languages through the research done for our project. We became better at using recursion for the fractal tree and got better at taking user input through multiple steps.
What's next for Tree Grower
In the future, we plan to make an entire interactive biome to surround the tree. We also would like to make an online version to compare with your friends and be able to save your previous day's tree.
Log in or sign up for Devpost to join the conversation.