Kiedy pewnego dnia zacząłem rysować na papierze w kratkę, wymyśliłem powyższą czcionkę o ujemnych odstępach dla cyfr. Jeśli jeszcze tego nie zauważyłeś, odstępy między powyższymi kształtami dają złoty współczynnik 1.618033988749 . W tym wyzwaniu Twoim zadaniem jest pobranie liczby i wprowadzenie jej dokładnie tak, jak pokazano w powyższym przykładzie.

Oto jak są one tworzone. Wszystkie linie będą na regularnej siatce, tak że poszczególne cyfry składają się z niewielkiej liczby komórek siatki. Oto kształty 10 cyfr (zignorujemy przecinek dziesiętny dla tego wyzwania):

^{Tak, 7 różni się od przykładu złotego podziału u góry. Trochę to popsułem. Pójdziemy z tym.}

Zauważ, że każda cyfra ma pięć komórek wysokości i trzy komórki szerokości. Aby wyrenderować liczbę, możesz wyobrazić sobie umieszczenie wszystkich jej cyfr obok siebie, tak aby między każdą parą cyfr była dokładnie jedna pusta kolumna. Na przykład, biorąc 319jako dane wejściowe, napisalibyśmy:

Zauważ, że dodajemy jedną wiodącą i końcową pustą kolumnę. Teraz odwracamy komórki:

Dane wyjściowe powinny wówczas stanowić granice wynikowych wielokątów:

Oczywiście możesz wygenerować wynik w jakikolwiek inny sposób, o ile renderowany wynik wygląda tak samo.

Wkład

• Możesz napisać program lub funkcję, przyjmując dane wejściowe przez STDIN (lub najbliższą alternatywę), argument wiersza poleceń lub argument funkcji, jako ciąg znaków lub listę cyfr. (Nie możesz wziąć liczby, ponieważ nie pozwoli to na obsługę zer wiodących).
• Możesz założyć, że na wejściu nie będzie więcej 16 cyfr.

Wydajność

• Dane wyjściowe mogą być wyświetlane na ekranie lub zapisywane w pliku we wspólnym formacie obrazu.
• Możesz używać zarówno grafiki rastrowej, jak i wektorowej.
• W obu przypadkach współczynnik kształtu komórek leżącej poniżej siatki musi wynosić 1 (to znaczy komórki powinny być kwadratami).
• W przypadku grafiki rastrowej każda komórka powinna zajmować co najmniej 20 na 20 pikseli.
• Linie nie mogą być szersze niż 10% wielkości komórki. Jestem gotów dać jeden lub dwa piksele swobody dzięki aliasingowi tutaj.
• Linie i tło mogą być dowolnymi dwoma wyraźnie rozróżnialnymi kolorami, ale kształty utworzone przez linie nie mogą być wypełnione (to znaczy wnętrza powinny również mieć kolor tła).
• W każdej zamkniętej pętli nie może być żadnych przerw.
• Oczywiście cały wynik musi być widoczny.

Przypadki testowe

Oto 10 danych wejściowych, które łącznie obejmują wszystkie możliwe pary sąsiednich cyfr, a także każdą możliwą cyfrę wiodącą i końcową:

07299361548
19887620534
21456837709
39284106657
49085527316
59178604432
69471338025
79581224630
89674235011
97518264003

Oto oczekiwane wyniki dla tych:

Upewnij się, że twój kod działa również, gdy otrzyma się jedną cyfrę (nie chcę tutaj podawać oczekiwanych wyników, ponieważ powinny one być oczywiste, a sekcja przypadków testowych jest wystarczająco napuchnięta).

BBC BASIC, 182 znaków ASCII (tokenizowany rozmiar pliku 175 bajtów)

Pobierz tłumacza na http://www.bbcbasic.co.uk/bbcwin/bbcwin.html

I.n$
F.j=0TOLENn$*4p=ASCM."?@\@?[@_?DTP?TT@?pv@?PTD?@TD?||@?@T@?PT@",VALM.n$,j/4+1,1)*4+1+j MOD4)F.k=0TO4p*=2q=64A.p
V.537;q;0;2585;0;q;537;-q;0;2585;0;-q;25;0;64;
N.MOVEBY 64,-320N.

Punktacja: Gdy powyższy program zostanie wklejony do edytora i uruchomiony, edytor rozszerzy skróty słów kluczowych na pełne słowa kluczowe na ekranie, chociaż w rzeczywistości są one tylko 1 bajt po tokenizacji. (PrzykładI. = INPUT1 bajt przestrzeni dyskowej).

Wyjaśnienie

Wyjaśnię tylko, co robi linia VDU: rysuje ramkę, odwracając nieco bieżący kolor pikseli na ekranie. Oznacza to, że (przy odrobinie uwagi narożnikami) można po prostu narysować jedną komórkę obok siebie, a krawędź pośrednia zostanie anulowana i zniknie z powodu podwójnego rysowania.

Dokładne sprawdzenie wykaże, że prawy górny i lewy dolny róg komórki są narysowane, ale brakuje lewego górnego i prawego dolnego rogu („zaokrąglone”), aby to zadziałało.

Po narysowaniu komórki kursor graficzny przesuwa się w górę o 32 piksele, gotowy do narysowania następnej komórki.

Reszta programu to dość prosta dekompresja bitmap ASCII. Wymiary komórki wynoszą 64 x 64 jednostki dla gry w golfa / kompatybilności ze sposobem dekompresji mapy bitowej.qkontroluje rozmiar drukowanej komórki: 64x64 jednostki dla komórki, która jest obecna, 0x0 dla komórki, która jest nieobecna.

Nieskluczony kod

  m$="?@\@?[@_?DTP?TT@?pv@?PTD?@TD?||@?@T@?PT@" :REM bitmap for digits, including column of filled cells at left. BBC strings are 1-indexed
  INPUTn$                                       :REM user input
  FORj=0 TO LENn$*4                             :REM iterate 4 times per input digit, plus once more (plot column 0 of imaginary digit to finish)
    d=VAL MID$(n$,j/4+1,1)                      :REM extract digit from n$ (1-character string). VAL of empty string = 0, so 123->1,1,1,1,2,2,2,2,3,3,3,3,0
    p=ASC MID$(m$,d*4+1+j MOD4)                 :REM get column bitmap from m$ d*4 selects digit, j MOD4 selects correct column of digit, add 1 to convert to 1-index
    FORk=0TO4                                   :REM for each cell in the column
      p*=2                                      :REM bitshift p
      q=64ANDp                                  :REM find size of cell to draw. 64 for a filled cell, 0 for an absent cell.
      VDU537;q;0;                               :REM line q units right, inverting existing screen colour. Draw last pixel (will be inverted next line)
      VDU2585;0;q;                              :REM line q units up, inverting existing screen colour. Dont draw last pixel (will be filled in next line)
      VDU537;-q;0;                              :REM line q units left, inverting existing screen colour. Draw last pixel (will be inverted next line)
      VDU2585;0;-q;                             :REM line q units down, inverting existing screen colour. Dont draw last pixel (avoid inverting 1st pixel of 1st line)
      VDU25;0;64;                               :REM move up 64 units for cell above
    NEXT
    MOVEBY 64,-320                              :REM move right and down for next column.
  NEXT

Wydajność

Do MOVEs są po prostu wyjście do odpowiednich wysokościach na ekranie. BBC basic używa w tym trybie 2 jednostek = 1 piksel, więc komórki mają w rzeczywistości 32 x 32 piksele.

Oktawa, 233 225 216 213 bajtów

o=@ones;l=z=o(5,1);for k=input('')-47;l=[l,reshape(dec2bin([448,22558,8514,10560,3936,2376,328,15840,320,2368](k),15),5,[])-48,z];end;L=~o(size(l)+2);L(2:6,2:end-1)=l;O=o(3);O(5)=-8;M=~conv2(kron(L,o(25)),O);imshow(M)

Oto pierwszy przypadek testowy (z przechwytywania ekranu o zmienionym rozmiarze, pasuje do mojego monitora =):

o=@ones;
l=z=o(5,1);                   %spacer matrices
for k=input('')-47;           %go throu all input digis
                              %decode the matrices for each digit from decimal
l=[l,reshape(dec2bin([448,22558,8514,10560,3936,2376,328,15840,320,2368](k),15),5,[])-48,z];
end
L=~o(size(l)+2);           %pad the image
L(2:6,2:end-1)=l;
O=o(3);O(5)=-8;               %create edge detection filter
imshow(~conv2(kron(L,o(25)),O)) %image resizing /edge detection (change 25 to any cell size you like)

Dane wejściowe mogą mieć dowolną długość, np '07299361548'

Konwolucja jest kluczem do sukcesu.

JavaScript ES6, 506 bajtów

a=>{with(document)with(body.appendChild(createElement`canvas`))with(getContext`2d`){width=height=(a.length+2)*80;scale(20,20);translate(1,1);lineWidth=0.1;beginPath();["oint",...a.map(i=>"05|7agd7|oint 067128a45|oicgmnt 01de25|oil9amnt 01de23fg45|oint 03fh5|68ec6|oint 03fg45|oij78knt 05|9agf9|oij78knt 01dh5|oint 05|78ed7|9agf9|oint 03fg45|78ed7|oint".split` `[i]),"05"].map(i=>{i.split`|`.map(i=>[...i].map((e,i,_,p=parseInt(e,36),l=~~(p/6),r=p%6)=>i?lineTo(l,r):moveTo(l,r)));translate(4,0)});stroke()}}

Nie golfowany:

a=>{                                            // anonymous function declaration, accepts array of numbers
  with(document)                                // bring document into scope
  with(body.appendChild(createElement`canvas`)) // create canvas, drop into html body, bring into scope
  with(getContext`2d`){                         // bring graphics context into scope
    width=height=(a.length+2)*80;               // set width and height
    scale(20,20);                               // scale everything to 20x
    translate(1,1);                             // add padding so outline doesn't touch edge of canvas
    lineWidth=0.1;                              // have to scale line width since we scaled 20x
    beginPath();                                // start drawing lines
    ["oint",                                    // beginning "glyph", draws left end of negative space, see below
     ...a.map(i=>`05|7agd7|oint                 // glyphs 0-9 encoded as vertices
                  067128a45|oicgmnt             //   glyphs seperated by " "
                  01de25|oil9amnt               //   lines within each glyph seperated by "|"
                  01de23fg45|oint               //   a single vertex is stored as a base36 char
                  03fh5|68ec6|oint              //     where a number corresponds to one of the verts shown below:
                  03fg45|oij78knt               //        0  6 12 18 24
                  05|9agf9|oij78knt             //        1  7 13 19 25
                  01dh5|oint                    //        2  8 14 20 26
                  05|78ed7|9agf9|oint           //        3  9 15 21 27
                  03fg45|78ed7|oint`            //        4 10 16 22 28
       .split` `[i]),                           //        5 11 17 23 29
     "05"]                                      // end "glyph", draws right end of negative space, see above
      .map(i=>{                                 // for each glyph string
        i.split`|`                              // seperate into list of line strings
          .map(i=>[...i]                        // convert each line string into list of chars
            .map((e,i,_,p=parseInt(e,36),       // convert base36 char to number
                  l=~~(p/6),r=p%6)=>            // compute x y coords of vertex
              i?lineTo(l,r):moveTo(l,r)));      // draw segment
        translate(4,0)});                       // translate origin 4 units to right
    stroke()}}                                  // draw all lines to canvas

Zakłada, że <body>można dołączyć płótno, przetestowane w przeglądarce Firefox 46.

Przykład uruchomienia (przypisanie funkcji anonimowej do f):

f([1,0,3])

daje:

HTML + JavaScript ES6, 352

Przetestuj poniższy fragment kodu

<canvas id=C></canvas><script>s=prompt(),C.width=-~s.length*80,c=C.getContext("2d"),[...s].map(d=>[30,d*=3,++d,++d].map(w=a=>{for(a=parseInt("vhvivgtlnllv74vnltvlt11vvlvnlv0"[a],36)*2+1,p=1,y=100,i=64;i>>=1;p=b,y-=20)c.moveTo(x+20,y),b=a&i?1:0,c[b-p?'lineTo':'moveTo'](x,y),(a^q)&i&&c.lineTo(x,y-20);q=a,x+=20}),q=63,x=0),w(30),w(0),c.stroke()</script>

Mniej golfa

s=prompt(),C.width=-~s.length*80,c=C.getContext("2d"),
w=a=>{
  a=parseInt("vhvivgtlnllv74vnltvlt11vvlvnlv0"[i],36)*2+1
  for(p=1,y=100,i=32;i;p=b,y-=20,i>>=1)
    c.moveTo(x+20,y),
    b=a&i?1:0,
    c[b-p?'lineTo':'moveTo'](x,y),
    (a^q)&i&&c.lineTo(x,y-20)
  q=a 
  x+=20
},
[...s].map(d=>[30,d*=3,++d,++d].map(w),q=63,x=0),
w(30),w(0)
c.stroke()

Java, 768 bajtów

import java.awt.*;import java.awt.image.*;class G{public static void main(String[]v)throws Exception{int s=20,n=v[0].length(),i=0,j,w=(n*3+n+1)*s,h=5*s,a[][]={{6,7,8},{0,2,3,10,11,12,13},{1,6,8,13},{1,3,6,8},{3,4,5,6,8,9},{3,6,8,11},{6,8,11},{1,2,3,4,6,7,8,9},{6,8},{3,6,8}};BufferedImage o,b=new BufferedImage(w,h,1);Graphics g=b.getGraphics();g.setColor(Color.WHITE);for(;i<n;i++)for(j=0;j<15;j++){int c=j;if(java.util.Arrays.stream(a[v[0].charAt(i)-48]).noneMatch(e->e==c))g.fillRect((1+i*4+j/5)*s,j%5*s,s,s);}o=new BufferedImage(b.getColorModel(),b.copyData(null),0>1,null);for(i=1;i<h-1;i++)for(j=1;j<w-1;j++)if((b.getRGB(j+1,i)|b.getRGB(j-1,i)|b.getRGB(j,i+1)|b.getRGB(j,i-1))<-1)o.setRGB(j,i,-1);javax.imageio.ImageIO.write(o,"png",new java.io.File("a.png"));}}

Bez golfa

import java.awt.*;
        import java.awt.image.BufferedImage;

class Q79261 {
    public static void main(String[] v) throws Exception {
        int scale = 20, n = v[0].length(), i = 0, j, width = (n * 3 + n + 1) * scale, height = 5 * scale, values[][] = {{6, 7, 8}, {0, 2, 3, 10, 11, 12, 13}, {1, 6, 8, 13}, {1, 3, 6, 8}, {3, 4, 5, 6, 8, 9}, {3, 6, 8, 11}, {6, 8, 11}, {1, 2, 3, 4, 6, 7, 8, 9}, {6, 8}, {3, 6, 8}};
        BufferedImage output, temp = new BufferedImage(width, height, 1);
        Graphics g = temp.getGraphics();
        g.setColor(Color.WHITE);
        for (; i < n; i++)
            for (j = 0; j < 15; j++) {
                int finalJ = j;
                if (java.util.Arrays.stream(values[v[0].charAt(i) - 48]).noneMatch(e -> e == finalJ))
                    g.fillRect((1 + i * 4 + j / 5) * scale, j % 5 * scale, scale, scale);
            }
        output = new BufferedImage(temp.getColorModel(), temp.copyData(null), 0 > 1, null);
        for (i = 1; i < height - 1; i++)
            for (j = 1; j < width - 1; j++)
                if ((temp.getRGB(j + 1, i) | temp.getRGB(j - 1, i) | temp.getRGB(j, i + 1) | temp.getRGB(j, i - 1)) < -1)
                    output.setRGB(j, i, -1);
        javax.imageio.ImageIO.write(output, "png", new java.io.File("a.png"));
    }
}

Notatki

• Dane wejściowe to pojedynczy ciąg jako argument. Jak używać: javac G.java,java G 80085

• Zaczynam od czarnego płótna, a następnie dodaję liczby jako białe pozytywy. Tworzę kopię obrazu, a następnie odwracam każdy czarny piksel, który ma 4 czarnych sąsiadów na oryginalnym obrazie.

Wyjścia

Niektóre pojedyncze cyfry:

R, zbyt wiele bajtów do gry w golfa ( 1530+ 1115)

library(reshape2);library(ggplot2);library(png)
M=matrix(1,5,3)
M=lapply(list(c(7:9),c(1,3,4,11:14),c(2,7,9,14),c(2,4,7,9),c(4:7,9,10),c(4,7,9,12),c(7,9,12),c(2:5,7:10),c(7,9),c(4,7,9)),function(x){M[x]=0;M})
g=function(P){
S=matrix(0,5,1)
R=NULL
for(N in P){R=Reduce(cbind2,list(R,S,M[[N+1]]))}
cbind(R,S)}
p=function(P){
o=t(apply(g(P),1,rev))
ggplot(melt(o),aes(x=Var1,y=Var2))+geom_raster(aes(fill=value))+coord_flip()+scale_fill_continuous(guide=FALSE,high="#FFFFFF",low="#000000")+scale_y_reverse()+scale_x_reverse()+theme_bw()+theme(panel.grid=element_blank(),panel.border=element_blank(),panel.background=element_blank(),axis.title=element_blank(),axis.text=element_blank(),axis.ticks=element_blank(),plot.margin=unit(c(0,0,0,0),"mm"))+ggsave("t.png",width=dim(o)[2]/2.5,height=2,units="in",dpi=99)
q=readPNG("t.png")
k=q[,,1]
b=replace(k,k==1,0)
for(i in 1:nrow(k)){
for(j in 1:ncol(k)){
u=(i==nrow(k))
v=(j==ncol(k))
if(u&v){b[i,j]=1;break}
if((i==1)|u|(j==1)|v){b[i,j]=1;next}else{if(all(k[c((i-1):(i+1)),c((j-1):(j+1))])){b[i,j]=1}else{b[i,j]=0}}}}
q[,,1:3]=abs(replace(k,b==1,0)-1)
writePNG(q,"t.png")}

# run p(c(0,1,2,3,4,5))

lol przy zapisywaniu na dysk, a następnie czytaniu z dysku edytuj czarne wypełnienie.

Python 3, 326 325 bajtów

import numpy
from skimage import io,transform as t,filters as f
r=[[1]*5,[0]*5]
for c in map(int,input()):r+=[map(float,bin(0x3f1fa7e1bd7b5aff84ff6b7fd6f087ff5ff6bf)[2:][15*c+5*i:15*c+5*-~i])for i in[0,1,2]]+[[0]*5]
r+=[[1]*5]
p=[[1]*len(r)]
r=p+list(zip(*r))+p
io.imsave("o.png",1-f.sobel((t.rescale(numpy.array(r),16,0))))

C #, 768 773 776 bajtów

namespace System.Drawing{class P{static void Main(string[]a){uint[]l={0xEBFBFFFC,0xB89B21B4,0xABFFF9FC,0xAA1269A4,0xFFF3F9FC};var w=a[0].Length*80+20;var b=new Bitmap(w,100);var g=Graphics.FromImage(b);g.FillRectangle(Brushes.Black,0,0,w,100);for(int i=0;i<a[0].Length;i++)for(int r=0;r<5;r++)for(int c=0;c<3;c++)if((l[r]&((uint)1<<(175-a[0][i]*3-c)))>0)g.FillRectangle(Brushes.White,20*(1+i*4+c),20*r,20,20);for(int x=1;x<w-1;x++)for(int y=1;y<99;y++)if(b.GetPixel(x,y).B+b.GetPixel(x+1,y).B+b.GetPixel(x,y+1).B+b.GetPixel(x,y-1).B+b.GetPixel(x+1,y-1).B+b.GetPixel(x+1,y+1).B+b.GetPixel(x-1,y+1).B+b.GetPixel(x-1,y-1).B==0)b.SetPixel(x,y,Color.Red);for(int x=1;x<w-1;x++)for(int y=1;y<99;y++)if(b.GetPixel(x,y).R>0)b.SetPixel(x,y,Color.White);b.Save(a[0]+".bmp");}}}

Pobiera liczbę jako argument wiersza poleceń. Wysyła ładny, czysty, nie-aliasy obraz BMP z numerem jako nazwą.

Oryginał przed golfem:

namespace System.Drawing
{
    class P
    {
        static void Main(string[] args)
        {
            var numbers = args[0];
            uint[] lines = {
                0xEBFBFFFC, // 111 010 111 111 101 111 111 111 111 111 00
                0xB89B21B4, // 101 110 001 001 101 100 100 001 101 101 00
                0xABFFF9FC, // 101 010 111 111 111 111 111 001 111 111 00
                0xAA1269A4, // 101 010 100 001 001 001 101 001 101 001 00
                0xFFF3F9FC  // 111 111 111 111 001 111 111 001 111 111 00
            };
            var width = numbers.Length*4 + 1;
            var bmp = new Bitmap(width*20, 5*20);
            using (var gfx = Graphics.FromImage(bmp))
            {
                gfx.FillRectangle(Brushes.Black, 0, 0, width*20+2, 5*20+2);
                // Process all numbers
                for (int i = 0; i < numbers.Length; i++)
                {
                    var number = numbers[i]-'0';
                    for (int line = 0; line < 5; line++)
                    {
                        for (int col = 0; col < 3; col++)
                        {
                            if ((lines[line] & ((uint)1<<(31-number*3-col))) >0)
                                gfx.FillRectangle(Brushes.White, 20*(1 + i * 4 + col), 20*line, 20 , 20 );
                        }
                    }
                }
                // Edge detection
                for (int x = 1; x < width*20-1; x++)
                {
                    for (int y = 1; y < 5*20-1 ; y++)
                    {
                        if (bmp.GetPixel(x,y).B +
                            bmp.GetPixel(x + 1, y).B +
                                bmp.GetPixel(x, y + 1).B +
                                bmp.GetPixel(x, y - 1).B +
                                bmp.GetPixel(x + 1, y - 1).B +
                                bmp.GetPixel(x + 1, y + 1).B + 
                                bmp.GetPixel(x - 1, y + 1).B + 
                                bmp.GetPixel(x - 1, y - 1).B == 0)
                                bmp.SetPixel(x, y, Color.Red);
                    }
                }
                // Convert red to white
                for (int x = 1; x < width * 20 - 1; x++)
                {
                    for (int y = 1; y < 5 * 20 - 1; y++)
                    {
                        if (bmp.GetPixel(x, y).R>0)
                            bmp.SetPixel(x, y, Color.White);
                    }
                }
            }
            bmp.Save(@"c:\tmp\test.bmp");
        }
    }
}

Mathematica 328 bajtów

j@d_:=Partition[IntegerDigits[FromDigits[d/.Thread[ToString/@Range[0,9]->StringPartition["75557262277174771717557117471774757711117575775717",5]],16],2, 20]/.{0->1,1->0},4];j@"*"=Array[{1}&,5];
w@s_:=  ColorNegate@EdgeDetect@Rasterize@ArrayPlot[Thread[Join@@Transpose/@j/@Characters@(s<>"*")],Frame->False,ImageSize->Large]

w["07299361548"]
w["19887620534"]

Wyjaśnienie

Cztery bity zostaną wykorzystane w każdym z 5 wierszy komórek dla każdej cyfry wejściowej.

"75557262277174771717557117471774757711117575775717"reprezentuje 0 do 9 jako bitmapy.

Pierwsze 5 cyfr w dużej liczbie całkowitej powyżej, a mianowicie 75557wskazuje, jak powinien być wyświetlany każdy wiersz tablicy dla zera. 7będzie reprezentować {0,1,1,1}białą komórkę, a po jej prawej stronie 3 czarne komórki; wiodące 0to puste miejsce do oddzielania wyświetlanych cyfr. 5koresponduje z{0,1,0,1} białym, czarnym, białym, czarnym komórkom.

Poniżej przedstawiono listę reguł zastępowania:

Thread[ToString /@ Range[0, 9] -> StringPartition["75557262277174771717557117471774757711117575775717", 5]]

{„0” -> „75557”, „1” -> „26227”, „2” -> „71747”, „3” -> „71717”, „4” -> „55711”, „5” - > „74717”, „6” -> „74757”, „7” -> „71111”, „8” -> „75757”, „9” -> „75717”}

Zauważ, że kiedy 3zostanie wprowadzone, zostanie zastąpione przez 71717 Ta reprezentacja jest wyrażona w postaci binarnej:

p = Partition[IntegerDigits[FromDigits["3" /. {"3" -> "71717"}, 16], 2, 20], 4]

{{0, 1, 1, 1}, {0, 0, 0, 1}, {0, 1, 1, 1}, {0, 0, 0, 1}, {0, 1, 1, 1} }

Jego czarno-biała odwrotność znajduje się po prostu przez wymianę 1s i 0s.

q = p /. {0 -> 1, 1 -> 0}

{{1, 0, 0, 0}, {1, 1, 1, 0}, {1, 0, 0, 0}, {1, 1, 1, 0}, {1, 0, 0, 0} }

Zobaczmy, jak pi qjak wyglądają wyświetlane przez ArrayPlot:

ArrayPlot[#, Mesh -> True, ImageSize -> Small, PlotLegends -> Automatic] & /@ {p, q}

To po prostu łączy tablice zer i jedynek dla każdej cyfry przed renderowaniem dużej tablicy przez ArrayPlot. *jest definiowany jjako końcowa pionowa przestrzeń po ostatniej cyfrze.

Thread[Join @@ Transpose /@ j /@ Characters@(s <> "*")]