Snakify a String

Question

A snakified string looks like this:

T AnE eOf ifi ing
h s x l A k e r
isI amp Sna dSt

Your Task

Take a string s and a size n, then output the snakified string. The inputs ThisIsAnExampleOfaSnakifiedString and 3 would produce the example above.

Specifications

• s will only contain ASCII characters between code points 33 and 126 inclusive (no spaces or newlines).
• s will be between 1 and 100 characters long.
• n is an integer representing the size of each output string segment. Each line of characters (up/down or left/right) that make up the curves in the "snake" is n characters long. See the test cases for examples.
• n will be between 3 and 10 inclusive.
• The output string always starts pointing downwards.
• Trailing spaces on each line are allowed.
• Trailing newlines at the end of the output are also allowed.
• Leading spaces are not allowed.
• code-golf means shortest code in bytes wins.

Test Cases

a 3

a

----------

Hello,World! 3

H Wor
e , l
llo d!

----------

ProgrammingPuzzlesAndCodeGolf 4

P  ngPu  Code
r  i  z  d  G
o  m  z  n  o
gram  lesA  lf

----------

IHopeYourProgramWorksForInputStringsWhichAre100CharactersLongBecauseThisTestCaseWillFailIfItDoesNot. 5

I   gramW   tStri   100Ch   gBeca   CaseW   DoesN
H   o   o   u   n   e   a   n   u   t   i   t   o
o   r   r   p   g   r   r   o   s   s   l   I   t
p   P   k   n   s   A   a   L   e   e   l   f   .
eYour   sForI   Which   cters   ThisT   FailI

----------

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ 10

!        <=>?@ABCDE        `abcdefghi
"        ;        F        _        j
#        :        G        ^        k
$        9        H        ]        l
%        8        I        \        m
&        7        J        [        n
'        6        K        Z        o        ~
(        5        L        Y        p        }
)        4        M        X        q        |
*+,-./0123        NOPQRSTUVW        rstuvwxyz{

Answer 1

Pyth, 48 45 44 43 42 bytes

=Y0juXGZX@G~+Z-!J%/HtQ4q2J~+Y%J2@zHlzm*;lz

Try it online.

This approach does the same trailing whitespace abuse as the Ruby answer.

Answer 2

Ruby, 87 bytes

->s,n{p=0
a=(' '*(w=s.size)+$/)*n
w.times{|i|a[p]=s[i];p+=[w+1,1,-w-1,1][i/(n-1)%4]}
a}

Some minor abuse of the rule Trailing spaces on each line are allowed. Each line of output is w characters long, plus a newline, where w is the length of the original string, i.e. long enough to hold the whole input. Hence there is quite a lot of unnecessary whitespace to the right for large n.

Ungolfed in test program

f=->s,n{
  p=0                            #pointer to where the next character must be plotted to
  a=(' '*(w=s.size)+$/)*n        #w=length of input. make a string of n lines of w spaces, newline terminated
  w.times{|i|                    #for each character in the input (index i)
    a[p]=s[i]                    #copy the character to the position of the pointer
    p+=[w+1,1,-w-1,1][i/(n-1)%4] #move down,right,up,right and repeat. change direction every n-1 characters
  }
a}                               #return a

puts $/,f['a',3]

puts $/,f['Hello,World!',3]

puts $/,f['ProgrammingPuzzlesAndCodeGolf',4]

puts $/,f['IHopeYourProgramWorksForInputStringsWhichAre100CharactersLongBecauseThisTestCaseWillFailIfItDoesNot.',5]

puts $/,f['!"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~',10]

Answer 3

JavaScript (ES6), 143 bytes

(s,n)=>[...s].map((c,i)=>(a[x][y]=c,i/=n)&1?y++:i&2?x--:x++,a=[...Array(n--)].map(_=>[]),x=y=0)&&a.map(b=>[...b].map(c=>c||' ').join``).join`\n`

Where \n represents a literal newline. Ungolfed:

function snakify(string, width) {
    var i;
    var result = new Array(width);
    for (i = 0; i < width; i++) result[i] = [];
    var x = 0;
    var y = 0;
    for (i = 0; i < string.length; i++) {
       result[x][y] = string[i];
       switch (i / (width - 1) & 3) {
       case 0: x++; break;
       case 1: y++; break;
       case 2: x--; break;
       case 3: y++; break;
    }
    for (i = 0; i < width; i++) {
        for (j = 0; j < r[i].length; j++) {
            if (!r[i][j]) r[i][j] = " ";
        }
        r[i] = r[i].join("");
    }
    return r.join("\n");
}

Answer 4

Pyth, 85 74 59 bytes

Kl@Q0J0=Y*]d-+*@Q1K@Q1 1FNr1@Q1=XY-+*KNN1b;VK=XYJ@@Q0N=+J@[+K1 1-_K1 1).&3/N-@Q1 1;sY

=G@Q1=H@Q0KlHJ0=Y*]dt+*GKGFNr1G=XYt+*KNNb;VK=XYJ@HN=+J@[hK1t_K1).&3/NtG;sY

Klz=Ym;+*QKQVQ=XYt+*KhNhNb;VK=XYZ@zN=+Z@[hK1_hK1).&3/NtQ;sY

Thanks to @FryAmTheEggman for greatly helping me !

Golfed as much as I could. Try it here ! For some reason, line wrapping make the output weird. You may want to have a look at the output on full page

Explanation

Breathe a second, and focus. This can be broken down in three sections, like almost any "classic" algorithm.

The first section

It's where variables are initialized. It can be splitted into two parts :

Klz=Ym;+*QKQ
Klz                Assign len(input[0]) to K. (length of input String)
   =Ym;+*QKQ       Assign an empty list to Y of length K*input[1]-input[1]-1, where input[1] is the size of the snake 
                   (thus the height of the final string)

the second part :

VQ=XYt+*KhNhNb;
VQ                       For N in range(0, input[1]), where input[1] is the size of the snake 
  =                        Assign to Y. Y is implicit, it is the last variable we used.
   XYt+*KhNhNb               Y[K*N+N-1]="\n". Can be broken down in four parts :
   X                           Replace function. X <A: list> <B: int> <C: any> is A[B]=C
    Y                          A: The array we initialized in the first section.
     t+*KhNhN                  B: K*(N+1)+N+1 (N is the for loop variable)
             b                 C: Newline character ("\n")
              ;          End the loop.

The second section

It contains the actual logic.

VK=XYZ@zN=+Z@[hK1_hK1).&3/NtQ;
VK                                         For N in range(0, K), where K is the length of the input string (see first section)
  =                                          Assign to Y. Y is implicit, it is the last variable we used.
   XYZ@zN                                    Same as in section 2. This is a replacement function. Y[Z] = input[0][N]. Z is initially 0.
         =+Z@[hK1_hK1).&3/NtQ                Again this can be broken down :
         =+Z                                   Add to Z
             [hK1_hK1)                         Array containing directions. Respectively [K+1, 1, -K-1, 1]
            @         .&3/NtQ                  Lookup in the array, on index .&3/N-@Q1 1:
                      .&3                        Bitwise AND. .& <int> <int>
                         /NtQ                    (input[1]-1)/N, where input[1] is the size of the snake
                             ;             End the loop

The third section

This is the output part. Not really interesting...

sY    Join the array Y. Implicitly print.

BONUS

I wrote the pyth program from this python script.

input=["ThisIsAnExampleOfASnakifiedString", 4];
width=len(input[0]);
height=input[1];
pointer=0;
directions = [width+1,1,-width-1,1] #Respectively Down, right, up, right (left is replaced by right because of snake's nature. Doesn't go left).
output=[' ' for i in range(0, width*height+height-1)];
for N in range(1, height):
    output[width*N+N-1]="\n";
for N in range(0, len(input[0])):  
    output[pointer]=input[0][N];
    pointer+=directions[3&(N/(height-1))];
print "".join(output);

Answer 5

JavaScript (ES6), 122 bytes

document.write("<pre>"+(

// --- Solution ---
s=>n=>[...s].map((c,i)=>(a[p]=c,p+=[l+1,1,-l-1,1][i/n%4|0]),p=0,a=[...(" ".repeat(l=s.length)+`
`).repeat(n--)])&&a.join``
// ----------------

)("IHopeYourProgramWorksForInputStringsWhichAre100CharactersLongBecauseThisTestCaseWillFailIfItDoesNot.")(5))

Same algorithm as @LevelRiverSt's answer.

Answer 6

C, 138 bytes

char*h[]={"\e[B\e[D","","\e[A\e[D",""},t[999];i;main(n){system("clear");for(scanf("%s%d",t,&n),--n;t[i];++i)printf("%c%s",t[i],h[i/n%4]);}

This uses ANSI escapes. Works in linux terminal.

Ungolfed:

char*h[]={"\e[B\e[D","","\e[A\e[D",""},
    /* cursor movement - h[0] moves the cursor one down and one left,
    h[2] moves the cursor one up and one left. */
t[999];i;
main(n){
    system("clear");
    for(scanf("%s%d",t,&n),--n;t[i];++i)
        printf("%c%s",t[i],h[i/n%4]);
}

Answer 7

JavaScript (ES6), 131

Algorithm: mapping the position x,y in output to the index in the input string, somehow like this (unrelated) answer.

I borrowed from @LevelRiverSt the trick of keeping the horizontal width equal to the input length.

a=>m=>eval('for(--m,t=y=``;y<=m;++y,t+=`\n`)for(x=0;a[x];)t+=a[2*(x-x%m)+((h=x++%(2*m))?h-m?!y&h>m?h:y<m|h>m?NaN:m+h:m-y:y)]||`.`')

Less golfed

This was the first working draft before golfing

f=(a,n)=>{
  l=a.length
  m=n-1
  s=m*2 // horizontal period

  b=-~(~-l/s)*m // total horizontal len, useless in golfed version
  t=''
  for(y=0;y<n;y++)
  {
    for(x=0;x<b;x++)
    {
      k = x / m | 0
      h = x % s
      if (h ==0 )
        c=k*s+y
      else if (h == m)
        c=k*s+m-y
      else if (y == 0 && h>m)
        c=k*s+h
      else if (y == m && h<m)
        c=k*s+m+h
      else
        c=-1
      t+=a[c]||' '
    }
    t+='\n'
  }
  return t
}  

Test

F=a=>m=>eval('for(--m,t=y=``;y<=m;++y,t+=`\n`)for(x=0;a[x];)t+=a[2*(x-x%m)+((h=x++%(2*m))?h-m?!y&h>m?h:y<m|h>m?NaN:m+h:m-y:y)]||` `')

function test()
{
  var n=+N.value
  var s=S.value
  O.textContent=F(s)(n)
}  

test()

#S {width:80%}
#N {width:5%}

<input id=N value=5 type=number oninput='test()'>
<input id=S 5 oninput='test()'
value='IHopeYourProgramWorksForInputStringsWhichAre100CharactersLongBecauseThisTestCaseWillFailIfItDoesNot.'>
<pre id=O></pre>

Answer 8

Pyth, 122 bytes

=k@Q0J-@Q1 1K*4J=T*@Q1[*lkd;Vlk=Z+*%NJ/%N*J2J*/N*J2J=Y.a-+**/%N*J2J!/%NK*J2J*%NJ!/%N*J2J**!/%N*J2J/%NK*J2J XTYX@TYZ@kN;jbT

I've made a formula to calculate the x, y positions of each character based on the segment size / modulo, but they got larger than I expected :c

Explanation:

=k@Q0                                                                                                                     # Initialize var with the text
     J-@Q1 1                                                                                                              # Initialize var with the segment size (minus 1)
            K*4J                                                                                                          # Initialize var with the "block" size (where the pattern start to repeat)
                =T*@Q1[*lkd;                                                                                              # Initialize output var with an empty array of strings
                            Vlk                                                                                           # Interate over the text
                               =Z+*%NJ/%N*J2J*/N*J2J                                                                      # Matemagics to calculate X position
                                                    =Y.a-+**/%N*J2J!/%NK*J2J*%NJ!/%N*J2J**!/%N*J2J/%NK*J2J                # Matemagics to calculate Y position
                                                                                                          XTYX@TYZ@kN;    # Assign the letter being iterated at x,y in the output
                                                                                                                      jbT # Join with newlines and print the output

Test here

For the Math formulas, I used mod to generate 0/1 flags and then multiplied by a factor based on the input n, added the spreadsheet with each step on the snippet bellow

td{padding-top:1px;padding-right:1px;padding-left:1px;color:black;font-size:11.0pt;font-weight:400;font-style:normal;text-decoration:none;font-family:Calibri,sans-serif}.x1{text-align:general;vertical-align:bottom;white-space:nowrap}.x2{text-align:general;vertical-align:bottom;border-right:.5pt solid gray;border-bottom:.5pt solid gray;border-left:.5pt solid gray;white-space:nowrap}.x3{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid gray;border-bottom:.5pt solid gray;border-left:.5pt solid windowtext;white-space:nowrap}.x4{text-align:general;vertical-align:bottom;border:.5pt solid gray;white-space:nowrap}.x5{text-align:general;vertical-align:bottom;border:.5pt solid gray;background:#c5d9f1;white-space:nowrap}.x6{text-align:general;vertical-align:bottom;border:.5pt solid gray;background:#ebf1de;white-space:nowrap}.x7{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid windowtext;border-bottom:.5pt solid gray;border-left:.5pt solid gray;background:#ebf1de;white-space:nowrap}.x8{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid gray;border-bottom:.5pt solid gray;border-left:.5pt solid windowtext;background:#d9d9d9;white-space:nowrap}.x9{text-align:general;vertical-align:bottom;border:.5pt solid gray;background:#d9d9d9;white-space:nowrap}.x10{text-align:right;vertical-align:bottom;border:.5pt solid gray;white-space:nowrap}.x11{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid gray;border-bottom:.5pt solid windowtext;border-left:.5pt solid windowtext;background:#d9d9d9;white-space:nowrap}.x12{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid gray;border-bottom:.5pt solid windowtext;border-left:.5pt solid gray;background:#d9d9d9;white-space:nowrap}.x13{text-align:right;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid gray;border-bottom:.5pt solid windowtext;border-left:.5pt solid gray;white-space:nowrap}.x14{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid gray;border-bottom:.5pt solid windowtext;border-left:.5pt solid gray;white-space:nowrap}.x15{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid gray;border-bottom:.5pt solid windowtext;border-left:.5pt solid gray;background:#c5d9f1;white-space:nowrap}.x16{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid gray;border-bottom:.5pt solid windowtext;border-left:.5pt solid gray;background:#ebf1de;white-space:nowrap}.x17{text-align:general;vertical-align:bottom;border-top:.5pt solid gray;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;border-left:.5pt solid gray;background:#ebf1de;white-space:nowrap}.x18{text-align:general;vertical-align:bottom;border-right:.5pt solid gray;border-bottom:0;border-left:.5pt solid gray;white-space:nowrap}.x19{text-align:general;vertical-align:bottom;border-right:.5pt solid gray;border-bottom:.5pt solid gray;border-left:.5pt solid windowtext;white-space:nowrap}.x20{text-align:general;vertical-align:bottom;border-right:.5pt solid gray;border-bottom:.5pt solid gray;border-left:.5pt solid gray;background:#c5d9f1;white-space:nowrap}.x21{text-align:general;vertical-align:bottom;border-right:.5pt solid gray;border-bottom:.5pt solid gray;border-left:.5pt solid gray;background:#ebf1de;white-space:nowrap}.x22{text-align:general;vertical-align:bottom;border-right:.5pt solid windowtext;border-bottom:.5pt solid gray;border-left:.5pt solid gray;background:#ebf1de;white-space:nowrap}.x23{text-align:center;vertical-align:bottom;border:.5pt solid windowtext;white-space:nowrap}.x24{text-align:center;vertical-align:bottom;border-right:.5pt solid windowtext;border-bottom:0;border-left:.5pt solid windowtext;white-space:nowrap}

<table style="border-collapse:collapse;table-layout:fixed;width:761pt" border="0" cellpadding="0" cellspacing="0" width="1015">
<colgroup><col style="width:16pt" width="21">
<col style="mso-width-alt:2742;width:56pt" span="2" width="75">
<col style="width:23pt" width="31">
<col style="width:50pt" width="67">
<col style="width:60pt" width="80">
<col style="width:85pt" width="113">
<col style="width:26pt" width="35">
<col style="width:41pt" width="54">
<col style="width:29pt" width="39">
<col style="width:41pt" width="55">
<col style="width:104pt" width="138">
<col style="width:29pt" width="39">
<col style="width:41pt" width="54">
<col style="width:65pt" width="87">
<col style="width:39pt" width="52">
</colgroup><tbody><tr style="height:15.0pt" height="20">
<td class="x23" style="height:15.0pt;width:16pt" width="21" height="20">d</td>
<td class="x23" style="width:56pt" width="75">e</td>
<td class="x23" style="width:56pt" width="75">f</td>
<td class="x24" style="width:23pt" width="31">&nbsp;</td>
<td class="x23" style="width:50pt" width="67">h</td>
<td class="x23" style="width:60pt" width="80">i</td>
<td class="x23" style="width:85pt" width="113">j</td>
<td class="x23" style="width:26pt" width="35">k</td>
<td class="x23" style="width:41pt" width="54">l</td>
<td class="x23" style="width:29pt" width="39">m</td>
<td class="x23" style="width:41pt" width="55">n</td>
<td class="x23" style="width:104pt" width="138">o</td>
<td class="x23" style="width:29pt" width="39">p</td>
<td class="x23" style="width:41pt" width="54">q</td>
<td class="x23" style="width:65pt" width="87">r</td>
<td class="x23" style="width:39pt" width="52">s</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x23" style="height:15.0pt" height="20">i</td>
<td class="x23">expected x</td>
<td class="x23">expected y</td>
<td class="x24" style="">&nbsp;</td>
<td class="x23">pos % seg</td>
<td class="x23">pos/(seg*2)</td>
<td class="x23">pos%(seg*2)/seg</td>
<td class="x23">not j</td>
<td class="x23">seg*i+h</td>
<td class="x23">i*seg</td>
<td class="x23">j*l+k*m</td>
<td class="x23">pos%(seg*4)/(seg*2)</td>
<td class="x23">not o</td>
<td class="x23">j*p*seg</td>
<td class="x23">abs(o*seg-h)</td>
<td class="x23">q*j+r*k</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x19" style="height:15.0pt" align="right" height="20">0</td>
<td class="x2" style="" align="right">0</td>
<td class="x2" style="" align="right">0</td>
<td class="x18" style="">&nbsp;</td>
<td class="x2" style="" align="right">0</td>
<td class="x2" style="" align="right">0</td>
<td class="x2" style="" align="right">0</td>
<td class="x2" style="" align="right">1</td>
<td class="x2" style="" align="right">0</td>
<td class="x20" style="" align="right">0</td>
<td class="x21" style="" align="right">0</td>
<td class="x2" style="" align="right">0</td>
<td class="x2" style="" align="right">1</td>
<td class="x2" style="" align="right">0</td>
<td class="x20" style="" align="right">0</td>
<td class="x22" style="" align="right">0</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x18" style="">&nbsp;</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">1</td>
<td class="x5" align="right">0</td>
<td class="x6" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">1</td>
<td class="x7" align="right">1</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">2</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">2</td>
<td class="x18" style="">&nbsp;</td>
<td class="x4" align="right">2</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">2</td>
<td class="x5" align="right">0</td>
<td class="x6" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">2</td>
<td class="x7" align="right">2</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">3</td>
<td class="x9" align="right">0</td>
<td class="x9" align="right">3</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">0</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x6" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x5" align="right">3</td>
<td class="x4" align="right">0</td>
<td class="x7" align="right">3</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">4</td>
<td class="x9" align="right">1</td>
<td class="x9" align="right">3</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x6" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x5" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x7" align="right">3</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">5</td>
<td class="x9" align="right">2</td>
<td class="x9" align="right">3</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">2</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">2</td>
<td class="x4" align="right">0</td>
<td class="x6" align="right">2</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x5" align="right">3</td>
<td class="x4" align="right">2</td>
<td class="x7" align="right">3</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">6</td>
<td class="x4" align="right">3</td>
<td class="x4" align="right">3</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">3</td>
<td class="x5" align="right">3</td>
<td class="x6" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">3</td>
<td class="x7" align="right">3</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">7</td>
<td class="x4" align="right">3</td>
<td class="x4" align="right">2</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">1</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">4</td>
<td class="x5" align="right">3</td>
<td class="x6" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">2</td>
<td class="x7" align="right">2</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">8</td>
<td class="x4" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">2</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">5</td>
<td class="x5" align="right">3</td>
<td class="x6" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">1</td>
<td class="x7" align="right">1</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">9</td>
<td class="x9" align="right">3</td>
<td class="x9" align="right">0</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">3</td>
<td class="x4" align="right">3</td>
<td class="x6" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">0</td>
<td class="x4" align="right">3</td>
<td class="x7" align="right">0</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">10</td>
<td class="x9" align="right">4</td>
<td class="x9" align="right">0</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">1</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">4</td>
<td class="x4" align="right">3</td>
<td class="x6" align="right">4</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">0</td>
<td class="x4" align="right">2</td>
<td class="x7" align="right">0</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">11</td>
<td class="x9" align="right">5</td>
<td class="x9" align="right">0</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">2</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">5</td>
<td class="x4" align="right">3</td>
<td class="x6" align="right">5</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x7" align="right">0</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">12</td>
<td class="x4" align="right">6</td>
<td class="x4" align="right">0</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">0</td>
<td class="x4" align="right">2</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">6</td>
<td class="x5" align="right">6</td>
<td class="x6" align="right">6</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">0</td>
<td class="x7" align="right">0</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">13</td>
<td class="x4" align="right">6</td>
<td class="x4" align="right">1</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">1</td>
<td class="x4" align="right">2</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">7</td>
<td class="x5" align="right">6</td>
<td class="x6" align="right">6</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">1</td>
<td class="x7" align="right">1</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">14</td>
<td class="x4" align="right">6</td>
<td class="x4" align="right">2</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">2</td>
<td class="x4" align="right">2</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">8</td>
<td class="x5" align="right">6</td>
<td class="x6" align="right">6</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">2</td>
<td class="x7" align="right">2</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">15</td>
<td class="x9" align="right">6</td>
<td class="x9" align="right">3</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">0</td>
<td class="x4" align="right">2</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">6</td>
<td class="x4" align="right">6</td>
<td class="x6" align="right">6</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x5" align="right">3</td>
<td class="x4" align="right">0</td>
<td class="x7" align="right">3</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">16</td>
<td class="x9" align="right">7</td>
<td class="x9" align="right">3</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">1</td>
<td class="x4" align="right">2</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">7</td>
<td class="x4" align="right">6</td>
<td class="x6" align="right">7</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x5" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x7" align="right">3</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">17</td>
<td class="x9" align="right">8</td>
<td class="x9" align="right">3</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">2</td>
<td class="x4" align="right">2</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">8</td>
<td class="x4" align="right">6</td>
<td class="x6" align="right">8</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x5" align="right">3</td>
<td class="x4" align="right">2</td>
<td class="x7" align="right">3</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">18</td>
<td class="x4" align="right">9</td>
<td class="x4" align="right">3</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">0</td>
<td class="x4" align="right">3</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">9</td>
<td class="x5" align="right">9</td>
<td class="x6" align="right">9</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">3</td>
<td class="x7" align="right">3</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">19</td>
<td class="x4" align="right">9</td>
<td class="x4" align="right">2</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">1</td>
<td class="x4" align="right">3</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">10</td>
<td class="x5" align="right">9</td>
<td class="x6" align="right">9</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">2</td>
<td class="x7" align="right">2</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x3" style="height:15.0pt;border-top:none" align="right" height="20">20</td>
<td class="x4" align="right">9</td>
<td class="x4" align="right">1</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">2</td>
<td class="x4" align="right">3</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">11</td>
<td class="x5" align="right">9</td>
<td class="x6" align="right">9</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">1</td>
<td class="x7" align="right">1</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">21</td>
<td class="x9" align="right">9</td>
<td class="x9" align="right">0</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">0</td>
<td class="x4" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">9</td>
<td class="x4" align="right">9</td>
<td class="x6" align="right">9</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">0</td>
<td class="x4" align="right">3</td>
<td class="x7" align="right">0</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x8" style="height:15.0pt;border-top:none" align="right" height="20">22</td>
<td class="x9" align="right">10</td>
<td class="x9" align="right">0</td>
<td class="x18" style="">&nbsp;</td>
<td class="x10">1</td>
<td class="x4" align="right">3</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">10</td>
<td class="x4" align="right">9</td>
<td class="x6" align="right">10</td>
<td class="x4" align="right">1</td>
<td class="x4" align="right">0</td>
<td class="x5" align="right">0</td>
<td class="x4" align="right">2</td>
<td class="x7" align="right">0</td>
</tr>
<tr style="height:15.0pt" height="20">
<td class="x11" style="height:15.0pt;border-top:none" align="right" height="20">23</td>
<td class="x12" align="right">11</td>
<td class="x12" align="right">0</td>
<td class="x18" style="">&nbsp;</td>
<td class="x13">2</td>
<td class="x14" align="right">3</td>
<td class="x14" align="right">1</td>
<td class="x14" align="right">0</td>
<td class="x15" align="right">11</td>
<td class="x14" align="right">9</td>
<td class="x16" align="right">11</td>
<td class="x14" align="right">1</td>
<td class="x14" align="right">0</td>
<td class="x15" align="right">0</td>
<td class="x14" align="right">1</td>
<td class="x17" align="right">0</td>
</tr>
</tr>
</tbody></table>

Answer 9

PHP, 127 126 124 120 119 118 117 110 106 bytes

Uses ISO-8859-1 encoding.

for(;($q=&$o[$y+=$d]||$q=~ÿ)&&~Ï^$q[$x+=!$d]=$argv[1][$a];$a++%($argv[2]-1)?:$d-=-!$y?:1)?><?=join(~õ,$o);

Run like this (-d added for aesthetics only):

php -r 'for(;($q=&$o[$y+=$d]||$q=~ÿ)&&~Ï^$q[$x+=!$d]=$argv[1][$a];$a++%($argv[2]-1)?:$d-=-!$y?:1)?><?=join(~õ,$o);' "Hello W0rld!" 3 2>/dev/null;echo

Ungolfed:

// Iterate over ...
for (
    ;
    // ... the characters of the input string. Prepend `0` so a 0 in the input
    // becomes truthy.
    0 . $char = $argv[1][$a];

    // Use modulo to determine the end of a stretch (where direction is
    // changed).
    // Change direction (`0` is right, `-1` is up and `1` is down). When
    // y coordinate is `0`, increment the direction, else decrement.
    $a++ % ($argv[2] - 1) ?: $direction += $y ? -1 : 1
)

    (
        // Increase or decrease y coordinate for direction -1 or 1 respectively.
        // Check whether the array index at new y coordinate is already set.
        $reference =& $output[$y += $direction] ||
        // If not, create it as a string (otherwise would be array of chars).
        // Null byte, won't be printed to prevent leading char.
        $reference = ~ÿ;

        // Increment x coordinate for direction 0. Set the output char at the
        // current coordinates to the char of the current iteration.
    ) & $reference[$x += !$direction] = $char;

// Output all lines, separated by a newline.
echo join(~õ, $output);

Tweaks

• Saved a byte by using < instead of !=
• Saved 2 bytes by setting the string to 0 at first, so I don't have to prepend another 0 (in case the first output in a line was a 0), yielding truthy 00.
• Saved 4 bytes by using a reference instead of repeating $o[$y]
• Saved a byte by using modulo instead of == for comparing direction with 1 to change x coordinate
• Saved a byte by removing type cast null to int for string offset, as string offset is cast to int anyway
• Saved a byte by using short print tag
• Saved 7 bytes by improving the direction logic
• Saved 4 bytes by directly assigning the char to prevent intermediate $c