Astronomic Comics – Generative Comic Books

On the most barren hostile worlds in the galaxy there are glimmers of life. An alien species has found a way to thrive by building cities under protective domes. Each page of this 512 page generative comic book documents one of the many planets they inhabit.

This piece was created completely from code, with no predefined images, palettes, or post processing. It was programmed in plain vanilla JavaScript from scratch. The now minted out set on fxhash includes 512 comics with many interesting variations. In this post I will share some more info behind the piece.

You can view all the comics on fxhash. I also built a standalone website with some extra features like HD rendering, sort by feature, twitter banner, and improved browsing speed.

Astronomic Comics Explorer

Keep reading to learn more about the inspiration for this piece and how I made it…

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

Divide By Circle – 3D Generative Art

My first 3D generative piece on fxhash is an experiment with subdivision, cubes and a circle. The algorithm uses a special subdivision formula that can force arbitrary cuts like a circle, lines or spiral. There is a mutation system attached to the subdivision that helps to create the unique appearance .The color palettes are also generated dynamically. To make it 3D I used Three.js which I have used a few times before for Bogus Roads and Bad Shapes.

Divide by Circle was also featured at the “Generative Taipei On-Site” 2023 art exhibition in Taipei, Taiwan.

Divide By Circle on fxhash

On Display at Generative Taipei On-Site in Taipei, Taiwan 2023
Posted in Generative | Tagged , , | 1 Comment

Gensuzendō – Generative Calligraphy

Hitsuzendō (way of Zen through brush) is believed by Zen Buddhists to be a method of achieving nirvana. This work is my own way of following that practice.

This piece combines many techniques to create the shapes, simulate the brushwork, and generate the stamps. There are several styles possible including ancient, modern, inverse, and graffiti. The stamps are also generated with many varieties possible.

Gensuzendō on fxhash

64 Gensuzendōs on fxhash

Keep reading for some more info about this piece!

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

Interview with Gather

In January 2022 I had a chat with Gather, it was the first intervew I had about my generative art. You can read directly it on the gather.org site, but I also have syndicated it for you here.

Broken Flows by KilledByAPixel

Who are you?

I’m Frank Force, aka KilledByAPixel, a generative artist and game developer in Austin Texas.

Why do you create things?

I see things in the world around me and feel an urge to replicate them. Sometimes by drawing or just by thinking, but my favorite way is with code. I like to see how simple I can make the code without it losing meaning.

Keep reading for my full interview with gather…

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

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