Uprooted

A game of survival, transformation, and twists.

Comment

Inspiration

“At least 1 dead and hundreds of thousands without power as bomb cyclone slams Washington state, British Columbia” a headline reads. Last November, the Pacific Northwest, astoundingly, received a cyclone. Power lines fell down, leaving many of us without power. Schools were canceled, leaving us nothing to do.

However, as we lamented the loss of hot water and the internet, did we once consider that we humans possibly were not alone in our strong feelings towards severe weather?

Another headline, albeit in a paper, reads: “Effects of cyclones…been linked to site productivity, forest diversity and tree life history traits”

Humans are not the only victims of weather. Cyclones spreading plant seeds, heatwaves depriving plants of their vitality, tornadoes brutally ripping up roots: the plant perspective too often is overlooked.

The purpose of this project is to shed light on the neglected, but important plant perspective.

How we built it (The Technical Stuff)

We decided to build this project with HTML, JavaScript, and CSS since these languages are extremely versatile. In addition, using a simpler language allowed us to focus our attention on the complex technical aspects of this project.

Determining Mutations

DNA, the genetic code, is composed of a sequence of nitrogenous bases (either Adenine, Guanine, Thymine/Uracil, or Cytosine). During cell division, when a parent cell becomes several daughter cells, the mechanisms that copy DNA can err, resulting in small changes that can have big effects. For instance, Sickle Cell Anemia, a deadly genetic condition, is caused by swapping an Adenine for a Thymine.

In programming, the phrase “small changes that cause big effects” is associated with hashing functions. In order to accurately simulate mutations, we created a mock DNA sequence for every plant and designed a modified polynomial hash (https://usaco.guide/gold/hashing) to produce a decimal between 0 and 1.

diagram

Creating the Mutation Interface

When a mutation occurs, users have the ability to see exactly where and how the genetic code was modified through an animated interface. We wanted this to look nice, so we first designed it in the designing tool Figma. We exported the design to an SVG. In order to make the interface interactive, we modified the SVG directly by using JS to change text and element positions. This made for a more clean implementation (in our opinion) than if the interface were created with pure HTML.

Phylogenetic Tree

The Phylogenetic Tree is created using the Treant.js library, which was an absolute pain to figure out since it was created in 2014, but the end result looks pretty good

How Species are named

The species are named to somewhat follow the binomial nomenclature convention where the genus and species names are placed next to each other (i.e., Homo sapiens). Originally, we wanted to simply generate two random words and tack them together, but this created some rather inappropriate combinations at times.

In order to make the names completely appropriate, we switched to Faker.js, a library that generates things like fake names and foods. Now, the species are named as a food followed by a unit (e.g., hertz, meter)

Individual Specimens

Each individual plant specimen has genome stats based on their DNA, which each stat ranging between 0 and 1 as mentioned before:

  • Water Storage - Determines a plant’s total water capacity
  • Water Affinity - Determines a plant’s ability to collect water
  • Heat Resistance - Makes plant cooling and heating more efficient
  • Anchorage - Allows plants to resist being blown away in the wind
  • Competitiveness - Allows plants to overpower their neighbors and resist vice versa
  • Photosynthesis Rate - Larger leaves for energy collection
  • Size - Self Explanatory. Affects competitiveness
  • Seed Size and Seed Count - Affects number of seeds and energy devoted to each seed

These go on to affect the plants’ health attributes during metabolism. Plant metabolism can be considered a set of equations that determines how a plant’s health attributes- their current water level, energy level, and temperature- should change each tick. The plant’s genome attributes act as coefficients in these equations. Plants with different genomes can do better in different habitats, and tolerate different weather events.

Note that each genome attribute has a cost: for example, larger leaves for better photosynthesis result in a higher drag force by the wind, making hurricanes more dangerous. They also lose more water and absorb more heat. Virtually every beneficial trait comes with an energy cost during growth.

We dedicated a Specimen Panel to view individual specimens living in their changed weather environments. It includes multiple table elements that list out the plant’s genome, health attributes, and environment, and a canvas element where the specimen is drawn.

The shape of the plant is affected by both its genome and its health- for example, plants with stronger anchorage are shown with deeper taproots, and plants with more water stored have thicker roots and stems, plus will also look greener. Plants with better photosynthesis are shown with larger leaves. Lastly, plants will also shake while they are blown in the wind. When a plant’s water level becomes too low, it can be seen wilting, darkening, and dying. If a plant is uprooted by the wind, it disappears from the panel to signify it being blown away.

The most challenging aspect of this was drawing the plants’ branches- which required using a method similar to Breadth First Search of a binary tree, as well as the importing of a Queue() class from a third-party resource (GeeksForGeeks). Another third party function was the Seeded Pseudo-Random Number Generator, the SplitMix32, which was used to add variation in each plant’s shape.

Map

We took data from different datasets and compiled them into a map of the biomes. Our map is split into a 800x410 set of “tiles.” Each tile has the following attributes:

  • Sun Exposure - Calculated via latitude and biome
  • Surrounding temperature - Calculated via latitude and biome
  • Soil Water - Set per biome
  • Wind - A random variable
  • Weather - Weather events occurring on each tile. Calculations by latitude are calculated through multiple functions by using regression. Each organism lives on a 10x10 tile “competition tile.” Multiple organisms on that tile will compete against each other for resources.

The map is drawn with 3 layers. The first layer is the map itself, which includes the biomes and water, the second one contains all the species attributes (each specimen, the tiles they are on, seeds), and the third contains all weather phenomenon (selecting, choosing, looking at weather.

Weather

Once we came up with a list of weather events, we began programming them. Each weather events have the following attributes:

  • Range - Range of event
  • Time - How long the event lasts
  • Type - Wind, Weather, or Climate events Each weather event also directly affects the attributes of each tile within range of the event (look at the Map information). Wind events like hurricanes and tornadoes are able to rotate the wind attributes of the tiles around it, and can “uproot” plants on each tile.

Challenges we ran into

We had some issues with performance, due to the nature of how our project has so many moving parts (each individual specimen, their seeds, each tile and their attributes, mutations, evolution). However, what we decided to do is make it so we pre-process a lot of redundant calculations and graphics when the game is being initialized. For example, the biomes map (first layer of the map canvas) is entirely processed once at the start of the game as an offScreenCanvas(), in order to keep the game running smoothly.

In addition, since this hackathon took place during a school break, all of our members had to travel, forcing us to code in unusual conditions such as on the plane without wifi, on a long car ride, etc. Indeed, at one point while we were working on this project, all three members were in different time zones, making collaboration difficult.

Accomplishments that we're proud of

We are certainly proud of how we can draw the specimen in the specimen panel, as well as the code and math to do mutations and evolution. All these took a while to master, and in general we are really proud of the result

What we learned

By working as a team, we learned many things both about Javascript as well as different ways of programming. In terms of raw programming, we were able to collectively share different aspects. For example, when faced with the performance issue, one member was able to introduce the idea of offscreen canvases in order to save on processing times. Additionally, when working on mutations, another member was able to come up with an idea of using a polynomial hash. Additionally, we used tools new to us, such as Faker.js, which generates (often comically) names for our new species..

What's next for Evolution

In the future, something that could be worked on is adding more weather events like tsunamis, and improving some miscellaneous functions such as automatic weather and evolution.

Built With

Share this project:

Updates