JavaScript (ES6) 257 288 321
Edit Steps merged.
Edit Golfed code fiddling to cut some more char
Build the output iteratively into the r array, keeping track of current x and y position and current direction. When the x or y position is < 0 the whole r array is readjusted.
Main variables:
- r result array or rows
- x,y current position.
- s current direction (0..7) (or current state)
- d current symbol to draw (0..3) -> '|\_/'
- l runnig position on the current sequence (down to 0)
- w current spiral radius (more or less)
F=n=>
(w=>{
for(r=b=[],s=y=x=d=0;n--;
d&&--l||((s=s+1&7,d=s&3)?l=d-2?w:s/2-2+w+w:w+=!s))
s>0&s<4?++x:s>4?x?--x:r=r.map(v=>' '+v):b+=' ',
q=r[s>2&s<6?++y:y]||b,
r[y]=(q+b).slice(0,x)+'|/_\\'[d]+q.slice(x+1),
s<2|s>6?y?--y:r=[,...r]:x+=!d*2,x-=!d
})(1)||r.join('\n')
Ungolfed
F=n=>{
var r=[], s,x,y,d,w,l, q
for(l=w=1, s=x=y=d=0; n--;)
{
if (s>2 && s<6) ++y; // right side, inc y before drawing
if (x < 0) // too left, adjust
{
r = r.map(v=>' '+v) // shift all to right
++x; // move current position to right
}
if (y < 0) // too up
{
r = [q='',...r] // shift all to bottom
++y; // move current position to bottom
}
q = r[y] || ''; // current row, if undefined convert to empty string
r[y] = (q+' '.repeat(x)).slice(0,x) + '|/_\\'[d] + q.slice(x+1); // add current symbol in the x column
if (s<2 || s>6) --y; // left side, dec y after drawing
if (s>0 && s<4) // always change x after drawing
++x;
else if (s > 4)
--x;
--l; // decrement current run
if (l == 0) // if 0, need to change direction
{
s = (s+1) % 8; // change direction
d = s % 4; // change symbol
if (d == 0)
{
// vertical direction, adjust x and if at 0 increase radius
l = 1 // always 1 vertical step
if (s == 0)
++x, ++w
else
--x
}
else
{
if (d != 2)
{
l = w; // diaagonal length is always w
}
else if (s == 2)
{
l = w+w-1 // top is radius * 2 -1
}
else
{
l = w+w+1 // bottom is radius * 2 +1
}
}
}
}
return r.join('\n')
}
Test In Firefox/FireBug console (or JSFiddle thx @Rainbolt)
;[1, 2, 10, 20, 155, 278].forEach(x=>console.log(F(x)))
Output
|
/
|
_
/ \
| |
\___/
___
/ _ \
/ / \ \
| | | |
\___/ /
___________
/ _________ \
/ / _______ \ \
/ / / _____ \ \ \
/ / / / ___ \ \ \ \
/ / / / / _ \ \ \ \ \
/ / / / / / \ \ \ \ \ \
| | | | | | | | | | | |
\ \ \ \ \___/ / / / /
\ \ \ \_____/ / / /
\ \ \_______/ / /
\ \_________/ /
\___________/
_______________
/ _____________ \
/ / ___________ \ \
/ / / _________ \ \ \
/ / / / _______ \ \ \ \
/ / / / / _____ \ \ \ \ \
/ / / / / / ___ \ \ \ \ \ \
/ / / / / / / _ \ \ \ \ \ \ \
/ / / / / / / / \ \ \ \ \ \ \ \
| | | | | | | | | | | | | | | |
\ \ \ \ \ \ \___/ / / / / / / /
\ \ \ \ \ \_____/ / / / / / /
\ \ \ \ \_______/ / / / / /
\ \ \ \_________/ / / / /
\ \ \___________/ / / /
\ \_____________/ / /
\_______________/ /
|
) are merely the closest character that can represent the meeting of a/
and\
. \$\endgroup\$