Menu

Wildfires

Visit Site

December 2016

Wireframes, HTML, CSS, JavaScript, Three.js, Adobe Photoshop, Cinema4d

Prompt: Create an interactive 3D website to raise awareness about one of the impacts of climate change.

During the 2016 Fort McMurray wildfire, my extended family was uprooted, and we waited in distress to hear that they evacuated their homes safely. After knowing they were safe, we waited again, wondering if their homes and livelihoods would still be there to return to. Thankfully, my family and their homes were safe, but many were not.

Because of this situation, I became more aware of wildfires and how climate change has increased the amount and severity of them. I chose to focus my project on educating people on the direct impact climate change has on wildfires, and the forecasted effects wildfires will have on humans.

Research

At the outset, secondary research was conducted on news articles about wildfires internationally. This was then concentrated and focused on Canada, using the Canadian Wildland Fire Information System. This focused on data about Canadian wildfires in the past 20 years. The main points from this research were that:

Flowchart

Before creating wireframes, the research was applied in a flowchart to map out how the interface would work, and what specific text would appear to the user. This informed the site's functionality.

Wildfires website style tile

Style Tile

The initial concept for the interactive site was a slider so that users could slide between and see the difference between years. However, this narrative didn’t communicate the irreversible nature of climate change.

To better narratively communicate the permanent changes resulting from climate change, the UI was changed from a slider to a button, as it would move the timeline forward in fixed increments, and unable to go backward.

Wireframes

The initial concept for the interactive site was a slider so that users could slide between and see the difference between years. However, this narrative didn’t communicate the irreversible nature of climate change.

To better narratively communicate the permanent changes resulting from climate change, the UI was changed from a slider to a button, as it would move the timeline forward in fixed increments, and unable to go backward.

Concept art of interactive wildfires site in year of 1995
Concept art of interactive wildfires site in year of 2020
image of rendered 3D model scene

3D Modeling

To animate and integrate the elements in the web, I created 3D collada models of a low poly tree, house, and tundra mountain in Cinema4D. This allowed the collada models to be imported and manipulated using three.js and JavaScript.

Additionally, a transparent fire image was created in Photoshop to apply to a particle cloud, giving the site the effect of animated fire.

render of coniferous tree 3D model
render of house 3D model
render of tundra mountain 3D model
render of fire image