A high-performance, highly configurable fractal generator based on the Chaos Game algorithm, using a Web Worker and an OffscreenCanvas to ensure a smooth, non-blocking user experience, even with millions of points.
Here are a few examples of fractals generated with this tool, showcasing different settings.
| Title | Settings | Image |
|---|---|---|
| Sierpinski triangle | sides: 3jumpDistance: 0.5restriction: 'none' |
|
| Sierpinski Hexagon | sides: 6jumpDistance: 0.6667restriction: 'none' |
|
| The Hexagonal Bloom | sides: 6jumpDistance: 0.585786restriction: 'none'centerVertex: truesolidBg: falsefgColor: "#FF0040"gammaExponent: 5 |
|
| Unnamed | sides: 5jumpDistance: 1.618034restriction: 'no-repeat'
fgColor: "#FFFF80"bgColor: "#081020"gammaExponent: 4canvasSize: 1000padding: 380 |
|
| Unnamed | sides: 10jumpDistance: 0.618034restriction: 'none'fgColor: "#E05C5C" |
|
The Chaos Game is a simple algorithm for generating fractals. It works like this:
- Define a set of points (e.g., the vertices of a polygon).
- Start with a random point anywhere inside the polygon.
- Randomly Choose one of the polygon's vertices.
- Move a fraction of the distance (e.g., halfway) from your current point toward the chosen vertex.
- Plot a point at this new location.
- Repeat from step 3, using the newly plotted point as the current point.
By repeating this process thousands or millions of times, self-similar fractal patterns emerge from the chaos.
- Non-Blocking Simulation: All calculations run in a separate Web Worker, so the main UI thread remains responsive.
- Extensive Customization: Control the number of sides, jump distance, colors, extra vertices, and more.
- Advanced Restriction Rules: Go beyond the basic algorithm by applying rules that forbid choosing certain vertices,
such as:
no-repeat: Cannot pick the same vertex twice in a row.no-neighbor: Cannot pick a vertex adjacent to the last one.- ...and more!
- Symmetry Mode: Instantly create perfectly symmetrical fractals by applying rotational and reflectional symmetry to every plotted point.
- Smart Simulation Control: Features like live rendering, auto-stop when the fractal is complete, and easy PNG download.
You can use Chaos Game JS either by installing it as an NPM package or by including it directly in your HTML file from a CDN.
-
Installation
npm install chaos-game
-
HTML Setup Create an
index.htmlfile with a canvas element. Make sure yourworker.jsfile is accessible from your project's public directory.<!DOCTYPE html> <html lang="en"> <body> <canvas id="chaos-canvas" width="800" height="800"></canvas> <script type="module" src="main.js"></script> </body> </html>
-
JavaScript Usage In your
main.jsfile, import theChaosGameclass, define your settings, and start the simulation.import { ChaosGame } from 'chaos-game'; const canvas = document.getElementById('chaos-canvas'); const settings = { canvasSize: 800, sides: 5, jumpDistance: 0.6, restriction: 'no-repeat', symmetrical: true, // ... other settings }; const game = new ChaosGame(canvas, settings); game.play();
-
HTML Setup Simply add the script tag to your
index.html. TheChaosGameclass will be available globally.<!DOCTYPE html> <html lang="en"> <body> <canvas id="chaos-canvas" width="800" height="800"></canvas> <!-- 1. Load the library from the CDN --> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <!-- 2. Your script to run the game --> <script> const canvas = document.getElementById('chaos-canvas'); const settings = { canvasSize: 800, sides: 5, jumpDistance: 0.6, restriction: 'no-repeat', symmetrical: true, // ... other settings }; // Note: The worker.js is loaded automatically by the library const game = new ChaosGame(canvas, settings); game.play(); </script> </body> </html>
You can pass any of these options in the settings object during instantiation or update them later with
updateSetting(key, value).
| Option | Type | Default | Description |
|---|---|---|---|
canvasSize |
number |
1000 | Width and height of the canvas in pixels. |
sides |
number |
3 | Number of vertices in the main polygon. |
jumpDistance |
number |
0.5 | Fraction of the distance to move towards the chosen vertex. |
padding |
number |
10 | Margin in pixels from the canvas edge to the polygon. |
midpointVertex |
boolean |
false | If true, adds vertices at the midpoint of each side. |
centerVertex |
boolean |
false | If true, adds a vertex at the center of the polygon. |
restriction |
string |
'none' | The rule for choosing the next vertex (e.g., 'none', 'no-repeat'). |
fgColor |
string |
'#FFFFFF' | The foreground color for points and outlines (CSS format). |
bgColor |
string |
'#000000' | The background color (CSS format). |
solidBg |
boolean |
true | If true, use a solid background; otherwise, it's transparent. |
gammaExponent |
number |
3 | Gamma correction value for adjusting brightness and contrast. |
drawCircle |
boolean |
false | If true, draws the circumscribing circle. |
drawPolygon |
boolean |
false | If true, draws the main polygon's outline. |
symmetrical |
boolean |
true | If true, applies rotational and reflectional symmetry. |
autoStop |
boolean |
true | If true, the simulation stops automatically when stable. |
liveRendering |
boolean |
true | If true, the canvas updates periodically during the simulation. |
stabilityNewPixelsThreshold |
number |
1 | Threshold for new pixels below which the simulation is considered stable. |
.play(): Starts or resumes the simulation..stop(): Pauses the simulation..reset(): Clears the canvas and restarts the simulation with the current settings..updateSetting(key, value): Updates a single setting..download(): Triggers a download of the current canvas as a PNG file..on(eventName, callback): Listens for events like'finish'or'stabilityCheck'.
This project is licensed under the MIT License. See the LICENSE file for details.
Created by Mohammad Sarabi.