Terraforming Mars

Terraforming Mars

Contributions

  • Front-End Development in React, Next.js, MongoDB
  • Data Visualization in D3.js
  • Design and Layout in HTML/CSS
  • Coordination with Back-End

Role

Ludens Theatre Company makes interactive immersive productions that place the audience at the center of the action. With game mechanics, they offer their community the opportunity to shape their experiences every single night. They hired Diana and I as contract developers to build a tabletop game-like application for a live theatrical event.

Diana took the role of back-end developer while I managed the 'board' interaction on screen. I used a combination of D3 and SVG to generate hexagon game tiles that would react to persistant game state.

Here's a creative coding sketch I used to generate the game tiles

https://observablehq.com/d/4faebd3eb5fa402c

To preserve interactivity and dynamic content, I used CSS and SVG filters to position a map of mars as a mask over the svg.

The Actors page provides the operator with an interface to start/stop the game clock, as well as provide resources and update the maps with alerts, events, and buildings