feat(examples): add poisson-circles & stratified-grid examples

thi-ng · May 29, 2020 · fcc23ac · fcc23ac
1 parent 104bb58
commit fcc23ac
Show file tree

Hide file tree

Showing 16 changed files with 284 additions and 0 deletions.
diff --git a/examples/poisson-circles/.gitignore b/examples/poisson-circles/.gitignore
@@ -0,0 +1,8 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
+*.map
+!src/*.d.ts
+!*.config.js
diff --git a/examples/poisson-circles/README.md b/examples/poisson-circles/README.md
@@ -0,0 +1,13 @@
+# poisson-circles
+
+[Live demo](http://demo.thi.ng/umbrella/poisson-circles/)
+
+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/poisson-circles/index.html b/examples/poisson-circles/index.html
@@ -0,0 +1,17 @@
+<!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>poisson-circles</title>
+    <link href="https://unpkg.com/tachyons@4/css/tachyons.min.css" rel="stylesheet">
+    <style>
+    </style>
+</head>
+<body class="sans-serif">
+    <div id="app"></div>
+    <div><a class="link" href="https://github.com/thi-ng/umbrella/tree/develop/examples/poisson-circles">Source code</a></div>
+    <script type="text/javascript" src="./src/index.ts"></script>
+</body>
+</html>
diff --git a/examples/poisson-circles/package.json b/examples/poisson-circles/package.json
@@ -0,0 +1,39 @@
+{
+    "name": "poisson-circles",
+    "version": "0.0.1",
+    "description": "2D Poisson-disc sampler with procedural gradient map",
+    "repository": "https://github.com/thi-ng/umbrella",
+    "author": "Karsten Schmidt <k+npm@thi.ng>",
+    "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"
+    },
+    "devDependencies": {
+        "parcel-bundler": "^1.12.4",
+        "terser": "^4.6.3",
+        "typescript": "^3.7.5"
+    },
+    "dependencies": {
+        "@thi.ng/geom": "latest",
+        "@thi.ng/geom-accel": "latest",
+        "@thi.ng/math": "latest",
+        "@thi.ng/poisson": "latest",
+        "@thi.ng/vectors": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    },
+    "thi.ng": {
+        "readme": [
+            "geom-accel",
+            "poisson"
+        ],
+        "screenshot": "poisson/poisson.jpg"
+    }
+}
diff --git a/examples/poisson-circles/src/index.ts b/examples/poisson-circles/src/index.ts
@@ -0,0 +1,26 @@
+import { asSvg, circle, svgDoc } from "@thi.ng/geom";
+import { KdTreeSet } from "@thi.ng/geom-accel";
+import { fit01 } from "@thi.ng/math";
+import { samplePoisson } from "@thi.ng/poisson";
+import { dist, randMinMax2 } from "@thi.ng/vectors";
+
+const index = new KdTreeSet(2);
+
+const pts = samplePoisson({
+    index,
+    points: () => randMinMax2(null, [0, 0], [500, 500]),
+    density: (p) => fit01(Math.pow(dist(p, [250, 250]) / 250, 2), 2, 10),
+    iter: 5,
+    max: 8000,
+    quality: 500,
+});
+
+// use thi.ng/geom to visualize results
+// each circle's radius is set to distance to its nearest neighbor
+const circles = pts.map((p) =>
+    circle(p, dist(p, index.queryKeys(p, 40, 2)[1]) / 2)
+);
+
+document.body.innerHTML = asSvg(
+    svgDoc({ fill: "none", stroke: "blue" }, ...circles)
+);
diff --git a/examples/poisson-circles/src/webpack.d.ts b/examples/poisson-circles/src/webpack.d.ts
@@ -0,0 +1,4 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.svg";
+declare module "*.json";
diff --git a/examples/poisson-circles/tsconfig.json b/examples/poisson-circles/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": ".",
+        "target": "es6",
+        "sourceMap": true
+    },
+    "include": [
+        "./src/**/*.ts"
+    ]
+}
diff --git a/examples/poisson-circles/webpack.config.js b/examples/poisson-circles/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
+    }
+};
diff --git a/examples/stratified-grid/.gitignore b/examples/stratified-grid/.gitignore
@@ -0,0 +1,8 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
+*.map
+!src/*.d.ts
+!*.config.js
diff --git a/examples/stratified-grid/README.md b/examples/stratified-grid/README.md
@@ -0,0 +1,13 @@
+# stratified-grid
+
+[Live demo](http://demo.thi.ng/umbrella/stratified-grid/)
+
+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/stratified-grid/index.html b/examples/stratified-grid/index.html
@@ -0,0 +1,17 @@
+<!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>stratified-grid</title>
+    <link href="https://unpkg.com/tachyons@4/css/tachyons.min.css" rel="stylesheet">
+    <style>
+    </style>
+</head>
+<body class="sans-serif">
+    <div id="app"></div>
+    <div><a class="link" href="https://github.com/thi-ng/umbrella/tree/develop/examples/stratified-grid">Source code</a></div>
+    <script type="text/javascript" src="./src/index.ts"></script>
+</body>
+</html>
diff --git a/examples/stratified-grid/package.json b/examples/stratified-grid/package.json
@@ -0,0 +1,39 @@
+{
+    "name": "stratified-grid",
+    "version": "0.0.1",
+    "description": "2D Stratified grid sampling example",
+    "repository": "https://github.com/thi-ng/umbrella",
+    "author": "Karsten Schmidt <k+npm@thi.ng>",
+    "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"
+    },
+    "devDependencies": {
+        "parcel-bundler": "^1.12.4",
+        "terser": "^4.6.3",
+        "typescript": "^3.7.5"
+    },
+    "dependencies": {
+        "@thi.ng/geom": "latest",
+        "@thi.ng/geom-accel": "latest",
+        "@thi.ng/poisson": "latest",
+        "@thi.ng/transducers": "latest",
+        "@thi.ng/vectors": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    },
+    "thi.ng": {
+        "readme": [
+            "geom-accel",
+            "poisson"
+        ],
+        "screenshot": "poisson/stratified-grid.png"
+    }
+}
diff --git a/examples/stratified-grid/src/index.ts b/examples/stratified-grid/src/index.ts
@@ -0,0 +1,28 @@
+import { asSvg, circle, svgDoc } from "@thi.ng/geom";
+import { KdTreeSet } from "@thi.ng/geom-accel";
+import { stratifiedGrid } from "@thi.ng/poisson";
+import { map } from "@thi.ng/transducers";
+import { dist } from "@thi.ng/vectors";
+
+const index = new KdTreeSet(2);
+index.into(stratifiedGrid({ dim: [50, 50], samples: 1 }));
+
+document.body.innerHTML = asSvg(
+    svgDoc(
+        {
+            width: 600,
+            height: 600,
+            fill: "none",
+            stroke: "blue",
+            "stroke-width": 0.1,
+        },
+        ...map(
+            (p) =>
+                circle(
+                    p,
+                    dist(p, index.queryKeys(p, 2 * Math.SQRT2, 2)[1]) / 2
+                ),
+            index.keys()
+        )
+    )
+);
diff --git a/examples/stratified-grid/src/webpack.d.ts b/examples/stratified-grid/src/webpack.d.ts
@@ -0,0 +1,4 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.svg";
+declare module "*.json";
diff --git a/examples/stratified-grid/tsconfig.json b/examples/stratified-grid/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": ".",
+        "target": "es6",
+        "sourceMap": true
+    },
+    "include": [
+        "./src/**/*.ts"
+    ]
+}
diff --git a/examples/stratified-grid/webpack.config.js b/examples/stratified-grid/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
+    }
+};