Drawing maps using a text editor

Fri, 28 Dec 2018 15:11:00 +0000

To calm myself I like to "draw" maps. This is one of them. Try exploring it.

View it in the terminal

curl -s https://glow.li/map | less -RS

16-color fallback

curl -s https://glow.li/map16 | less -RS

To make working with the map a lot easier, I created recipes that generate only small sections of the map. Because I don't always have to regenerate the whole map, and don't have to find the place every time it gets much faster. This also means that there are recipes for almost all interesting (hand drawn) places on the map.

Drawing the map

While I did draw maps using GIMP before, I wanted something more portable, as in I could do it in the terminal and my phone using #termux. That's why this map is "written". The source file will look like weird text, and then a converter will convert it into colors and Unicode symbols.

w,.(Port Kalau)aa.a..
w,BB.bbbbBbb...aa....
w,xb.xxxxxxxbba.a....
w,xxxxb.b.bxxx+++++++
w,xbu.wwwwwjwb..wwwww
wLxubbw.b.bxwwwww....
w.b...wxxxxx++++++...
wwwwwwwxbayyy+yyy+...
wwwssBB7₄+yyy+yyy+...
wwwsssxx.+yyy+yyy+...
wwwssBB3.+++++++++...

At first the source will look like gibberish, but it's actually always just one letter per tile.

Map key

╔══════════════════╦════════╦══════════╗
║         Legend for Mapmakers         ║
╚════════╦═════════╩════════╩══════════╝
 w ≈ water 
 W ~ water_shallow 
 D ≈ water_deep 
 , ░ sand 
 . " grass 
 i ▓ snow 
 l ░ lava 
 y ▉ farmland 
 U ░ dirt 
 ; ░ gravel 
 a ● forest on grass 
 ä ● forest on plaza 
 â ● forest on sand 
 u * palmforest on sand 
 ü * palmforest on plaza 
 ú * palmforest on grass 
 b ▘ building 
 B █ multiblock_building 
 L ◘ lighthouse 
 O ○ Well 
 g ⌂ gravestones 
 m ▲ mountain 
 s █ plaza 
 S █ plaza_connecting 
 x ┃ street 
 0 ╋ street_crossing 
 - ━ street_h 
 | ┃ street_v 
 1 ┓ street_1 
 2 ┏ street_2 
 3 ┛ street_3 
 4 ┗ street_4 
 5 ┳ street_5 
 6 ┻ street_6 
 7 ┫ street_7 
 8 ┣ street_8 
 ╹ ╹ street_10 
 ╻ ╻ street_11 
 ╺ ╺ street_12 
 ╸ ╸ street_12 
 9 ▪ street_none 
 + ╷ dirtroad 
 ₀ ┼ dirtroad_crossing 
 ~ ─ dirtroad_h 
 ! │ dirtroad_v 
 ₁ ┐ dirtroad_1 
 ₂ ┌ dirtroad_2 
 ₃ ┘ dirtroad_3 
 ₄ └ dirtroad_4 
 ₅ ┬ dirtroad_5 
 ₆ ┴ dirtroad_6 
 ₇ ┤ dirtroad_7 
 ₈ ├ dirtroad_8 
 ₉ ▪ dirtroad_none 
 ╴ ╴ dirtroad_9 
 ╶ ╶ dirtroad_10 
 ╵ ╵ dirtroad_11 
 ╷ ╷ dirtroad_12 
 r ║ rails 
 ⁰ ╬ rails_crossing 
 = ═ rails_h 
 § ║ rails_v 
 ¹ ╗ rails_1 
 ² ╔ rails_2 
 ³ ╝ rails_3 
 ⁴ ╚ rails_4 
 ⁵ ╦ rails_5 
 ⁶ ╩ rails_6 
 ⁷ ╣ rails_7 
 ⁸ ╠ rails_8 
 ⁹ ▪ rails_none 
 ⒑ ═ rails_10 
 ⒒ ═ rails_11 
 ⒓ ║ rails_12 
 ⒔ ║ rails_13 
 c ╫ street-rails-crossing 
 C ╪ street-rails-crossing-vertical 
 * ╵ waterway 
 ⑮ ╴ waterway_9 
 ⑯ ╶ waterway_10 
 ⑰ ╵ waterway_11 
 ⑱ ╷ waterway_12 
 ⑩ ┼ waterway_crossing 
 ⑪ ─ waterway_h 
 ⑫ │ waterway_v 
 ① ┐ waterway_1 
 ② ┌ waterway_2 
 ③ ┘ waterway_3 
 ④ └ waterway_4 
 ⑤ ┬ waterway_5 
 ⑥ ┴ waterway_6 
 ⑦ ┤ waterway_7 
 ⑧ ├ waterway_8 
 ⑨ ▪ waterway_none 
 q ═ bridge 
 j ║ bridgev 
 p ▐ pool_right 
 P ▌ pool_left 
 o ● pond 
 F ✈ airplane 
 t . animal 
 ? ? label 
 $ $ debugger 
 E E error 
 N N null space for testing 
 ¬ ▗ wall 
 ᴬ ▐ wall_v 
 ᴮ ▀ wall_h 
 ᴰ ▜ wall_crossing 
 ᴱ ▜ wall_1 
 ᴳ ▐ wall_2 
 ᴴ ▀ wall_3 
 ᴵ ▝ wall_4 
 ᴶ ▜ wall_5 
 ᴷ ▀ wall_6 
 ᴸ ▜ wall_7 
 ᴹ ▐ wall_8 
 ᴺ ▝ wall_10 
 ᴼ ▗ wall_11 
 ᴾ ▝ wall_12 
 ᴿ ▘ wall_12 
 ᵀ ▜ wall_none

Difficulties with certain formats

The generator can generate many different formats, but piping the ANSI-colored output to less -RS is the best way.

PNG

It can technically do PNG, and it's doing that for generating the tiles for the interactive map, but displaying the whole map as a single PNG would use about 6 Gb of video RAM and a really beefy computer to render. I tried; eventually my computer will run out of RAM before completing. That's why I even bothered with the tiled map.

Repository

You can view the generator and the map source in this repository. If you want to make your own town in my map, shoot me a pull request.

https://github.com/Neo-Oli/fantasymap

How I got the initial map

The original template for the map was generated with this fantasy map generator. This huge PNG I indexed to a few colors.

This file I then converted into the X PixMap file format

/* XPM */
static char * /home/glow/fantasymap/map_xpm[] = {
"1000 500 6 1",
"   c #130903",
".  c #1A0707",
"X  c #09E1F4",
"o  c #5C3D06",
"O  c #245950",
"+  c #DCCECE",
/* pixels */
"iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii[...]",
"iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii[...]",
[...]

After this I just copy-and-replaced a few things and ended up with the blank map, to which I added towns streets and did large scale landscaping.

Browser Presentation Tool

Wed, 07 Nov 2018 21:10:00 +0000

⇱ View fullscreen

Because I keep struggling with LateX I created a small tool to create presentations. The presentations are made with HTML, CSS and JavaScript and the generator and template is written in PHP.

Repository: https://github.com/Neo-Oli/browser-presentation-tool

Game: Microbes

Wed, 10 Jan 2018 00:00:00 +0000

⇱ Play the game

To learn how to use HTML5 Canvases with JavaScript I decided to program a little game. Do you remember the Live Wallpaper on those old Android Phones? My Galaxy SII had it. Where you have to feed microbes and they would divide. This is that game with the added features of evolving colors, speed, health etc. A microbe has many different attributes. Each attribute has a chance of mutating (in any direction) when a microbe splits. Depending on how you feed your microbes different strengths are required and microbes with that strength have a higher chance of survival. The longer you play the better your microbes get.

Repository: https://github.com/Neo-Oli/Microbes

Text to Tiny Braille Converter

Mon, 06 Nov 2017 00:00:00 +0000

⢎⡁⠑⡔⠁⣟⠆⣟⡁⡯⡂⡯⠂⢇⡸⢸⠢⡇⡧⢎

⣏⠆⢎⡱⠈⡏⠰⣉⠆⡗⢼⢸⡳⠰⣉⠆⡯⡂⣹⡁⡠⠀ ⢎⡱⢐⡩⢰⢵⢸⠴⡁⡮⡆

There is something quite perverse about using Braille Unicode characters (⠠⠃⠗⠁⠊⠇⠇⠑), a writing system for visually impaired people, to display regular, Latin letters. That's why I wrote a converter for it.

Input:

Output:

This program is written in JavaScript and is also available as a CLI application using Node.Js. Visit the Repository.

The characters are based on the Tiny and Tinier Fonts by Matthew Welch; Two fonts that I enjoy very much.

I don't collect any information entered into this form.

glow.li: Interactive