Generative Landscapes & Patterns

Project Title: verdant Swamp

brief description and concept

A long-abandoned garden had been left untouched for years. One day, a group of researchers arrived to investigate. Local residents had been complaining about strange will-o'-the-wisp lights flickering in the grass at night. The area was covered in scattered rocks and overgrown with weeds. The researchers searched through the mess, hoping to find signs of biological contamination. They shone flashlights into the roots of the weeds, observing carefully. Colorful little flowers were blooming among the grass, and there were even some beautiful daisies. The climate in this area was very humid, and dewdrops covered the grass. They set up a hidden camera among the rocks, trying to observe and document everything happening in this strange garden. The footage from that camera is now before your eyes.

Demo/Visual Documentation

https://editor.p5js.org/xj2359/full/JefTx_4mK

Here are nine random instances of the program:

code

Sky Gradient and Background

Using lerpColor to blend two colors and create a random night sky gradient effect

Grass and Dew

Generating multiple layers of grass through nested loops, with colors ranging from light to dark, and dewdrops randomly scattered on the grass leaves.

Randomized Flowers

Using trigonometric functions to generate symmetric petals with random colors and positions, simulating the natural distribution of wildflowers.

Stones and Light Effects

Randomly scattered stones add a sense of chaos to the scene, while semi-transparent trapezoids and ellipses simulate the effect of light shining.

Failure and success

Problem: Lack of depth in the grass layers.
Solution: Adjust the base_y and color parameters to make the height and color of each grass layer gradually change.

Problem: Flowers are too uniform.
Solution: Introduce random angles (theta) and trigonometric functions to break symmetry.

Problem: Harsh lighting effects.
Solution: Use semi-transparent colors and random positions to enhance the natural feel.

Alternate code implementation

Original Code:

Possible Replacement (For the grass):

Comparison: Noise function-generated grass leaf height looks more natural, but the computation is more complex. The original method is more efficient and better suited for simple scenes.

Credits

Official Reference Document for p5.js: The example for color-blending

findings/lessons learned

Using lerpColor can quickly create gradient effects, but randomization needs to be controlled to avoid abrupt transitions. The symmetry of the flowers is broken by introducing random parameters, achieving "order within nature." To optimize performance, reducing the number of nested loops (such as the number of stones) can improve rendering speed.

Reflection

Add interactivity (e.g., mouse movement controlling the flashlight).

Dynamic weather (e.g., raindrop animation).

Page updated

Report abuse