Cellular automata are a class of models used to simulate complex systems. They are used in a wide range of applications, including modeling the spread of diseases, traffic flow, and crowd behavior. This project is a one-dimensional cellular automata.
We start with an initial row. In this app, the row is a series of white squares followed by a single black square and more white squares.
A cell is created based on the state of the three cells above it (directly above and to the left and right). That means there are eight possible combinations of the three cells. We consider a white square to be a 0 and a black square to be a 1. This gives us a number between 0 and 7 (the cell update number).
The rule is a number between 0 and 255 (inclusive). We take that number and convert it to its binary representation, which will be a sequence of 8x 0s and 1s. We look at the corresponding digit in the rule by taking the cell update number. If it is a 1, the cell becomes black; if it is a 0, the cell becomes white.
The cellular automata is visualized as a grid of white and black boxes, representing the 0 and 1 states, respectively.
The app provides three main inputs:
hx-trigger attribute every .1s. This triggers a GET request until we run out of generations, and then the Response(status_code=286) stops the polling. See the HTMX documentation for pollingThe app uses FastHTML to define routes and handle the cellular automata logic on the server. Key routes include:
/: The main page that renders the initial form and explanation./run: Initializes and runs the cellular automata based on user input./next: Generates the next row of the automata./validate/*: Handles input validation for rule number, generations, and width./show_rule: Toggles the display of the rule visualization.The automata state is managed server-side using a generator function:
generator: A global variable that stores the cellular automata generator for each session.run(): A yields each automata generation.HTMX is used extensively to create a dynamic user interface:
hx-get attributes trigger GET requests for various actions, such as running the automata or showing/hiding the rule.hx-post is used for inline validation of user inputs.hx-target specifies where the response from the server should be inserted.hx-swap determines how the new content should replace the old content. Various swap methods are used, including outerHTML and beforeend.hx-trigger="every .1s" creates an animation effect by periodically requesting new rows.