Conway's Game of Life and Other Lifelike Cellular Automata Rules

This simulator visualizes Conway's Game of Life and other lifelike cellular automata rule-sets.

Features:

• You can choose from any of the preselected birth/survival thresholds or specify custom thresholds ad hoc.

• You can click on cells to toggle them from alive to dead and vice versa.

• You can manually step through the generations with the "Next Step" button or click "Auto Play" to watch your life advance on its own.

• You can change the speed of the autoplay.

• You can randomly seed the world with life of a specified density.

• Recently deceased cells leave a visible trail that fades with every passing generation

Implementation Details:

• I'm using a two-dimensional array to track the map and live/dead status of the cells

• I'm drawing the cells on the screen using a 2D canvas

• At the advancement of each generation, I loop through all cells and for each cell check the sum of its live neighbor cells to determine whether it is born (if dead) or survives (if alive)

Where I'd like help:

• Performance optimization: anything I can do to improve performance (especially on larger maps and low-memory machines) without sacrificing the above features (potentially giving the user the option to toggle features that impact performance)

• Would it be beneficial to use requestAnimationFrame instead of setTimeout? What would be the benefits?

• Conforming to best practices and eliminating code smells

`'use strict';
(function() {
let cellSize = 8,
cellBorderWidth = 1,
height = getSize(),
width = getSize(),
life = [],
delay = getDelay(),
canvas = document.getElementById("output").appendChild(document.createElement("canvas")),
birthThresh = [3],
survThresh = [2, 3],
running = null,
chkBirth = document.getElementById("BirthThresholds").querySelectorAll("input"),
chkSurvival = document.getElementById("SurvivalThresholds").querySelectorAll("input"),
thresholdPicker = document.getElementById("thresholdPicker"

As I'm currently on break on my phone, this will be superficial. I glanced it over, and 2 main things stood out to me:

-
You have a fair number of "magic numbers"; numbers loose in your code without an obvious meaning. The most notable example I saw was let wrinkles = 185 +.... Why 185? Simply giving this number a name would help with maintainability. Are you going to remember what this number means when you come back in a year?

-
You seem to be using +s as a means of casting strings to ints. This is a new one for me, and it took a second to realize what you were doing. If this is idiomatic JS, disregard this point. I think a more explicit cast using parseInt would be better though.

StackExchange Code Review Q#150312, answer score: 3