31

先日四角い紙の上でだらだらしている間、私は上記の数字用のネガティブスペースフォントを思いついた。まだ見つけていない場合、上記の形状の間のスペースは黄金比1.618033988749になります。この課題では、タスクは入力として数値を取得し、上記の例が示すように正確にレンダリングすることです。

これらの作成方法を次に示します。すべての行は通常のグリッド上にあるため、個々の数字は少数のグリッドセルで構成されます。10桁の形状は次のとおりです（このチャレンジでは小数点は無視します）。

^{はい、7は上部の黄金比の例とは異なります。私はちょっとそれを台無しにしました。これを使用します。}

各桁の高さは5セル、幅は3セルです。数字をレンダリングするには、数字のペアの間に空の列が1つだけ存在するように、すべての数字を隣り合わせに配置することを想像できます。たとえば、319入力として次のように記述します。

最初と最後の空の列を1つ追加することに注意してください。次に、セルを反転します。

出力は、結果のポリゴンの境界になります。

もちろん、レンダリングされた出力が同じように見える限り、他の方法で結果を生成できます。

入力

STDIN（または最も近い代替）、コマンドライン引数または関数引数を介して入力を文字列または数字のリストとして取得して、プログラムまたは関数を作成できます。（先行ゼロをサポートできないため、数字を使用することはできません。）
入力に16桁はないものと想定できます。

出力

出力は、画面に表示されるか、共通の画像形式でファイルに書き込まれます。
ラスターグラフィックスとベクターグラフィックスの両方を使用できます。
いずれの場合も、基礎となるグリッドのセルのアスペクト比は1である必要があります（つまり、セルは正方形である必要があります）。
ラスターグラフィックの場合、各セルは少なくとも20 x 20ピクセルをカバーする必要があります。
行は、セルサイズの10％を超えてはなりません。ここでエイリアスが発生するため、1ピクセルまたは2ピクセルの余裕を与えたいと思います。
線と背景には、はっきりと区別できる2つの色を使用できますが、線によって作成される形状は塗りつぶしてはなりません（つまり、内側も背景色にする必要があります）。
各閉ループ内にギャップがあってはなりません。
もちろん、結果全体が表示される必要があります。

テストケース

10の入力があります。これらの入力は、隣接する数字のすべての可能なペアと、すべての可能な先頭および末尾の数字を一緒にカバーします。

07299361548
19887620534
21456837709
39284106657
49085527316
59178604432
69471338025
79581224630
89674235011
97518264003

そして、これらの期待される結果は次のとおりです。

コードが1桁の場合でも機能することを確認してください（明らかなはずなので、ここに期待する結果を含めたくはありません。テストケースセクションは、それなりに肥大化しています）。

— マーティン・エンダー
ソース

ASCIIアートは受け入れられますか？

— ブルー

2

@Blueそれは非常に異なるタスクになり、答えはほとんど比較できないと思うので、いいえ、申し訳ありません。私は一般的に、1つのチャレンジでグラフィカルな出力とASCIIアートを混ぜるのが好きではありません。

— マーティンエンダー

大丈夫、迅速な返信をありがとう

— ブルー

フォントのインポートは許可されていますか？

— -Marv

@Marv hm、興味深い質問です。その場合は、フォントファイルのサイズを数える必要があると思います。

— マーティンエンダー

1

BBC BASIC、182 ASCII文字（トークン化されたファイルサイズ175バイト）

インタプリタを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.

スコアリング：上記のプログラムをエディターに貼り付けて実行すると、エディターは短縮キーワードを画面上の完全なキーワードに展開しますが、実際にはトークン化後は1バイトしかありません。（例I.= INPUTストレージスペース1バイト。）

説明

VDUラインの機能について説明します。画面上の現在のピクセルの色をビットフリップしてボックスを描画します。これは、（コーナーに少し注意を払って）1つのセルを隣同士に単純に描画することが可能であり、二重の描画のために介在するエッジがキャンセルされて消えることを意味します。

よく調べると、この作業を行うために、セルの右上隅と左下隅が描画されているが、左上と右下が欠落している（「丸められた」）ことがわかります。

セルを描画した後、グラフィックカーソルを32ピクセル上に移動して、次のセルを描画できるようにします。

プログラムの残りは、かなり単純なASCIIビットマップ圧縮解除です。セルの大きさは、ビットマップが圧縮解除される方法とのゴルフ/互換性のために64x64単位です。qプロットされるセルのサイズを制御します。存在するセルの場合は64x64ユニット、存在しないセルの場合は0x0ユニット。

未ゴルフコード

  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

出力

MOVEsがちょうど出力は、画面上の高さを適切に得るされています。BBC Basicは、このモードで2単位= 1ピクセルを使用するため、セルは実際には32x32ピクセルです。

— レベルリバーストリート
ソース

10

オクターブ、233225216213バイト

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)

ここで最初のテストケース（サイズ変更されたスクリーンキャプチャから、それは私のmonitor =に適合します）：

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)

入力は、たとえば '07299361548'

畳み込みは成功の鍵です。

— フレア
ソース

@LuisMendo、たくさんのバイトでスコアを改善してくれてありがとう=）

— flawr

2

私はもっと同意できなかった成功への鍵であるコンボリューション :-)

— ルイス・Mendo

どういうわけか、これは常に私の成功したmatlab / octave答えのモットーです：D

— flawr

5

Javascript ES6、506バイト

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

ゴルフをしていない：

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でテストされたキャンバスを追加するものがあると仮定します。

実行例（匿名関数をfに割り当てる）：

f([1,0,3])

収量：

— デンドロビウム
ソース

5

Html + JavaScript ES6、352

以下のスニペットを実行してテストする

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

スニペットを展開

少ないゴルフ

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

— edc65
ソース

1

終了スクリプトタグは必要ないと思います...

— ママファンロール

3

Java、768バイト

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

非ゴルフ

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

ノート

入力は、引数としての単一の文字列です。使用方法：javac G.java、java G 80085
私は黒いキャンバスから始めてから、数字を白いポジティブとして追加しています。画像のコピーを作成してから、元の画像に4つの黒の隣接ピクセルがあるすべての黒ピクセルを反転します。

出力

いくつかの単一の数字：

— マーヴ
ソース

java.awt。*にはjava.awt.image.BufferedImageが含まれていませんか？

— Element118

@ Element118ではありません。

— -Marv

2

R、ゴルフには多すぎるバイト（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))

笑ディスクへの書き込み、ディスクからの読み取りで黒塗りを編集します。

— Vlo
ソース

2

Python 3、326 325バイト

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

— orlp
ソース

2

先日、他の回答の1つでこれをコメントするつもりrange(3)でしたが、それだけの価値はありません。

— Sp3000

1

C＃、768 773 776バイト

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

コマンドライン引数として数値を取ります。名前として番号を使用して、きれいできれいな、エイリアスされていないBMPイメージを出力します。

ゴルフ前のオリジナル：

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

— トーマス・ウェラー
ソース

1

Mathematica 328バイト

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

説明

各入力桁の5行のセルのそれぞれで4ビットが使用されます。

"75557262277174771717557117471774757711117575775717"ビットマップとして0〜9を表します。

上記の大きな整数の最初の5桁は、つまり75557、ゼロの各配列行の表示方法を示しています。、つまり白いセル7を表し{0,1,1,1}、その右側に3つの黒いセルが続きます。先頭0は、表示される数字を区切るための空白です。 5に対応します{0,1,0,1}。つまり、白、黒、白、黒のセルです。

以下は、置換ルールのリストを生成します。

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

3が入力されると、次のように置き換えられることに注意してください。71717 この表現はバイナリで表現されます。

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

その白黒反転は、単に1sと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} }

のは、見てみましょうpとqして表示するときのような外観をArrayPlot：

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

これは、を介して大きな配列をレンダリングする前に、各桁のゼロと1の配列を単純に結合しますArrayPlot。 *はj、最後の桁の後の最終的な垂直方向のスペースとして定義されます。

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

— DavidC
ソース

行間

入力

出力