Geçen gün kare çizgili kağıda dolanırken, rakamlar için yukarıdaki negatif alanlı yazı tipini gördüm. Henüz farketmediyseniz , yukarıdaki şekiller arasındaki boşluklar altın oranını 1.618033988749 olarak verir . Bu zorlukta, göreviniz girdi olarak bir sayı almak ve tam olarak yukarıdaki örnekte gösterildiği gibi yapmaktır.

İşte bunlar nasıl yaratıldı. Tüm satırlar düzenli bir ızgarada olacaktır, böylece bireysel basamaklar az sayıda ızgara hücresinden oluşur. İşte 10 hanenin şekilleri (bu meydan okuma için ondalık noktayı görmezden geleceğiz):

^{Evet, 7 üstteki altın oran örneğinden farklı. Bunu biraz berbat ettim. Bununla devam edeceğiz.}

Her rakamın beş hücreli ve üç hücreli geniş olduğuna dikkat edin. Bir sayı oluşturmak için, tüm rakamları yan yana yerleştirmeyi hayal edebilirsiniz, böylece her bir basamak çifti arasında tam olarak bir boş sütun bulunur. Örneğin, 319girdi olarak alarak şöyle yazacağız:

Önde gelen ve sonunda boş bir sütun eklediğimize dikkat edin. Şimdi hücreleri tersine çeviriyoruz:

Daha sonra çıktı, elde edilen çokgenlerin sınırları olmalıdır:

Elbette, sonuçta, elde edilen çıktı aynı göründüğü sürece, herhangi bir şekilde sonucu elde edebilirsiniz.

Giriş

• STDIN (ya da en yakın alternatif) üzerinden giriş alarak bir komut ya da fonksiyon yazabilir, komut satırı argümanı ya da fonksiyon argümanı, bir dize olarak ya da rakamların listesini yazabilirsiniz. (Önde gelen sıfırları desteklemenize izin vermeyecek bir sayı alamazsınız.)
• Girişte daha fazla 16 basamak olmayacağını varsayabilirsiniz.

Çıktı

• Çıktı ekranda gösterilebilir veya ortak görüntü formatında bir dosyaya yazılabilir.
• Hem raster hem de vektör grafikleri kullanabilirsiniz.
• Her iki durumda da, temel ızgaradaki hücrelerin en boy oranının 1 olması gerekir (yani, hücreler kareler olmalıdır).
• Tarama grafikleri durumunda, her bir hücrenin en az 20 x 20 piksel içermesi gerekir.
• Çizgiler, hücre boyutunun% 10'undan daha geniş olmamalıdır. Burada takma ad yüzünden bir ya da iki piksele boşluk bırakmaya hazırım.
• Çizgiler ve arka plan açıkça ayırt edilebilir iki renk olabilir, ancak çizgiler tarafından oluşturulan şekiller doldurulmamalıdır (iç kısımlar da arka plan rengi olmalıdır).
• Her kapalı döngüde boşluk olmamalıdır.
• Elbette, tüm sonuç görünür olmalı.

Test Kılıfları

Burada, tüm olası bitişik basamak çiftlerinin yanı sıra her olası başlangıç ​​ve bitiş basamağını kapsayan 10 giriş vardır:

07299361548
19887620534
21456837709
39284106657
49085527316
59178604432
69471338025
79581224630
89674235011
97518264003

Ve işte bunlar için beklenen sonuçlar:

Kodunuzun tek bir rakam verildiğinde de çalıştığından emin olun (beklenen sonuçları buraya dahil etmek istemem çünkü açık olması gerekir ve test durumu bölümü olduğu gibi şişirilir).

BBC BASIC, 182 ASCII karakter (tokenised dosya boyutu 175 bayt)

Tercümanı http://www.bbcbasic.co.uk/bbcwin/bbcwin.html adresinden indirin.

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.

Puanlama: Yukarıdaki program editöre yapıştırıldığında ve çalıştırıldığında, editör kısaltılmış anahtar kelimeleri ekranda tam anahtar kelimelere genişletir, gerçekte sadece tokenizasyondan sonra sadece 1 byte olurlar. (Örnek I.= INPUTdepolama alanı 1 bayt.)

açıklama

Sadece VDU çizgisinin ne yaptığını açıklayacağım: Ekrandaki geçerli piksel rengini biraz döndürerek bir kutu çizer. Bu, (köşelere biraz özen gösterilerek) sadece yan yana bir hücre çizmenin mümkün olduğu ve araya giren kenarın çift çizim nedeniyle ortadan kalkacağı ve yok olacağı anlamına gelir.

Yakın inceleme, bir hücrenin sağ üst ve sol alt köşelerinin çizildiğini ancak bu işi yapmak için sol üst ve sağ alt öğelerin eksik olduğunu ("yuvarlak") ortaya koyacaktır.

Hücre çizildikten sonra, grafik imleci bir sonraki hücrenin çizilmesi için hazır olan 32 piksel yukarı taşınır.

Programın geri kalanı oldukça basit bir ASCII bitmap sıkıştırmasıdır. Hücrenin boyutları, bitmap'in dekompresyonu ile golf / uyumluluk için 64x64 ünitedir. qÇizilen hücrenin boyutunu kontrol eder: Mevcut bir hücre için 64x64 ünite, mevcut olmayan bir hücre için 0x0.

Ungolfed 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

Çıktı

MOVELer sadece çıkışı ekranda yükseklikleri ulasmasini edilir. BBC basic bu modda 2 birim = 1 piksel kullanır, böylece hücreler aslında 32x32 pikseldir.

Octave, 233 225 216 213 bayt

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)

İşte ilk sınama durumu (yeniden boyutlandırılmış bir ekran görüntüsünden, monitörüme uyuyor st =):

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)

Giriş, örneğin '07299361548'

Evrişim başarının anahtarıdır.

Javascript ES6, 506 bayt

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()}}

Ungolfed:

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

<body>Firefox 46'da test edilen, tuvali eklemek için bir yöntem olduğunu varsayar .

Örnek çalışma (anonim işlevi f'ye atama):

f([1,0,3])

verim:

Html + JavaScript ES6, 352

Aşağıdaki pasajı çalıştıran testi

<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>

Daha az golf oynadı

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 bayt

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"));}}

Ungolfed

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"));
    }
}

notlar

• Giriş, bağımsız değişken olarak tek bir dizedir. Nasıl kullanılır: javac G.java,java G 80085

• Siyah bir tuvalle başlıyorum, sonra sayıları beyaz pozitif olarak ekliyorum. Görüntünün bir kopyasını oluşturdum ve sonra orijinal görüntünün üzerinde 4 siyah komşusu olan her siyah pikseli çeviriyorum.

çıktılar

Bazı tek basamaklar:

R, golf için çok fazla bayt ( 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 diske yazma, sonra diskten okuma siyah dolgu uzağa düzenleyin.

Python 3, 326 325 bayt

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 bayt

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");}}}

Sayıyı komut satırı argümanı olarak alır. İsim olarak numaraya sahip, güzel, temiz ve bir diğer adı olmayan BMP resmi çıkarır.

Golf oynamadan önce orijinal:

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 bayt

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"]

açıklama

Her giriş basamağı için 5 hücre hattının her birinde dört bit kullanılacaktır.

"75557262277174771717557117471774757711117575775717"bitmapler olarak 0 ila 9'u temsil eder.

Yukarıdaki büyük tamsayıdaki ilk 5 hane, yani 75557her sıranın sıfıra nasıl gösterilmesi gerektiğini gösterir. yani, sağında 3 siyah hücreyi takip eden beyaz bir hücreyi 7temsil {0,1,1,1}edecek; öncü 0, görüntülenen haneleri ayırmak için boş bir alandır. 5karşılık geldiği {0,1,0,1}, beyaz, siyah, beyaz, siyah hücreleri olduğu.

Aşağıdaki değiştirme kurallarının bir listesini oluşturur:

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"}

3Girdi olduğunda , bunun yerine kullanılacağını unutmayın. 71717 Bu gösterim ikili olarak ifade edilir:

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} }

Siyah-beyaz tersi sadece 1s ve 0s'yi değiştirerek bulunur.

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} }

Bakalım neyi görelim pve qşöyle görünelim ArrayPlot:

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

Bu sadece büyük diziyi oluşturmadan önce her bir rakam için sıfır dizilerini ve dizileri birleştirir ArrayPlot. son basamaktan sonra son dikey boşluk olarak *tanımlanır j.

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