Skip to content

Instantly share code, notes, and snippets.

@aemkei aemkei/README.md
Last active Jan 10, 2018

Embed
What would you like to do?
Tiny World Map Editor

Tiny World Map Editor

<meta charset='utf-8'>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<input type="range" id="range" value="25" min="10" max="50">
<script src="main.js"></script>
<div id="output"></div>
<canvas id=c></canvas>
var image = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
function updateEncodings(){
var out = "",
width = image.width,
height = image.height,
data, x, y;
count = range.value * 16;
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, width, height);
for (i=0; i<count; i++){
let x = (i * width / Math.PI / 2 ) % width;
let y = height / count * i;
data = ctx.getImageData(~~x, ~~y, 1, 1).data;
let dot = data[3] > 100;
out += dot ? 1 : 0;
ctx.fillRect(x,y, dot ? 4 : 1, dot ? 4 : 1);
}
encoded = out.replace(/(.{16})/g, x => {
return String.fromCharCode(
parseInt(
[...x].reverse().join(""), 2
)
)
});
pre.innerText = "\n" + encoded + "\n" + count + " = " + range.value + "*16";
}
image.onload = function(){
output = document.getElementById("output");
pre = document.createElement("pre");
output.appendChild(canvas);
output.appendChild(pre);
updateEncodings();
range.oninput = updateEncodings;
setInterval(x => {
for (t+=9/(i=h=c.height=count);i--;){
c.getContext('2d').fillRect(
150 + (i*h - i*i) ** .5 * Math.sin(t-i) / 2,
i/2+9,
encoded.charCodeAt(i/16)>>i%16&1&&9,
9
)
}
}, t=16);
};
image.src = "image.png";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.