Connections

The first step was to create a grid and randomly place points on it:

These points were then joined together horizontally:

The rule was as follows "connect to the first available point, from left to right"... To ensure that the result was correct, blue triangles were drawn temporarily on the links to visualize them well:

Then the vertical links were added:

Perspective effect

Before continuing with the roads, I created the function that calculates the perspective effect and tested it with rectangles:

It was then enough to use the calculated positions to create a block with a 3D effect:

Grid

I then took my code with the links and adapted it to the 2/3 format:

Broad lines have been drawn:

White lines have been added in the middle of the roads:

The white lines were then removed at the intersections:

And pedestrian crossings have been added near intersections:

This was, however, only a draft version of the roads which were completely redesigned later in development.

Placement of buildings

To be able to visualize the grid (technically contained in arrays), I created a function that draws the grid over the result.

The red "r" correspond to the squares occupied by roads, the blue "t" are the sidewalks around the road (this allows to leave a margin so as not to put buildings too close to the road) and the gray "o" are free squares:

It was then necessary to randomly place areas of variable size in the free squares (the green "i" squares are those of the buildings):

From there, I took the piece of code created a little earlier and placed the first version of the buildings on the green spaces:

We also had to create a complex sorting function to classify the buildings according to the order in which they must be drawn, otherwise we obtain this kind of result:

Then by expanding the grid, hiding the debug grid and placing as many buildings as possible, we get this:

Building facades

I started to draw on the facades of buildings:

And to optimize the execution speed of the code, I tried to determine which facades are useful to draw and which are useless:

The first type of facades was the one with small windows:

The size of the windows was then randomly defined for each building:

Then a second type of facade was created:

And the type of facade was randomly defined for each building:

Roof edges

The next step was to create the roof edges by first placing shapes (similar to buildings without windows) on top of the buildings:

The addition of these roof edges depends on the type of facades of the building, only the first type of facade is entitled to roof edges at this stage of development:

Drawing effect

To begin with, the borders were drawn around the different elements:

The different facades were then modified to create a small random shift in each line and obtain a hand-drawn effect:

The lines of the buildings have also been modified to obtain a slight offset and create this drawing effect:

Then some edge lines were removed to give the illusion that these edges are one with the building:

Round building

A new type of building has been added to the project, the round building:

Each type of building has types of facades defined for it... The round building can use the second type of facade created but cannot use the one with the small windows, on the other hand it is entitled to a new type of facade (the one at the top left):

Sections

Some buildings are sometimes composed of several sections. From a technical point of view, it corresponds to a building on top of another building:

To create a layered effect, simply reduce the dimensions of the sections:

Roof accessories

To add even more detail, the first roof accessories have been randomly added to certain buildings:

With sometimes a second element on top:

You can also see that a new type of facade has been added.

Redraw the roads

In order for the roads to have a drawing effect similar to the buildings, they had to be completely redone.

The function that manages the perspective effect can be adjusted to have a greater or lesser effect. In this case, the effect has been reduced to better see the roads:

Irregular borders have been drawn along the roads:

It then took a lot of work to ensure that all the lines were well drawn everywhere except at the intersections and that the lines were still correctly connected despite the random offsets (necessary for the drawing effect):

Then the white lines and pedestrian crossings were added:

Colors

At this stage of development, it was too early to define the final color palettes, so I retrieved the palettes from a previous project to be able to immediately do the first tests with the colors:

Just like the perspective effect, the function that creates the offsets for the drawing effect can be modified to create a more or less pronounced effect:

The color of the roof edges was then lightened and for more details, blinds were also added randomly:

Hexagonal building

A new building type has been created:

And bugs related to diagonal facades have been fixed:

Roof accessories

To bring a little more variety to the roof accessories, on some buildings they will be added several times (and to better visualize the lines, the drawing effect has been temporarily disabled):

These accessories will sometimes be added by 2 or more rarely by 4 on the roofs:

A new accessory for round buildings has been added, however it was not centered:

To solve this kind of problem, the debug tool was used very often during development... We can see here that the accessory was well centered and that it was actually the building that did not occupy the whole area:

It was therefore necessary to modify the dimensions of the building to fix this problem:

Hexagonal buildings were also entitled to their accessory:

More complex buildings

To further complicate the project and add even more details, I then created a new type of building with many more facades than the rectangular buildings:

A second version with some of the diagonal facades has even been created:

It was then necessary to correctly manage the facades on these complex buildings, and more complicated still, to add the edges of the roof:

After a long test and debugging work, the roof edges were finally displayed correctly:

Hospital and heliport

The new buildings have a suitable appearance for a hospital, so I decided that the biggest of these buildings would have a chance of having a helipad:

With an "H" drawn just with lines so that you can then offset the lines slightly for the drawing effect:

Large buildings

I tested different sizes of buildings to define the limits to apply and avoid obtaining too large buildings:

To further vary the result, I then added towers much taller than the equivalent buildings:

These large towers were entitled to facades just for them:

Textures

A subtle texture effect has been applied to the different elements (instead of a plain color facade):

This allows for a much more organic result:

The texture effect is created using a large number of lines that vary very slightly in color:

Downtown

Until then the distribution of buildings was random, so for more variety I created the "Downtown" feature which prioritizes the large buildings towards the center and the small ones towards the edges:

Diagonal view

I then started developing another feature to change the orientation:

To obtain a 45° angled view:

Trees

An important step to add ever more details to this crazy project was that of the trees... To do this, I started by activating the debug mode:

I then placed "a" in the boxes that were still available:

And I added buildings on these squares:

Why buildings? To optimize and simplify the code... From a technical point of view, buildings and trees have a common Class, this makes it possible to make certain functions accessible to both buildings and trees (without having to rewrite them twice) and it also allows trees to be compatible with the sorting function of buildings (because the trees and the buildings must be sorted together in order to then be able to draw them in a very precise order, otherwise we would see the trees in front of or above the buildings).

The trees are kind of very special buildings... Here you can see that the building is divided into 2 sections:

Then a third section was added and the drawings on the facades were removed:

Other sections have been added:

The drawing effect makes sections less visible:

For a less square result, tree sections now have 5 sides, with random rotation of each section:

And to finish, light lighter lines have been drawn on the facades:

New special buildings

As if there weren't enough detail yet, I added the pyramid building:

Spiral buildings:

As well as many possible variations for spiral buildings:

Vehicles

To add the vehicles, I first re-enabled debug mode:

I then added "v" boxes on the roads:

Just like trees, vehicles are technically a kind of simple rectangular building:

A second section is dropped on top of the vehicles to give them a car or bus appearance:

Have you ever noticed that the direction of the vehicles has been calculated and that they are all driving on the right?

I then added the vehicles on the other lane in the other direction:

Then I repeated the operation for the horizontal roads by adding the "v":

To get this:

New roof accessory

A new, much larger roof accessory has been added:

A more or less fine grid was then applied:

Parks

The addition of the parks was also an important step in the project... To begin with, it was necessary to select a part of the areas entirely surrounded by roads, of square or rectangular shape (therefore without a stretch of road inside the area):

A lake is then drawn in the middle of the park:

The area occupied by the lake (+ a margin around the lake) is made unavailable for further additions, then the rest of the park is marked with the letter "p":

Trees are then placed in the squares of the park with the letter "p":

With several parks and the perspective effect, we get:

I then placed other elements in the park resembling picnic blankets to add more detail to the parks:

Swimming pool

One of the most original details of this project is certainly the rooftop swimming pool... To do this, I started by adding a section to the building and which occupies a little less than half of the building in the direction of the length:

Since this is a building section, I was able to apply roof edges to create the edges of the pool:

The next step was to add a new element that looks like a bar that serves cold drinks:

It was then necessary to target the area of ​​the roof on which the deckchairs will be drawn:

Then draw them, sometimes leaving the space empty:

The pool bar is also sometimes drawn in a park:

Color palettes

Although the selection of the palettes had already progressed in parallel with the development of the project, it was at this late stage of the development that I did the most work on the color palettes of the project.

This is also where I created the single color palettes:

Some of which had an extremely low probability of being minted (about 0.15% chance for this one):

In the end, 77 color palettes were selected:

Low density

The rare "Low density" feature is rather simple to create, since by limiting the number of buildings, it leaves a lot of room for trees:

However, it was necessary to modify or limit many possibilities for this feature... For example, the map could not be too large (because it was much too slow to generate), nor too small because it was unattractive. The number of vehicles has been reduced, some features made unavailable and all palettes have been tested (and only a few palettes have been retained for this feature):

Antennas

The last roof accessory added was the antennas:

Tests and latest improvements

The last step consisted in carrying out numerous tests and checks, and tweaking all the last little details to obtain an impeccable result:

Code size

The final version of the project code was about 155,000 characters (about 3600 lines of code)... After reducing the size of the code as much as possible using various techniques, the code was minified into a compact code block of 37,934 characters:

About this article

Of course this article is only a very simplified outline of the huge and very complex work behind the Dencity project.

Release

The Dencity project was published on May 4, 2022 on Fxhash and is now available on the secondary market: https://www.fxhash.xyz/marketplace/generative/12431