# 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:\

* 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. * 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.

* 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](https://btc-substance.gitbook.io/btc-substance-academy/satributes-and-ordinals-tech#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). * 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. * 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: * ```

``` ```

``` #### 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

#### 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 \* ```

``` * **Torus**, a regular 3d ring shape \* ```

``` * **Torus Knot**, a continuous shape that twists and turns around the surface of a torus. \* ```

``` #### Rotation * Both the initial rotation and the rotation rate on the X and Z axes are controlled by generative factors. * This insures that when looking at all the pieces at once, they do not sync up, and all have their own unique movement pattern. #### Background Colors * The background of each BTC Substance consists of 800 independent particles, which oscillate in size to create a "twinkling" effect. * 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.
```javascript color.setHSL( backgroundColorHue + 0.1 * ( i / amount ), 0.7, 0.5 ); ```