ORBICULAR

orbicular (adj.)

round, circular, spherical, having the shape of an orb

Generative constellation of planets, a combination of digital and non-digital art.
Created in collaboration with abstract painter Tom Blameworth

I took care of the code, Tom used paint. We shared the idea.

Click here to visit Orbicular FxHash NFT website.

Examples of Orbicular variants

Each variant consists of at least one planet. Every planet is textured with one of over 60 photographed painted "orbs". Little moons, and stars are also bitmap-based, the rest of the picture is generated with code.

Part 1 - Traditional art

Paint orbs:

Tom has developed a technique, where using paint and paper, he is able to create colorful orbs with natural, floral patterns.

Some of them turned out very round:

Those that didn't, but we thought are interesing, were cropped to a perfect circle, to be further modified programmaticaly (more details later).

Some slight color corrections also happened at this stage:

The whole collection:

12 naturally formed orbs, and 52 cropped ones.

Part 2 - Digital art

Generative - what does it mean?

At the root of algorithm constructing each picture, there is a single number called seed. That seed is used in all randomization functions throughout the project.

Everything - which images to use by each planet; light direction; number of orbs and their position and size; presence or lack of cities; moons; planetary rings - is derived from that seed. Every seed yields different Orbicular variant, and one particular seed always yields the same output.

Light

One of the main randomized properties is light direction.
It affects nearly every aspect of the image:

which side of the planet is lit
shadow position under the orb
if city is at daytime or nighttime
which side of the buildings should be brighter
gradient on the background

Elements

Every planet has a chance to spawn each of those fully generative elements:

City

Each city is unique. Randomization begins with very basic characteristics like width and height, or number of buildings, to more complex like rotation, presence of windows, dots that make it blend near the ground level. City colors match the planet, and also the lightning.

Planetary ring

Many semi-transparent white ellipses combined together construct every planetary ring. Varying outer radius, inner radius and rotation attributes control the look. Ellipses thickness is randomized to break the ring's otherwise uniform look.

Planetary ring edge cases

Color sampling

I developed a custom color sampling module for this project, along with previewer.
The procedure is to get a slightly blurred image from the planet, and set the color at the top edge as a primary (marked with a big red dot). Then create a matrix of sample points (little red dots), and find the secondary color, which will be visually as distant from the primary one as possible. Distant in terms of hue-saturation-lightness color space. Hue difference is the most important part of the equation.

Color swatches preview (click to enlarge)

Background

Background is simple: gradient corresponds with light direction; colors are darkened swatches extracted from the biggest orb; stars are little randomly scattered grayscale images. There is also a high chance of falling star appearing.

Composition

Very technical solution, to visually very influential aspect is planet positioning. There are no predetermined compositions in Orbicular. Planets are spawned in a sequence, ensuring there aren't any unwanted collisions, and also fitting the margin.

Collision detection system is based on circles. Rules are:

Red circles can't collide with anything (except for circles of the same planet).
Green and orange circles behave the same as red, but are allowed to go past the blue margin.

Falling star (orange) collision detection serves two purposes. First, it makes it occupy only free space in the composition. Second, it prevents "streaks" from ever starting behind any other objects. Small middle-circle allows for close contact though.

Masking

One of the more challenging aspects of the project was to reconcile image-based elements with those drawn in code. For example, part of the planetary ring is always hiding behind the planet.