Minimap and QoL

After a few busy days at work, I’ve finally made progress on AlGOL! A minimap of the current viewing area appears when the map is dragged or zoomed, it can be toggled and adjusts according to wrapping.

Also added zoom hotkeys that zoom precisely on the centre for ease of access.

Temporary deployments can be found at https://rayzchen.github.io/algol/

Wrapping

There is now an option to enable/disable grid wrapping, so cells on the edge of the map will die off. Produces interesting results!

Also added a button to reset the view to the middle of the map in case the user gets lost in the unwrapped grid.

Temporary deployments can be found at https://rayzchen.github.io/algol/

RLE PATTERN LOADING!

There are three default patterns that can be loaded into the map: glider, glider gun, and breeder1 (a glider gun breeder). The map has been expanded to 2048x2048 which may have terrible performance at faster simulation speeds :(

Color themes have also been added (currently only blue/green or black/white).

Temporary deployments can be found at https://rayzchen.github.io/algol/

Performance and UI improvements

Rendering is now disabled when the simulation is paused, which makes moving around really smooth!

The side panel now shows the current zoom level and some keybinds for the buttons.

Temporary deployments can be found at https://rayzchen.github.io/algol/

Better controls

The slider now has larger segments for more common speeds (1-5 frames per second, 1-5x speed) for better usability, and now there’s a play/pause button and a step button to view individual generations!

https://www.desmos.com/calculator/3ipfxfsmlu contains some of the math for the slider

Temporary deployments can be found at https://rayzchen.github.io/algol/

Click+drag!

The map is now larger than just the screen, and click+drag works to explore the whole (repeating) map!

Temporary deployments can be found at https://rayzchen.github.io/algol/

Simulation speeds

Changing the “Iterations” slider will change the number of steps the simulation goes through each frame. The code runs slow on mobile for some reason but performance doesn’t drop too much even with 32x iterations on desktop

edit: most of the logged time was spent making optimizations in the shaders, will have to investigate mobile later

Basic GUI

Added a few user interaction elements such as toggleable GUI, FPS counter and some frameworks to add more panels

Colour

Cells now fade and change colour when they form and die.

Game of Life rules

Implemented the rules of Game of Life:

• Each cell is either “dead” (black) or “alive” (white)
• If an alive cell has more than 3 alive neighbours it dies of crowding
• If an alive cell has less than 2 alive neighbours it dies of loneliness
• If a dead cell has exactly 3 alive neighbours it becomes alive

Each frame is then decided based on the state of the previous.
You can see some “glider” patterns emerging from the randomly generated soup!

Setup

First time using WebGL, so I had to look at the mdn documentation quite a few times to understand the syntax. Pink screen.