subzey/index.html

## index.html
<!doctype html>
<p>This is a repacked version of <a href="http://www.p01.org/MONOSPACE/">MONOSPACE by Mathieu 'p01' Henri</a>.

<p>Looks like Github Gist have some troubles with storing binary files. Please, <a id="run" target="_blank">Click here</button> to run.

<script>
	fetch(`
data:text/html;base64,
iVBORw0KGgoAAAANSUhEUgAABj4AAAACCAAAAADNp/oNAAADyElEQVR4nACgAF//ADxDQU52YXMg
aWQ9Yz48aW1nIG9ubG9hZD1iPWMuZ2V0Q29udGV4dGAyZGA7Zm9yKHQ9bj0nJztlPWIuZ2V0SW1h
Z2VEYXRhKDE1OSwwLDEsIWIuZHJhd0ltYWdlKHRoaXMsbi0tLDApKS5kYXRhWzBdOyl0Kz1TdHJp
bmcuZnJvbUNoYXJDb2RlKGUpOygxLGV2YWwpKHQpIHNyYz0jPn1Th46rOhB9nxJxFeQW+rLVub33
XqJbHDDBWgIIjJZt//7GkK2v0DkeTzlzJuWLINgBx8NjK/BY4hypVOfc34WftEq6tSy1s6zSY6fV
x4V0MsiYW17dT16/ffP247v7Dx9bP9mKl/Jocr9LVbUpiVV85SSNFFp+TBpV63dNlci2hSIjbzf+
V99r0axUyQ0JkA5mlZNUZSkTjVZOKlutSqFVVZqFqhQmWD065RWfn1Yc4E7XnX7QZZlsBn5zAQ6K
gUPJXwudO60qkXb9eOqz9RUyfKzhw2fHXLtACCYD9u45JsTZoo4P3ORSrXLNfQ/oWjptLtLq6G2W
tVJ/52EQDfyNpSxFcrhqqq5MudWIVIlitjJvqBjdsSjQHrBrN5C/Nd5eYO6fC5Oivf2TWmxZgC94
baiHxkzC4Ab/LOML1LNjpjGf9+4xCWaaXQKoJySgx/AYKrm+1LvRr2M3ug4dT/uZ3oQPf7KOW5Dt
gmVwWhNQ8+T728+TZ4/vf5i8fmwNMLOuZWJ9evZ48vjNI2t0ceb9/Mn0vLTttpYyyT8elzqXrWod
+BeHyKjm482Vz1rLRpSJRB0rKfdjDMcwHIp7+0Y784iofUUpXi3UT95wlKEe7GZqGgZMmC+k3DA4
8zBU5Aa2jykypmeAuAHrKa9gUtyIRgT5szWQEmJyqQRFNd3BTBirOPo/M8xy3l8hQDtspOIGglnN
Tc4uWpMwAFf51bLEVE+hPmjtUoLw38ECyoaa3NqgoknQdXtwT2o6DOvNuADPxO1MAAuHMa7nnm3X
LgpoGMwaYiJ6bAdfKvhB0TUDJSAREg5WY7I0J7kbXNo9rIqq4VbeFgg0kW0kYwd3NQTf2fMhLaTt
OMJkTa2pdePnp9GvKgqE9/8j7O0wdzIprZt9H7teGYbMww0oQlczTVKQ3CJi4+m7mztm0eU0gaKv
pnqHbvbsAAwyiTEd/8EUgGgaYzeOKDTEjUDHUAiLo7myTc9IDB/2WNIn2Wu06BaKIpMVMYID1avp
riFxKNCP6cCOcndBgwS8DtoCfKbHJmGmQevuymnFui7kB6Hl+V9/Aw==
	`).then(r => r.blob()).then(blob => {
		const blobUrl = URL.createObjectURL(blob);
		document.querySelector('#run').href = blobUrl;
	});
</script>

## index.js
/// <reference types="node"/>
import Crc32 from 'crc-32';
import { WasmZopfliNode } from 'fetchcrunch/wasm-zopfli-node';
import { writeFile } from 'fs/promises';

const deflater = new WasmZopfliNode();

// http://www.p01.org/MONOSPACE/monospace.htm
const bootstrap = Buffer.from("<canvas id=c><img onload=b=c.getContext`2d`;for(p=e='';t=b.getImageData(159,0,1,!b.drawImage(this,p--,0)).data[0];)e+=String.fromCharCode(t);(1,eval)(e) src=#>");
const payload = Buffer.from(`d=[2280,1280,1520,c.width=1920,document.body.style.font="0px MONOSPACE"],g=new AudioContext,o=g.createScriptProcessor(4096,document.body.style.margin=t=n=0,1),o.connect(g.destination),o.onaudioprocess=o=>{o=o.outputBuffer.getChannelData(e=Math.sin(t/16%1,m=Math.sin(Math.min(1,y=t/128)*Math.PI)**.5+.1,c.height=1080,b.shadowOffsetY=32420,c.style.background="radial-gradient(#"+[222,222,222,222,155,155,102,102][t/16&7]+",black",b.font="920 32px MONOSPACE",f=[(x,y,t)=>x/y*2-t,(x,y,t)=>(x**2+y**2)**.5-t,(x,y,t)=>x/4^y/4-t,(x,y,t)=>y%x-t][t/16&3],u=""+[[,f,f," CAN YOU HEAR ME",f,f,,"MONOSPACE","THE END"][t/16|0]],t>n&&speechSynthesis.speak(new SpeechSynthesisUtterance(u,n+=16))));for(i=0;4096>4*i;i++)g[i]=r=(f(x=16-i%32,a=16-(i/32|0),t)/2&1)+(g[i]||0)/2,x+=o[0]/4+4*(1-m**.3)*Math.sin(i+t+8),a+=o[64]/4+4*(1-m**.3)*Math.sin(i+t),h=x*Math.sin(y*2+8)+a*Math.sin(y*2),p=4096/(m*32+4*h*Math.sin(e)+t%16),b.beginPath(f[i]=r/p),b.arc(h*Math.sin(e+8)*p+1280,x*Math.sin(y*2)*p-a*Math.sin(y*2+8)*p-31920,p>0&&p/(2+32-r*16),0,8),b.shadowBlur=o[0]**2*32+32-m*32+4+h*h/2,b.shadowColor="hsl("+[f(x,y,t)&2?t-a*8:180,(t&64)*m+"%",(t&64)*m+"%"],b.fill();b.shadowBlur=o[0]**2*32,b.shadowColor="#fee";for(i=0;4096>i;i++)o[i]=o[i]/2+((Math.sin(t*d[t/[4,4,4,4,1/4,1/4,16,4][t/16&7]&3]*Math.PI)*8+(t*d[t/8&3]/2&6)+t*d[t/16&3]/4%6)/64+f[i/4|0])*m,64>i&t%16*6>i&&b.fillText([u[i+(o[i]*2&1)]],i%9*32+o[0]*16+180,(i/9|0)*64+o[64]*16-t-31920),t+=1/g.sampleRate}\0`);

async function generate(bootstrap, payload) {
	const pngSignature = Buffer.of(137, 80, 78, 71, 13, 10, 26, 10);
	const literalBlock = Buffer.concat([
		Buffer.of(0), // filtering method
		bootstrap,
	]);

	const deflateStream = Buffer.concat([
		Buffer.of(
			// zlib header
			0x78, 0x9c,
			// A non-final literal block
			0,
			// Length of a literal block
			literalBlock.length & 0xff, literalBlock.length >>> 8, ~literalBlock.length & 0xff, ~literalBlock.length >>> 8,
		),
		literalBlock,
		await deflater.deflateRaw(payload, { dictionary: bootstrap, numIterations: 10000 })
		// ADLER-32 checksum is omitted
	]);

	// await writeFile('deflateraw.def', deflateStream.subarray(2));

	const assembled = Buffer.concat([
		pngSignature,
		createIhdrChunk(bootstrap.byteLength + payload.byteLength),
		createTrimmedChunk(deflateStream, 'IDAT'),
	]);

	return assembled;
}

/**
 * @param {number} imageWidth
 */
function createIhdrChunk(imageWidth) {
	const contents = Buffer.alloc(13);
	contents.writeUint32BE(imageWidth, 0);
	// The last line would appear black in Safari,
	// that's why we have two lines
	contents.writeUint32BE(2, 4); // Image height: 2
	contents[8] = 8; // Bit depth
	contents[9] = 0; // Colour type: Greyscale
	contents[10] = 0; // Compression method
	contents[11] = 0; // Filtering method
	contents[12] = 0; // Interlace method: No interlace

	return createChunk(contents, 'IHDR');
}


function createChunk(contents, name) {
	const chunk = Buffer.concat([
		Buffer.alloc(8),
		contents,
		Buffer.alloc(4)
	]);
	chunk.writeUint32BE(contents.byteLength, 0);
	chunk.write(name, 4);
	const crc32 = Crc32.buf(chunk.subarray(4, -4))
	chunk.writeInt32BE(crc32, chunk.length - 4);
	return chunk;
}

function createTrimmedChunk(contents, name) {
	const chunk = Buffer.concat([
		Buffer.alloc(8),
		contents,
	]);
	chunk.writeUint32BE(contents.byteLength, 0);
	chunk.write(name, 4);
	return chunk;
}

generate(bootstrap, payload).then(d => writeFile('out.html', d));

## package.json
{
	"private": true,
	"type": "module",
	"dependencies": {
		"crc-32": "^1.2.2",
		"fetchcrunch": "^1.0.0-beta.7"
	},
	"devDependencies": {
		"@types/node": "^18.6.1"
	}
}
	<!doctype html>
	<p>This is a repacked version of <a href="http://www.p01.org/MONOSPACE/">MONOSPACE by Mathieu 'p01' Henri</a>.

	<p>Looks like Github Gist have some troubles with storing binary files. Please, <a id="run" target="_blank">Click here</button> to run.

	<script>
	fetch(`
	data:text/html;base64,
	iVBORw0KGgoAAAANSUhEUgAABj4AAAACCAAAAADNp/oNAAADyElEQVR4nACgAF//ADxDQU52YXMg
	aWQ9Yz48aW1nIG9ubG9hZD1iPWMuZ2V0Q29udGV4dGAyZGA7Zm9yKHQ9bj0nJztlPWIuZ2V0SW1h
	Z2VEYXRhKDE1OSwwLDEsIWIuZHJhd0ltYWdlKHRoaXMsbi0tLDApKS5kYXRhWzBdOyl0Kz1TdHJp
	bmcuZnJvbUNoYXJDb2RlKGUpOygxLGV2YWwpKHQpIHNyYz0jPn1Th46rOhB9nxJxFeQW+rLVub33
	XqJbHDDBWgIIjJZt//7GkK2v0DkeTzlzJuWLINgBx8NjK/BY4hypVOfc34WftEq6tSy1s6zSY6fV
	x4V0MsiYW17dT16/ffP247v7Dx9bP9mKl/Jocr9LVbUpiVV85SSNFFp+TBpV63dNlci2hSIjbzf+
	V99r0axUyQ0JkA5mlZNUZSkTjVZOKlutSqFVVZqFqhQmWD065RWfn1Yc4E7XnX7QZZlsBn5zAQ6K
	gUPJXwudO60qkXb9eOqz9RUyfKzhw2fHXLtACCYD9u45JsTZoo4P3ORSrXLNfQ/oWjptLtLq6G2W
	tVJ/52EQDfyNpSxFcrhqqq5MudWIVIlitjJvqBjdsSjQHrBrN5C/Nd5eYO6fC5Oivf2TWmxZgC94
	baiHxkzC4Ab/LOML1LNjpjGf9+4xCWaaXQKoJySgx/AYKrm+1LvRr2M3ug4dT/uZ3oQPf7KOW5Dt
	gmVwWhNQ8+T728+TZ4/vf5i8fmwNMLOuZWJ9evZ48vjNI2t0ceb9/Mn0vLTttpYyyT8elzqXrWod
	+BeHyKjm482Vz1rLRpSJRB0rKfdjDMcwHIp7+0Y784iofUUpXi3UT95wlKEe7GZqGgZMmC+k3DA4
	8zBU5Aa2jykypmeAuAHrKa9gUtyIRgT5szWQEmJyqQRFNd3BTBirOPo/M8xy3l8hQDtspOIGglnN
	Tc4uWpMwAFf51bLEVE+hPmjtUoLw38ECyoaa3NqgoknQdXtwT2o6DOvNuADPxO1MAAuHMa7nnm3X
	LgpoGMwaYiJ6bAdfKvhB0TUDJSAREg5WY7I0J7kbXNo9rIqq4VbeFgg0kW0kYwd3NQTf2fMhLaTt
	OMJkTa2pdePnp9GvKgqE9/8j7O0wdzIprZt9H7teGYbMww0oQlczTVKQ3CJi4+m7mztm0eU0gaKv
	pnqHbvbsAAwyiTEd/8EUgGgaYzeOKDTEjUDHUAiLo7myTc9IDB/2WNIn2Wu06BaKIpMVMYID1avp
	riFxKNCP6cCOcndBgwS8DtoCfKbHJmGmQevuymnFui7kB6Hl+V9/Aw==
	`).then(r => r.blob()).then(blob => {
	const blobUrl = URL.createObjectURL(blob);
	document.querySelector('#run').href = blobUrl;
	});
	</script>
	/// <reference types="node"/>
	import Crc32 from 'crc-32';
	import { WasmZopfliNode } from 'fetchcrunch/wasm-zopfli-node';
	import { writeFile } from 'fs/promises';

	const deflater = new WasmZopfliNode();

	// http://www.p01.org/MONOSPACE/monospace.htm
	const bootstrap = Buffer.from("<canvas id=c><img onload=b=c.getContext`2d`;for(p=e='';t=b.getImageData(159,0,1,!b.drawImage(this,p--,0)).data[0];)e+=String.fromCharCode(t);(1,eval)(e) src=#>");
	const payload = Buffer.from(`d=[2280,1280,1520,c.width=1920,document.body.style.font="0px MONOSPACE"],g=new AudioContext,o=g.createScriptProcessor(4096,document.body.style.margin=t=n=0,1),o.connect(g.destination),o.onaudioprocess=o=>{o=o.outputBuffer.getChannelData(e=Math.sin(t/16%1,m=Math.sin(Math.min(1,y=t/128)Math.PI).5+.1,c.height=1080,b.shadowOffsetY=32420,c.style.background="radial-gradient(#"+[222,222,222,222,155,155,102,102][t/16&7]+",black",b.font="920 32px MONOSPACE",f=[(x,y,t)=>x/y2-t,(x,y,t)=>(x2+y2)*.5-t,(x,y,t)=>x/4^y/4-t,(x,y,t)=>y%x-t][t/16&3],u=""+[[,f,f," CAN YOU HEAR ME",f,f,,"MONOSPACE","THE END"][t/16\|0]],t>n&&speechSynthesis.speak(new SpeechSynthesisUtterance(u,n+=16))));for(i=0;4096>4i;i++)g[i]=r=(f(x=16-i%32,a=16-(i/32\|0),t)/2&1)+(g[i]\|\|0)/2,x+=o[0]/4+4(1-m.3)Math.sin(i+t+8),a+=o[64]/4+4(1-m.3)Math.sin(i+t),h=xMath.sin(y2+8)+aMath.sin(y2),p=4096/(m32+4hMath.sin(e)+t%16),b.beginPath(f[i]=r/p),b.arc(hMath.sin(e+8)p+1280,xMath.sin(y2)p-aMath.sin(y2+8)p-31920,p>0&&p/(2+32-r16),0,8),b.shadowBlur=o[0]*232+32-m32+4+hh/2,b.shadowColor="hsl("+[f(x,y,t)&2?t-a8:180,(t&64)m+"%",(t&64)m+"%"],b.fill();b.shadowBlur=o[0]232,b.shadowColor="#fee";for(i=0;4096>i;i++)o[i]=o[i]/2+((Math.sin(td[t/[4,4,4,4,1/4,1/4,16,4][t/16&7]&3]Math.PI)8+(td[t/8&3]/2&6)+td[t/16&3]/4%6)/64+f[i/4\|0])m,64>i&t%166>i&&b.fillText([u[i+(o[i]2&1)]],i%932+o[0]16+180,(i/9\|0)64+o[64]16-t-31920),t+=1/g.sampleRate}\0`);

	async function generate(bootstrap, payload) {
	const pngSignature = Buffer.of(137, 80, 78, 71, 13, 10, 26, 10);
	const literalBlock = Buffer.concat([
	Buffer.of(0), // filtering method
	bootstrap,
	]);

	const deflateStream = Buffer.concat([
	Buffer.of(
	// zlib header
	0x78, 0x9c,
	// A non-final literal block
	0,
	// Length of a literal block
	literalBlock.length & 0xff, literalBlock.length >>> 8, ~literalBlock.length & 0xff, ~literalBlock.length >>> 8,
	),
	literalBlock,
	await deflater.deflateRaw(payload, { dictionary: bootstrap, numIterations: 10000 })
	// ADLER-32 checksum is omitted
	]);

	// await writeFile('deflateraw.def', deflateStream.subarray(2));

	const assembled = Buffer.concat([
	pngSignature,
	createIhdrChunk(bootstrap.byteLength + payload.byteLength),
	createTrimmedChunk(deflateStream, 'IDAT'),
	]);

	return assembled;
	}

	/**
	* @param {number} imageWidth
	*/
	function createIhdrChunk(imageWidth) {
	const contents = Buffer.alloc(13);
	contents.writeUint32BE(imageWidth, 0);
	// The last line would appear black in Safari,
	// that's why we have two lines
	contents.writeUint32BE(2, 4); // Image height: 2
	contents[8] = 8; // Bit depth
	contents[9] = 0; // Colour type: Greyscale
	contents[10] = 0; // Compression method
	contents[11] = 0; // Filtering method
	contents[12] = 0; // Interlace method: No interlace

	return createChunk(contents, 'IHDR');
	}


	function createChunk(contents, name) {
	const chunk = Buffer.concat([
	Buffer.alloc(8),
	contents,
	Buffer.alloc(4)
	]);
	chunk.writeUint32BE(contents.byteLength, 0);
	chunk.write(name, 4);
	const crc32 = Crc32.buf(chunk.subarray(4, -4))
	chunk.writeInt32BE(crc32, chunk.length - 4);
	return chunk;
	}

	function createTrimmedChunk(contents, name) {
	const chunk = Buffer.concat([
	Buffer.alloc(8),
	contents,
	]);
	chunk.writeUint32BE(contents.byteLength, 0);
	chunk.write(name, 4);
	return chunk;
	}

	generate(bootstrap, payload).then(d => writeFile('out.html', d));
	{
	"private": true,
	"type": "module",
	"dependencies": {
	"crc-32": "^1.2.2",
	"fetchcrunch": "^1.0.0-beta.7"
	},
	"devDependencies": {
	"@types/node": "^18.6.1"
	}
	}