Automata Theory: Finite-State Machine Visualizer (2D)
A deterministic finite automaton reads an input string symbol by symbol on a flat 2D state diagram: states light up, transitions animate along curved edges, and the machine accepts or rejects live.
This 2D companion drives the exact same deterministic-finite-automaton logic as the 3D version — the same three transition tables, the same δ-lookup loop — through a flat Canvas2D state diagram instead of an orbitable scene: a read-head token travels each curved edge as the input string is consumed, the current state turns yellow, accepting states carry a green ring, and the result panel reports Accepted or Rejected the instant the string runs out.
Deterministic finite automaton visualizer: pick a DFA (ends-with-01, even zeros, contains-11), feed it a binary string, and watch the transition function δ applied one symbol at a time on a 2D state graph.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install
A DFA is a 5-tuple (Q, Σ, δ, q0, F): a finite set of states, an input alphabet, a transition function, a start state and a set of accepting states. It reads a string one symbol at a time, applying the transition function until the string is exhausted, then accepts if it lands on an accepting state.
The state graph and every transition rule are identical — only the rendering changes, from an orbitable Three.js scene to a flat Canvas2D diagram drawn directly from the same automaton definitions and transition-lookup logic.
Yellow marks the current state and the travelling read-head token; green rings mark accepting states; blue edges are transitions on symbol 0 and orange edges are transitions on symbol 1.