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.
Keep reading to learn more about the inspiration for this piece and how I made it…
Concept and Development
The idea for this project grew from “Dithered Branches,” a work I previously released that used Floyd-Steinberg dithering with large dots and colorful gradients. In early January I reworked that code to prototype a comic book style with halftone shading and thick outlines. I could see right away that it had potential though the code itself needed to be reworked.
Inspirations for this work include Roy Lichtenstein, Jack Kirby, Dave Sim, and newspaper comics I read when I was a kid. Fictionally I was inspired by the Bottle City of Kandor in Superman comics and Dr Manhattan’s fortress on Mars.
After proving out the style, the next step was to integrate comic book panels into the design, each having a different views into the same landscape. However as I played with the panel layout system the results were so interesting I decided to focus on that for a while. I converted it to 3D and released “Divide by Circle” which ended up being a success in it’s own right. This early example is from almost the midway point between projects.
After releasing Divide by Circle I was able to return to my comic book idea and refine the concept. I wrote a custom rendering system to handle the halftones and color gradients. The piece really started coming together when I implemented the continuity system that shows the gradual progression of time across panels.
I continued building out the concept by implementing several more shapes like clouds, lightning, meteors, comets, ringed planets, and even a small domed city, each requiring special code. At this point I nearly decided to go with a 3:2 portrait aspect ratio to make it appear more like a comic book page, but ended up keeping it square to maximize screen real estate.
One of the last things I added are rare variations which can totally change the look of the piece. The final shot I posted before going live on fxhash demonstrates the “Packed” panels option which removes all the margins and space between panels.
Techniques
A combination of systems were used to achieve the final result including panel creation, halftone rendering, scene composition, several different object types, and other effects.
First the panel creator breaks up the canvas into rectangular shapes using a recursive subdivision formula. The depth of the recursion determines whether the panels are normal, big, tiny, or full page. There is some code that limits the sizes and prevent panels from becoming too short or thin. I had so much fun working on this part that I ended up getting distracted and developed it a separate piece called “Divide by Circle.”
After the panel layout has been decided, the next step is to select the color palette. The supported modes are 1-3 colors, B/W and rainbow. Colors colors are chosen in the HSL space with some randomness and logic to guarantee distinct hues for each color. Pure white is also included in the palette to develop negative space.
The shading style called “halftone” is exaggerated by magnifying the dots to enhance the comic book appearance. Halftone is used only to darken areas with black dots while colored areas are shaded using smooth gradients. This creates a unique appearance that is not commonly used in print. To accomplish this, all drawing code is routed through the same special rendering functions. That is where the halftone rendering, color gradients, and outlines around shapes are drawn.
Another way to accomplish this rendering style is with a post processing pass over the entire image to generate the halftone shading. That’s how the prototype worked, but I wanted a higher fidelity result with more control to break convention for things like like planetary rings, lightning, and meteor trails.
The scene is drawn from back to front beginning with a gradient to represent the position of the main sun in the sky which is always the same color. It may appear as a radial gradient in some panels while in others a linear gradient or solid color is used. During night hours, a starry sky is applied on top with a chance of shooting stars.
Each iteration is assigned it’s own celestial objects that may appear including dwarf suns, planets, meteors, and moons. These objects are have consistent shapes and colors across panels though their relative positions vary. The global lighting system controls how to apply the crescent shading on the spheres that gradually changes to indicate the passage of time.
Some planets have rings that can vary in orientation but always have the same color configuration. The relative positions of these objects are not intended to be astronomically realistic, instead they are arranged like abstract shapes to create more interesting compositions. During development I experimented with realistic movement, however this piece was already becoming too complex so I decided to leave that for something to explore next time.
A weather simulation controls cloud size, shape, density, and how often lightning strikes occur. These values gradually change from panel to panel to simulate dynamic climates. Each cloud is composed of up to a hundred overlapping ovals with a black outline to unify the shape. There are multiple cloud layers to help make the scene feel more three dimensional.
Depending on the lightning rate and cloud density there may by several lightning strikes in each panel. A recursive function is used to extend treelike branches down from behind the clouds and create a spark wherever it hits the ground. It’s a pretty simple effect but took a while to find an style that matched everything else.
Originally the clouds and lightning were rendered behind all the mountains. That was fine when it was clouds alone, however it became distracting because lightning was always in the background. To fix this, the clouds, lightning, and mountains are drawn together but sorted in layers from back to front. It was exciting to finally see lightning strikes hitting the ground!
The mountain ranges are created with a similar algorithm used by several of my projects including “Dithered Branches,” “Alinendscapes,” and “Space Huggers.” I have been refining this function over multiple projects to produce more interesting results. Each planet has a set of parameters chosen that determine the rockiness, height, and randomness of the mountains.
Some panels feature a domed city nestled between the mountains, one of the last things I added. These worlds felt so empty, I wanted to show signs of life but in an abstract way that would maintain the comic book style.
The bubble cities are composed of a half circle enclosing multiple tall shapes arranged to have heights below the dome. I like how at this small size, the dot pattern feels like part of the building structure rather then just shading. It’s a simple addition but hopefully helps to fill the void and add another layer of depth.
To tie all this together there is a continuity system which handles time of day and weather changes. Each panel advances time by a small random amount, and changes the light angles and weather parameters at different rates. This combines with the planet’s unique features and celestial objects to create a loose narrative.
The last thing that happens is to apply a noise layer on top of the image. Though subtle, this is necessary to breath life to the art and in this context helps give it a paper like quality. The noise is not from an image, but generated randomly based on the iteration seed like everything else. It may not look like much, but I’ve spent many hours refining the noise system with each new fxhash piece I’ve released.
Special Features
One of my favorite things with longform generative art is implementing rare features that add range to a set without using much extra code. With a few tweaks I added 6 different styles that control the shading and outlines. For example by using a regular gradient instead of the halftone shading, it completely transforms the piece to a more modern looking comic.
Another variation removes the outlines around shapes and increases the halftone shading density to compensate for more of a pulp sci-fi look.
Most results use white paper, but there is a small chance of black paper which is a simple but cool looking effect reminiscent of 90’s era comics. The background sun may also have a random modifier including a spiral, star, dot, or not being there at all.
Another modifier called “All Sky” forces every panel to be a sky shot with no mountains or ground included. This caused some unexpectedly abstract results.
Feature Breakdown
Here are some statistics from the results that show how the features were distributed. As you can see there are many special options with about a 1% chance each. I wanted to have enough that there would be at least a 20% chance of minting something rare. I collected these stats using the awesome fxfam tool by zancan.
| Colors | 1 (26%) | 2 (48%) | 3 (21%) | B/W (3.5%) | Rainbow (.78%) | Grayscale (.59%) | |
| Panel | Normal (85%) | Long (6.2%) | Full (1.3%) | Big (1.2%) | Tiny (.39%) | ||
| Style | Halftone (96%) | Halftone No Outline (.98%) | Halftone Solid Colors (1.8%) | Solid Colors No Outline (.2%) | Solid Colors (.2%) | Gradient No Outline (.78%) | Gradient (.39%) |
| Sun | Normal (96%) | Dark (.98%) | None (1.37%) | Spiral (.59%) | Radiant (.59%) | ||
| Special | Normal (93%) | All Sky (2.7%) | No Atmosphere (1.4%) | Packed (.98%) | Aged (.98%) | Black Paper (.78%) |
How it Went
This project generated a lot of excitement on twitter where I had been posting development updates. Somehow this piece really connected with people who aren’t normally interested in generative art. This encouraged me to put extra effort and care into the work and build out the features with enough diversity to support a large set.
I posted a tweet 24 hours before minting with the edition count and price so everything was fully transparent to collectors. It wasn’t until the day of minting when I actually thought of the name “Astronomic Comics”. To my luck and amazement it had not been used for anything before!
The project went on to sell out all 512 iterations in only a few days! I am very thankful to the fxhash community for making it a success. It was amazing to see so many people posting about it on twitter, even people who don’t normally follow fxhash.
As my way of saying thanks to collectors of the piece, I spent a few days building a website for the project with some special bonus features. It operates autonomously from fxhash and can even work completely offline for museums and gallery setups. Among other things enables 8K HD rendering to support poster size prints which some owners had asked about. I will continue to improve the website over time.
Special thanks to Mark Knol for his FXCollectors website which I used as a base to help understand the fxhash API.
Wrap up
This was one my personal favorite projects and I would love to revisit the concept someday. I have many more ideas to experiment with and want to develop the story and lore further. For now I’m going to take a step away from this and try a new idea with my next generative piece. Follow me on twitter for updates.
Thanks for reading, take care of yourselves, and have a great week! I’ll leave you with with a few interesting results I’ve had during development…
You’re still here? Ok, I dug up my first twitter post showing off this concept…
Pingback: Gradient Ascent – Generative Space Posters | Killed By A Pixel
Pingback: Tilemoji – Tweetable Emoji Art | Killed By A Pixel