[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](/questions/tagged/code-golf "show questions tagged '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]
# 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]
# Pyth, ~~48~~ ~~45~~ ~~44~~ ~~43~~ 42 bytes
```
=Y0juXGZX@G~+Z-!J%/HtQ4q2J~+Y%J2@zHlzm*;lz
```
[Try it online.](https://pyth.herokuapp.com/?code=%3DY0juXGZX%40G%7E%2BZ-!J%25%2FHtQ4q2J%7E%2BY%25J2%40zHlzm*%3Blz&input=5%0AIHopeYourProgramWorksForInputStringsWhichAre100CharactersLongBecauseThisTestCaseWillFailIfItDoesNot&debug=0)
This approach does the same trailing whitespace abuse as the Ruby answer.
[Answer]
## 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]
## 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 !](https://pyth.herokuapp.com/?code=Klz%3DYm%3B%2B%2aQKQVQ%3DXYt%2B%2aKhNhNb%3BVK%3DXYZ%40zN%3D%2BZ%40%5BhK1_hK1%29.%263%2FNtQ%3BsY&input=5%0AIHopeYourProgramWorksForInputStringsWhichAre100CharactersLongBecauseThisTestCaseWillFailIfItDoesNot.&debug=0)
For some reason, line wrapping make the output weird. You may want to have a look at the [output on full page](http://hastebin.com/raw/yatacofedi)
## 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]
# 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]
# 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]
# JavaScript (ES6), 131
Algorithm: mapping the position `x,y` in output to the index in the input string, somehow like [this](https://codegolf.stackexchange.com/a/77233/21348) (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]
## 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](https://pyth.herokuapp.com/?code=%3Dk%40Q0J-%40Q1%201K*4J%3DT*%40Q1[*lkd%3BVlk%3DZ%2B*%25NJ%2F%25N*J2J*%2FN*J2J%3DY.a-%2B**%2F%25N*J2J!%2F%25NK*J2J*%25NJ!%2F%25N*J2J**!%2F%25N*J2J%2F%25NK*J2J%20XTYX%40TYZ%40kN%3BjbT&input=[%22IHopeYourProgramWorksForInputStringsWhichAre100CharactersLongBecauseThisTestCaseWillFailIfItDoesNot.%22%2C5]&test_suite=1&test_suite_input=[%22a%22%2C%203]%0A[%22Hello%2CWorld!%22%2C%203]%0A[%22ProgrammingPuzzlesAndCodeGolf%22%2C%204]%0A[%22IHopeYourProgramWorksForInputStringsWhichAre100CharactersLongBecauseThisTestCaseWillFailIfItDoesNot.%22%2C%205]%0A[%22!%5C%22%23%24%25%26%27%28%29*%2B%2C-.%2F0123456789%3A%3B%3C%3D%3E%3F%40ABCDEFGHIJKLMNOPQRSTUVWXYZ[%5C]%5E_%60abcdefghijklmnopqrstuvwxyz%7B%7C%7D~%22%2C%2010]&debug=0)
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]
# 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`
]