47 tiling

content/programming/blog/tairu.tree

@@ -161,6 +161,8 @@ styles = ["tairu.css"]
     }
     ```
 
+    TODO this should be literate code
+
     % template = true
       id = "01HPMVT9BM9CS9375MX4H9WKW8"
     - and that gives us this result:
@@ -406,6 +408,98 @@ styles = ["tairu.css"]
             4
             ```
 
+            + for my own (and your) convenience, here's a complete list of *all* the possible combinations in order.
+
+                - ```javascript ordinal-directions
+                function toString(bitset) {
+                    if (bitset == 0) return "0";
+
+                    let directions = [];
+                    if (isSet(bitset, E)) directions.push("E");
+                    if (isSet(bitset, SE)) directions.push("SE");
+                    if (isSet(bitset, S)) directions.push("S");
+                    if (isSet(bitset, SW)) directions.push("SW");
+                    if (isSet(bitset, W)) directions.push("W");
+                    if (isSet(bitset, NW)) directions.push("NW");
+                    if (isSet(bitset, N)) directions.push("N");
+                    if (isSet(bitset, NE)) directions.push("NE");
+                    return directions.join(" | ");
+                }
+
+                for (let x in xToConnectionBitSet) {
+                    console.log(`${x} => ${toString(xToConnectionBitSet[x])}`);
+                }
+                ```
+                ```output ordinal-directions
+                0 => 0
+                1 => E
+                2 => S
+                3 => E | S
+                4 => E | SE | S
+                5 => W
+                6 => E | W
+                7 => S | W
+                8 => E | S | W
+                9 => E | SE | S | W
+                10 => S | SW | W
+                11 => E | S | SW | W
+                12 => E | SE | S | SW | W
+                13 => N
+                14 => E | N
+                15 => S | N
+                16 => E | S | N
+                17 => E | SE | S | N
+                18 => W | N
+                19 => E | W | N
+                20 => S | W | N
+                21 => E | S | W | N
+                22 => E | SE | S | W | N
+                23 => S | SW | W | N
+                24 => E | S | SW | W | N
+                25 => E | SE | S | SW | W | N
+                26 => W | NW | N
+                27 => E | W | NW | N
+                28 => S | W | NW | N
+                29 => E | S | W | NW | N
+                30 => E | SE | S | W | NW | N
+                31 => S | SW | W | NW | N
+                32 => E | S | SW | W | NW | N
+                33 => E | SE | S | SW | W | NW | N
+                34 => E | N | NE
+                35 => E | S | N | NE
+                36 => E | SE | S | N | NE
+                37 => E | W | N | NE
+                38 => E | S | W | N | NE
+                39 => E | SE | S | W | N | NE
+                40 => E | S | SW | W | N | NE
+                41 => E | SE | S | SW | W | N | NE
+                42 => E | W | NW | N | NE
+                43 => E | S | W | NW | N | NE
+                44 => E | SE | S | W | NW | N | NE
+                45 => E | S | SW | W | NW | N | NE
+                46 => E | SE | S | SW | W | NW | N | NE
+                ```
+
+        - with the lookup table generated, we are now able to prepare a tile strip like before - except now it's even more tedious work arranging the pieces together :ralsei_dead:
+
+        anyways I spent like 20 minutes doing that by hand, and now we have a neat tile strip just like before, except way longer:
+
+        ![horizontal tile strip of 47 8x8 pixel metal tiles][pic:01HPW47SHMSVAH7C0JR9HWXWCM]
+
+        - now let's hook it up to our tileset renderer! TODO literate program.
+
+        % template = true
+        - with the capability to render with 47-tile tilesets, our examples suddenly look a whole lot better!
+
+        <canvas
+            is="tairu-editor"
+            data-tilemap-id="bitwiseAutotiling47"
+            data-tile-size="40"
+        >
+            Your browser does not support &lt;canvas&gt;.
+            <img class="resource" src="{% pic 01HPW47SHMSVAH7C0JR9HWXWCM %}" data-tairu-tileset-47="1">
+        </canvas>
+
 % id = "01HPD4XQPWT9N8X9BD9GKWD78F"
 - bitwise autotiling is a really cool technique that I've used in plenty of games in the past.
 

static/css/main.css

@@ -186,6 +186,7 @@ strong {
 i,
 em {
     --recursive-slnt: -16.0;
+    font-style: normal;
 }
 
 /* Lay out elements a bit more compactly */
@@ -240,10 +241,17 @@ th-literate-program {
     transition: background-color var(--transition-duration);
 }
 
+@media (prefers-color-scheme: light) {
+
+    pre,
     th-literate-program {
-    white-space: pre;
+        background-color: transparent;
+        border: 1px solid var(--border-1);
+    }
 }
 
+
+@media (prefers-color-scheme: dark) {
     .tree summary:hover {
 
         & pre,
@@ -251,6 +259,9 @@ th-literate-program {
             background-color: var(--shaded-against-background-twice);
         }
     }
+}
+
+
 
 pre>code,
 th-literate-program>code {
@@ -259,6 +270,10 @@ th-literate-program>code {
     border-radius: 0px;
 }
 
+th-literate-program {
+    white-space: pre;
+}
+
 /* And don't let code examples fly off and overflow the window */
 
 pre {
@@ -283,10 +298,12 @@ img.pic {
 /* Image hints for tweaking rendering */
 img {
     &[src*='+pixel'] {
-        image-rendering: crisp-edges;
+        image-rendering: pixelated;
         border-radius: 0;
     }
 
+    /* TODO: These could be autogenerated! */
+
     &[src*='+width160'] {
         width: 160px;
         height: auto;
@@ -297,6 +314,11 @@ img {
         height: auto;
     }
 
+    &[src*='+width752'] {
+        width: 752px;
+        height: auto;
+    }
+
     /* Resources for use in JavaScript. */
     &.resource {
         display: none;
@@ -532,11 +554,6 @@ th-literate-program[data-mode="output"] {
         color: #e39393;
     }
 
-    & code .return-value {
-        content: 'Return value: ';
-        opacity: 50%;
-    }
-
     &::after {
         content: 'Output';
 
@@ -553,7 +570,15 @@ th-literate-program[data-mode="output"] {
 /* Syntax highlighting */
 
 :root {
-    /* TODO: Light mode syntax highlighting */
+    --syntax-comment: #9b8580;
+    --syntax-identifier: var(--text-color);
+    --syntax-keyword1: #e15e2b;
+    --syntax-keyword2: #199aca;
+    --syntax-operator: #e3755b;
+    --syntax-function: #d57b07;
+    --syntax-literal: #a64fb3;
+    --syntax-string: #79ac3b;
+    --syntax-punct: #a28680;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -607,4 +632,21 @@ th-literate-program[data-mode="output"] {
     &.punct {
         color: var(--syntax-punct);
     }
+
+}
+
+.th-syntax-highlighting {
+    & .export {
+        text-decoration: underline dotted;
+        cursor: help;
+        text-decoration-color: transparent;
+        transition: text-decoration-color var(--transition-duration);
+    }
+
+    &:hover,
+    &:focus {
+        & .export {
+            text-decoration-color: var(--syntax-keyword1);
+        }
+    }
 }

static/css/tairu.css

@@ -46,7 +46,7 @@
         margin: 8px;
         background-image: url('../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
         background-size: 400%;
-        image-rendering: crisp-edges;
+        image-rendering: pixelated;
         position: relative;
     }
 
@@ -155,7 +155,7 @@
         background-image: url('../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
         background-size: 400%;
         background-position: 100% 100%;
-        image-rendering: crisp-edges;
+        image-rendering: pixelated;
 
         position: relative;
 

static/js/components/literate-programming.js

@@ -121,7 +121,14 @@ class InputMode {
     }
 
     static highlight(frame) {
-        highlight(frame, InputMode.JAVASCRIPT);
+        highlight(frame, InputMode.JAVASCRIPT, (token, span) => {
+            if (token.kind == "keyword1" && token.string == "export") {
+                // This is something a bit non-obvious about the treehouse's literate programs
+                // so let's document it.
+                span.classList.add("export");
+                span.title = "This item is exported and visible in code blocks that follow";
+            }
+        });
     }
 }
 
@@ -145,7 +152,7 @@ class OutputMode {
         if (this.worker != null) {
             this.worker.terminate();
         }
-        this.worker = new Worker(`${TREEHOUSE_SITE}/static/js/components/literate-programming/worker.js`, {
+        this.worker = new Worker(import.meta.resolve("./literate-programming/worker.js"), {
             type: "module",
             name: `evaluate LiterateOutput ${this.frame.programName}`
         });
@@ -187,13 +194,6 @@ class OutputMode {
             })
             .join(" ");
 
-        if (output.kind == "result") {
-            let returnValueText = document.createElement("span");
-            returnValueText.classList.add("return-value");
-            returnValueText.textContent = "Return value: ";
-            line.insertBefore(returnValueText, line.firstChild);
-        }
-
         this.frame.appendChild(line);
     }
 

static/js/components/literate-programming/highlight.js

@@ -58,7 +58,7 @@ function tokenize(text, syntax) {
     return tokens;
 }
 
-export function highlight(element, syntax) {
+export function highlight(element, syntax, customize = null) {
     let tokens = tokenize(element.textContent, syntax);
 
     element.textContent = "";
@@ -67,6 +67,9 @@ export function highlight(element, syntax) {
         let span = document.createElement("span");
         span.textContent = token.string;
         span.classList.add(token.kind);
+        if (customize != null) {
+            customize(token, span);
+        }
         element.appendChild(span);
     }
 }

static/js/tairu/tairu.js

@@ -9,6 +9,52 @@ export function shouldConnect(a, b) {
     return a == b;
 }
 
+const dirs47 = {
+    E: 0b0000_0001,
+    SE: 0b0000_0010,
+    S: 0b0000_0100,
+    SW: 0b0000_1000,
+    W: 0b0001_0000,
+    NW: 0b0010_0000,
+    N: 0b0100_0000,
+    NE: 0b1000_0000,
+};
+
+function isSet(integer, bit) {
+    return (integer & bit) == bit;
+}
+
+function removeRedundancies(t) {
+    if (isSet(t, dirs47.SE) && (!isSet(t, dirs47.S) || !isSet(t, dirs47.E))) {
+        t &= ~dirs47.SE;
+    }
+    if (isSet(t, dirs47.SW) && (!isSet(t, dirs47.S) || !isSet(t, dirs47.W))) {
+        t &= ~dirs47.SW;
+    }
+    if (isSet(t, dirs47.NW) && (!isSet(t, dirs47.N) || !isSet(t, dirs47.W))) {
+        t &= ~dirs47.NW;
+    }
+    if (isSet(t, dirs47.NE) && (!isSet(t, dirs47.N) || !isSet(t, dirs47.E))) {
+        t &= ~dirs47.NE;
+    }
+    return t;
+}
+
+function ordinalDirections() {
+    let unique = new Set();
+    for (let i = 0; i <= 0b1111_1111; ++i) {
+        unique.add(removeRedundancies(i));
+    }
+    return Array.from(unique).sort((a, b) => a - b);
+}
+
+let xToConnectionBitSet = ordinalDirections();
+let connectionBitSetToX = new Uint8Array(256);
+for (let i = 0; i < xToConnectionBitSet.length; ++i) {
+    connectionBitSetToX[xToConnectionBitSet[i]] = i;
+}
+console.log(connectionBitSetToX);
+
 export class TileEditor extends Frame {
     constructor() {
         super();
@@ -44,12 +90,16 @@ export class TileEditor extends Frame {
 
         // 0st element is explicitly null because it represents the empty tile.
         this.tilesets = [null];
+        this.tilesets47 = [null];
 
         let attachedImages = this.getElementsByTagName("img");
         for (let image of attachedImages) {
             if (image.hasAttribute("data-tairu-tileset")) {
                 let tilesetIndex = parseInt(image.getAttribute("data-tairu-tileset"));
                 this.tilesets[tilesetIndex] = image;
+            } else if (image.hasAttribute("data-tairu-tileset-47")) {
+                let tilesetIndex = parseInt(image.getAttribute("data-tairu-tileset-47"));
+                this.tilesets47[tilesetIndex] = image;
             }
         }
 
@@ -105,7 +155,7 @@ export class TileEditor extends Frame {
 
     get hasTilesets() {
         // Remember that tile 0 represents emptiness.
-        return this.tilesets.length > 1;
+        return this.tilesets.length > 1 || this.tilesets47.length > 1;
     }
 
     drawTiles() {
@@ -135,22 +185,34 @@ export class TileEditor extends Frame {
             for (let x = 0; x < this.tilemap.width; ++x) {
                 let tile = this.tilemap.at(x, y);
                 if (tile != 0) {
-                    let tileset = this.tilesets[tile];
+                    let tileset16 = this.tilesets[tile];
+                    let tileset47 = this.tilesets47[tile];
+                    let tileset = tileset47 != null ? tileset47 : tileset16;
 
-                    let connectedWithEast = shouldConnect(tile, this.tilemap.at(x + 1, y)) ? 0b0001 : 0;
+                    let tileIndex = 0;
-                    let connectedWithSouth = shouldConnect(tile, this.tilemap.at(x, y + 1)) ? 0b0010 : 0;
+                    if (tileset47 != null) {
-                    let connectedWithWest = shouldConnect(tile, this.tilemap.at(x - 1, y)) ? 0b0100 : 0;
+                        let rawTileIndex = 0;
-                    let connectedWithNorth = shouldConnect(tile, this.tilemap.at(x, y - 1)) ? 0b1000 : 0;
+                        rawTileIndex |= shouldConnect(tile, this.tilemap.at(x + 1, y)) ? dirs47.E : 0;
-                    let tileIndex = connectedWithNorth
+                        rawTileIndex |= shouldConnect(tile, this.tilemap.at(x + 1, y + 1)) ? dirs47.SE : 0;
-                        | connectedWithWest
+                        rawTileIndex |= shouldConnect(tile, this.tilemap.at(x, y + 1)) ? dirs47.S : 0;
-                        | connectedWithSouth
+                        rawTileIndex |= shouldConnect(tile, this.tilemap.at(x - 1, y + 1)) ? dirs47.SW : 0;
-                        | connectedWithEast;
+                        rawTileIndex |= shouldConnect(tile, this.tilemap.at(x - 1, y)) ? dirs47.W : 0;
+                        rawTileIndex |= shouldConnect(tile, this.tilemap.at(x - 1, y - 1)) ? dirs47.NW : 0;
+                        rawTileIndex |= shouldConnect(tile, this.tilemap.at(x, y - 1)) ? dirs47.N : 0;
+                        rawTileIndex |= shouldConnect(tile, this.tilemap.at(x + 1, y - 1)) ? dirs47.NE : 0;
+                        tileIndex = connectionBitSetToX[removeRedundancies(rawTileIndex)];
+                    } else {
+                        tileIndex |= shouldConnect(tile, this.tilemap.at(x + 1, y)) ? 0b0001 : 0;
+                        tileIndex |= shouldConnect(tile, this.tilemap.at(x, y + 1)) ? 0b0010 : 0;
+                        tileIndex |= shouldConnect(tile, this.tilemap.at(x - 1, y)) ? 0b0100 : 0;
+                        tileIndex |= shouldConnect(tile, this.tilemap.at(x, y - 1)) ? 0b1000 : 0;
+                    }
 
                     let tilesetTileSize = tileset.height;
                     let tilesetX = tileIndex * tilesetTileSize;
                     let tilesetY = 0;
                     this.ctx.drawImage(
-                        this.tilesets[tile],
+                        tileset,
                         tilesetX, tilesetY, tilesetTileSize, tilesetTileSize,
                         x * this.tileSize, y * this.tileSize, this.tileSize, this.tileSize,
                     );

static/js/tairu/tilemap-registry.js

@@ -36,5 +36,12 @@ export default {
         " x x ",
         "     ",
     ]),
+    bitwiseAutotiling47: parseTilemap([
+        "      x  ",
+        "   x     ",
+        "  xx xx  ",
+        "   xxxx  ",
+        "  x      ",
+    ]),
 };