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 on fxhash

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

I recently had a chat with Gather about my art. Here’s a short excerpt…

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.

Gather, January 6, 2022

You can read my full interview with Gather here.

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 , , , | 4 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