feat(examples): add ellipse-proximity example

alfu32 · Sep 13, 2020 · 7f59a73 · 7f59a73
1 parent ef9f1c0
commit 7f59a73
Show file tree

Hide file tree

Showing 9 changed files with 200 additions and 0 deletions.
diff --git a/assets/examples/ellipse-proximity.png b/assets/examples/ellipse-proximity.png
diff --git a/examples/ellipse-proximity/.gitignore b/examples/ellipse-proximity/.gitignore
@@ -0,0 +1,8 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
+*.map
+!src/*.d.ts
+!*.config.js
diff --git a/examples/ellipse-proximity/README.md b/examples/ellipse-proximity/README.md
@@ -0,0 +1,13 @@
+# ellipse-proximity
+
+[Live demo](http://demo.thi.ng/umbrella/ellipse-proximity/)
+
+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; 2020 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/ellipse-proximity/index.html b/examples/ellipse-proximity/index.html
@@ -0,0 +1,31 @@
+<!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>ellipse-proximity</title>
+        <link
+            href="https://unpkg.com/tachyons@4/css/tachyons.min.css"
+            rel="stylesheet"
+        />
+        <style></style>
+        <script
+            async
+            defer
+            data-domain="thi.ng"
+            src="https://plausible.io/js/plausible.js"
+        ></script>
+    </head>
+    <body class="sans-serif ma0">
+        <div id="app"></div>
+        <div>
+            <a
+                class="link"
+                href="https://github.com/thi-ng/umbrella/tree/develop/examples/ellipse-proximity"
+                >Source code</a
+            >
+        </div>
+        <script type="text/javascript" src="./src/index.ts"></script>
+    </body>
+</html>
diff --git a/examples/ellipse-proximity/package.json b/examples/ellipse-proximity/package.json
@@ -0,0 +1,43 @@
+{
+    "name": "ellipse-proximity",
+    "version": "0.0.1",
+    "description": "Interactive visualization of closest points on ellipses",
+    "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",
+        "build:webpack": "../../node_modules/.bin/webpack --mode production",
+        "start": "parcel index.html -p 8080 --open --no-cache"
+    },
+    "devDependencies": {
+        "parcel-bundler": "^1.12.4",
+        "terser": "^5.1.0",
+        "typescript": "^3.9.7"
+    },
+    "dependencies": {
+        "@thi.ng/geom-closest-point": "latest",
+        "@thi.ng/rdom": "latest",
+        "@thi.ng/rdom-canvas": "latest",
+        "@thi.ng/rstream-gestures": "latest",
+        "@thi.ng/transducers": "latest",
+        "@thi.ng/vectors": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    },
+    "thi.ng": {
+        "readme": [
+            "geom-closest-point",
+            "rdom",
+            "rdom-canvas",
+            "rstream-gestures",
+            "vectors"
+        ],
+        "screenshot": "examples/ellipse-proximity.png"
+    }
+}
diff --git a/examples/ellipse-proximity/src/index.ts b/examples/ellipse-proximity/src/index.ts
@@ -0,0 +1,67 @@
+import { closestPointEllipse } from "@thi.ng/geom-closest-point";
+import { $compile } from "@thi.ng/rdom";
+import { $canvas } from "@thi.ng/rdom-canvas";
+import { merge, reactive } from "@thi.ng/rstream";
+import { gestureStream } from "@thi.ng/rstream-gestures";
+import { mapcat, repeatedly } from "@thi.ng/transducers";
+import { add2, normalCCW, random2 } from "@thi.ng/vectors";
+
+const W = 600;
+
+// define random ellipses ([origin, radius] tuples)
+const ELLIPSES = [
+    ...repeatedly(() => [random2([], 50, W - 50), random2([], 10, W / 2)], 5),
+];
+
+// compile & mount reactive canvas component
+$compile(
+    $canvas(
+        // stream merge
+        merge({
+            src: [
+                // #1 initial call to action...
+                reactive([
+                    "g",
+                    {},
+                    [
+                        "text",
+                        { align: "center", fill: "black" },
+                        [W / 2, W / 2],
+                        "Move your mouse / finger!",
+                    ],
+                ]),
+                // #2 stream of mouse/touch coordinates (main)
+                gestureStream(document.body).map(
+                    (e) =>
+                        <any>[
+                            "g",
+                            // disable canvas clearing if no mouse buttons pressed
+                            { fill: "none", __clear: !!e.buttons },
+                            // semi-transparent white rect to fade previous frame
+                            ["rect", { fill: [1, 1, 1, 0.2] }, [0, 0], W, W],
+                            // declare ellipses, closest points and tangents
+                            ...mapcat(([o, r]) => {
+                                const p = closestPointEllipse(e.pos, o, r);
+                                return [
+                                    ["ellipse", { stroke: "#ccc" }, o, r],
+                                    ["circle", { stroke: "#f0f" }, p, 5],
+                                    ["line", { stroke: "#666" }, e.pos, p],
+                                    [
+                                        "line",
+                                        { stroke: "#6c0" },
+                                        p,
+                                        add2(
+                                            null,
+                                            normalCCW([], p, e.pos, 100),
+                                            p
+                                        ),
+                                    ],
+                                ];
+                            }, ELLIPSES),
+                        ]
+                ),
+            ],
+        }),
+        [W, W]
+    )
+).mount(document.getElementById("app")!);
diff --git a/examples/ellipse-proximity/src/webpack.d.ts b/examples/ellipse-proximity/src/webpack.d.ts
@@ -0,0 +1,4 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.svg";
+declare module "*.json";
diff --git a/examples/ellipse-proximity/tsconfig.json b/examples/ellipse-proximity/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": ".",
+        "target": "es6",
+        "sourceMap": true
+    },
+    "include": [
+        "./src/**/*.ts"
+    ]
+}
diff --git a/examples/ellipse-proximity/webpack.config.js b/examples/ellipse-proximity/webpack.config.js
@@ -0,0 +1,23 @@
+module.exports = {
+    entry: "./src/index.ts",
+    output: {
+        filename: "bundle.[hash].js",
+        path: __dirname + "/out"
+    },
+    resolve: {
+        extensions: [".ts", ".js"]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(png|jpg|gif)$/,
+                loader: "file-loader",
+                options: { name: "[path][hash].[ext]" }
+            },
+            { test: /\.ts$/, use: "ts-loader" }
+        ]
+    },
+    node: {
+        process: false
+    }
+};