Raster Kingdom

Abstract kingdom depicting a sprawling city clustered around a central castle.

I've always found topographical city maps to be really fascinating. There is just so much visual information baked into every street, every building, and the relationship between the structures.

This is my attempt to build a medieval kingdom in the style of a topographical city. Each update will hopefully share some of the thought and design decisions that go into the creation process. I'll probably also get into technical details and limitations but I'll try to not go too far down that rabbit hole.

Update: The Raster Kingdom is live and currently sold out. You can buy a kingdom on the fxhash secondary market.

v21 (2 months ago)

To add a little more diversity and visual interest between mints, I've added fire and ice kingdoms.

v20 (2 months ago)

The trading routes leading away from the city were previously implied with negative space. I've tried adding a lighter colored pixel to explicitly define the path. I'll need to render more kingdoms with trading routes but I'm liking the style.

One side benefit of this iteration, the old paths were creating a bug that I couldn't see because the paths were invisible. This caused some funky city rendering that I thought was just a random anomaly. Once I made the path visible, the bug was easy to spot and fix.

v19 (2 months ago)

The castle felt a little crowded in the center of the map. I redesigned it to give it a little more space.

v18 (2 months ago)

This version adds forests on the outskirts of the city. Also, each of the 4 paths leaving the city has a 50% probability of not appearing.

v17 (2 months ago)

The previous change seemed like a good idea on paper but after rendering a bunch of kingdoms, it just wasn't working for me. So I've reverted to simpler buildings.

This version also features a compass. I went through 5-6 compass iterations before settling on this one. Other versions were too small, too subtle, or too bold. This version feels like it is large enough to add something to the design without being too large and becoming a distraction.

v16 (2 months ago)

This is a pretty subtle change but one that I feel adds a lot to the design. The large buildings felt a little to much like a randomly shaped block and not enough like a structure that resembles a building. So whenever I connect rectangles, I add a slight 1 pixel overhang to imply the underlying rectangles are connected but still independent. To me, this makes it feel a little more like a building.

v15 (2 months ago)

Plot twist!

After all this talk about monuments, I think I'm going to drop that concept entirely. Visually, I just don't think they work. It takes away from the organic vibe of the city, at least for me. So I think I'm going to go with a more abstract concept with building shapes that do a better job of blending into the overall design. I'll add large, medium, and small buildings.

This screenshot is the first attempt at the new concept. It doesn't quite work because all the large buildings are the same design, just flipped and rotated. I think it'll feel much nicer once I add more large building designs.

v14 (2 months ago)

Added four new monuments. (Town Portal, Griffin Nest, Abbey, Statue)

v13 (2 months ago)

Here is the a kingdom with an amphitheater. This is the 12th monument.

v12 (2 months ago)

New monuments include pyramids, royal gardens, spice market, and a labyrinth. I'm also trying a few new color options.

v11 (2 months ago)

The latest includes a barracks, training grounds, and a wizard tower.

Now I'm thinking about making each monument appear between 10-20% of the time. That should make most kingdoms have 3-4 monuments.

v10 (2 months ago)

This is a rendering of a larger kingdom. The more I render kingdoms, the more I think about keeping the existing logic for roads. I do like the look of a kingdom neatly divided into 4 quadrants.

Ultimately I'll probably test code for alternative road layouts and I think I'll probably go with alternate roads because it will add more visual diversity between pieces. But even if I go with more organic roads, I'll probably make sure a lot of pieces render with the classic NSEW layout.

v9 (2 months ago)

I've added a border to kingdoms. This feels pretty good to me. I initially thought about designing some sort of random tree outcroppings surrounding the city. That idea has some appeal but I just feel like it would draw too much attention away from the focal point. So a more minimal border preserves white space without competing too much.

v8 (2 months ago)

This kingdom features an obelisk, a guard tower, a fountain, and a stadium. I've added some spacing around monuments and widened paths around monuments. This feels a little better to me when a larger kingdom is rendered.

v7 (2 months ago)

Here is a kingdom with a stadium and a fountain. I like that there is space around the monuments to give some visual relief from the cluster of buildings. But something about this doesn't feel completely natural.

Maybe it's because there aren't smaller roads that connect the large roads to the monuments. I'll have to think about how to achieve that since my current code doesn't exactly make it easy to move buildings around mid-render.

v6 (2 months ago)

Instead of having an abstract list of nameless monuments, I think it will be better if every monument has a name and at most appears 1 time in a kingdom.

This should tie in nicely with fx(hash) features. If I have ~20 monuments that each have a 5% probability of appearing in a design, then you can see how rare a piece is based on the number of visible monuments. If a design has 0-3, it might be a common. 4-7 could be uncommon and 8+ would be rare.

v5 (2 months ago)

Here is a preview of a custom pixel art tool I created to design buildings. It's a mini VueJS app that allows me to paint pixels using a limited color palette. Instead of exporting a png, I export the coordinates of each pixel along with a number to represent the color. When I translate the pixel design to a P5js canvas, I'm able to map the colors to different themes.

v4 (2 months ago)

Here is a darker brown to compare to the previous version. I often try experimenting with mid tones but quickly find that I prefer the higher contrast of dark + light tones.

I'm going to revisit color later. For now, I feel like I need to focus on the structure and composition of the city.

v3 (2 months ago)

I'm experimenting with new colors. Browns and earth tones can make the design feel a little more map-like. I do find that a flat brown leaves something to be desired through. Maybe it would be better to go with a set of super dark colors or try noise.

v2 (2 months ago)

I've expanded the kingdom and added smaller buildings throughout the city. This feels even more like how I imagine a medieval city to be laid out. The major roads wind into the hub of the city leading to a castle.

v1 (2 months ago)

This is the first version of the Raster Kingdom! It's not a bad start. The buildings feel blocky and abstract while also having an organic city vibe.