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.
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.
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.
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.
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…
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.
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.
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!
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.
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.
Much progress on my js13k game! 🚗💨 It now includes the full game loop! New stuff: start screen, hud, collisions with vehicles & objects, offroading, checkpoints, improved vehicles, radio, sounds.
Tomorrow I start work on level 2. 😅👍 #js13k #javascript #outrun #gamedev
Frank Force @KilledByAPixel is a generative artist, game designer, and software engineer with a passion for creating interactive experiences. Over the years, he has produced thousands of pieces of art, games, and tools, blending his talent for programming with his love for the…
Today's progress on outrun13k... improved plants, input system, basic gameplay, clouds, better shadows, many small things. build tested with sound and music, its under 8kb! 😅👍🚗 Tomorrow: better gameplay, rework track gen, more trees, road signs. 🚧 #js13k #gamedev #retrogame