# How It All Started

At the end of August 2022 I was playing around with loop animations and Perlin noise in p5 and I came up with some cute debug outputs that reminded me of moving grass (Figure 1). That was the beginning of a beautiful month long journey made of full time coding, delivered food, a lot of just legalized weed and very little sleep.

![Figure 1](https://ccddbb.com/fxtext/making_of_noisy_gardens_000.gif)

# Terrain & Items Distribution

Terrains are generated using a mix of Perlin noise and dynamic black and white maps. It is possible to add transformers (Custom functions) to terrains in order to process values. Behaviors that are more complex can be achieved introducing into the equation elements like the Cartesian position or the use of dynamic maps that are drawn at scene generation and then used by the transformers. This can be a very powerful way to define the grass length or to position items at specific value ranges, like a wall of rocks for example, or to shape special terrains like in the case of the rare spiral garden (Figure 2).

![Figure 2](ipfs://QmWmBbTUbH9AQ6QZvMqBYpm1kfs6mZu7HRKDsVsCs4Zksm)

Items can also have a special mask used to clear the surrounding area from other items, it is used for example by mushrooms or by water surfaces. Water has also another extra mask used to calculate vegetation proximity in order to change its size and color (Figure 3).

![Figure 3](ipfs://QmfDFk3Ss2eBtSjeTAuQpHitULs16sFnLYmynxvKQFaUhm)

# Drawing Technique

Everything in the gardens is 2D, just lines and basic shapes. I used the second iteration of an algorithm I started developing in 2021 and that I previously used in another generative called Milena’s Flowers.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::600580"}

The original version was made for easel.js, but I recently started using p5.js and I have partially ported the original to work with it.

It is a script to draw lines. Quite simple but very powerful (In fact it is called Superline). I can pass parameters to define how the line will look like. Many settings accept arrays that are iterated over in order to define a specific property evolution along the line length. Almost every aspect, from the color of the line to its weight, light or curliness is parametric and allow a huge variety of different outcomes. I also use a lot easing functions. They can change dramatically the appearance of a line when applied to parameters (Some examples in Figure 4).

![Figure 4](ipfs://QmRcLkB6yqVCxaN3RHRNUDLpGbVT41AfiWUooGgCAeHmaU)

If requested the script can return an array of the line points and their characteristics in order to perform further operations like placing leaves or branches.

Currently the algorithm is using only two points to draw a line. In the next iteration, I want to add the ability of having an array of points as input in order to draw lines that are more complex. Moreover, the ability to pass functions as parameters would be interesting to explore.

Another feature in my to-do list is shading. I have previously implemented shading in the original easel version but I have not yet ported that part to p5. In my original algorithm, I can shade lines on the sides with an additional pass to bring light or shadow.

In addition, I can use one extra optional pass to add a pencil style shading made of thin lines perpendicular to the edges (Figure 5).

![Figure 5 ( A detail from Milena's Flowers )](ipfs://QmdCFRNAHB84baRN2K6hVwHPM1M6vvSwUGtKmd5vFZW4rn)

# Animation

One of the two possible outputs are 6 seconds animated GIFs.

In order to make everything loop properly I animated values using Sin and Cos of the theta value provided by a library called p5.createLoop, which under the hood uses gif.js to encode the GIF (Figure 6).

![Figure 6 ( Animated GIF - 800x800 - 20fps )](http://ccddbb.com/fxtext/making_of_noisy_gardens_001.gif)

A big thanks goes to Johan Nordberg, creator of gif.js, who pointed me to an undocumented option to generate the color palette based on the first frame only. A 1080x1080 GIF running at 25 fps has a final size of approximately 120 MB and without activating that option, the image was heavily flickering.

# Colors & Profiles

Colors are handpicked for each asset and divided into templates.

A more granular configuration is then obtained using profiles where a selection of parameters and color palettes allows the creation of specific styles. A process made with care in order to obtain a great variety of original outputs (Figure 7).

![Figure 7](ipfs://Qmdm3mjFM9THiV2JPYwzfFoWwEwpVBATmn6Ai3R2J6rmUG)

Defining and fine-tuning the profiles took me two weeks.

# What’s Next?

Evolving gardens with a lifecycle, submarine worlds with alien coral reefs, who knows. 🙂

Most probably nothing animated though, it raises a lot the complexities involved with the generation process.

Thanks for reading. 💚

***

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1149051"}

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1152104"}

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1148204"}

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1147819"}


A brief history of how I came to conceive the Noisy Gardens and the journey to bring them to life.

The Making Of Noisy Gardens

Written by

Editions

Share

Details

stay ahead with our newsletter