The story begins late last year, on December 25th. [I released Dithered Branches, one of my most popular generative works on fxhash.](https://frankforce.com/dithered-branches/) In that set I was inspired to simulate a low resolution 80s style dot matrix printing combined with water color painting and paper texture.

::tezos-storage-pointer[]{contract="KT1KEa8z6vWXDJrVqtMrAeDVzsvxat3kHaCE" path="token_metadata::247300"}

Most of the results for Dithered Branches include a tree as the main subject but only 19 of 256 have no tree but instead a rocky landscape. Those ended up being some of my favorites.

::tezos-storage-pointer[]{contract="KT1KEa8z6vWXDJrVqtMrAeDVzsvxat3kHaCE" path="token_metadata::247669"}

This work is also a continued evolution of [my first release on fxhash “Aliendscapes.”](https://www.fxhash.xyz/generative/slug/aliendscapes)

::tezos-storage-pointer[]{contract="KT1KEa8z6vWXDJrVqtMrAeDVzsvxat3kHaCE" path="token_metadata::77554"}

So that’s where my inspiration began as developed these minimal dithered landscapes into a new project. I have been tinkering with this for most of the year but really gained momentum when a friend asked me to make some art for her show in Austin Texas. I produced a few limited edition poster size prints based on my current work in progress.

![](ipfs://QmZsjitbUPVhvdoFwnpT1e9Fe211dW4R1Tez3qAVndxevS)

As I continued working to improve the code and experiment with new ideas, I eventually distilled everything into [the art generator I released on fxhash called “Gradient Ascent.”](https://www.fxhash.xyz/generative/16224)

# Scene Generation

There are only a few components used to build the scene including mountains, clouds, planets, meteors, and the ocean. The “View” feature decides the overall scene type and primary components. Most appear in a poster style aspect ratio with occasional landscape and square variations.

The color palette is also fully generative. It mostly works by picking a main hue and building around that. There are some extra color features that constrain the palette like “Vivid”, “Minimal”, and “Grayscale”. There is special code for gradients which I used on almost everything because they look amazing when dithered.

Of all the views, the most common is “Ocean”. This shows everything with moons above mountains reflected in an expansive sea using a custom programmed reflection system.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978220"}

A less common variant removes the ocean to focus on the rocky mountainous landscape using an algorithm I have been developing across many works. This includes a new shadow system that aligns with planet shading and sun position to create a more visually cohesive scene.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978237"}

The rarest possible view does not have mountains at all, but is still terrestrial with clouds and atmosphere. These are some of the most unique results, with only 5 like this in the entire set. This one also has “Vivid” colors that amplify the saturation and gradients.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978115"}

Removing the atmosphere leaves us with just planets, nebulas, and stars, the perfect ingredients to generate really cool space scenes. These have extra large planets and more nebulas that were custom programmed for this project to provide a rich backdrop.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1040631"}

# Post Processing

After generating a scene the dithering effect and other types of post processing are applied. The image can also be viewed in high definition without post processing by clicking the mouse. Advanced user commands are provided to fully control the output size.

![](ipfs://QmYTnCnu3MKUQ3j3YaaojvwTneQxUrdjWLegndFFTYoa9c)

As a cool bonus feature, any image can be dropped into the frame to apply the same effect. This is fun to play around with because each iteration has it’s own unique style. It’s definitely something I want to experiment more with in future projects.

![](ipfs://QmfF5pAgWbUpHJ2DwW2FCETA8cQvxrPAjZJyxv5mVsRYY2)

# Dithering

The dithering system draws scenes by printing colored dots to emulate a unique retro printing effect. This is not based on a real printer but more like a bespoke creation. It is all custom coded in vanilla JavaScript using the 2D canvas API. I implemented several different types of post processing including diffusion, ordered, halftone, pixel and LCD.

Diffusion dithering is the most common, which uses a Floyd–Steinberg style algorithm also known as error diffusion. This is similar to the system used in “Dithered Branches.” I love how it creates interesting artifacts similar to cellular automaton. Colors can also be limited to a few saturated elements with the “Minimal” color feature.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::977533"}

Ordered dithering works a bit similar to diffusion but using a Bayer thresholding matrix. This creates a visual repeated pattern in the output and was used in some early computer games.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978313"}

Halftone dithering works like traditional newspapers, by changing the size of dots to control the brightness. I also used halftone dithering in Astronomic Comics.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978254"}

Another post processing style I experimented with is LCD which mimics the tiny sub elements in pixels when magnified. These remind me of watching cartoons on TV.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978273"}

These have interesting detail when viewed up close, so here it is again magnified in HD…

![](ipfs://QmXaL3cUsNxdbDTxTdnBTEGqZZ6hjvPTZoyaRUV6zNECVN)

Finally we have pixel dithering which is the most rare. It works a post processing effect to pixelate the image into square shaped pixels with some randomness in position.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978854"}

# Rare Features

There are several rare features that can combine in interesting ways. One of my favorite results is this black and white halftone on green paper.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1019136"}

Only 12 iterations in the set ended up using the “Inverted” feature which completely inverts all colors in the output. It is not the most complex operation but often has impressive results so I like to include it as a special feature in most of my releases.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::990791"}

One of the rarest features is the glitch effect, only applied to 12 in the set. It introduces more glitching to the algorithm and even allows the image to wrap around the sides.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978533"}

The chroma effect breaks up each pixel into red, green, and blue components and offsets them slightly to produce a chromatic aberration effect.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::978264"}

Some results include “Meteors” and space scene can have larger “Comets”.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::980439"}

There are several different resolutions possible, but only 2 resulted in “Potato” which is the lowest. So of course this ended up being one of my favorites in the set.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::1012708"}

# Results

Gradient Ascent is now closed out at 300 editions on fxhash. Thanks to everyone who supported this project. They can still be collected on [the fxhash secondary marketplace](https://www.fxhash.xyz/marketplace/generative/16224).

To celebrate the project I picked 25 of the owners to receive a physical postcard. This will be my fourth postcard drop for fxhash, 100 unique postcards in total. I have a lot of fun sending these out to people around the world.

![](ipfs://QmYSGW2ABcvBTiPuGwboebFwbttq6hUAWrgcka2v5VsGqy)

That’s all I have for now, thank you for reading and supporting my work.

*- Frank Force aka KilledByAPixel*


Gradient Ascent is my generative artwork that explores space landscapes and dithering effects to generate retro style sci-fi posters. In this article I talk about the concept and features including some of my favorite results in the set.

Generative Artist • Game Dev • Programmer • Size Coding Expert • Musician • Zen Buddhist • Wizard • Friend to Cats 🖖

https://astronomic.3d2k.com <- HD Comics

http://zpritez.3d2k.com <- Zpriteverse

Gradient Ascent - Generating Dithered Planets

Written by

Editions

Share

Details

stay ahead with our newsletter