Temporal Layers

Inspiration

Conway's Game of Life is our inspiration for this project. We wanted to tie in time somehow, so we added a 3D aspect to a 2D game!

What it does

Temporal Layers is a cellular automaton game where each cell (square) has parameters defined for whether it 'lives', 'dies', or 'resurrects'. However, this version comes with a twist: A third dimension! Traditionally, cells only interact with ones that are directly above, below, to the left, and to the right of itself. In Temporal Layers, they are able to interact with the cells behind and in front of them, represented by different layers!

How we built it

For the majority of the project besides some styling with CSS and additional elements in HTML, we used Javascript (specifically P5.js) for all of the rendering and logic. We started by creating a 'Cell' class, and initializing the game board, and that evolved into rendering cells, randomizing layer contents, creating custom gradients, defining rules and logic for cells, and more!

Challenges we ran into

Being able to visualize 3D ideas in a 2D space is quite challenging. However, we wanted it to keep the same simplicity in design as Conway's Game of Life, while also having more advanced logic, which is why we kept it in 2D.

Accomplishments that we're proud of

We are proud of our game's ability to demonstrate the 3D aspect of the simulation while staying within the confines of a 2D environment. This was achieved by giving each layer a different color from a gradient. On top of that, it also had the ability to loop between all layers which helped to visualize how changes in one layer permeate to another.

What we learned

"I personally did not know almost anything about P5.js, or really Javascript in general, so I learned a lot about it! There were a lot of unique traits it had. Coming from a background of mostly Java, not needing to put semicolons after every line was very strange, especially since its syntax is pretty similar." - Justin J.

"I learned about project management and how to manage goals on a time crunch. When we started I had feature creep before even displaying a pixel. During this project I was able to learn to better stay focused and get the primary objective complete before adding more to do." -Jackson C.

What's next for Temporal Layers?

Perhaps we could develop a 3D environment, and enable the user to be able to switched between simple (2D) and advanced (3D) view. Adding the ability for the user to create custom rules, making the bounds infinite, etc. There's so many possibilities!

Built With

• css
• html
• javascript
• p5.js