Johann150/create.html

## create.html
<html>
	<head>
		<style>
			body{
				background:#333;
			}
			.toggle{
				display:none;
			}
			#fold{
				display:none;
				padding:5px;
				padding-left:20px;
				background-color:#f8f888;
				margin-bottom:10px;
			}
			#fold *{
				vertical-align: top;
			}
			#fold input,#fold label{
				float:right;
			}
			.toggle ~ label{
				/*poisiton:absolute;*/
				float:left;
				cursor:zoom-in;
			}
			.toggle ~ label:before{
				content:'\25B6';
				width:20px;
				display:inline-block;
			}
			.toggle:checked ~ #fold{
				display:block;
			}
			.toggle:checked ~ label{
				cursor:zoom-out;
			}
			.toggle:checked ~ label:before{
				content: '\25BC';
			}
		</style>
	</head>
	<body>
		<input type="checkbox" checked="true" class="toggle" id="t"/>
		<label for="t"></label>
		<table id="fold">
			<tr>
				<td>
					<textarea id="in" cols="120" rows="5">NICE JOB IF YOU FOUND THIS CONGRATS UVE DONE A THING GOOD WELL DONE U SILLY</textarea><br>
					<input type="button" onclick="draw()" value="draw!"/>
					<label for="spiral">spiral</label><input type="checkbox" id="spiral"/>
					<label for="cipher">ciphered</label><input type="checkbox" checked id="cipher"/>
				</td>
				<td>
					<ul>
					<li>Unknown characters are displayed as purple.</li>
					<li>Can be rendered as a spiral instead of stepped like a floppy.</li>
					<li>Unciphered is ASCII with the leading zero cut off.</li>
					</ul>
					<a href="https://gist.github.com/Johann150/ac2372f8f79a11a0602562664ecdd4fa">this file as a gist</a>
					<a href="https://www.reddit.com/r/codes/comments/k6o0oo/graphic_containing_a_secret_message/">from this reddit post by u/Avieasolia</a>
					<p xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#" class="license-text">This work is licensed under <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a>. &#x1F16D;&#x1f6ca;&#x2b75;</p>
				</td>
			</tr>
		</table>
		<canvas id="c"></canvas>
		<script>
			draw();

			function draw(){
				let spiral = document.getElementById("spiral").checked;
				let cipher = document.getElementById("cipher").checked;

				let c = document.getElementById("c");
				c.width = c.height = 512;
				let ctx = c.getContext("2d");

				let input = document.getElementById("in").value;
				input=input.split("").map(e=>{
					if(cipher){
						switch(e.toUpperCase()){
							case " ": return "X";
							case "A": return "100000";
							case "B": return "101000";
							case "C": return "110000";
							case "D": return "110100";
							case "E": return "100100";
							case "F": return "111000";
							case "G": return "111100";
							case "H": return "101100";
							case "I": return "011000";
							case "J": return "011100";
							case "K": return "??????";
							case "L": return "101010";
							case "M": return "??????";
							case "N": return "110110";
							case "O": return "100110";
							case "P": return "??????";
							case "Q": return "??????";
							case "R": return "101110";
							case "S": return "011010";
							case "T": return "011110";
							case "U": return "100011";
							case "V": return "101011";
							case "W": return "011101";
							case "X": return "??????";
							case "Y": return "110111";
							case "Z": return "??????";
							default: return e;
						}
					}else{
						if(e==" "){
							return "X";
						}
						return (e.charCodeAt(0)&0x3f).toString(2).padStart(6,"0");
					}
				}).join("");

				ctx.lineWidth=17.6;

				const step = 9.474/180*Math.PI;
				let theta=-Math.PI/2;
				for(let i=0;i<input.length;i++){
					let t_start = theta;
					theta+=step;
					let t_end = theta;

					if(input[i]=="0"){
						ctx.strokeStyle="black";
					}else if(input[i]=="1"){
						ctx.strokeStyle="white";
					}else if(input[i]=="X"){
						ctx.strokeStyle="red";
					}else{
						ctx.strokeStyle="purple";
					}

					let x=i/38;
					if(!spiral){
						x=Math.floor(x);
					}

					ctx.beginPath();
					ctx.arc(256,256,256-(17/2)-(17*x),t_start,t_end);
					ctx.stroke();
				}
			}
		</script>
	</body>
</html>

## read.html
<html>
	<body style="color:#fff;background:#333;">
		You will have to edit the source code of this file to change the image.<br>
		<script>
			// These configuration values are hard coded here.
			// If you change the image, you might have to change these too.
			const spiral = false;
			const cipher = true;
			const sectors = 38;
			const track_width = 17;
		</script>
		<!--
		If you want to decode a different image, you have to change the value for src.
		The image should be cropped to the right size.
		You might have to change the configuration values above.
		-->
		<img id="img" style="display:none;" src="data:image/webp;base64,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"/>
		<canvas id="c"></canvas><br>
		<pre id="out"><!-- This is where the decoded text will go. --></pre>
		<script>
			let c = document.getElementById("c");
			// automatically resize the canvas to the image size
			c.width=document.getElementById("img").width;
			c.height=document.getElementById("img").height;
			let ctx = c.getContext("2d");

			let step = 0; // keeps track of the currently read sector and track
			let sector = 0; // for putting the spaces in the right places

			draw();
			function draw(){
				// reset with image
				ctx.clearRect(0,0,c.width,c.height);
				ctx.drawImage(document.getElementById("img"),0,0,c.width,c.height);

				// calculate angle for next sector
				let angle = ((step%sectors)+0.5)*(360/sectors);
				angle = angle/180*Math.PI;

				let s = step/sectors;
				if(!spiral){
					s=Math.floor(s);
				}

				let scale_x = c.width/2-(0.5+s)*track_width;
				let scale_y = c.height/2-(0.5+s)*track_width;
				let x = (c.width/2)+Math.sin(angle)*scale_x;
				let y = (c.height/2)-Math.cos(angle)*scale_y;
				let pixel = ctx.getImageData(x,y,1,1).data;

				// detect end by transparent pixel
				if(pixel[3]==0){
					// decipher the message
					after();
					return;
				}

				// black and white must be exactly right for this to work
				if(255==pixel[0]&&255==pixel[1]&&255==pixel[2]){
					pixel="1";
					sector++;
					if(sector==6){
						pixel+=" ";
						sector=0;
					}
				}else if(0==pixel[0]&&0==pixel[1]&&0==pixel[2]){
					pixel="0";
					sector++;
					if(sector==6){
						pixel+=" ";
						sector=0;
					}
				}else{
					// any other color is taken to be a space
					sector = 0;
					pixel="X ";
				}
				// add this letter to the output
				document.getElementById("out").innerText+=pixel;

				// highlight what was just read
				ctx.strokeStyle="green";
				ctx.lineWidth=2;
				ctx.beginPath();
				ctx.arc(x,y,track_width/2-ctx.lineWidth,0,Math.PI*2);
				ctx.stroke();

				step++;
				setTimeout(draw, 5);
			}

			function after(){
				let input=document.getElementById("out").innerText;
				input=input.split(" ").map(e=>{
					if(cipher){
						switch(e){
							case "X": return " ";
							case "100000": return "A";
							case "101000": return "B";
							case "110000": return "C";
							case "110100": return "D";
							case "100100": return "E";
							case "111000": return "F";
							case "111100": return "G";
							case "101100": return "H";
							case "011000": return "I";
							case "011100": return "J";
						//	case "??????": return "K";
							case "101010": return "L";
						//	case "??????": return "M";
							case "110110": return "N";
							case "100110": return "O";
						//	case "??????": return "P";
						//	case "??????": return "Q";
							case "101110": return "R";
							case "011010": return "S";
							case "011110": return "T";
							case "100011": return "U";
							case "101011": return "V";
							case "011101": return "W";
						//	case "??????": return "X";
							case "110111": return "Y";
						//	case "??????": return "Z";
							default: return e;
						}
					}else{
						if(e=="X"){
							return " ";
						}
						return String.fromCharCode(parseInt("1"+e,2));
					}
				}).join("");
				// append deciphered text to output
				document.getElementById("out").innerHTML+="\n\n"+input;
			}
		</script>
	</body>
</html>
	<html>
	<head>
	<style>
	body{
	background:#333;
	}
	.toggle{
	display:none;
	}
	#fold{
	display:none;
	padding:5px;
	padding-left:20px;
	background-color:#f8f888;
	margin-bottom:10px;
	}
	#fold *{
	vertical-align: top;
	}
	#fold input,#fold label{
	float:right;
	}
	.toggle ~ label{
	/poisiton:absolute;/
	float:left;
	cursor:zoom-in;
	}
	.toggle ~ label:before{
	content:'\25B6';
	width:20px;
	display:inline-block;
	}
	.toggle:checked ~ #fold{
	display:block;
	}
	.toggle:checked ~ label{
	cursor:zoom-out;
	}
	.toggle:checked ~ label:before{
	content: '\25BC';
	}
	</style>
	</head>
	<body>
	<input type="checkbox" checked="true" class="toggle" id="t"/>
	<label for="t"></label>
	<table id="fold">
	<tr>
	<td>
	<textarea id="in" cols="120" rows="5">NICE JOB IF YOU FOUND THIS CONGRATS UVE DONE A THING GOOD WELL DONE U SILLY</textarea><br>
	<input type="button" onclick="draw()" value="draw!"/>
	<label for="spiral">spiral</label><input type="checkbox" id="spiral"/>
	<label for="cipher">ciphered</label><input type="checkbox" checked id="cipher"/>
	</td>
	<td>
	<ul>
	<li>Unknown characters are displayed as purple.</li>
	<li>Can be rendered as a spiral instead of stepped like a floppy.</li>
	<li>Unciphered is ASCII with the leading zero cut off.</li>
	</ul>
	<a href="https://gist.github.com/Johann150/ac2372f8f79a11a0602562664ecdd4fa">this file as a gist</a>
	<a href="https://www.reddit.com/r/codes/comments/k6o0oo/graphic_containing_a_secret_message/">from this reddit post by u/Avieasolia</a>
	<p xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#" class="license-text">This work is licensed under <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a>. 🅭🛊⭵</p>
	</td>
	</tr>
	</table>
	<canvas id="c"></canvas>
	<script>
	draw();

	function draw(){
	let spiral = document.getElementById("spiral").checked;
	let cipher = document.getElementById("cipher").checked;

	let c = document.getElementById("c");
	c.width = c.height = 512;
	let ctx = c.getContext("2d");

	let input = document.getElementById("in").value;
	input=input.split("").map(e=>{
	if(cipher){
	switch(e.toUpperCase()){
	case " ": return "X";
	case "A": return "100000";
	case "B": return "101000";
	case "C": return "110000";
	case "D": return "110100";
	case "E": return "100100";
	case "F": return "111000";
	case "G": return "111100";
	case "H": return "101100";
	case "I": return "011000";
	case "J": return "011100";
	case "K": return "??????";
	case "L": return "101010";
	case "M": return "??????";
	case "N": return "110110";
	case "O": return "100110";
	case "P": return "??????";
	case "Q": return "??????";
	case "R": return "101110";
	case "S": return "011010";
	case "T": return "011110";
	case "U": return "100011";
	case "V": return "101011";
	case "W": return "011101";
	case "X": return "??????";
	case "Y": return "110111";
	case "Z": return "??????";
	default: return e;
	}
	}else{
	if(e==" "){
	return "X";
	}
	return (e.charCodeAt(0)&0x3f).toString(2).padStart(6,"0");
	}
	}).join("");

	ctx.lineWidth=17.6;

	const step = 9.474/180*Math.PI;
	let theta=-Math.PI/2;
	for(let i=0;i<input.length;i++){
	let t_start = theta;
	theta+=step;
	let t_end = theta;

	if(input[i]=="0"){
	ctx.strokeStyle="black";
	}else if(input[i]=="1"){
	ctx.strokeStyle="white";
	}else if(input[i]=="X"){
	ctx.strokeStyle="red";
	}else{
	ctx.strokeStyle="purple";
	}

	let x=i/38;
	if(!spiral){
	x=Math.floor(x);
	}

	ctx.beginPath();
	ctx.arc(256,256,256-(17/2)-(17*x),t_start,t_end);
	ctx.stroke();
	}
	}
	</script>
	</body>
	</html>
	<html>
	<body style="color:#fff;background:#333;">
	You will have to edit the source code of this file to change the image.<br>
	<script>
	// These configuration values are hard coded here.
	// If you change the image, you might have to change these too.
	const spiral = false;
	const cipher = true;
	const sectors = 38;
	const track_width = 17;
	</script>
	<!--
	If you want to decode a different image, you have to change the value for src.
	The image should be cropped to the right size.
	You might have to change the configuration values above.
	-->
	<img id="img" style="display:none;" src="data:image/webp;base64,UklGRrQYAABXRUJQVlA4TKcYAAAv/8F/EB8w//M///MfgFIcgmybbf7WP0RETACC+qqpDJUU36Y5wQG6rbXHmR4SguDIUMRyDE4JXuaBQuZuQlW4CffDJpzTO/EEeqn5+bz8vBuI6P8E+HFAx4Ik2ba8EEhsMaTEFvdQ0ofggi/Y/hVM39K3xQZHsQfR3z2Cje2D2MQWW2/JFdtfJ5ZgJI1mHq1H9H8CMMe23kySpD+6rDlbhRIlRGeIEIt4DmsfgvX4fjhBKuHroW6W/hUJEbyUgBI+nGCIW8HfAt/34YPnCBDR/wkIf+E+mcyv6MXVV/NkYX4pytrtZdxQxfwibqhjfgl37CBfwB2buLw7tnFxN/hb8tJuOIF5YVecwWNdOIXbqv72nGtRz35QWhNTtgtxRS/KOQVY0JNr//7rGff2CdJ6uPSvv/YNoH4IcTVPksz826/jAdCenADSYh5csN9U4CPY1/JyWkD+a0V9AnMpD6aUp+wreaWUx2AhT/odgPKAa5DWwRRPQlzFM8Wz0ioYCyz494r2oIwQ1/DMDJ6W1vBKZI/BEh48r2W+fQWv97Iv4ME3+/T3KmKFJZAl/XEHk23H5u1Z90cu9iIlsze+o2QGyc3Xo0pw0uHrVdRxjJGkqwdrGwDb0ZcOT8+ahoM4Z08s7TiOm59HSce+llDv8POqELwD/bASZ41g8/KsaNHYgYLs5RW00ySBgF7oC05jT4xg8/EMGizRz2CLEGQfrwAYx0nCPPqg39+BLdJg8/AMAGhCIo0w2xIjmJU9vDw5A7CVHg2LHug3AKgYSxgLjDDY9G7mCBYYMFkmUbOy3n043bElHsAWVIt68LDUACiPkADd2tSu0Em8scAaW2ILmnWo3YGplfAUCWBRDYCRhK+JDjuGUbc2rSuAQUqF8ZwWNOvQunktsEThCbCy1h2AkvCVST0JcTeohZkSWKJt4I5mbUo3x1rAuOMkScDKSncP/kgAeI9uUAnuLwLG7ayeadamc/VCjQRvA+vQuS1Y1CZbcmtaqhtZ577AULCB1E3NoA7yI0JOxkol0tXaVK4LFnRvOB2HoRuHyi2nDJHqOEAWmpFV7rkR9FTHCX2hGlRBnmELlOx4A1ibxjWnERIds25rK904NG65USB4j2ZkjXuOcQvifVg2qIG0FtiuVteNTeGaG4nuKbcNT9aacSjcclwj2ybAqqqRFe4pzYgzEqhTp6/BoALSY0l5AkZVv11x3jVnGU5Gsu8RAJhaQbuVfd4tpUw3QHnIIInCejuT1ljiSkeoK7Aa3CBwT1muYzgSCNIj6I5SSjp5AfOQ5goXVhdgNY0sQJx1TemCDI97mqe9pJInsM+6pWzFTkINSABp1j3F6jOK+wUAs5DVsrYFe1u5RZ3x9VQIXFN2lJ7xnbHPuaVYnpfkNafd8LzmntH3YFpy3g9Yg+x4k7JEtKdHsbqyhnnBUQ7rrim+CxecRJQfrrhl9LDmyXFnkd3wvOKeGRu4inEish/wIPZGJeooIodlyPKESpIRTEEnERHlKe6a0S1JoxpSgs6OH8bdMmNfow/VxZijjLvh+SGs5OJqnEF15RAo+0X3DEu/MjLQOIfqYcx5OAyIQ1JLLnK3GiNQPVmrvtMgylPUdddXjsoYNAe1lqJ++ACjROSmFUahO5LSi+uo7JbcMlbxLnLVJn1wFI0uKPvhOeqeYeVXD1EtKmRynYfDgHVacRERWYduZQCVzK7TOiRHxfuDwCoAGllcx0GUp5jrJhnvD9AMJqCTDNgNP4x5ZKzg8jCwspY9UPYLni3B+Q+5r5TbI1SDAEkW19nxHPOSSJ2Wk8dBN1Id6DoNhwFBjIYDy1y060NUIzcleY6DLCD7ysh8FQQAJJl8MKjlud3wFCSBTQLNiOnLsFh8/2foxYNFD5LN49yBRDkb94cQoyl0nYf98MOIJ8nuqNMAi9LpsW5KgZY8p+EwPEcxBWBEOBo3V/Fk11FEyehKfpjX1KcxCQANysPdtaYUz9GBMJls6gAQZMC4PsJJ5DokVIUeDPswug0AE+Yl4OwrfZUMALTkOYsI1Ke5h9ejNqlTAJw0UbDmLCI3sgBoSp44aD8MI6AOXCdPpQe4alVJnpPILuwZNIxJPJsSgKNxJwvQBnqSS8Y7MwAo8B5FoD/HycKYMHrSQ9yYhk6yTOzjXgFhU/eUZFHO2o0Zi47KlRgbyeyC7Aws6JybB5JZOVkAUNfJXymVZPL9AeIYi4PQyOS75mUn7c8UkIT/t46nBZYbJNSjJmnZWdtrnWUixz0SfZCUSFk0aFeoSnLA+4220xqzrxbHD2eeGZDsEZiNs3JPy6hBr0y+7nmOazCyJXryXekpCHr3gfCTca8EoLkG8zTcmJVOZsRUXoaD9Ze+RiYLK0Ci8jjQkRHGr0Rkb032FYwFwJASiMiNLFpGVCMvIrKLqSSz42kFis4id+sP4SsTFBHE9hWPRJ9+rrqSpOJ11DR0ku9hJFkcP4xq0y9rTnJbVKyLHGLawKjnitUc5T6ksMYMgKPsY/rMcxRm9hJcOeYFBKryvgupVNNDKKXmti4bl5i25hWJx1bSlRKRh04yNYUIpZ4trBhkL2kPULQSUhcx7gFLqsIl7EoO6UZxPC0wkq0Cizj+j5JCuOaRaBNJyoa0BBPZ0yw6fui5JhCxpD9CG6DX4umOZP3Scxs5naSkKdnxw23bhgSgDgWVZDGapzKgfnDBPEn0kjqzjQOTA53MRqejebLBCU2NXcXYPExoQwaqh0wWA5rvDpjTE60Evs3HZIFMWiWzUV1FIzmhGdvQBypPM1QSgE7ojSxGD2gTANCG5EBsUxKAH25T/zgAQC1GJ6kp85OS5McCHCRZgqr1vM19dTOQDTpGgS28KI0kANR1GXiKELIov6fVISlcbIBy/lyBLwedjOctQORm/KXWhjxogRVVrTna3Pk+FGwxcs8KtT6UwdYGV1419OJIQ09TclN+GHVVKpPSHFztoP9jrSrdwTJz1PgUcRERSVr2EMBYG3W6AoUzJ7kOH7aw3dBYlKokwJaSiTfrNNCqZJ4QkeGLOIydTAOUDOXyf0YsOO+NMjSy+I4icic/bCHvDpJZ6dpYEhTAIUY2mFwnEbmRv447DJVkUdpQwOWW+ag4oDo6yew6a1vc3qJSB+pSxxYR2SnJoktE5MoPM9u2fU/yK6sNyWNLAGzpxXdoDo7JcRyEXwRs32m7oQ95gLLcc59LRxGR2wBHcZyU+xb6nYdjUXqEAMDYdLeqwmSdld/EbP8mIgIHlRbBmlfrZBVXtk7KD4K2T0ZVyiKNftTQahqto7KFixyGpmSlhrSTupEMDF/G/Y3WlaTgYd6ss5V9xTqLyM/iNtkPVKH3KEQsuTpoWycR2RZ+9JQV/ZA0kY2jyJcrth2AqmSjPQpsEZGbVR3FgMjPlrwCaEpaIZNFH2WYYDLO8oMlG4CuwOT/G9k4ybb21ShGfbjjcLeah8bxy0UvAMds9BBOY+EloMwlDT9btL1VJRl8gM8t3VWMX656bQr09ningSTzHI0Pq166krQe1ADowmsUfFnjqu17V6W7WdGPgqunuYpS+cWqf1Oy0lyCRN9xtpICF9PQ+OtV3ylFobth5HBKdeHemWddHE4j1bHnzXcbYPYpktOeTgNgKaQkxwWZq45rtM16RMpsB6ALdgoc5VZJHrMuTgdGqh1XwhrJPO01CcAl7IDv7quO89ZJctpzIjTXc1z4CP4QwPFBtlkPz3aNtV5cOQJ3SlycxgLbxaLR1yaq0qostCqW04rrSZj+mv57m6ZeDP61law+dJLl1m553pOk6AKnUfQZkGQ+xlwY9dsx70Gy401wlGtII88H27wLSezpdQk4zpBkAQbUEcAWGgDNIfXqQh0wVR8FwRfbST+WUEPQAaDessKTAMaGjpLqQPXU4QRQHxwKj17QAcDr2IYacgJoOgCg06jo2IF5DwH026ZwmUCyVXSEtqUWow0A0FgGQfLuCTSSPW8BLAEEKGZsS1ZDr82wOMqgGFnj5gjep5EsQ7c6yVMOACJGsqX4GGAeGtfJ3TG2lQl66JPlxpvkD2waFwAmB2GuWwwIoncoV1rAgg+lL6oOjJzGWdmXreRDWaI5fZOscuMXUa0m95waAI36WVxwqDxystDOg7sC23UtakWbyjZkpSCBok+HNSPqflCgyRFtQ/NzRByOkQltEGS/J1mAowzjOK1A83GUiP4uaB6OIrL7fLCERjLr/BvJi8zZcZZDUyvw8X16Ak2rwKG7buegHTrfFTzOj78HoIdg13mBsX+Av3iS4uDLOS+yqQPfnwyj8bVJpmOukqKoswWN1Gjwt/BLablBssooK+0rQAG3kP/6x6/kMNVxxK9//es/fgmnub9CeATJr+ZXv/71X5/mLgTht5mGX/36XfgVGIB3Iumrk3y/4udO9WuodNBofhUk/0/tRbavhaZY9v0eehD7kwfA3gmwrwBkew/MC5sQV0j+5jSEXwjJvznm75D9Wkj2Izq+kr5E2aRcG1+BHqP0/0QJwAMOncdxAmTka+s77E+HTsjxkLI7aCc8zilIOs+Tvu3SRIGb8UUUvLiCu86LpOiXUuABSuItWFHgA1rRjsNUMIwyJNkB6GRro2rUFfhxi2SlbSlY3GVbwdNd5TG1U37a9jP88byWGu1ZUnkuaA6nDS58oXKbkNQlO2hwoVHlrgvQQ7RgkOyPqANbgBb0lV4zuNKUlJKDbXmtdW9wieQmAsBWGErBpU7pyoNO8tC4AkB/O+VSpdjqAquQU671W9a4TVbw37m2RQDlWqOcpHRqg+xlsqLMDmhr3B22NYyiZ4GyoOmRsgRgTJr7XrJ6GhxuEvDYEiNwN5gnqOijzxSuk5LkFmwQVFQOr11mTP0gJgRLBUAfnUnhlmBkJOUQQUnlGFC4T+b0mrH0SAlmW+K4AFEAGbYSjNS31KCg4kJ7cArRF48kewKDUiQo4vgCsM+75thqMAoagF+ghv1BAZDm3SaNWIRfpC5Rciw8xX3efRqJDkCnlkv+dNRlxGlY4VdCJWQ6ME7oOS07b5/PunqWYPPwZeRZN08zsu91TgFQOevuIcNmOy41KLsANG6TEI4MJ9klZxBA5zHnGmlqfClknnOLYBmQ7DueBVbWoCQ/tiA5EoJR9z3iIR2D5OeOawYp2GmjTGAkf+y4lSnb10Bw3nHPaKIDsC2Pk9T5VvdombFQ/i3RckpSrOS/J/le9+wZS7Q3aaNkTB11L3mPSwFIQYno1PCt6kFmmMTOnxJ9CdCKjgn4XvUkW6QJeY9e1GAOfipiaryZoQgYpAD4XvMk2Sv6AS+SsvAzACT+EAigZAeAjxIjKZEdcilzEwg6ALIB0M+K6yDJiMkWaT/NAokagOHxowA5rWHZkyR3NJgHAEoAGPyxdoNOzRsZxIN96fumEQDDkQni8WMJXvesiO0s9TqgTnd+nozkyh3AJGuSk6LH1Opa1JxfRn+eeyKgx2RPGMm28G0THAEApzs2kSS+ZR5sACwzyuQA7SttskkctgjfogczzdFES3DuJZepByYJmzCPiZNSAPUwvP+gN6buoI65nyqUKz3VAAzSk4lkA5Rkj8SzSCL1epl4JBODZHPU6V7HqNLUiLjEVvFKjCWB7wgAIwVWhYmeJnowAslcCphTsgc2EQBJtqmvSKI5SEhgAVvBkySnMbUIJMLhdOgkLLOpexaxLUn0fU25JJE6gjG5k3lYEG8kusdkL2qAOT1hbYWptsJppDTBNa49POXSQNJrdgI9ZNqkqe59W6Iviax6nZvUad5IyBpbSR8Fv0wMTzJYaonuaaJPIycrF4dxpExYYJuQQ6IVsE0/Lfwh0YKRoZ7bBA1bkMAWbEFWXqRoAdmCaiRYZQ6zTQxGhJmrHcAl15Do3iB70AyghzVnOM3TQGq48KSgwDJdK0CLakh1Dzld6/iea4BF4ihJCeiAkScafF0wrxdxoaNgkKRXjQygRWjDggTDa9MokNQDOTqcm9OMBKBqCUAd5h7BYaAeZivgn2Wu01jQVDcw9kdoHnZ9Zi4rDYA53aGvrrEFm8Rh5ceSJjoAujI1oyi4D4ii2wOd+qTb7mvD49SNrBxvK9STAFOruywhIYClaCZNVpjHyKKx7bakDBtQrayc5EqWoVkSDPoSDZKYreJHgUXEiDrQrGLIPYxhj5QUh6c1xgJ0i2k4i1yjRoQk2Q+5TiPxnwkCdOZBROSWQ5ShZIxt0pLPAk2kU/UUS2Is6plBzGOSLZcdzcMEHJV9hDJGVj2bui18FKAmd1e2dkO3OCGSFCSlW+51hX7g9AAt97PDucFylwormc2PIChUBxg7bqcUnBWEmNcrRoDUj5JxAJMLPQZlAsA2XI8p4hptqZfY1AFo5nPlMukJPA+HqTYNB6WcGwBkPkpwQjmtkhLN2Ib7KRmrWslwsHKpsSNOIrKPUZKCUpvE4YbbKQk4L0Et5z5p4kfROOO4or/TddIDAOAsu6k+gUStOm0aic+3QlwrGg5m27ENmEpz4vxLVUf1JEsfBW8h6EH5VCuzBJOXqj5R0Kb6FtYNkn3SPa/DbSKjPpJtUJJtGokfVaeZBEy1KgGM7GUgiQNeAJyvEwD6McYtRnEs8VmxAUcRXwHQVlDGWeoGu8PkR9FpJgOojpgnZX7QC5Rt0l1vEJG7KwGApydpBQouNUcRubkw2tTh9U10TCoM89j1ehaRq6coY2qwc5Qlv3As8aPmRWayohOgTjuBZIXP5GfNx0E80M3BGQ0YO3TbptytYgxSAIwJB5BkO+Cj6NNws7KhZAegh9iWkbkckQyQDQCMlG1dOfcq2/c3w9WCbcQ8juAeJn9UfRzEKI7hgeye1v23J0Wa+dxz17ID4hmbN6Sqq8eiccDmS56fPU2w1wjO+Sj7NNw0RBoi9gpBogWas8yl/G+Gq1JCNDCSfU0AYMlyTP7YJEoOiSf2FUEKIVtGj/io3Ieyjsw1pCRQ9szIfNZtHi5hKFFHaE4LjJKxzMeGT8NNSY/gNqQdQUgyw+xl11XJnxFCzekhfzOIUhbojkGyR0ayRSPzY8dH5T7w80FMkj2yzOeOTbkp6XPp0ZgkYvZj31XJcWOHUhBbTo/55CmfSYuUbjBSl61/M4jCzyPD7lqy+pM856NyV1KYbYGTerb49JizKf+tZGW0o+hoBsxqXMYmcKhK0fpJ3UO9aM0oTeGTiOyhUDFZY10nk9GMrHXjrLcw+W9EZIeupIFsx3RGQKcJkMyzPooI0JQCoJL9lM6IojXjAjp5zNpEDkBVqMmKVlHNRtWy1o0CNHKb9kn2ALQENJLthMYg6DRPoJJh+t/IDkBXMtBJ9oVRUWkXA0rRqgUAzAoA0JQCcN4zO5O0Zly3LvDxMFSFqSrtHfoAnWa5tWPeth+gZU1ytodWI5m1ap23ugm8KV0pTeG7JK1ZMIPgq9IUdq2/QSUL9G5cRlJ4Uapmp7g5edJEMXaFTcFMOw8kJk4jSrwpfULeIVvNgBkkX5U6wZbQPe97q8Out2IkjRcFM5LA2HERx+85cDuNXWPT+gRbAqPuIp7s6SRhRpE3pc30DEbVRUQORp25rCD6qtQZpjBqLuLqxdPIYiSVFwVTPYVRcRFXJT2VPI1dZdPaDHPQtXfRte4DL5hR5k2pU5LDWLmIr5FMrmIF2VcFU2w5W+EEZ/ppJJ0XrU/JGTsAbcieBnPX2bQ6xXYMp4ZR6E3BHE/pSgkIwq9an+sn7FEZlZQ2rc6xHUFzLkq9G/gETHD5K6vHBekvrf4J+r4r7TSTtN6s6oFxu1awMBA7h17MRrF3q1t9RG3X3VOmgvibVQc45U5vmtnVggWrYSzp2ruI3OgtmI1y71YLEGDLne40FeS/tKoDYBxwp7tgNukFCxbAJtnwr5zEdHTwbilJmXTXbJ4LDr+0EMGOwnTyEAaD7A5I9mhsSnPRxbuFxDinYD64/HJgbB7OSXPJRxgoESrbGRnz0cm7BYswzigIDE6/HNRuQWDyEgbaEoxsQ4qIbt6t0TOyLyMyuH0bMMO+qyBy9xMsYw+UZN9TEBodfTlgim0LQlNw/GaQ7Cm2DYjdPYX3AZszHHaApQXBwfUbAJ0kR6nJCN59hRFbrjYhOjr7EhiOTLbhXXZRKXgHzGHf8pVIXHR3j1j1lZhhwf0VDAXgln3QD/1d7hHbW2wLfCT4DvsKLq9E7aywxGdCxnFpDZcM7LS4iGfUgR3ffooUVpnCWXEZz5SelMI6X14DAD0oLPSRgh6zr+TySgGnhKU+HMRW8v2H9rVcngvQil8/ksJqSUoGGCs/kB+Jy3kuAZr5lfxQCut9rfmd4w+EFbOfFJf03HY+SWHNf3tQWPU5cVnXU/aw7tsZKaz8dkIKa7/vKFZY/X1bWP99U3iFtx0pvMZbXQovsyqGF3qryOHF3pfCC75lcvgDDwA="/>
	<canvas id="c"></canvas><br>
	<pre id="out"><!-- This is where the decoded text will go. --></pre>
	<script>
	let c = document.getElementById("c");
	// automatically resize the canvas to the image size
	c.width=document.getElementById("img").width;
	c.height=document.getElementById("img").height;
	let ctx = c.getContext("2d");

	let step = 0; // keeps track of the currently read sector and track
	let sector = 0; // for putting the spaces in the right places

	draw();
	function draw(){
	// reset with image
	ctx.clearRect(0,0,c.width,c.height);
	ctx.drawImage(document.getElementById("img"),0,0,c.width,c.height);

	// calculate angle for next sector
	let angle = ((step%sectors)+0.5)*(360/sectors);
	angle = angle/180*Math.PI;

	let s = step/sectors;
	if(!spiral){
	s=Math.floor(s);
	}

	let scale_x = c.width/2-(0.5+s)*track_width;
	let scale_y = c.height/2-(0.5+s)*track_width;
	let x = (c.width/2)+Math.sin(angle)*scale_x;
	let y = (c.height/2)-Math.cos(angle)*scale_y;
	let pixel = ctx.getImageData(x,y,1,1).data;

	// detect end by transparent pixel
	if(pixel[3]==0){
	// decipher the message
	after();
	return;
	}

	// black and white must be exactly right for this to work
	if(255==pixel[0]&&255==pixel[1]&&255==pixel[2]){
	pixel="1";
	sector++;
	if(sector==6){
	pixel+=" ";
	sector=0;
	}
	}else if(0==pixel[0]&&0==pixel[1]&&0==pixel[2]){
	pixel="0";
	sector++;
	if(sector==6){
	pixel+=" ";
	sector=0;
	}
	}else{
	// any other color is taken to be a space
	sector = 0;
	pixel="X ";
	}
	// add this letter to the output
	document.getElementById("out").innerText+=pixel;

	// highlight what was just read
	ctx.strokeStyle="green";
	ctx.lineWidth=2;
	ctx.beginPath();
	ctx.arc(x,y,track_width/2-ctx.lineWidth,0,Math.PI*2);
	ctx.stroke();

	step++;
	setTimeout(draw, 5);
	}

	function after(){
	let input=document.getElementById("out").innerText;
	input=input.split(" ").map(e=>{
	if(cipher){
	switch(e){
	case "X": return " ";
	case "100000": return "A";
	case "101000": return "B";
	case "110000": return "C";
	case "110100": return "D";
	case "100100": return "E";
	case "111000": return "F";
	case "111100": return "G";
	case "101100": return "H";
	case "011000": return "I";
	case "011100": return "J";
	// case "??????": return "K";
	case "101010": return "L";
	// case "??????": return "M";
	case "110110": return "N";
	case "100110": return "O";
	// case "??????": return "P";
	// case "??????": return "Q";
	case "101110": return "R";
	case "011010": return "S";
	case "011110": return "T";
	case "100011": return "U";
	case "101011": return "V";
	case "011101": return "W";
	// case "??????": return "X";
	case "110111": return "Y";
	// case "??????": return "Z";
	default: return e;
	}
	}else{
	if(e=="X"){
	return " ";
	}
	return String.fromCharCode(parseInt("1"+e,2));
	}
	}).join("");
	// append deciphered text to output
	document.getElementById("out").innerHTML+="\n\n"+input;
	}
	</script>
	</body>
	</html>