feat(examples): add bitmap-font example

thi-ng · Feb 26, 2019 · 022c1ad · 022c1ad
1 parent 7b67146
commit 022c1ad
Show file tree

Hide file tree

Showing 8 changed files with 340 additions and 41 deletions.
diff --git a/examples/README.md b/examples/README.md
diff --git a/examples/bitmap-font/.gitignore b/examples/bitmap-font/.gitignore
@@ -0,0 +1,5 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
diff --git a/examples/bitmap-font/README.md b/examples/bitmap-font/README.md
@@ -0,0 +1,13 @@
+# bitmap-font
+
+[Live demo](http://demo.thi.ng/umbrella/bitmap-font/)
+
+Please refer to the [example build instructions](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions) on the wiki.
+
+## Authors
+
+- Karsten Schmidt
+
+## License
+
+&copy; 2018 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/bitmap-font/index.html b/examples/bitmap-font/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>bitmap-font</title>
+    <link href="https://unpkg.com/tachyons@4/css/tachyons.min.css" rel="stylesheet">
+    <style>
+    </style>
+</head>
+
+<body class="ma3 sans-serif">
+    <div id="app"></div>
+    <div>
+        <a class="link blue" href="https://github.com/thi-ng/umbrella/tree/master/examples/bitmap-font">Source code</a>
+    </div>
+    <script type="text/javascript" src="./src/index.ts"></script>
+</body>
+
+</html>
diff --git a/examples/bitmap-font/package.json b/examples/bitmap-font/package.json
@@ -0,0 +1,33 @@
+{
+    "name": "bitmap-font",
+    "version": "0.0.1",
+    "repository": "https://github.com/thi-ng/umbrella",
+    "author": "Karsten Schmidt <[email protected]>",
+    "license": "Apache-2.0",
+    "scripts": {
+        "clean": "rm -rf .cache build out",
+        "build": "yarn clean && parcel build index.html -d out --public-url ./ --no-source-maps --no-cache --detailed-report --experimental-scope-hoisting",
+        "start": "parcel index.html -p 8080 --open"
+    },
+    "devDependencies": {
+        "parcel-bundler": "^1.11.0",
+        "rimraf": "^2.6.3",
+        "terser": "^3.14.1",
+        "typescript": "^3.2.2"
+    },
+    "dependencies": {
+        "@thi.ng/api": "latest",
+        "@thi.ng/hdom-components": "latest",
+        "@thi.ng/math": "latest",
+        "@thi.ng/rstream": "latest",
+        "@thi.ng/transducers": "latest",
+        "@thi.ng/transducers-binary": "latest",
+        "@thi.ng/transducers-hdom": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    }
+}
diff --git a/examples/bitmap-font/src/font.ts b/examples/bitmap-font/src/font.ts
@@ -0,0 +1,103 @@
+/**
+ * Converted & filtered from:
+ * https://github.com/kenjennings/Atari-Font-To-Code/blob/master/example_atf_E000_atasm.txt
+ *
+ * added custom chars for ASCII completeness: `~{}|
+ */
+export const FONT = [
+    [0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00],
+    [0x00, 0x18, 0x18, 0x18, 0x18, 0x00, 0x18, 0x00],
+    [0x00, 0x66, 0x66, 0x66, 0x00, 0x00, 0x00, 0x00],
+    [0x00, 0x66, 0xff, 0x66, 0x66, 0xff, 0x66, 0x00],
+    [0x18, 0x3e, 0x60, 0x3c, 0x06, 0x7c, 0x18, 0x00],
+    [0x00, 0x66, 0x6c, 0x18, 0x30, 0x66, 0x46, 0x00],
+    [0x1c, 0x36, 0x1c, 0x38, 0x6f, 0x66, 0x3b, 0x00],
+    [0x00, 0x18, 0x18, 0x18, 0x00, 0x00, 0x00, 0x00],
+    [0x00, 0x0e, 0x1c, 0x18, 0x18, 0x1c, 0x0e, 0x00],
+    [0x00, 0x70, 0x38, 0x18, 0x18, 0x38, 0x70, 0x00],
+    [0x00, 0x66, 0x3c, 0xff, 0x3c, 0x66, 0x00, 0x00],
+    [0x00, 0x18, 0x18, 0x7e, 0x18, 0x18, 0x00, 0x00],
+    [0x00, 0x00, 0x00, 0x00, 0x00, 0x18, 0x18, 0x30],
+    [0x00, 0x00, 0x00, 0x7e, 0x00, 0x00, 0x00, 0x00],
+    [0x00, 0x00, 0x00, 0x00, 0x00, 0x18, 0x18, 0x00],
+    [0x00, 0x06, 0x0c, 0x18, 0x30, 0x60, 0x40, 0x00],
+    [0x00, 0x3c, 0x66, 0x6e, 0x76, 0x66, 0x3c, 0x00],
+    [0x00, 0x18, 0x38, 0x18, 0x18, 0x18, 0x7e, 0x00],
+    [0x00, 0x3c, 0x66, 0x0c, 0x18, 0x30, 0x7e, 0x00],
+    [0x00, 0x7e, 0x0c, 0x18, 0x0c, 0x66, 0x3c, 0x00],
+    [0x00, 0x0c, 0x1c, 0x3c, 0x6c, 0x7e, 0x0c, 0x00],
+    [0x00, 0x7e, 0x60, 0x7c, 0x06, 0x66, 0x3c, 0x00],
+    [0x00, 0x3c, 0x60, 0x7c, 0x66, 0x66, 0x3c, 0x00],
+    [0x00, 0x7e, 0x06, 0x0c, 0x18, 0x30, 0x30, 0x00],
+    [0x00, 0x3c, 0x66, 0x3c, 0x66, 0x66, 0x3c, 0x00],
+    [0x00, 0x3c, 0x66, 0x3e, 0x06, 0x0c, 0x38, 0x00],
+    [0x00, 0x00, 0x18, 0x18, 0x00, 0x18, 0x18, 0x00],
+    [0x00, 0x00, 0x18, 0x18, 0x00, 0x18, 0x18, 0x30],
+    [0x06, 0x0c, 0x18, 0x30, 0x18, 0x0c, 0x06, 0x00],
+    [0x00, 0x00, 0x7e, 0x00, 0x00, 0x7e, 0x00, 0x00],
+    [0x60, 0x30, 0x18, 0x0c, 0x18, 0x30, 0x60, 0x00],
+    [0x00, 0x3c, 0x66, 0x0c, 0x18, 0x00, 0x18, 0x00],
+    [0x00, 0x3c, 0x66, 0x6e, 0x6e, 0x60, 0x3e, 0x00],
+    [0x00, 0x18, 0x3c, 0x66, 0x66, 0x7e, 0x66, 0x00],
+    [0x00, 0x7c, 0x66, 0x7c, 0x66, 0x66, 0x7c, 0x00],
+    [0x00, 0x3c, 0x66, 0x60, 0x60, 0x66, 0x3c, 0x00],
+    [0x00, 0x78, 0x6c, 0x66, 0x66, 0x6c, 0x78, 0x00],
+    [0x00, 0x7e, 0x60, 0x7c, 0x60, 0x60, 0x7e, 0x00],
+    [0x00, 0x7e, 0x60, 0x7c, 0x60, 0x60, 0x60, 0x00],
+    [0x00, 0x3e, 0x60, 0x60, 0x6e, 0x66, 0x3e, 0x00],
+    [0x00, 0x66, 0x66, 0x7e, 0x66, 0x66, 0x66, 0x00],
+    [0x00, 0x7e, 0x18, 0x18, 0x18, 0x18, 0x7e, 0x00],
+    [0x00, 0x06, 0x06, 0x06, 0x06, 0x66, 0x3c, 0x00],
+    [0x00, 0x66, 0x6c, 0x78, 0x78, 0x6c, 0x66, 0x00],
+    [0x00, 0x60, 0x60, 0x60, 0x60, 0x60, 0x7e, 0x00],
+    [0x00, 0x63, 0x77, 0x7f, 0x6b, 0x63, 0x63, 0x00],
+    [0x00, 0x66, 0x76, 0x7e, 0x7e, 0x6e, 0x66, 0x00],
+    [0x00, 0x3c, 0x66, 0x66, 0x66, 0x66, 0x3c, 0x00],
+    [0x00, 0x7c, 0x66, 0x66, 0x7c, 0x60, 0x60, 0x00],
+    [0x00, 0x3c, 0x66, 0x66, 0x66, 0x6c, 0x36, 0x00],
+    [0x00, 0x7c, 0x66, 0x66, 0x7c, 0x6c, 0x66, 0x00],
+    [0x00, 0x3c, 0x60, 0x3c, 0x06, 0x06, 0x3c, 0x00],
+    [0x00, 0x7e, 0x18, 0x18, 0x18, 0x18, 0x18, 0x00],
+    [0x00, 0x66, 0x66, 0x66, 0x66, 0x66, 0x7e, 0x00],
+    [0x00, 0x66, 0x66, 0x66, 0x66, 0x3c, 0x18, 0x00],
+    [0x00, 0x63, 0x63, 0x6b, 0x7f, 0x77, 0x63, 0x00],
+    [0x00, 0x66, 0x66, 0x3c, 0x3c, 0x66, 0x66, 0x00],
+    [0x00, 0x66, 0x66, 0x3c, 0x18, 0x18, 0x18, 0x00],
+    [0x00, 0x7e, 0x0c, 0x18, 0x30, 0x60, 0x7e, 0x00],
+    [0x00, 0x1e, 0x18, 0x18, 0x18, 0x18, 0x1e, 0x00],
+    [0x00, 0x40, 0x60, 0x30, 0x18, 0x0c, 0x06, 0x00],
+    [0x00, 0x78, 0x18, 0x18, 0x18, 0x18, 0x78, 0x00],
+    [0x00, 0x08, 0x1c, 0x36, 0x63, 0x00, 0x00, 0x00],
+    [0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00],
+    [0x00, 0x30, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00],
+    [0x00, 0x00, 0x3c, 0x06, 0x3e, 0x66, 0x3e, 0x00],
+    [0x00, 0x60, 0x60, 0x7c, 0x66, 0x66, 0x7c, 0x00],
+    [0x00, 0x00, 0x3c, 0x60, 0x60, 0x60, 0x3c, 0x00],
+    [0x00, 0x06, 0x06, 0x3e, 0x66, 0x66, 0x3e, 0x00],
+    [0x00, 0x00, 0x3c, 0x66, 0x7e, 0x60, 0x3c, 0x00],
+    [0x00, 0x0e, 0x18, 0x3e, 0x18, 0x18, 0x18, 0x00],
+    [0x00, 0x00, 0x3e, 0x66, 0x66, 0x3e, 0x06, 0x7c],
+    [0x00, 0x60, 0x60, 0x7c, 0x66, 0x66, 0x66, 0x00],
+    [0x00, 0x18, 0x00, 0x38, 0x18, 0x18, 0x3c, 0x00],
+    [0x00, 0x06, 0x00, 0x06, 0x06, 0x06, 0x06, 0x3c],
+    [0x00, 0x60, 0x60, 0x6c, 0x78, 0x6c, 0x66, 0x00],
+    [0x00, 0x38, 0x18, 0x18, 0x18, 0x18, 0x3c, 0x00],
+    [0x00, 0x00, 0x66, 0x7f, 0x7f, 0x6b, 0x63, 0x00],
+    [0x00, 0x00, 0x7c, 0x66, 0x66, 0x66, 0x66, 0x00],
+    [0x00, 0x00, 0x3c, 0x66, 0x66, 0x66, 0x3c, 0x00],
+    [0x00, 0x00, 0x7c, 0x66, 0x66, 0x7c, 0x60, 0x60],
+    [0x00, 0x00, 0x3e, 0x66, 0x66, 0x3e, 0x06, 0x06],
+    [0x00, 0x00, 0x7c, 0x66, 0x60, 0x60, 0x60, 0x00],
+    [0x00, 0x00, 0x3e, 0x60, 0x3c, 0x06, 0x7c, 0x00],
+    [0x00, 0x18, 0x7e, 0x18, 0x18, 0x18, 0x0e, 0x00],
+    [0x00, 0x00, 0x66, 0x66, 0x66, 0x66, 0x3e, 0x00],
+    [0x00, 0x00, 0x66, 0x66, 0x66, 0x3c, 0x18, 0x00],
+    [0x00, 0x00, 0x63, 0x6b, 0x7f, 0x3e, 0x36, 0x00],
+    [0x00, 0x00, 0x66, 0x3c, 0x18, 0x3c, 0x66, 0x00],
+    [0x00, 0x00, 0x66, 0x66, 0x66, 0x3e, 0x0c, 0x78],
+    [0x00, 0x00, 0x7e, 0x0c, 0x18, 0x30, 0x7e, 0x00],
+    [0x06, 0x0c, 0x0c, 0x30, 0x0c, 0x0c, 0x06, 0x00],
+    [0x18, 0x18, 0x18, 0x18, 0x18, 0x18, 0x18, 0x00],
+    [0x60, 0x30, 0x30, 0x0c, 0x30, 0x30, 0x60, 0x00],
+    [0x00, 0x00, 0x60, 0x99, 0x06, 0x00, 0x00, 0x00]
+];
diff --git a/examples/bitmap-font/src/index.ts b/examples/bitmap-font/src/index.ts
@@ -0,0 +1,108 @@
+import { IObjectOf } from "@thi.ng/api";
+import { dropdown } from "@thi.ng/hdom-components";
+import { clamp } from "@thi.ng/math";
+import { stream, sync } from "@thi.ng/rstream";
+import {
+    comp,
+    map,
+    multiplex,
+    partition,
+    pluck,
+    range,
+    str,
+    transduce,
+    zip
+} from "@thi.ng/transducers";
+import { bits } from "@thi.ng/transducers-binary";
+import { updateDOM } from "@thi.ng/transducers-hdom";
+import { FONT } from "./font";
+
+// retrieve font bytes for given char
+const lookupChar =
+    (c: string) => FONT[clamp(c.charCodeAt(0) - 32, 0, FONT.length - 1)];
+
+// re-usable transducer
+const xfJoin = map((x: string[]) => x.join(""));
+
+// higher order transducer to transform single char from string
+const xfChar =
+    (i: number, on: string, off: string) =>
+        comp(
+            // use byte `i` lane from current row
+            pluck<number[], number>(i),
+            // split into bits
+            bits(8),
+            // transform each bit
+            map((x) => x ? on : off),
+            // re-group
+            partition(8),
+            // build string
+            xfJoin
+        );
+
+// transform entire string
+const banner =
+    ({ input, on, off }: IObjectOf<string>) =>
+        transduce(
+            comp(
+                // dynamically create `xfChar` transducers for each char
+                // and run them in parallel via `multiplex()`
+                multiplex.apply(null, [...map((i) => xfChar(i, on, off), range(input.length))]),
+                // then join the results for each line
+                xfJoin
+            ),
+            // use `str()` reducer to build string result
+            str("\n"),
+            // convert input string into stream of row-major bitmap font tuples
+            zip.apply(null, [...map(lookupChar, input || " ")])
+        );
+
+// dropdown menu for on/off bits
+const charSelector =
+    (onchange, sel) =>
+        [dropdown, { class: "ml3", onchange },
+            [["#", "#"], ["*", "*"], ["X", "X"], ["/", "/"], [".", "."], [" ", "space"]],
+            sel
+        ];
+
+// main UI root component
+const app =
+    ({ raw, result }) =>
+        ["div",
+            ["div",
+                ["input", {
+                    oninput: (e) => input.next(e.target.value),
+                    value: raw
+                }],
+                charSelector((e) => on.next(e.target.value), on.deref()),
+                charSelector((e) => off.next(e.target.value), off.deref()),
+            ],
+            ["pre.code.w-100.pa2.overflow-x-auto.bg-washed-yellow", result]
+        ];
+
+// reactive stream setup
+const input = stream<string>();
+const on = stream<string>();
+const off = stream<string>();
+
+// transforming stream combinator
+const xformer = sync({ src: { input, on, off } }).transform(map(banner));
+
+const main = sync({ src: { raw: input, result: xformer } });
+main.transform(
+    map(app),
+    updateDOM()
+);
+
+// kick off
+input.next("8BIT POWER");
+on.next("/");
+off.next(" ");
+
+// input.next(transduce(map((x: number) => String.fromCharCode(x)), str(), range(32, 127)));
+
+// HMR handling
+if (process.env.NODE_ENV !== "production") {
+    const hot = (<any>module).hot;
+    hot && hot.dispose(() => main.done());
+}
diff --git a/examples/bitmap-font/tsconfig.json b/examples/bitmap-font/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": ".",
+        "target": "es6",
+        "sourceMap": true
+    },
+    "include": [
+        "./src/**/*.ts"
+    ]
+}