Game of Life (Possibly)

100%

Game of Life (Possibly)

✓ Published0🌍 Public

Last edited Dec 8, 2020

Created on Dec 7, 2020

A grid of 10 by 5 cells displays Conway's Game of Life, with each cell toggling between alive (yellow) and dead based on neighbor counts. The simulation updates every two seconds, using a random Bernoulli distribution (d3.randomBernoulli) to generate the initial state. React hooks manage the cell matrix state, while SVG rectangles render the grid within a VizContainer. The code implements the game rules through countNeighbors and go functions, using setInterval for animation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Conway's Game of Life

The example implements Conway’s Game of Life on a 64×128 SVG grid, rendering each cell as a rectangle. It shows cellular automaton patterns evolving over time under the standard birth, survival, and death rules, with controls to select sample patterns, start or pause simulation, and edit the grid by clicking cells. The JavaScript uses D3 v3 to bind grid data to SVG rects and to update fills, while the simulation logic is implemented with bitwise operations on typed arrays for efficient neighbor counting and state transitions. Predefined patterns, such as “Planes” and “Symm 4,” are included in a separate data file.

NNPashaP

79% match

Loading thumbnail…

Game of Life on a Torus

A glossy, metallic torus rotates in 3D space, its surface displaying Conway's Game of Life evolving in real time. The simulation runs on a 128×128 canvas texture, with each generation updating every 150 milliseconds using toroidal boundary conditions. Three.js renders the scene with WebGL, while React 19 manages the component lifecycle and OrbitControls enable interactive zooming and rotation.

CCurran Kelleher

75% match

Loading thumbnail…

Vibecoding Test - Psychedelic Game of Life

This interactive visualization reimagines Conway’s Game of Life with a hypnotic, psychedelic aesthetic. It generates a random grid on an HTML5 Canvas and animates cellular evolution through continuously cycling, position-dependent colors, creating a sense of depth and infinity. Built with D3.js, the simulation leverages `requestAnimationFrame` for smooth animation and an offscreen canvas for efficient rendering. Users can click, drag, and toggle color and trail effects; a subtle zoom and rotation of the canvas each frame also produces a tunnel-like visual experience.

CCurran Kelleher

72% match

Loading thumbnail…

Cell Matrix

A grid of 16 by 8 rounded rectangles displays a random pattern of purple and yellow cells, where each cell’s color is determined by a Boolean value from `Math.random()`. The React components `CellMatrix` and `Cell` position each rect using computed `x` and `y` offsets based on the inner dimensions, while the `VizContainer` renders the SVG output with configurable margins and a neutral gray background. This example uses plain React state-free rendering, with no D3 API calls beyond the library’s inclusion in the HTML page.

WWaseem Medhat

67% match

Loading thumbnail…

Cell Matrix

A grid of purple and yellow rounded rectangles forms a randomly generated 16-by-8 cell matrix, with each cell’s color determined by a Math.random() call within the React component. The visualization is rendered as SVG rectangles using React and JSX, with cell dimensions computed from the container’s inner width and height divided by the grid counts. The layout is managed by a VizContainer component that applies margins and translates the SVG group, while the page loads React and D3 v6 from a CDN in the HTML entry point.

Ddartigues

67% match

Loading thumbnail…

Hello HTML

A grid of ten randomly generated cartoon faces fills the screen, each with a yellow circular head, black-outlined stroke, two eyes, and an arched mouth. Built with React and D3 v7, the example uses d3’s `arc` generator to construct the mouth paths and d3’s `range` to produce the face count. Every face’s dimensions and positions—stroke width, eye offset, eye radius, and mouth size—are randomized on each render, demonstrating reusable SVG components composed within a React hierarchy.

Hhunianhang

66% match

Loading thumbnail…

activity 5

A grid of 441 small, randomly colored, semi-transparent circles is rendered on a black background with a floral image. The circles are generated through a nested `A.map` loop in React, each with random attributes for position, fill color, and rotation. The SVG output also includes a complex, pre-defined path data string, suggesting a Buddha silhouette, which is transformed and scaled. The visualization uses React and ReactDOM to render the SVG elements directly.

KKhushi Desai

65% match

Loading thumbnail…

Colorful Faces

A grid of twenty colorful faces fills the page, each face randomly assigned a background color from a set of five. Each face is built from modular React components: a background circle, two eyes, and a mouth arc. The code uses React and D3.js, with the mouth shape generated by D3's `arc` function to create an arc path. Eye position, size, and mouth dimensions are randomized, producing a playful variety of expressions across the grid.

HHalcyonWjr

65% match