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;