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…

Continue reading
Posted in Generative | Tagged , , , | 2 Comments

Broken Flows – Generative Art

My generative work “Broken Flows” is my deep dive into flow fields and even more so paint brushes and color palette generators. Very excited about how this one turned out and the tech I am developing for future pieces.

Broken Flows on fxhash

More Info

I have dabbled with some flow fields on before and found them an interesting subject for generative art. In June I posted a few tiny programs on dwitter, here is my favorite. The special thing about this flow field is that it uses the tiny equation sin(x^y) that make artifacts from xor function visible.

F=_=>((1-X%1)*S(X^Y)+X%1*S(X+1^Y))*30
for(k=2e3,B=t*9,A=B**3%k;k--;x.fillRect(A+=C(b=F(Y=B/99)*(1-Y%1)+Y%1*F(Y++)),B+=S(b),t%=4,t))X=A/99

For Broken Flows I used this as a starting point and played around with it. My goal was to both explore the variety possible with small changes to the code and to make it look as though it was painted by hand.

To add depth and character I developed a brush stroke system and a color palette picker. It picks the number of colors up to 5, choses a pop color (bright and near full saturation) and builds the rest of the pallet around that. The brush system uses up to 50 smaller lines with slight variations to create a single brush.

There are also many different options that can affect how the piece looks. For example if pastel mode is active the paint is watered down to cause more blending by setting the brush transparency to 10%. Loopy mode causes the angle to accumulate in the flow field which causes interesting spiral patterns. Here’s a piece with both of those enabled.

I also focused on contrast between light and dark areas, often just working in grayscale. The grayscale mode doesn’t just remove saturation but creates a special palette to ensure contrast and pop. I will leave you with one of my favorite grayscales with the triangular field mode causing hard angular strokes, thanks for reading!

Posted in Generative | Tagged , , , | Leave a comment

Infrastructures – Generative Art Doodler

Infrastructures is a tiny doodling algorithm I discovered and first posted on Dwitter in June of this year.

for(j=1e4;--j;x.fillRect(a.x+=C(a.a+=((a.x+d%777)^a.y+d)/1e3),a.y+=S(a.a),1,.1))a=T[i=j%99]=t?T[i]:(d=Date.now(),{x:i*20,y:j**9%1e3,a:j})

This algorithm is very complex and interesting so I developed it into this larger work and released it on fxhash.

You can use this special tool to save HD 4096×4096 images of Infrastructures.

See the Pen Infrastructures by Frank Force (@KilledByAPixel) on CodePen.

Posted in Generative | Tagged , , , | Leave a comment

Grayscale Bytes – A Tiny Generative Code Study

This is a study in generative abstract tiny code. I started with this dweet which uses an interesting algorithm to fill in the shapes.

r=r=>Math.random()*r|0
X=r(4e3)-2e3
Y=r(4e3)-2e3
v=r(w=r(h=r(500)))
x.rotate(t*w?0:X)
for(i=w*h;i--;)x.fillRect(X+i%w,Y+i/w,S(t),S(i%v)/t/t)

From there I added more refinements and polish for release on fxhash. I made a tool that will allow you to browse seeds and save HD images.

See the Pen Grayscale Bytes – Tiny code monochrome composition study by Frank Force (@KilledByAPixel) on CodePen.

Posted in Generative | Tagged , , | Leave a comment

Aliendscapes

A parallax alien landscape generator featuring mountains, stars, meteors, and suns in about 4k of pure JS. This was my first piece on fxhash. Click to generate a new landscape.

See the Pen Aliendscape 馃獝 by Frank Force (@KilledByAPixel) on CodePen.

Posted in JavaScript | Tagged , , | Leave a comment

LittleJS 馃殏 The Tiny JavaScript Game Engine That Can!

All aboard!

LittleJS is lightweight 2D JavaScript game engine with a WebGL rendering system. The goal of this project is to be small, simple, and easy to use for a variety of applications from size coding game jams to commercial releases.

This engine has everything necessary for most games including super fast rendering, physics, particles, sound effects, music, keyboard/mouse/gamepad input handling, update/render loop, and debug tools.

馃殏 LittleJS Engine on GitHub

Continue reading
Posted in Game Dev, JavaScript | Tagged , , , | 5 Comments

Space Huggers: A run and gun roguelike for JS13K

馃殌 Play Space Huggers in your browser!

The souce code is also available on GitHub!

Continue reading
Posted in Game Dev, JavaScript | Tagged , , , , | Leave a comment

Batafuraiko – Winner of JS1024 2021

It鈥檚 official, “Batafuraiko” is the winner of JS1024! This is one of my favorite game jams because the main restriction is the program must be under 1 kilobyte. I had a blast with my entry and learned a few things working with the other participants on Discord. Thank you to the organizer and other participants. In addition to the winner I summitted 2 other programs: “Digilemma” (a self generating puzzle game that received 3rd place) and “Lightning Storm” (a storm sim with sound and visuals).

The official 1k version of my game along with all the other entries are available to play on the JS1024 website. I also made a codepen version of my game embedded below so you can jump right in and even take a look at the code!

See the Pen Batafuraiko 馃 Winner of JS1024 2021! by Frank Force (@KilledByAPixel) on CodePen.

Posted in Game Dev, JavaScript | Tagged , , , , , | Leave a comment

Bad Shapes – Music Video Website

Live Demo on itch.io

I made an interactive website for the band Bad Shapes! This virtual art installation features the self titled album by Bad Shapes and generative visual art set in a realistic 3D scene.

Posted in JavaScript, Music, Projects | Tagged , , | 1 Comment

Cityscape Sunset – Tiny Code Video Lesson

Posted in JavaScript | Tagged , , | Leave a comment