Towering Cistercian representation

Question

SE Sandbox Link, Codidact Sandbox Link

Inspired by this video.

Given a positive integer, draw its Cistercian representation as ascii art.

The Challenge

Cistercian numerals are a decimal-based number representation system which use simple line based drawings to represent 4-digit numerals. Their structure is as follows:

     Tens|Units
         |
Thousands|Hundreds

The digits are represented as follows (in the units place):

1   ⌷ 2   ⌷ 3   ⌷ 4   ⌷ 5   ⌷ 6    ⌷ 7    ⌷ 8    ⌷ 9    ⌷ 0 
___ ⌷     ⌷     ⌷     ⌷ ___ ⌷    . ⌷ ___. ⌷    . ⌷ ___. ⌷
    ⌷     ⌷ \   ⌷   / ⌷   / ⌷    | ⌷    | ⌷    | ⌷    | ⌷
    ⌷     ⌷  \  ⌷  /  ⌷  /  ⌷    | ⌷    | ⌷    | ⌷    | ⌷
    ⌷ ___ ⌷   \ ⌷ /   ⌷ /   ⌷    ' ⌷    ' ⌷ ___' ⌷ ___' ⌷

(all of these are 4 rows in height.)

As you can see, there are some repeating patterns within the symbols:

5 → 4 + 1
7 → 6 + 1
8 → 6 + 2
9 → 6 + 1 + 2

In order to represent a general Cistercian number, you will have to place the digits in the correct place for their value.

They should be mirrored horizontally if they are on the left.

They should be mirrored vertically if they are on the bottom i.e. the lines should be reversed, \ and / should be swapped, and . and ' should be swapped. Here's how they should look.

The fun part is when you stack a Cistercian representation on top of another one to accommodate more digits e.g.:

  T|U  
   |   
 Th|H  
   |   
Hth|Tth
   |   
 TM|M 

like a tower of sorts.

You will need to stack as many 4 part towers as the number requires, and you will need to prepend 0's to the input if it's length is not a multiple of 4.

Hence, given an input number, say, 12345, you should get the following:

00012345 → 5432,1000

which turns into:

4|5
 |
2|3
 |
0|1
 |
0|0

which becomes:

    |___
 \  |  /
  \ | /
   \|/
    |
    |
    |
    |
 ___|  /
    | /
    |/
    |
    |
    |
    |
    |
    |___
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |

Note that this is created by making two towers for the 4 digit numbers 2345 and 0001, stacking them, and adding a link of 4 | characters between them.

Scoring

This is code-golf. Shortest answer in each language wins.

Answer 1

JavaScript (Node.js), 265 bytes

f=n=>n?`01238888765${n<1e4?4:48888}`.replace(e=/\d/g,y=>`4567|3210
`.replace(e,x=>"_ \\/.'|"[q=y/2&2|x>3,y&8?1:(k='40321123'[j=~~('0x'+(1e6+'1023405671567899AB99A899CB99C')[y%4+~-(n/10**q%10)*4])]^x%4?2045>>j&1:'0122233346545'[j])^0xCC6600>>k*4+q&1]))+f(n/1e4|0):''

Try it online!

Encoding

Each digit pattern is a 4x4 matrix consisting of 7 distinct characters. Each character is encoded as a single decimal digit from 0 to 6:

0: "_"
1: " "
2: "\"
3: "/"
4: "."
5: "'"
6: "|"

All matrices are built with 13 distinct rows, encoded as a single hexadecimal digit from 0 to C:

0: 1111 for "    "
1: 0001 for "___ "
2: 2111 for "\   "
3: 1211 for " \  "
4: 1121 for "  \ "
5: 1131 for "  / "
6: 1311 for " /  "
7: 3111 for "/   "
8: 1114 for "   ."
9: 1116 for "   |"
A: 1115 for "   '"
B: 0004 for "___."
C: 0005 for "___'"

So, each matrix is fully described by a sequence of 4 hexadecimal digits. For instance, the matrix for 7 is encoded as B99A:

B99A -> 0004 -> "___."
        1116    "   |"
        1116    "   |"
        1115    "   '"

The leading sequence is 0000 and is omitted. The other sequences are stored as:

1e6 + '1023405671567899AB99A899CB99C'

which expands to:

0      1    2    3    4    5    6    7    8    9
(0000) 1000 0001 0234 0567 1567 899A B99A 899C B99C

Each matrix row is made of a 'background' character appearing 3 times and a 'foreground' character appearing only once (or not at all). So the rows can be encoded as:

• the position of the 'foreground' character (0 for rightmost to 3 for leftmost, or 4 if none)
• the 'background' character (which is always either 0 for "_" or 1 for " ")
• the 'foreground' character

This is summarized in the following table:

 ID | string | digits | FG position | BG char. | FG char.
----+--------+--------+-------------+----------+----------
  0 | "    " |  1111  |      4      |    1     |    0
  1 | "___ " |  0001  |      0      |    0     |    1
  2 | "\   " |  2111  |      3      |    1     |    2
  3 | " \  " |  1211  |      2      |    1     |    2
  4 | "  \ " |  1121  |      1      |    1     |    2
  5 | "  / " |  1131  |      1      |    1     |    3
  6 | " /  " |  1311  |      2      |    1     |    3
  7 | "/   " |  3111  |      3      |    1     |    3
  8 | "   ." |  1114  |      0      |    1     |    4
  9 | "   |" |  1116  |      0      |    1     |    6
  A | "   '" |  1115  |      0      |    1     |    5
  B | "___." |  0004  |      0      |    0     |    4
  C | "___'" |  0005  |      0      |    0     |    5
----+--------+--------+-------------+----------+----------
                             |           |          |
                             |           |          +--> stored as "0122233346545"
                             |           +-------------> stored as the bit mask 2045
                             +-------------------------> stored as "40321123"

Answer 2

Perl 5, 573 bytes

With some newlines and indentation added:

sub f{
  local$_=pop;
  s//0/ while y///c%4;
  $l="    |\n"x3;
  /.{5}/?join$l,reverse map f($_),/.{4}/g:do{
    @c{0..9}=map{join'',map{sprintf"%-4s\n",$_}(split'n')[0..3]}split$/,q(1
___
nnn___
n\n \n2\
n2/n /n/
___n2/n /n/
2.n2|n2|n2'
___.n3|n3|n3'
3.n3|n3|n___'
___.n3|n3|n___')=~s/\d/$"x$&/ger;
    $c{$_.'00'}=join('',map"$_\n",reverse$c{$_}=~/.+/g)=~y|.'|'.|r=~y|/\\|\\/|r for 0..9;
    $c{$_.0}=$c{$_}=~s,.+,reverse"|$&",ger=~y|/\\|\\/|r for map{$_,$_.'00'}0..9;
    $_=[/.+/g]for values%c;
    /(.)(.)(.)(.)/;
    join'',
      (map$c{$3.0}[$_].$c{$4}[$_].$/,0..3),
      $l,
      map$c{$1.'000'}[$_].$c{$2.'00'}[$_].$/,0..3
  }
}

Try it online!

Answer 3

Charcoal, 125 bytes

≔⪪⮌Ｓ⁴θＦＬθ«↓∧ι⁴Ｆ⁴«→Ｐ§⪪”~∨VKＴ✂≦M›ζΦNＦ›ιO:υ⊘[⁸À1“ir⊞Py✳⪫℅⁰ψ"´dＤ?5¬→⁼σm‹1“"ξωＴ\⁵⁻Hïg”⸿Σ§◨§θι⁴κ←‖Ｔ¿﹪겫↓¹¹‖Ｔ↓»»↓¹²»ＵＭＫＡ⎇№βι§.'›ιdι

Try it online! Link is to verbose version of code. Explanation:

≔⪪⮌Ｓ⁴θ

Split the reversed input into substrings of length 4.

ＦＬθ«

Loop over each substring.

↓∧ι⁴

Except for the first substring, separate each quad of digits with a vertical line of length 4.

Ｆ⁴«

Loop over each digit in the quad.

→Ｐ§⪪”~∨VKＴ✂≦M›ζΦNＦ›ιO:υ⊘[⁸À1“ir⊞Py✳⪫℅⁰ψ"´dＤ?5¬→⁼σm‹1“"ξωＴ\⁵⁻Hïg”⸿Σ§◨§θι⁴κ←

Extract the relevant digit from a compressed string of all digits and print it without moving the cursor. (I tried printing the digits by parts but this was at least 16 bytes longer.) Note that at this point I print b instead of . and p instead of ' as Charcoal knows how to reflect b, d, p and q.

‖Ｔ

Reflect the canvas horizontally, transforming the characters appropriately. There are four reflections in total, so that the units end up with their original orientation, but the tens end up horizontally reflected.

¿﹪겫

On alternate passes, ...

↓¹¹

... move down 11 lines (actually drawing is golfier, but moving would work), ...

‖Ｔ↓

... and reflect the canvas vertically. This happens twice, so the units and tens end up with their original reflection, but the hundreds and thousands are vertically reflected (and the thousands also get an overall horizontal reflection).

»»↓¹²

Print the vertical line down the middle of the four digits.

»ＵＭＫＡ⎇№βι§.'›ιdι

Translate the b (and its horizontal reflection d) to . and the p (and its horizontal reflection q) to '. b and p (and d and q) are also vertical reflections of each other, but we want that, otherwise the .s and 's would be exchanged by the vertical reflection.