Tiny World Map Editor

README.md

Tiny World Map Editor

image.png

index.html

<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>

main.js

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";