About Square Fill

Square Fill is a minimalist procedural art generator that visualizes a simple stochastic process. The tool presents a uniform grid of cells, initially rendered in white (typically sRGB^[16] #FFFFFF), which are then incrementally and randomly filled with black (sRGB #000000). This process continues until the entire grid is filled, providing a stark visual representation of entropy increasing within a closed system. It serves as a fundamental example of procedural generation^[11], where complex-seeming patterns emerge from a simple set of rules and random inputs, creating a unique sequence for every session.

The core of the tool's behavior is its random selection mechanism, which almost certainly relies on a pseudorandom number generator^[12] (PRNG). Most web browsers implement `Math.random()` using algorithms like xorshift128+ or the Mersenne Twister^[9], which produce sequences that are statistically random but ultimately deterministic. For applications requiring higher-quality unpredictability, browsers provide the Web Cryptography API^[20], which can access more robust entropy sources than a simple PRNG seed. This contrasts with true randomness derived from physical phenomena, as captured by a hardware random number generator^[7].

The display area is a regular grid^[14], a discrete Cartesian space that is a foundational structure in computer graphics and scientific modeling. While the tool's operation is a simple stochastic process^[18], the grid structure is shared with the more complex domain of the cellular automaton^[2] (CA). CAs, pioneered by figures like John von Neumann^[8] and Stanisław Ulam^[17], evolve based on deterministic rules applied to a cell's neighbors. Square Fill, by contrast, has no concept of neighborhood or state evolution; each cell's change is an independent random event, making it distinct from famous CAs like Conway's Game of Life^[3].

From a technical standpoint, rendering such a display is most efficiently handled using the HTML Canvas^[6] element and its 2D rendering context^[21]. This imperative, bitmap-based API is optimized for drawing a large number of simple shapes and pixels without the overhead of a scene graph. Alternative implementations using Scalable Vector Graphics^[15] (SVG^[22]) or direct manipulation of the Document Object Model^[5] (DOM^[23]) are possible but would incur significant performance penalties due to the overhead of managing thousands of individual objects. The animation's timing is best controlled with `requestAnimationFrame`, which synchronizes drawing operations with the browser's repaint cycle, ensuring smooth visuals and efficient use of CPU resources.

Conceptually, the filling process is a direct visualization of a discrete uniform distribution^[19], where each cell has an equal probability of being selected at any given step. It can also be viewed as a cumulative Bernoulli process^[1], where each trial (a cell selection) results in a permanent state change. The visual clustering that emerges is a topic studied in percolation theory^[10]. As the grid fills, the rate of finding an empty cell decreases, a phenomenon mathematically described by the coupon collector's problem^[4], which predicts the expected number of trials needed to collect a full set of unique items.

How to Use

1. 1. Load the Square Fill tool in a modern web browser.
2. 2. Observe the initial state: a clean, uniform grid of white cells.
3. 3. Watch as the tool randomly selects individual cells and fills them with black.
4. 4. The process continues over time, with the fill rate appearing to slow as fewer white cells remain.
5. 5. The animation completes when every cell in the grid has been filled.
6. 6. To begin a new, unique sequence, simply refresh the page.

Frequently Asked Questions

About Matt George

I'm Matt George, a software engineer in the startup space. I run my own shop building software for early-stage founders, and I love making free tools and experiences that people actually use. Enjoy using Square Fill!