Chaos Game

100%

✓ Published0🌍 Public

Last edited Sep 29, 2023

Created on Sep 29, 2023

This visualization demonstrates the chaos game, a mathematical process that generates fractal patterns by repeatedly selecting points between a set of fixed anchor vertices. The SVG canvas displays a dense scatter of points that emerge as the algorithm iterates, with each new point placed halfway between the previous point and a randomly chosen vertex. The example uses D3.js v7 to manage the SVG element and render the resulting point cloud, while the underlying computation is handled in JavaScript. The visualization shows how simple probabilistic rules can produce intricate, self-similar geometric structures.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Random Path

This example shows a chaotic scatter of colored circles and overlapping paths generated from randomized coordinates within a fixed SVG canvas. The visualization uses React to map over nested arrays, producing multiple elements per iteration with varying positions, fill colors, and stroke values derived from index-based arithmetic. Rendering is handled through React’s `ReactDOM.render` into an SVG, with no external data source, relying entirely on `Math.random` for spatial distribution and RGB color generation. The result is a dense, abstract composition of geometric primitives.

NNita

73% match

Loading thumbnail…

fractal

This interactive SVG visualization generates a branching tree fractal composed of circles. Mouse position controls the number of recursive iterations (left-right) and the branch angle (up-down). The code builds a fractal structure recursively, then renders it by updating SVG `<circle>` elements using D3 v4’s selectors and data-merging API. A text element displays the live count of circle elements, illustrating how animation lag increases with element count. The example highlights the performance limits of SVG rendering at scale.

CCurran Kelleher

72% match

Loading thumbnail…

fractal

A procedural tree fractal animates in real time as the mouse position dictates both branch angle and recursion depth. The visualization displays up to thousands of overlapping, randomly colored circles, with an on-screen counter revealing the exact number of SVG elements being rendered. Built with D3 v4, the `fractal()` function recursively computes circle positions while the `mousemove` event triggers a full redraw. This interactive example visually demonstrates how SVG rendering performance degrades as element counts increase, making the lag tangible to the user.

CCurran Kelleher

72% match

Loading thumbnail…

Random lines

The visualization displays a dense field of 800 randomly colored, semi-transparent lines radiating from a central point, creating a chaotic, abstract burst of color. Each line is positioned using trigonometric functions with randomized radius values, and its stroke color is generated via the `rgb()` function with random values. The SVG elements are appended using D3.js v6, with the main group rotated 90 degrees and translated to center the composition. The lines are rendered statically with a stroke-width of 5 and opacity of 0.5, creating overlapping visual depth.

NNita

72% match

Loading thumbnail…

fractal

This example shows an interactive tree fractal that branches recursively into hundreds of thousands of circles, with the mouse position controlling the number of branches and their angle. The visualization responds to mouse movement by recalculating the fractal structure and re-rendering the SVG circles. The code uses D3 v4’s `selectAll` and `data` binding with an enter/merge pattern, but omits the `exit()` call, leaving obsolete circles in the DOM. Rendering relies on SVG `circle` elements positioned via `cx`, `cy`, and `r` attributes.

CCurran Kelleher

71% match

Loading thumbnail…

Random Path

This visualization generates a random array of 10 values and renders a chaotic network of overlapping circles and paths on a gray SVG canvas. Each element is mapped multiple times through nested loops, creating a dense, colorful web of lines and points with colors derived from the index value. The React app uses SVG primitives—circle, path, and stroke—to draw the geometry, with positioning and dimensions determined by multiplying the index by random values. Rendering is handled by ReactDOM, which mounts the component to the root div.

NNita

71% match

Loading thumbnail…

Task3

The visualization displays a chaotic, colorful scatter of overlapping diamond-like polygons scattered across a green background. Each polygon’s position, size, and color are generated using JavaScript’s `Math.random()` function, with an array of numbers iterated three times to create dense, layered compositions, and rotated 45 degrees via an SVG `transform`. The code imports React and ReactDOM, clones an existing SVG path drawing of a Buddha figure, and renders everything using React’s `createElement` and `.map()`. The result is an abstract, generative art piece with no external data source, relying entirely on random values for visual variety.

BBindumadhavi

70% match

Loading thumbnail…

Random Path

This visualization displays a dense, chaotic field of overlapping circles and connecting line segments. The composition is generated from a nested data array, with each element creating a circle and a path whose positions are randomized. The code uses React and ReactDOM to render the SVG elements, calculating coordinates and RGB color values based on the loop index. The resulting abstract image features a textured, layered appearance across a light gray background.

NNita

70% match