Serenity

Serenity is a visualization of a natural landscape that depicts different times of day with complementary elements. More specifically, Serenity is described as a visual journey through a harmonious blend of sky, mountains, sea, and forest, along with the dynamic interplay of simple scenes from dawn to dusk.

Serenity is a generative art project created entirely with JavaScript, powered by p5.js. It features 18 carefully curated color palettes, selected at random to create unique compositions.

Z = ["0081a7-00afb9-fdfcdc-fed9b7-f07167", "ddbea9-d27b31-fff6ec-dfe0df-a5a58d", "99d98c-3f4a3c-a2af9f-00d9ff-00a2cd", "22223b-4a4e69-9a8c98-c9ada7-f2e9e4", "072448-54d2d2-ffcb00-dad873-ff6150", "e8d1aa-e1c15e-cf7562-b9a388-bb8a6b-cbc2a8-afaf90-69563d-e7cba7-efdfc2", "006d77-83c5be-edf6f9-ffddd2-e29578", "f4f1de-e07a5f-3d405b-81b29a-f2cc8f", "7c6a0a-babd8d-ffdac6-fa9500-eb6424", "a3a380-d6ce93-efebce-d8a48f-bb8588", "fb6107-f3de2c-7cb518-5c8001-fbb02d", "ffc09f-ffee93-fcf5c7-a0ced9-adf7b6", "cc8b86-f9eae1-7d4f50-d1be9c-aa998f", "16697a-489fb5-82c0cc-ede7e3-ffa62b", "f5f4ef-f1dbce-686763-b8b5b0-e5e2d9", "01204E-028391-F6DCAC-FEAE6F", "005f73-0a9396-94d2bd-e9d8a6-ee9b00-ca6702-ae2012", "463f3a-8a817c-bcb8b1-f4f3ee-e0afa0"]

The artwork dynamically generates diverse landscapes, including mountains, buildings, forests, the sea, and combinations like buildings & forest or buildings & sea.

te = ["buildings", "forest", "sea", "buildings & forest", "buildings & sea"]

A special touch comes from the sun and moon, which appear based on a time-of-day theme—morning, afternoon, evening, or night—adding an ever-changing atmospheric feel. Every render offers a fresh and harmonious blend of nature and architecture, making each piece truly one of a kind.

This project explores the intersection of code and creativity, transforming simple algorithms into serene, dreamlike scenes. Each piece is generated in real-time, ensuring no two artworks are ever the same. Serenity is a celebration of randomness, structure, and the beauty of generative art.

At its core, Serenity is an exploration of procedural design, using algorithmic randomness to create stunning, organic scenery. Below is a snippet of the mountain generation algorithm, which demonstrates how noise functions and color interpolation are used to form layered peaks with depth and texture:

function drawMountains2() {
    let e = 0.5 * l,
        o = 0,
        n = y, // Base color
        r = P, // Peak color
        t = [];
    
    for (let a = 0; a < 5; a++) {
        let f = e - 100 * a * X,
            i = map(a, 0, 4, 0, 1),
            s = lerpColor(n, r, i), // Smooth gradient transition
            c = o,
            h = [];

        push();
        fill(0, 100);
        noStroke();
        beginShape();
        vertex(0, l);

        for (let e = 0; e <= 1.4 * d; e += 10 * X) {
            let a = f + 200 * noise(c) * X;
            vertex(e, a);
            c += 0.1;
        }

        vertex(d, l);
        endShape(CLOSE);
        pop();

        fill(s);
        stroke(0, 50);
        strokeWeight(1 * X);
        beginShape();
        vertex(0, l);
        c = o;

        for (let e = 0; e <= 1.4 * d; e += 10 * X) {
            let a = f + noise(c) * G * X;
            vertex(e, a);
            h.push(a);
            c += 0.02;
        }

        vertex(d, l);
        endShape(CLOSE);
        t.push(h);
        o += 0.5;
    }
}

By leveraging Perlin noise, layered fills, and subtle variations in stroke weight, the code above generates natural-looking mountain ranges that seamlessly integrate into the scene

Beyond just visuals, Serenity embodies the beauty of code-driven creativity, where simple mathematical principles evolve into dynamic, living environments. Every element, from the rugged peaks to the tranquil sea, is dictated by structured randomness—bringing order and unpredictability together in perfect balance.

Serenity available on Gamma.io ~ enabling collectors and art lovers to experience and own unique, timeless generative art within the Bitcoin universe.