From 38094a94ea5fed1f4f4eef893416be3efdaad315 Mon Sep 17 00:00:00 2001 From: Jack Bond-Preston Date: Wed, 5 Dec 2018 22:57:33 +0000 Subject: [PATCH] Improved visualiser --- aoc/5/index.html | 75 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 67 insertions(+), 8 deletions(-) diff --git a/aoc/5/index.html b/aoc/5/index.html index 421f5e4..d6e8f9e 100644 --- a/aoc/5/index.html +++ b/aoc/5/index.html @@ -8,39 +8,98 @@ } function swapCase(c) { - return c === c.toUpperCase() ? c.toLowerCase() : c.toUpperCase(); + return isUpper(c) ? c.toLowerCase() : c.toUpperCase(); + } + + function isUpper(c) { + return c === c.toUpperCase(); } async function collapsePolymer() { + let view = document.getElementById("view").getContext("2d"); + let input = document.getElementById("input"); input.contentEditable = false; - let polymer = input.innerText.split(''); + let polymer = input.innerHTML.split(''); + display(polymer); let i = 0; while(i < polymer.length - 1) { if (polymer[i] === swapCase(polymer[i + 1])) { - input.innerHTML = polymer.slice(0, i).join('') + "" + polymer[i] + polymer[i + 1] + "" + polymer.slice(i + 2).join(''); + if (!canvasMode) input.innerHTML = polymer.slice(0, i).join('') + "" + polymer[i] + polymer[i + 1] + "" + polymer.slice(i + 2).join(''); polymer.splice(i, 2); i = Math.max(-1, i - 2); await sleep(0.01); - - input.innerText = polymer.join(''); + + if (canvasMode) { + display(polymer); + } + else { + input.innerText = polymer.join(''); + } } i++; } input.contentEditable = true; + input.innerHTML = polymer.join(''); } + + function display(polymer) { + const chars = "abcdefghijklmnopqrstuvwxyz".split(''); + + let view = document.getElementById("view") + let ctx = view.getContext("2d"); + + let imageData = ctx.createImageData(view.width, view.height); + + let canvasPos = 0; + for (let i = 0; i < polymer.length; i++) { + let fillLen = chars.indexOf(polymer[i].toLowerCase()) + 1; + + for (let j = 0; j < fillLen; j++) { + imageData.data[canvasPos + j*4] = isUpper(polymer[i]) ? 255 : 0; + imageData.data[canvasPos + j*4 + 2] = isUpper(polymer[i]) ? 0 : 255; + imageData.data[canvasPos + j*4 + 3] = 255; + } + + canvasPos += fillLen*4; + } + + ctx.putImageData(imageData, 0, 0); + } + + function toggleMode() { + canvasMode = !canvasMode; + if (canvasMode) { + document.getElementById("view").style.display = "block"; + document.getElementById("input").style.display = "none"; + } + else { + document.getElementById("view").style.display = "none"; + document.getElementById("input").style.display = "block"; + } + } + var canvasMode = false; -
+ + + + +
+ +
+
+dDdCcXxYyyYaAaBbbJjXJjxBbQwWwWqFHXxhfxTtUIiud +
+ + -
- \ No newline at end of file