STRUCTURE

• INTRODUCTION | 前書き
• INSPIRATION | 吸気
• TOOLS | 道具
• BACKGROUND | 背景
• TEMPLE | 寺
• FRONT SCENE | 前部

INTRODUCTION | 前書き

Hi there! My name's Roman (aka @likemurvin), I'm a designer and illustrator in my non crypto real life, but in my free time I investigate the limitless possibilities of coding and generative art.

This article is dedicated to my recent fx(hash) drop - ABANDONED TEMPLE. I'll try to reveal my approach and introduce you to my drawing library. Hope somebody finds this helpful somehow and maybe even gets inspired for their own project.

INSPIRATION | 吸気

Asian culture was always something magical for me, there's a lot of things that greatly inspire me and pagoda temples are certainly in this list. So I started creating reference library that visually describes my inner feelings about these incredible architecture achievements of the eastern culture.

After I have visualized something in my mind, I draw it, and so I drew the first sketch of ABANDONED TEMPLE. That's how it all started.

Also I feel like I should provide an answer about stamps aesthetics - Why choose stamp format? Actually the answer to this is pretty simple, I got a huge stamp collection inherited from my Dad, and I opened a new world of art for myself in those tiny and fragile pictures when I used to sort and group them. So yeah, it's the main reason beside the fact that stamp border effect is perfectly suitable for generative art :)

TOOLS | 道具

My main tool for creating this project is my own drawing library, that I have been slowly developing since Wisdom of forms drop.

Mainly this library consists of simple geometrical forms functions, that were drawn with tiny circles which radius is randomly "shaking", it creates an effect of hand drawn pictures.

Second important tool is math and basic knowledge of geometry. It helps to deconstruct complex objects, and then recreate them with simple geometrical forms.

BACKGROUND | 背景

Background consists of several parts - gradient, fog, noise, moon and sometimes mountain.

Thank god there's a default function in JS for creating a gradient on canvas, so let's jump straight to the next part - fog.

Fog

Fog was created using "wigglyLine" function from my library, I just made circles inside much bigger and more opaque.

Noise

For noise I’ve already got a ready to use function "chaos" from the previous drop, which is drawing small squares with y axis distortion for each x position.

        for (i=x_start; i < x_end; i+=density){
            let dot_opacity = (1 + rndValue(8))/10, // Randomise dot opacity
                y_plus = (Math.sin(i * i * i + Math.floor(fxrand()*canvas.width)) * y_end) // Y axis distortion
            
            context.fillStyle = hexToRgbA(color,dot_opacity); // Convert to RGBA
            context.fillRect(i,y_start + y_plus, dot_width*rndValue(3), dot_width*rndValue(3));
        };

Moon

Moon has two main options for generating. First is a full moon, which is pretty simple cause it's just a circle with "wiggly" stroke. Second is a crescent moon, which is generating from two different radiuses, and was drawn from a small radius semi circle to a big one.

Mountain

Mountain consist of huge amount of wiggly lines, drawn from mountain peak to its foot. I added a small y distortion to each line for a better hand drawn effect. There are four colors - pair for the light side of the peak and the foot, and a pair for the dark side. All mountain colors are selected according to background colors, to get a nice and proper light effect.

TEMPLE | 寺

Finally we get to the most interesting section. In this section I'll reveal some details concerning temple's creating process.

Let's divide this section on sub-sections - main block, roof, and remaining details (spire, columns and stairs).

MAIN BLOCK

I have started from the idea that temples should be generated using two angle coefficients - horizontal angle (for temple rotation) and vertical angle (for prospective reduction). Using those coefficients I initialized four dots for top area of the main block and connected them all with "wigglyLine" function from my drawing library, then added vertical lines from three front points, and finished by connecting bottom corners' points of the block.

Each block has additional details - strokes, doors, windows, pedestal and recesses. All of these details are generated according to the main cube's properties such as width, height and angles.

ROOF

Roofs have very similar generation logic, but instead of counting corners’ positions all over again, I used the previous algorithm for creating blocks with two different areas and without height.

After creating top and bottom area of the roof, I simply connected visible corners, to get necessary 3d illusion.

There are also roof details - lightbulbs, that consist of circle + vertical line. They appear along the bottom sides of the roof, just with decreased steps amount compared to the main lines.

SPIRE, COLUMNS AND STAIRS

Since I already counted all necessary corners' positions, it's easy to draw vertical volumetric columns according to this values, but with different methods for drawing them at the first block.

Columns also should be drawn considering block proportions which must be thinner or wider sometimes.

Stairs were created using the same cube generation function, I just made adjustments in height, and increased width according to each stair position.

Spire was created from a set of different objects, I'll let you figure out this set by yourselves ;)

Of course it's not enough to build the temple from all these functions, so I made another one "building" function to count all X and Y axis positions for placing all these blocks and details together.

Here's a gif with creating process.

FRONT SCENE | 前部

Last but not least is the front scene section with different trees, inside border and hieroglyphs. Let's dive into this topic.

Initial idea for generating front scene was to create sakura flowers on the curvy branch.

At first I decided to create flowers using circles (just for abstract visualization), so I wrote a simple algorithm that draws circles randomly on the edge of the previous circle with a smaller radius for each iteration.

But after adding huge amount of details to the main temple, I decided to make flowers and trees more detailed and interesting.

So the second iteration for flowers on the branch was more complex, I made a separate algorithm that draws nice sakura branches, but I wasn't satisfied with the result, overall compositions were empty and boring.

The third time I decided to recreate the whole tree with different color for leaves, and fill the scene with those trees, that add some nice abandoned forest effect.

Each tree is generated using a vertical line with random sin distortion for x axis for a main tree trunk and a few layers with different radius circles for leaves. Scale and position for each tree is calculated according to the temple’s properties, that's why forest always perfectly fits.

Sometimes there's a second, more detailed tree on the foreground. This tree is created using basic fractals theory - each new branch ends with two new smaller ones, and this process continues until the recent created branches are no longer visible on the stamp.

Leaves on this tree appear using the same algorithm, but with distortion in opacity, radius and in X/Y positions.

I couldn't find the right font for hieroglyphs, so I made several functions for drawing hieroglyphs just with lines. There's 8 different hieroglyphs that are actually hidden in the art, can you find them all?

AFTERWORD

Thanks to everyone who spent time reading this article. I'm not so good at writing stuff like that, but I sincerely hope it helps someone who wants to dive into my creation and development process.

Also I want to express gratitude to everyone who supports my projects, to all collectors and to those people who share their feelings in my twitter posts, my work is only possible because of you.