Dithered Branches – How My Generative Art Works

actual dot matrix print from my archive

When I was a kid in the 90s, we had a crappy black and white dot matrix printer that sometimes would run low on ink causing streaks or advance the paper a bit too far causing thin gaps. I always loved the imperfection of these prints, they seemed to have so much character and depth. Sometimes we would color on them with crayons or markers. This image to the right is from an actual picture of batman I printed about 30 years ago, and it shows some of those printing issues.

My concept for Dithered Branches was to simulate a lo-fi fantasy printer from the 80s, use that to print a generative landscape scene, then make it beautiful by applying color. Instead of just using the classic dot matrix style printer, I implemented Floyd-Steinberg dithering and exaggerated the printing errors. For my subject I chose a tree in front of a rocky space landscape.

There is a great amount of variety to this piece. Some have dead trees with missing branches, others have no tree at all. Most printers use dithering, some are slightly broken, others are even glitched out, and there is a small chance for dot matrix printers or even HD laser prints. To add even more permutations there are several color and paper options.

Just to reiterate because this piece is a bit confusing. All of these results are outputs directly from the same program. They were never printed by a real printer or painted with real paint. I haven’t even opened most of them up in an image editor! With that said, please enjoy…

Dithered Branches on fxhash

Dithered Branches #102
Dithered Branches #156

Keep reading for more info and analysis of the piece…

How It Works

Dithered Branches uses a multi step process with several canvases composited to create the final effect. The first step is to build a landscape scene which in itself has multiple steps: background, suns/moons, clouds, mountains, and tree.

While doing this, it draws to two separate 256×256 images. One is grayscale to later be dithered and printed. The other is the color plate that will be multiplied by the printed image.

The leaf rendering system works differently depending on the canvas. In the grayscale image it applies a dodge effect behind the branch so the leaves and branches stand out. However on the color plate it uses more soft brushwork with slight hue variation and gradient. I’m a big fan of gradients and they look cool with the dithering so I used them on almost everything. Otherwise there isn’t much detail to the background to allow the dithering and branches to be stars of the show.

The palette system is pretty simple. Basically it choses a color for the background and picks a slightly contrasting color for the leaves. The background color is echoed occasionally in the celestial bodies and mountain ranges with slight mutations, but there are also random colors mixed in.

There are many seeded variables to control the tree structure and mountain ranges. The tree has some light sensitivity but is allowed to bend in unpredictable ways so there was extra code necessary to center it in the frame. The tree is actually drawn in 3 passes, first without rendering to center, then leaf dodge, then the tree itself is drawn.

undithered grayscale on left and matching color plate on right
visible diagonal artifacts

Next up Floyd Steinberg dithering is applied to the grayscale image, converting it to black and white. I love this style of dithering because the simplicity of the algorithm allows interesting cellular automata artifacts to emerge. I wanted to go big with the pixels so the dithering itself becomes a part of the composition.

For example if you look closely there is a bias from the top left to the bottom right, the direction the algorithm operates. Many similar patterns appear to what is seen in elementary cellular automata. I also like how in the light areas, single dots start to become very significant.

close up dots

After the dithering process has completed, it is ready to “print” the image. It does this by emulating how an actual printer works, dot by dot, row by row. Some of what it simulates is ink depletion and replenishment, ink smears, and small glitches to add more realism.

When the black and white printer finishes, then the color plate is modulated with the dithered printout to create a composite image.

If you look closely you will notice that these dots are not circles but more complex and varied shapes. Also the edge of the color plate has a soft transition to the blank paper.

composite image without paint flecks
branches and paint flecks

We still aren’t finished yet! The final step is to apply paint flecks where the leaves would be. This helps give a feeling of three dimensionality and life to the tree.

Similar to the printer dots, these are complex blob shapes with a variety of colors. I imagined a tiny painter flicking paint onto the canvas and tried to emulate how that might look.

I love how the dithering algorithm handles the branches, so I tried not to cover them up too much with the paint flecks.

final result of a possible Dithered Branches output

Adding Variety

My favorite parts about creating long form generative art is playing around with variations. There are many variables that control things and different colors of course, but I like the fun of seeing big changes to the output without making many changes to the code itself.

One of the first variations I added is to not have a tree at all. Void of life, it is transformed into a serene space landscape like something from an old science fiction magazine. This one also has a margin which I like because you can see the rough edges of the printer contrasted with the soft color plate.

Dithered Branches #82 – sometimes there is no tree

Another thing that can happen is a dead tree which has no leaves and missing branches. I think these are probably my favorite. #110 is a good example of this with a beautiful palette.

Dithered Branches #110 – sometimes the tree is dead

There are also night scenes which have many smaller moons and stars. These modifiers can also combine so you may, for example, get a night scene with no tree.

This one also has the “poor” printing mode which adds a slight rotation with extra streaks and smears. There is a sense of horizontal motion contrasted with tension from the rotation and improperly offset color plate. Because it is so dark, the dithering is very apparent with many interesting patterns jumping out.

Dithered Branches #139 – no tree night with poor printing

The printer has several different quality options from good to bad to glitched. The glitch ones have an interesting effect I developed that makes the dithering algorithm skip around as if the memory is corrupted. A good example of this is #220 because it is an uncolored night scene, so the glitching really pops.

Dithered Branches #220 – glitched out printer without coloring applied

While this piece is mostly focused on dithering, I thought it would be fun to include a few rare variations that are not dithered. So I added both dot matrix style printing and laser printing (really just the original 256×256 grayscale image with linear filtering). If it is laser printed like#16 it gets an extra step of painting a border to make it feel more organic. These rare laser ones have a completely different wood block print style vibe then the rest of the set.

Dithered Branches #16 – laser printed option, dithering disabled

In combination with all the different scene options there are several color options: Nice (default), Uncolored, Vibrant, Inverted, Grayscale, and Minimal. The inverted ones probably stand out the most.

At first I was confused when I saw this one. Then I realized that it has the special light green paper which is inverted making it seem dark purple! Whenever I notice something strange in one of my previews it is often worth digging in to find out why. Sometimes it’s a bug, other times it’s just serendipity.

Dithered Branches #58 – inverted option with a dead tree and purple paper

Finally, there is a small chance of one of several paper styles: pink, blue, yellow, green, dirty, holographic, and my personal favorite continuous feed paper. When I was a kid, we had a gigantic box of this stuff behind the printer because it was cheap and printers back then didn’t handle paper trays well.

Dithered Branches #236 – continuous feed paper with hole punches

How It Started

It’s worth sharing some background to give more context to the work because I’ve been doing this stuff for a long time. Twelve years ago, one of my first big releases was a virtual bonsai tree simulation. This was before the days of UE4 and Unity so I had to program the entire thing from scratch in DirectX. During that time I also researched trees, read several books on the topic, and even did many sketches by hand. Surprisingly the game still works perfectly fine on Windows 10.

In recent years I have been more focused on JavaScript but I’m still making trees. On the website dwitter I often publish tiny programs to test out ideas and many feature trees. This one is a pretty good example of what I’ve been able to do within the size limitations. I also used it as a starting point for the tree in Dithered Branches.

F=(X,Y,Z,A)=>T(x.fillRect(X,Y,z=(L=Z<.2)?19:Z,z,x.fillStyle=R(L?q:Z,L*q*T(T=Math.random))),Z>1&&F(X+S(A)*Z/2,Y-C(A)*Z/2,Z*.97,A*.96+T()*.4-.2))>.7&&F(X,Y,Z/2,T()*4-2)
q=256
F(q+t*4e4,1020,60,0)
Fall Colors Dweet ๐Ÿ‚

The rocky landscape is based on a tiny algorithm I came up with for my game Space Huggers. It’s a neat way to kind of simulate gradient noise but using much less code. I also used it in a few dweets, here’s one of them.

for(o=g=i=h=4e3;i--;g+=o=r<2?r-1:o-g/h)r=Math.random(x.fillRect(i*(t+1),g*t+t*300,t+2,h))*20
x.fillStyle=`hsl(${r+t*60-200} 19%${80-t*20}%`
Landscape Generator on Dweet โ›ฐ๏ธ

How It Went

I am incredibly thankful to the fxhash community for fully minting out Dithered Branches on the first night. Many commented on the piece and loved it, I hope it will be continue to be a sleeper hit as many of my other pieces seem to be. Some things overheard in the fxhash discord…

“damn god. dithered branches are just outrageous. just kept looping my piece and the way it loads and the leaves and the dots fill the page is so satisfying to see.”

“The trees are nice. Dithered branches my favorite tree tho ๐ŸŒฒ”

While I am incredibly happy with the success of the piece nothing ever goes perfectly. The main problem this time is that both the holographic and continuous feed paper must have rendered slowly on the fxhash preview machine and did not complete. This causes partially empty spots in the preview gallery. Hopefully in time a feature will get added that allows creators or owners to regenerate previews.

Dithered Branches gallery on fxhash

Some of these holographic ones look really amazing too, take #213 for example. What you won’t see in this image is that the holographic colored part continuously moves around in the background.

Dithered Branches #213 – holographic paper option

Wrap Up

Well, that ended up being longer then I intended, so thank you for reading until the end. I’d love to write these posts more often but can only do so if people are interested and support my efforts. The best way to do so is to follow me on twitter help share this stuff with the world.

I’m currently working on many things (including this post which is thankfully almost done), but something I want to deliver soon is the ability to for people to save HD posters of Dithered Branches with a given fxhash like I did for my other piece Infrastructures. I already have the code done, just need to finish up the UI. Keep an eye on my twitter for details.

As a parting gift I’ll leave you with this 4800×3200 widescreen poster of the same piece we worked through earlier. Thank you for reading, take care of yourselves, and have great day.

high definition poster for Dithered Branches

You’re still reading? Ok, I dug up the first tweet I posted about dithered branches for you…

This entry was posted in Generative and tagged , , , . Bookmark the permalink.

2 Responses to Dithered Branches – How My Generative Art Works

  1. Pingback: Astronomic Comics – Generative Comic Books | Killed By A Pixel

  2. Pingback: Gradient Ascent – Generative Space Posters | Killed By A Pixel

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.