{"id":552,"date":"2014-03-29T10:04:28","date_gmt":"2014-03-29T02:04:28","guid":{"rendered":"http:\/\/www.gridsagegames.com\/blog\/?p=552"},"modified":"2016-11-12T23:14:04","modified_gmt":"2016-11-12T15:14:04","slug":"cogmind-ascii-art-making","status":"publish","type":"post","link":"https:\/\/www.gridsagegames.com\/blog\/2014\/03\/cogmind-ascii-art-making\/","title":{"rendered":"Cogmind ASCII Art, the Making of"},"content":{"rendered":"

Having recently finished adding 600 pieces of ASCII art to Cogmind, now’s the best time to write a bit about the process used to draw it all. (Read the previous post<\/a> for a bit more background on ASCII art.)<\/p>\n

First a disclaimer: I’ve only been drawing ASCII art off and on for about a year, so I’m not exactly an authoritative source on the subject, but in that time I have developed an interesting style that’s earned a good bit of positive feedback. Here’s how it’s done.<\/p>\n

Form<\/h2>\n

Starting with the basic form is what you do in pretty much any drawing medium, but with ASCII it’s especially important because the “flow” of an image can be difficult to capture (though it is by far its most important aspect). After all, you’re drawing with a predefined set of glyphs!<\/p>\n

\"cp437_12x12\"<\/a>

The code page 437<\/a> glyphs used to draw Cogmind art.<\/p><\/div>\n

The limits force you to get creative when considering how to depict and connect various features. You have to think just as much about what isn’t<\/em> there as what is<\/em>, since the viewer’s imagination is instrumental in connecting the dots and filling in empty space. Ideally you’ll want to look at the same piece multiple times split up by periods of waiting to make sure you weren’t getting too used to looking at it a certain way--it may appear different (either worse or better) when viewed fresh.<\/p>\n

While 255 characters is quite a lot, a smaller subset sees more use than the rest. An image can’t be a jumble of characters, since the eyes need a clear way to trace the picture by following lines or line-like characters (it’s good to remember here that a viewer will tend to imagine extensions of existing lines where convenient--always think about how “suggestive” a character is in a given position).<\/p>\n

\"cogmind_weapon_concept_fail\"<\/a>

Piece of crap from my earliest sketches. Serious WTF material…<\/p><\/div>\n

Alphanumerics should be used sparingly or for emphasis\/special purposes, as they are too recognizable as an individual unit and tend to feel somewhat detached from other glyphs.<\/p>\n

\"cogmind_weapon_concept_gauss\"<\/a>

A Gauss Cannon concept. I tend to use a lot of lines, which sometimes feels like cheating, but still retains that distinct ASCII look.<\/p><\/div>\n

 <\/p>\n

\"cogmind_weapon_concept_neutron_missile_launcher\"<\/a>

Patterns and parallelism can also be useful, as seen in this Neutron Missile Launcher.<\/p><\/div>\n

Another concept to consider at this stage is the “weight” of a given area, determined by the number of pixels that make up the glyphs used there. A concentration of dense glyphs will naturally lend more weight to that part, thus even where a glyph’s shape seems perfect for a certain use, if its thickness isn’t suitable then you may have to find another way to achieve that particular representation.<\/p>\n

\"cogmind_weapon_concept_assault_cannon\"<\/a>

The thicker lines and blocks around the barrel lend a lot more “oompf” to the Assault Cannon.<\/p><\/div>\n

As shown above I work in grayscale for this entire step of the process, since we don’t want to be distracted by color. Color will be important, and naturally even affects the flow and weight of an existing design, but for me it’s better to readjust those later rather than working with too many variables to begin with.<\/p>\n

At one point early on I was considering the feasibility of generating this style of ASCII art procedurally, but the flow and weight won’t look as consistent compared to manually placed glyphs.<\/p>\n

Shading<\/h2>\n

The next step is to vary the brightness of individual glyphs as necessary to redistribute the “weight” discussed in the previous section. A piece full of lines\/characters with uniform brightness can be hard to decipher. Key glyphs may be highlighted where appropriate, and both interior and exterior details are darkened so they still contribute to the overall image but don’t interfere with the “flow” of the main shape. This is also where background blocks can come into play, though for this particular style I use them only sparingly, and generally keep them dark.<\/p>\n

\"cogmind_concept_power_ampifier\"<\/a>

Pipes\/wires going “behind” others are usually faded, as are those that trail off (the effect is more pronounced once color is added). This is a Power Amplifier utility, by the way.<\/p><\/div>\n

Probably the most common shading trick I use is simple gradients, since those work well to give an image volume.<\/p>\n

\"cogmind_propulsion_concept_hover\"<\/a>

This Gravmag System looks a lot more round with the gradient around the base.<\/p><\/div>\n

This entire step can still be done in grayscale, though may end up requiring tweaks depending on the colors used later (for example, violet gradients may need a greater step to achieve a purposefully noticeable gradient effect).<\/p>\n

Color<\/h2>\n

As [my] ASCII art is mostly about shape, I don’t have to (or want to) use too many colors, at least not in a single piece. Small images generally use just one color, and only the largest might use three; a vast majority of the art uses two colors, one as the primary color and another often brighter or complementary color for highlighting.<\/p>\n

\"cogmind_biometal_leg\"<\/a>

An Enhanced Biometal Leg, because everyone knows biometal legs have two colors.<\/p><\/div>\n

In keeping with the terminal interface theme, pretty much all colors are fully saturated and often also very bright. You don’t have to stare at them for long periods, and there’s only ever one showing at a time, otherwise I’d tone it down like the rest of the interface which generally hovers around 70% brightness.<\/p>\n

\"cogmind_neutrino_core\"<\/a>

A Neutrino Core. One won’t make your eyes bleed, but I stared at screens covered with hundreds of these for hours and hours while drawing them all =p<\/p><\/div>\n

While there is not a lot of color mixing, quite a few colors are used throughout the entire collection. Colors are internally consistent where it makes sense, hence there are a several common sense themes like orange\/red for anything associated with fire\/plasma. That said, the art isn’t required for item identification so in a lot of cases I just use fun wild colors, sometimes in an attempt to keep better items looking “cooler.” No I will not show any cool items here. They shall remain secret until you find them in game. ;)<\/p>\n

Time Lapse<\/h2>\n

Normally I do entire item types together as a group for each phase, meaning sketch all<\/em> weapons, then color all<\/em> weapons, etc., though below you can see all the processes as applied to a single item from back when I was working on initial concepts.<\/p>\n

\"cogmind_hellfire_missile_launcher_timelapse\"<\/a>

Time lapse of the process for creating the Hellfire Missile Launcher.<\/p><\/div>\n

I wasn’t going to show any “really cool” items, but I already gave you the grayscale Neutron Missile Launcher sketch, which once colored is one of my favorites (though it’s only a mid-game weapon). So, here is a sped up time lapse of the process used to draw and paint that one:<\/p>\n

\"cogmind_neutron_missile_launcher_timelapse_fast\"<\/a>

Neutron Missile Launcher ASCII art time lapse.<\/p><\/div>\n

\"cogmind_neutron_missile_launcher_timelapse_slow\"<\/a>

Slowed so it’s easier to follow.<\/p><\/div>\n

And the final product, colored and in game:<\/p>\n

\"cogmind_neutron_missile_launcher_cinfo\"<\/a><\/p>\n

Addendum<\/h2>\n

[Update in response to a forum question.] Anyone familiar with traditional ASCII art will know that much of it uses a lot of background colors\/blocks, making it almost like low-res pixel art. On the contrary most of my art avoids background colors, which is a conscious decision on my part. I’ve found that it’s a lot easier to be more expressive in a smaller area using primarily line art and glyphs. Background colors result in far too many square corners that impact the flow of an image, and unless very dark they also tend to cause a strong weighting towards an area, limiting their use even further. A lot of my earlier concepts played with the idea of using more background colors, but I stopped adding them almost entirely later on. The majority of final art pieces that do contain them are larger and thus more easily “contain” a full square of color. Sometimes I’ve also used them to accent the second half of a half-block foreground glyph.<\/p>\n

REXPaint<\/h1>\n

All of this was done using a tool I developed specifically for this purpose, one freely available for use in your own projects: Check it out<\/a>. Of course the methods described above are for a very specific style I’ve developed, when there’s really a lot more you can do with REXPaint and ASCII art. Stop by the REXPaint gallery<\/a> to see examples of styles by other artists. Also see this post<\/a> for a guide covering REXPaint’s many potential uses in roguelike development (mockups, art, prefabs, etc.).<\/p>\n","protected":false},"excerpt":{"rendered":"

Having recently finished adding 600 pieces of ASCII art to Cogmind, now’s the best time to write a bit about the process used to draw it all. (Read the previous post for a bit more background on ASCII art.) First a disclaimer: I’ve only been drawing ASCII art off and on for about a year, […]<\/p>\n","protected":false},"author":2,"featured_media":558,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63],"tags":[171,62,64,4],"class_list":["post-552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art","tag-art","tag-ascii","tag-ascii-art","tag-cogmind"],"_links":{"self":[{"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/posts\/552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/comments?post=552"}],"version-history":[{"count":12,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/posts\/552\/revisions"}],"predecessor-version":[{"id":2019,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/posts\/552\/revisions\/2019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/media\/558"}],"wp:attachment":[{"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/media?parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/categories?post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/tags?post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}