# Generative Art

## Perlin Noise

* In graphics, Noise is a variation of a measurement created by a random process. Imagine static on a TV.  
* There's hundreds of algorithms that can be used to generate noise, and all of them serve different purposes. 
* Perlin Noise specifically tends to create variations that feel believeable and realistic to the human eye. Instead of each input having a random value, each input's value is similar to the values around it, creating natural curves, valleys, and mountains.  
  * Here's an example of a Perlin Noise distribution, vs a more random noise distribution called Simplex noise:\ <img src="/files/Ku815WKJeFhZhGVy4uoU" alt="" data-size="original">
* As a result of this smoothness, Perlin noise is often used in video games for random terrain generation, as it can help create breathable worlds. &#x20;
* BTC Substance uses a GLSL Shader implementation of Perlin Noise to alter the **displacement** of each point on the substance, creating aesthetically pleasing waves on the surface.&#x20;

  <figure><img src="/files/YFzIZgBYIexxgTybvWpR" alt="" width="188"><figcaption><p>Surface waves from Perlin Noise</p></figcaption></figure>
* Every frame, the noise is re-calculated and moved by a very small amount, in accordance with how much time has passed since the ordinal started rendering (called **uTime**)

## Generative Trait Breakdown

As explained in the [Provable Uniqueness section](/btc-substance-academy/btc-substance/satributes-and-ordinals-tech.md#provable-uniqueness), we extract 10 parameters from each Substance's Inscription ID. Here's a breakdown of how those parameters are used:

#### Displacement Factor

* Perlin Noise determines the **shape and distribution** of the waves, but the **displacement factor** determines the **amplitude** of the entire set of waves (or, the maximum difference between the highest mountain and the deepest valley). &#x20;
* Distortion factor values are similar on all substances, but they vary slightly to ensure randomness.
* ```javascript
  float noise = distortion_factor*pnoise(position+uTime, vec3(1.25));
  ```

#### Stripe Factor

* The **stripe factor** determines how fast the colors will cycle on the substance, and the size of each given color value at a given time. It affects the FragmentShader trigonometric function.&#x20;
* A higher stripe factor means you'll see a higher number of colors at any given time. Here's a comparison between the lowest and highest possible stripe factor:
*

```
<figure><img src="/files/KzxC8UCgKuAFfi3CgtcG" alt="" width="188"><figcaption></figcaption></figure>
```

```
<figure><img src="/files/0UlRHYZVeUTFdL1dLKae" alt="" width="188"><figcaption></figcaption></figure>
```

#### RGB Indexes

* Each Substance has a separate value for Red, Green and Blue, from 0 to 1. A value closer to 1 means that the FragmentShader will more often output a color with a higher value in that color (closer to "Red" for a higher Red Index). It is also used in the Fragment Shader trigonometric function
* Here's an example of how the Red Value is calculated each frame:
* `red_index*(cos(uTime/3.0+pos.x*stripe_factor + (timebounce-0.5)*5.0) * 0.5 + dist/4.0),`
  * The "`timebounce`" here refers to a pendulum value toat constantly cycles between 0 and 1, to give the piece a rythmic feel
  * "`dist`" is the distance each point is from the center of the object, which is affected by nosie and disaplcement.
* Here's some examples of a substance with low Blue Index vs a high Blue Index

<figure><img src="/files/nX2eS0cNa1FWDcclTn26" alt="" width="197"><figcaption></figcaption></figure>

<figure><img src="/files/aYB68fZLQAMuQRZGYf5C" alt="" width="191"><figcaption></figcaption></figure>

#### Base Geometry

* There are 3 Geometries that constitute the basic shape of BTC Substance. There are chosen at random based, but the Icosahedron is the most common.
  * **Icosahedron**, a 20-sided regular polygon
    \*

    ```
    <figure><img src="/files/ABjDPygJ9TKoYjiHl1Ei" alt="" width="188"><figcaption></figcaption></figure>
    ```
  * **Torus**, a regular 3d ring shape
    \*

    ```
    <figure><img src="/files/nAwQFGG80VvwRGcYqLwn" alt="" width="188"><figcaption></figcaption></figure>
    ```
  * **Torus Knot**, a continuous shape that twists and turns around the surface of a torus.
    \*

    ```
    <figure><img src="/files/CFpp5wrcmmJf5uQCZ38w" alt="" width="188"><figcaption></figcaption></figure>
    ```

#### Rotation

* Both the initial rotation and the rotation rate on the X and Z axes are controlled by generative factors.&#x20;
* This insures that when looking at all the pieces at once, they do not sync up, and all have their own unique movement pattern.&#x20;

#### Background Colors

* The background of each BTC Substance consists of 800 independent particles, which oscillate in size to create a "twinkling" effect. &#x20;
* Their primary color is controlled by a generative factor, which ensures that even if two Substances have similar RGB indexes, they will have unique backgrounds and create their own color palettes.<br>

  ```javascript
  color.setHSL( backgroundColorHue + 0.1 * ( i / amount ), 0.7, 0.5 );
  ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://btc-substance.gitbook.io/btc-substance-academy/btc-substance/generative-art.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.