markknol

<nav><button onclick="reloadFrames()">GENERATE()</button></nav>
<main></main>
<script>
const urlParams = new URLSearchParams(window.location.search);
const total = 15+5; // total frames
const interval = urlParams.get("fast") == "true" ? 60 : 200; // ms
const src = "./index.html";

let alphabet = "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ"
function getHash() {

markknol

// promisified version of parsing json in a worker
// usage:  `let data = await fetch(url).then(v => v.text()).then(v => parseJson(v)).then(data => console.log(data));`
function parseJson(txt:string) {
  return new Promise((resolve, reject) => { 
    var blob = new Blob([
      'this.onmessage = function(message) {\n' +
        'postMessage(JSON.parse(message.data));\n' +
      '};'
      ], { type: "text/javascript" });
    var w = new Worker(URL.createObjectURL(blob));

markknol

<canvas width="4096" height="3072" id=canvas></canvas>
<script>
let ctx = canvas.getContext`2d`;
window.onload = async () => {
	let grid = 12;
	canvas.width = grid*260; // grid * tile width
	canvas.height = grid*220; // grid * tile height
	for(let i=0;i<grid*grid;i++) {
		let image = await loadImage(`render_${(""+i).padStart(5,"0")}.png`);
		let idx = i%grid, idy = i/grid|0;

markknol

// source: https://tools23.com/tools/calculation/roman-number-convert/
const m = {M:1000,CM:900,D:500,CD:400,C:100,XC:90,L:50,XL:40,X:10,IX:9,V:5,IV:4,I:1};
const toRoman = n => Object.entries(m).reduce((a,[k,v])=>(a+=k.repeat(n/v|0),n%=v,a),'');
const fromRoman = r => r.match(/CM|CD|XC|XL|IX|IV|\w/g).reduce((o, c) => o + m[c], 0);