&#x20;In this article, we'll break down the code that makes this magic possible, line by line. you can find the full code right [here](https://github.com/reyrove/fxhash-projects/tree/master/chaotiColor).

# Setting Up the Canvas Ratio

```js
const ratio = 1 / 1
const prefix = 'ChaotiColor'
```

We start by defining the aspect ratio of the canvas, in this case, a square ratio of 1:1. We also set a prefix for our filename, used later when saving our generated artwork.

# Feature Definitions

```js
const features = {}
let resizeTmr = null 
let thumbnailTaken = false 
```

Here, we initialize a `features` object to store the parameters used for the art generation. We also set up a timer for resizing the canvas (`resizeTmr`) and a flag (`thumbnailTaken`) to make sure that the preview image is only captured once.

# Canvas and Animation Control

```js
const animated = false
let nextFrame = null 
```

Since this generative art doesn’t rely on continuous animation, we set `animated` to false. If you wanted to animate the artwork, flipping this value would keep the frames rolling.

# Randomized Foreground Colors

```js
const ForegroundColours = [['#9F21DE', '#60DE21'], ['#F20DB2', '#0DF24D'], ...]
```

A rainbow’s worth of color palettes are defined here. Each color palette contains a mix of hues, chosen to complement and contrast, making sure each creation is vibrant and unique.

# Randomized Parameters Setup

```js
features.ForekgroundColour = ForegroundColours[ForegroundIndex]
features.widthdivision = Math.floor($fx.rand() * 300) + 4;
features.heightdivision = Math.floor($fx.rand() * 300) + 4;
```

We use `$fx.rand()` to introduce randomness into the number of horizontal and vertical divisions of the canvas. Each division represents a rectangle, and by tweaking the number of divisions, the artwork looks varied every time.

# Cellular Automata Logic

```js
function rules(a, b, c, ruleset) {
  if (a == 1 && b == 1 && c == 1) return ruleset[0];
  ...
  if (a == 0 && b == 0 && c == 0) return ruleset[7];
}
```

This function defines the rules for how the cellular automata evolve across the canvas. It uses a binary ruleset to determine whether a rectangle becomes filled or remains empty based on the values of its neighboring cells.

# Binary Vector Generator

```js
function generateBinaryVector(size) {
  const vector = new Array(size).fill(0);
  vector[Math.floor($fx.rand() * size)] = 1;
  for (let i = 1; i < size; i++) {
    vector[i] = $fx.rand() < 0.5 ? 0 : 1;
  }
  return vector;
}
```

Here, we generate a random binary vector. This vector is key to creating the cellular automata that will paint the artwork. Each value (1 or 0) in the vector represents whether a rectangle is filled with color or left blank.

# The Heart of It: The Canvas Drawing Function

```js
const drawCanvas = async () => {
  window.cancelAnimationFrame(nextFrame)

  const canvas = document.getElementById('target')
  const ctx = canvas.getContext('2d')
  const w = canvas.width
  const h = canvas.height

  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, w, h)

  let ruleset = generateBinaryVector(8);
  let cells = generateBinaryVector(features.widthdivision);
```

This is where all the magic happens. First, we cancel any existing animation frames to start fresh, and then set up the drawing context. The canvas is painted black, providing the base for the art.

The cellular automata algorithm is applied to the rectangles across the canvas. Each cell, determined by the random binary vector, is either filled with black or with one of the randomized colors from the foreground palette.

# Looping Through Rows and Columns

```js
for (let j = 0; j <= A2; j++) {
  for (let i = 0; i <= A1 - 1; i++) {
    x = i * canvas.width / A1;
    y = j * canvas.width / A2;
    ...
  }
}
```

This loops through the divisions of the canvas, applying the ruleset and painting each rectangle according to the generated binary vector. The magic is in how the colors change based on the evolving automata rules.

# Triggering Previews and Downloads

```js
if (!thumbnailTaken) {
  $fx.preview()
  thumbnailTaken = true
}
```

Once the canvas is drawn, we capture a preview of the artwork using the `$fx.preview()` function, ensuring that it’s only captured once.

```js
if ('forceDownload' in urlParams && forceDownloaded === false) {
  forceDownloaded = true;
  await autoDownloadCanvas();
}
```

If a URL parameter exists indicating a forced download, we trigger the `autoDownloadCanvas()` function to save the artwork as a PNG file.

# Downloading the Artwork

```js
const autoDownloadCanvas = async () => {
  const canvas = document.getElementById('target')

  const element = document.createElement('a')
  const filename = 'forceId' in urlParams
    ? `${prefix}_${urlParams.forceId.toString().padStart(4, '0')}_${$fx.hash}`
    : `${prefix}_${$fx.hash}`
  element.setAttribute('download', filename)

  const imageBlob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'))
  element.setAttribute('href', window.URL.createObjectURL(imageBlob))
  element.click()
}
```

This function creates a download link for the artwork. It automatically names the file using the `$fx.hash`, ensuring each piece has a unique identifier.

And there you have it! The ChaotiColor artwork is a wild ride of color, randomness, and cellular automata magic. Each time you run it, you get a completely different creation, brought to life by clever code and a touch of chaos. So, go ahead—play with the code, change the parameters, and create your own ChaotiColor masterpiece.

*With boundless love and a dash of digital magic, 💖*

*\_Frostbond Coders*


The ChaotiColor project is a dynamic generative art piece built using canvas manipulation, cellular automata rules, and vibrant color palettes. Each render creates a stunning visual pattern of colored rectangles based on random rulesets and binary vectors, giving a unique, mesmerizing result with every iteration. The beauty of the code lies in its fusion of randomness, control points, and smooth transitions, with color schemes that pop like candy on a digital canvas. The algorithm ensures that no two creations are alike, embracing the unpredictability of life itself. Magic, chaos, and artistry blend here seamlessly, creating stunning generative art.

ChaotiColor

Written by

Editions

Share

Details

stay ahead with our newsletter