,.
,aBV
,wgm`
')]gQv
;+9Qga'
^tBQgB_
`y@gQL `
: ']QQK' ;+. `)L^'
._:` `.'^,_w)`:)lQgQ&$pL` `,,-. `x). ,j+,` `. .:
xV+h_^7jG#BB@&%d^.,.'GgggQQBJ `7$&@g@G| `+V` `[R[Ll>` >' "x^ '+bv
|l&%xjb["""XgG: Jggg&%QD- vQQ@IDggB, .+l- _RG)`,aU! )+` `LRh_:'xGp,
|mPQQQQd.'IQ8- +gQB_|@$, agQj`vggQ_ ^CU_^^,__)_- .wmv ,fd- _X^ '=#0#BD"
` _9QgggQvXgB_ "B@x ,&Q_ KggC)0gg@" _DRx:,,^'` +K, ;a, ^fL` ,mB&&R+.
_hp@QggQQBJ` `` :DQ| _Qggggg&x` =5mx ^a" :I_ .)> I#y'"wmD7'
,xBgggX' ,&Qx ,ybRhx- ')7)v]` ,L. L[. )|` La" `^_lPv'
`;aBggm, )BB_ ';|" -_. ` `J, '7,` `` .`._x!
Vggg&) LBd' -"_ .`'. `,^.^,` `.' `_-`
"PmQggg&" .jBPIL '^ -,'` .` -y"'.v: ` ,: ..
`w8gQhQgm` _0&j" `` ,=" .'`,""' "L``'.`` `. .'
`JB@QQbGgQ_ :5@D) _)|L>.-,''' -^,-C'`. ` `
:yBgQ@QgQ> .y$QX` "^ |xv7_^'>.````-;__")`:, ``
.)Bgggggj `>!+&%" ,>_)v=,-,|L__!)7t)+v``:,.:fPf- `:'` .:
`_9QDQ&^ ```',C#_ ')_V7Jj];`. '``.,]mIV> 'bGBb ._.-"^ ` `;_
LG&g0L ^:,,vd9: `+bLv;..` ^+Vdb9].` _twDb' ^yVx7__":.`LdU7)`
[QDX9` `' `x@X` _mPy: :hRll+Cmh+^ .Kx ;fxL_' ` ,Kabmw.
'f@BK_, .:.)@J "GX. ^P7;^)v"|bL>' `a+``'|!v_">' `]jIIf7-.
`x@DL'`;) ``)@) `_%Gh> >:','`.':"+IhL :+. "_,!!``'v;!JK,`
,Bgw `"^ ```^j, t$I ` `:` `^',J). !)+)!.`-v]UC"
:&D' .'. ' `` .`xw! ` `'`.. ,+++|)"_wjfv_:
-0j ;` "' ` .!vL);^'+lx".`.
_Bj `' `,` ` .."' )]_`
.jy `.: `_+
;' .`
+------------------------------+
| Behind the ASCII Colouration |
+------------------------------+
2021-10-01 by flosha and Avallach
flosha: After the creation of the latest design of this website, in which I decided to discard all images in favour of pure text and ASCII art, I told Avallach that I want to colourise the Phoenix. While the design of this website as well as of gothicarchive.org and phoenixthegame.com was developed by me on my own, there are a few technical things that I couldn't manage to do myself. The colouration of the ASCII art is one of them, and I thought that the solution is interesting enough to tell you about.
I had generated the Phoenix ASCII with an online tool, since I couldn't see me doing that by hand. This uncolourised version was looking like this:
```
','-","'
``.,=\'`.``)_`
``.--::^^--^,^^^^-:'.` ``.-x)>^-`:,". !_
.'^v+}IIot[L+x==x=T[xYxxLvv;";|_)_"^^,"~~;>>:` ':``.:-^^` ^-
`,|a%&&Wm%mmeIt3+|l}][[]v;|+_\:`..`>xT+_\Y)'` `` `.'..` .`^`
`^o%&RhhR@BDDpaIjo[y[xx+xTL));"!!^._f=;::---~|"..``` ````` .,.
`'v%QgQBRCotwIpWWb9ox|xL)v|v_;,',~^"xh)`',"_}C}x~^"^'``````` ``,;`
,f#@@&w,''.......""|tyI))|)>))",'",|Rx`..-""~Y|)!^"",-'::'` '_^
"}jj+x".^-,,,-,,",':::_ol:_||!!)_.'vq_..,:^,"",-.`',",:.` ``"_!.
`>t_`"L|,";;,:-"";\\!"-^'!ov^)_;->"-,a\`^,,-^^^^-. `::'. ,)|_'
.>LIG5vL,,;!-`:|)"_^:,` >"^.vy^,>,::":",',-"\,^-:'.` ````:>_^`
'"7te@#B#+_".):^\5B$bhvv_, -_,'vV)",'"'-.-`-"_v"^:.``` ` `")_:`
`>iq9$8m%GGGa::'":|7)yjt|));".>",,|C"''.:``:``|T=l"```` `."!,.
`T%B%mDBG9%PeG7` -":=K|,-,^';7),"'_x}v"` '".`:+ylL: `` `:-^'
.]BmW$0$QBmD@g&%T``-^-,+KKw]T+"-,^>_+7Y_)-VjU-'^,-^'` `."":
`vh%@8%GDR$&bjbGDmX' `'::'''-,""__xyImj|y!,>~':^^.` `-,^'
~%0D8&Ww5o#D)-|Tl[v|+_'"_;;_|7lLKff=![Uto+>.`.::'.` `'::`
_x_->")__|t=LV]yy}[[}Vx_Tf[+vTiTL_|_)__^,'""'`..` ``.`
`xm5It|"|lvj=[tty+||v)vv_!'``.''.`.: x"^..`^"` `````
)Qqvv"\),-,i5XV)"-..'..:^"'`:'````',--.::.'''`` `'`
lQG])~!,--,!)5C"'` `'` .` ```.````'''.'-'.`````
)+_\,">,-:` ')y,` .L). .` .'':----'--':!_))^'````
`:"")x_'''` `>,` ``` `':---~))-_))>_v=_-.`:'``
."~|[T+^^ `.'::.``` `':^':~)_>_vL!`.':```.-...`
^_||LY",. ': `````` .:'':"";!;)>::,,-~^`->::'-'.
'^!)|_.^-. .>` `...'''''.'-,::^!",)_!,,!v)""_v,':-`
.;x[)>",>,`.``:":"- ``.``.':-:':-''^">"")v);__\+!>"::''-.`
`,xy3__\=!~^';"+y\,"'` .''''-"))",,,>"_)_>LL),^-:--:::`
'|Y+jL+f_v"^)"x[_|~^- `.'.'-)"|>>">",>;>vLv>,">;)_^':.
.|UXmR];L)"=~^^'''-,~v,:````'''vv_|>_"^,,^-_x_v)|!>))+_,:'`
:!)YIt@%^`)mDjv'`''->!_~^'..`.:!;!_))v!"__"^,"|~)____|v",:.
`-^`'":'XQj'`i5f)' ...^"^^"-::::^",,;||vv__++"-,_>_xx),");\-.
"+wtT}="-7I! ,)^`````..>_>,':^">\\_|+Yv)v_;"[)_"=_,T)_;""^"-.`
``'vL|v[ti=^_x, .'.-\,,-`.:^">,)flx+v));|tt}x}+>7j5Y)_-::'`
`. __---tI|Lv' ```:,,,^::'::-^^,tixi[)>",)}tjj),^Y]j5v|_^.`
. ]W_,.:vphKx,.` ```::--::^,:-^")~]yY+)-"__wxvX|)|>|]bh=v~:``
'' f%|'`.,Lt3fK~` ` `.^'-^|),--_|Tj);__;"~_tT"C)LlV)|xRh_>-.`
`. W$)^``'"|[9G3)'`` ."'`.!|~,`vti]\^\v);,!T|_|)=XjIRo%0L"":.
.')%b)^``.^>|l9P|'` .['':^'':)>"""'!_)>"!v|v~L[yx=aQ$jy[):`
.:L%p":` `:^,LUt+~. ` W^^;"'.-,-"">-,";____)>_vYxL]hG&Vx|)'`
:.\a9)``````''.-~|+, p\^\^:,"^-^",,,-"vv)_)v|+x)|j&CB]=+\:
^.;%&+``..'` ````'""' `e",>"\_~"^,~__)_"v||))Y+|;^=K%hWwty^'`
^`L@&v`',^:.` ``'-' `3,,;>>!",:,_+|+L^vLlv_XPw|~xhyh5=py,-.``
`:'V8b) .>">,'` ` t",>,,>>,'"Lxvvv'v|x[~-"^,xXC[lx)W|,::.`
`.'[G$> `..-"``` ` `yv,,"^">_,`"LYv_`:}IfKx!"_iT+=}|)]x_:'.
``-xaB'..^:`:'.`.````` 'Tx","-,",!,',_"``~tol}KIX3f=)LxwT]7):'.
``_}m@,`.,.`:'-.)'.:,'`.V=",>^,,-,"":'.`_ofl=+xvxiIT)xvvy}v,'-'`
``|ThQ~`'.-`'>'-_^.;>':.|+\">"",^,")_:``\CoCy)_)vwI["=x)_~,:--'
``_=a0'`''-`,_:>,,._-..`;;"^,!>"::,"^` `,|[)^)_~=X),iwyv,""_,.`
'`vo5y .'','^>'``'`>>`..:""">;\,'':. ```.`-:,>v7'_l][+)),^'.
:-vIm~ '^">.^>' \-.;)''..";!>>"^.` `.'.'...`` .:'`-x+x|_~!^'.
`-^|Gq, .-^~;-^`.": _+,-'`)|>,",:` `.':,^-^--'` `,\_\",,:``
.)l%R" `'"'_^. ~,`-x.:,:`>w;:,":.` `''-^"","",,'.'':^-':^>-.``
`)fp&" '.`^!` )_ xv::_:`'+~:^,",'.-,'-^,,"">""-.-",,">-->,'``
`.)lGR. ...,,.`)^`w-.^'``.,v!,::,,^\_:',,">>;)~"-.'^,_>::\,-.` `..
`._|@8: `.`:'``"":7:.-:-``'|+_",'.^_))"^~))~;))_,'''-,^''"^:'. `.'.`
'_7@I. `'':.``"^:L>,;>^`` !j);))__)vv);^,^"_))__>,:''..:,-'.```':'.
`:_L%+ ` `'`.'.'.,`v)--^:.'`.tK);)L|_))~~~>>_))\\__)"'.``:,-'.``.':'`
.."x$| `.'^.`.; [_+=-'..``;hY,!v)_~));"!_)_>"""!"^.` `.......''.``
.':vQ) `.''^::'._`|)|_L>'````v7,,_~~;)_",-!v)!",^-:'.`` `..'-:'`
.',+QL `:^:'.`.'):="_>",'`v\ .T)-">___\,,-"~v_",----':'......'':'`
`'..\#v .-^:':,-'v:L;,)_-',av``'|>,,^""!;~"^,\_""-^,,^^^---::::''``
`'.')D_ `._;-.'-,-_-"LvL)" CY:'` ^+"!>>\~~_\"^-^^""^,""",,^-::::.````` ````
``:'^_j)`:-")v^:',!,.")_^::)+:.````,=[v|v)_>>,,^::^",""",^-:'...````.'.`.:-`
``:'."a"`"_>;)|_"_)_^^,:',)>.`..::. -v=+vv_""::'..':^>~;>"^:.``````.''^^^.```
``''.,L>`"~___;,,--:.^,'-^:``..,\"^.`.~T|v_!"^' ``.'^>>>>,:...'''.',>!!-.```
``...",::~~)))_~;>",'.``.````.-,,,,,),`:)L|!",-'.``..':::---::^-:'':-"_>'.`..`
``.``."".>)))))____;"-''....```'--^^_y=v>:-",,^^",'..``....''::-:':,>~)"^'.-,-'`
`.``';)\+|vL)~,>_))~"^^--''.``'--,!LxL|||!.`^_v;^'::...''':,^:''-,\)")L)__v|^:.
``:'`'~L))Lvx~,\!!vv>\>,>,:''..:^^,_++Lx),^'...:''-!;,^,-^^-,"",!>;,'"vxv)|>,-,`
`.`-`':)|)!)!~v|_"v;"v)>,-,;_-'^,"_+Y7T7!,:'.:''..',,^,">>_\),,^\:)v\,"vv~!-:)_`
.:.'`:::-)"_^|vY|.>)=y7":)|Yv"-^">|]TK[x~^:-''^':::"!_~,^_>>"".|>-")+;"",,^-'v,
`,^'`-'.>;!"-x+xy:;yCyY'_T7j>;\,-"wP)=[x)!",'">-">,,v7)>xt,!_,)h)^.~[+|_,,"|-)`
`.``'``;_>":vxyUv^L_x":|=}t)>)v""L3+v][+L|)'))'_|v|}y)_t[!7)'j5))':!!)v":vt>|.
`:-'^` --,v';Yi5I_,"|--v+TwV^xt_^)[X)!Vy==}.)[^"LT[[7!_3K"UK,XI)),',":>":vVK-"-
.,-,-'-'._,->vxw5>^;"`_+[Ve\vC_'_|yX"|tyy+^,7+-vwt[x,;lI^Th[[3_))"--^''',x}+~,:
`"^'^::' ^^`'^"!hV::\'-)L[f5,=>-)vxUo"+xY__')y[:"}[):_+Iv"+CVhYL)~"^.^>_^"x+++),
':'````'`., `'-,\f"."'^_Lvoj-,:>v)xit)~,,v!:)+}+'.|,')+}f\"|YyU[=L)~"-'"-:vT=LL_`
..` ```.``. ``.",+".^'_v)^x)':;||)xy[)"-,"^"v|x}Y.,-'_+xyt""L!LI[}x);""^`")v++L;.
``` ..``` .,:``';>,.."_>"">-:!)v))LY),:':-")|+x[l_:.:vxx)3+'}xj]+)_>^'`^"^^~)vv"`
```'".` .::.``-,'.:"~"^:-:"____)~;,:::-"_vL[]}]+,.^|xvLLT,-^|),''':``.:"^;~_;```
``"^` ..'^'`.` :;)_~\,.'!;;\;_,-::-^>_)))v+,x)^.^~__~,7|^```'",: `_,.`.>"-.``
`. `.'^-'^'`.,v!,""",.';"!;,:--'.^">>\'.:^:,-.`'-'`.''\- `,)_. \+>,:` `
.-,""-` .,""!!-.^)|_^"">"-'''':""\",^'.'::...'```:,>. ^v|: `-'^)\,,`
`->"",'` `:^^:.` `.'^>vv|),^-,,,"_)~^.:",-''`'": `'` ." '_~` `....';)~,.`
`.^",:`">-`''` .^,-` ```'"",:,"__":...::--:``";`.' ``. ')" ` `^>,`
`.''.`` `"^.```'-+)\,` `-'',\\>":. `''::::.`,), `"|: `` 'v" `:'` ``
.^'` `.'v|;".`'"_);--..^!".`:-^'`-||' -\)|'` `L).'""",'
.'` ``";--"__,:.```.,_|L_:.:-)T_` `` ';)). :)_ `:,">,:.`
..` `'-,,:`.``` ``-!_)\'-)" `,>!' , `` `''.`
`` ``'^-.``.-'` `` `.'"_^' .-,'
``` `'.'` `-"' `:!,. .'.
``` `'.` `.` `
I'll just quote the important parts of the conversation. No need to retell what you can read first hand (or first fingertips in that case). I was just finishing the design, showing it to Avallach and asking if he would be able to help me with the colouration.
[23.09.] Flosha: What do you say now?
I want to add colour to the Phoenix. It's just quite hard to do.
[23.09.] Avallach: O wow, I really like it. I really like the ASCII art design of the main page. I can help colouring.
... he said. And went straight to work. Two days later:
[25.09.] Avallach: This is harder than I thought. I have an idea how to achieve it, but it will take me a bit more time.
I will need to separate the ASCII art into multiple layers, each for one colour in the palette. So there will be 4-16 <pre> elements overlayed on top of each other with CSS.
[26.09. 00:37] Avallach: It's really hard.
This is a prototype with 6 layers, colours are not set yet. But I see that shape somehow got corrupted.
[26.09. 00:50] Avallach: I fixed the shape, but contrast and colours still require some work. / Still 6 layers. Gray + 5 colours. / Do you think this is enough colours or should there be more, like 16?
[26.09. 12:29] Avallach: I'm doing already like the 4th prototype... this time trying to limit colour to areas with some minimum saturation and brightness on the input image:
[26.09. 12:35] Avallach: Current idea: Pick the optimal colours only for these sections of the image, and leave the rest in greyscale:
[26.09. 13:54] Avallach: I need gimp to calculate optimal colours. / But it is already on the same grid. / 98x95 / As the ASCII will be. / So that the calculations for each character are exact. This is around 10 colours and IMO looks close enough.
[26.09. 14:02] Avallach: All the brightness and sharpness will be handled by the ASCII art generator. This is just a template how to separate colours into layers. All the brightness information from here will be ignored.
[26.09. 15:07] Avallach: This is the result of the separation:
Avallach: Now I will prepare the ASCII-art [again, via the online generator I (flosha) used] from each of these colour layers. / I think only this screenshot really explains how it works, right?
Upon my request, Avallach has written a little documentation, that really shows the complicated process he came up with just to fullfill my wish to colourise the Phoenix:
+-----------------------------+
# How PhoenixTales colours ASCII arts
by Avallach
Just like with making a mod for the zEngine, it's a tedious and manual process involving multiple tools. Could be made way easier if we were ok with cheating and making a bitmap picture where characters are represented as pixels. But no, we want a real old-school ascii art that is both retro and lightweight.
We used a third party tool that can convert a grayscale image into ascii art. It does not matter which tool it is, the approach works with any.
We came up with this exact procedure when preparing a coloured ascii art of the Phoenix in the "Stalker" variant. We tried out a few different approaches, and the below sequence of steps gave the best results.
## Step 1 - prepare colour mask
- 1. Duplicate the input image into new layer "1"
- 2. Create new layer "2" filled with 50% saturated red (HSV)
- 3. Put "1" above "2" and set colour mixing mode to HSV saturation
- 4. Merge layers "1" and "2" into "2"
- 5. Desaturate and invert layer "2"
- 6. Duplicate the input image into new layer "3"
- 7. Desaturate layer "3"
- 8. Increase contrast of layer "3" to maximum and set brightness to the point when parts too dark to be coloured are all black
- 9. Put layer "3" above layer "2" and set colour mixing mode to "Darken only"
- 8. Increase contrast of layer "2" to maximum and set brightness to the point when only parts with visible colour are white
- 9. Merge layers "3" and "2" into "2"
- 10. Scale layer "2" to the size of target ASCII art in characters (e.g. 98px x 95px for Phoenix mascot) (proportions will appear stretched horizontally, because each character in rendered ascii art is naturally taller than wide)
- 11. Replace white with transparency
- 12. The layer "2" is now our "colour mask" that we will use in the next step
## Step 2 - prepare colour map
- 1. Slightly increase saturation of input image to compensate for coming partial colour loss
- 2. Scale input image to the size of target ASCII art in characters
- 3. Put "colour mask" prepared in step 1 above input image and merge it into it
- 4. Make sure that there is only one layer left in the image and no transparency
- 5. Change image mode to indexed, around 10 colours, with Floyd-Steinberg dithering
- 6. Replace black with transparency
- 7. The colour map is ready - we will use it for distributing available colours between "ascii pixels" (it will only affect hue/saturation, not brightness as expressed by choice of different ascii characters)
## Step 3 - separate layers on input image
- 1. Put colour map prepared in step 2 on top of input image
- 2. Use tool "select by colour" (`shift-o`) all the time, with 0% tolerance setting and no antialiasing
- 3. Scale colour map to image size, with no interpolation (it will look "pixelated")
- 4. Select black colour on colour map and remove it
- 5. Select any colour on colour map, delete that selection on colour map, then cut that selection from input image and paste it as new layer
- 6. Repeat step 5 until colour map is completely empty
- 7. Save each layer created in repeats of step 5 as separate file
- 8. Generate separate ascii art from each of these files, using a 3rd party tool of your choice
- 9. Generate last ASCII art from parts of input image that were not covered by colour map
## Step 4 - assemble with CSS
- 1. Display each ASCII art in separate divs
- 2. Position the divs absolutely on the same position, so that they perfectly overlap
- 3. Pick different colour for each ASCII art, except of the last one, which contains "grayscale" part
- 4. Carefully tweak the colours in CSS so that overall the art has the best reassemblance to the input image
+-----------------------------+
Here our final colourised Phoenix:
And for your imagination: These are all the signs of the 12 layers if we do not let them overlap and do not put them in a pre tag:
Avallach put the colourised ASCII in a .svg, in order to prevent having all that code on our page. But if you want to see how the final 12 layers look like, just rightclick and take a look at the sourcecode of this page.
+-----------+ CONTACT +-----------+
| Email: mail@phoenixtales.de |
| GnuPG: 4AF3 C206 66C8 ED6F 6AA0 |
| 6D25 4E61 251A 35A0 992A |
+-+-----------------------------+-+
| Chat: discord.gg/CK4VAR7fpH |
+-----------------------------+