,. ,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 | +-----------------------------+