monsterLine

canvas.html

<canvas id=canvas width="2000px" height="2000px"></canvas>

dragon.js

//digit < 13

//一行
((digit=12,angle=8,ctx=canvas.getContext('2d'),len=10)=>[...Array(digit)].reduce((a)=>a.reduce((p,c,i)=>[...p,c+(1-2*(i%2)),c+(2*(i%2)-1)].map((v)=>v<0?angle+v:angle<=v?angle%v:v),[]),[3]).reduce((p,v,i)=>[...p,{x:!(v%4)?p[i].x:p[i].x+len*(-2*parseInt(v/4)+1),y:p[i].y+[len*-1,0,len,len,len,0,len*-1,len*-1][!v?6:v-1]}],[{x:500,y:500}]).forEach(({x,y},i)=>i<1?ctx.moveTo(x,y):new Promise((resolve)=>setTimeout(()=>resolve(ctx.lineTo(x,y)),(i-1)*10)).then(()=>ctx.stroke()))).call()


// 分解
((digit = 12, angle = 8, ctx = canvas.getContext('2d'), len = 10) =>
	[...Array(digit)].reduce((a) =>
		a.reduce((p, c, i) =>
			[...p, c + (1 - 2 * (i % 2)), c + (2 * (i % 2) - 1)].map((v) => v < 0 ? angle + v : angle <= v ? angle % v : v), []), [3])
		.reduce((p, v, i) => [...p, {
			x: !(v % 4) ? p[i].x : p[i].x + len * (-2 * parseInt(v / 4) + 1),
			y: p[i].y + [len * -1, 0, len, len, len, 0, len * -1, len * -1][!v ? 6 : v - 1]
		}], [{ x: 500, y: 500 }])
		.forEach(({x, y}, i) =>
			i < 1 ?
				ctx.moveTo(x, y) :
				new Promise((resolve) => setTimeout(() => resolve(ctx.lineTo(x, y)), (i - 1) * 10)).then(() => ctx.stroke())
	)
).call()

hilbert.js

// [...Array(6)]まで

// 一行
((L='L${R}FR${L}F${L}RF${R}L',R='R${L}FL${R}F${R}LF${L}R',ctx=canvas.getContext('2d'),len=10)=>[...Array(6)].reduce((p,c,i,a)=>p.replace(/\$\{(L|R)\}/g,i+1===a.length?'':(s)=>s.includes('L')?L:R),L).split("F").map((s)=>!(s.length%2)?0:s.slice(-1)==='L'?1:-1).reduce((a,lr,i)=>[...a,Object({d:(a[i].d+lr)%4<0?3:(a[i].d+lr)%4,x:a[i].x+Math.floor(Math.sin(a[i].d/2*Math.PI))*len,y:a[i].y+Math.floor(Math.sin((a[i].d-1)/2*Math.PI))*(-1*len),})],[{x:len,y:len,d:0}]).forEach(({x,y},i)=>i<2?ctx.moveTo(x,y):new Promise((resolve)=>setTimeout(()=>resolve(ctx.lineTo(x,y)),(i-1)*10)).then(()=>ctx.stroke()))).call()

//  分解
((L = 'L${R}FR${L}F${L}RF${R}L', R = 'R${L}FL${R}F${R}LF${L}R', ctx = canvas.getContext('2d') , len=10 ) =>
	[...Array(6)].reduce(
		(p, c , i, a) =>
			p.replace(/\$\{(L|R)\}/g, i + 1 === a.length ? '' : (s) => s.includes('L') ? L : R)
		, L).split("F")
	.map((s) => !(s.length % 2) ? 0 : s.slice(-1) === 'L' ? 1 : -1 )
	.reduce(
		(a, lr, i) => [
			...a,
			Object({
				d: (a[i].d + lr) % 4 < 0 ? 3 : (a[i].d + lr) % 4,
				x: a[i].x + Math.floor(Math.sin(  a[i].d / 2 * Math.PI )) * len,
				y: a[i].y + Math.floor(Math.sin( ( a[i].d - 1 ) / 2 * Math.PI )) * (-1 * len ),
			})
		],
		[ {x:len, y:len, d:0 } ]
	).forEach(({x, y} , i) => i < 2 ? ctx.moveTo(x, y) : new Promise((resolve) => setTimeout(() => resolve(ctx.lineTo(x, y)), (i - 1) * 10 )).then(() => ctx.stroke()))
).call();

sierpinski_gasket.js

//digit <= 7

// 一行
((ctx=canvas.getContext('2d'),max=1800,digit=6,count=0)=>[...Array([...Array(digit)].reduce((p,c,i)=>p+(i>1?3**(i-2):0)+3**i,0))].reduce((p,c,ii)=>[...p,...p[ii].map(({x,y},i,a)=>Object({x:(a[!i?2:i-1].x+x)/2,y:(a[!i?2:i-1].y+y)/2,})).map((v,i,a)=>[v,a[!i?2:i-1],p[ii][!i?2:i-1]])],[[...Array(4)].map((v,i)=>Object({x:!(i%3)?0:max/i,y:i===2?0:max}))]).forEach((a)=>a.forEach(({x,y},i)=>new Promise((resolve)=>setTimeout(()=>resolve(!i?ctx.moveTo(x,y):ctx.lineTo(x,y)),(!i?count:count++)*20)).then(()=>ctx.stroke())))).call()

//　分解
(
	(ctx = canvas.getContext('2d'), max = 1800, digit = 6, count = 0) =>
		[...Array([...Array(digit)].reduce((p, c, i) => p + ( i > 1 ? 3 ** (i - 2) : 0 ) + 3 ** i, 0))]
			.reduce((p, c, ii) =>
					[
						...p,
						...p[ii].map(({x, y}, i, a) => Object({
							x: (a[!i ? 2 : i - 1].x + x) / 2,
							y: (a[!i ? 2 : i - 1].y + y) / 2,
						}))
							.map((v, i, a) =>
								[
									v,
									a[!i ? 2 : i - 1],
									p[ii][!i ? 2 : i - 1]
								])
					],
				[
					[...Array(4)].map((v, i) => Object({
						x: !(i % 3) ? 0 : max / i,
						y: i === 2 ? 0 : max
					}))
				]).forEach((a) =>
			a.forEach(({x, y}, i) =>
				new Promise((resolve) => setTimeout(() =>
					resolve(!i ? ctx.moveTo(x, y) : ctx.lineTo(x, y)), (!i ? count : count++) * 20)).then(() => ctx.stroke())
			)
		)
).call()