feat(examples): add geom-fuzz-basics example

thi-ng · Jun 20, 2020 · 8b82723 · 8b82723
1 parent 3ff1484
commit 8b82723
Show file tree

Hide file tree

Showing 10 changed files with 221 additions and 3 deletions.
diff --git a/assets/geom/geom-fuzz.png b/assets/geom/geom-fuzz.png
diff --git a/examples/geom-fuzz-basics/.gitignore b/examples/geom-fuzz-basics/.gitignore
@@ -0,0 +1,8 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
+*.map
+!src/*.d.ts
+!*.config.js
diff --git a/examples/geom-fuzz-basics/README.md b/examples/geom-fuzz-basics/README.md
@@ -0,0 +1,13 @@
+# geom-fuzz-basics
+
+[Live demo](http://demo.thi.ng/umbrella/geom-fuzz-basics/)
+
+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/geom-fuzz-basics/index.html b/examples/geom-fuzz-basics/index.html
@@ -0,0 +1,25 @@
+<!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>geom-fuzz-basics</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/geom-fuzz-basics"
+                >Source code</a
+            >
+        </div>
+        <script type="text/javascript" src="./src/index.ts"></script>
+    </body>
+</html>
diff --git a/examples/geom-fuzz-basics/package.json b/examples/geom-fuzz-basics/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "geom-fuzz-basics",
+    "version": "0.0.1",
+    "description": "geom-fuzz basic shape & fill examples",
+    "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.13",
+        "typescript": "^3.9.2"
+    },
+    "dependencies": {
+        "@thi.ng/adapt-dpi": "latest",
+        "@thi.ng/geom": "latest",
+        "@thi.ng/geom-fuzz": "latest",
+        "@thi.ng/hiccup-canvas": "latest",
+        "@thi.ng/rstream": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    },
+    "thi.ng": {
+        "readme": [
+            "geom",
+            "geom-fuzz",
+            "hiccup-canvas"
+        ],
+        "screenshot": "geom/geom-fuzz.png"
+    }
+}
diff --git a/examples/geom-fuzz-basics/src/index.ts b/examples/geom-fuzz-basics/src/index.ts
@@ -0,0 +1,94 @@
+import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { circle, group, star, vertices } from "@thi.ng/geom";
+import {
+    compFill,
+    defDots,
+    defHatchPen,
+    fuzzyPoly,
+    jitterPoints,
+} from "@thi.ng/geom-fuzz";
+import { draw } from "@thi.ng/hiccup-canvas";
+import { fromInterval } from "@thi.ng/rstream";
+
+const W = 300;
+
+const SHAPES = {
+    tri: vertices(circle(100), 3),
+    hex: vertices(circle(50), 6),
+    star: vertices(star(50, 6, [0.5, 1])),
+    spike: jitterPoints(vertices(circle(40), 12), 15),
+};
+
+const PEN1 = defHatchPen([0, 0.8, 1, 0.5]);
+const PEN2 = compFill(
+    defHatchPen("#f3f", "d", 1, 3),
+    defHatchPen("#f3f", "v", 1, 3)
+);
+const PEN3 = defHatchPen([1, 1, 0, 0.5], "h", 4, 1.2);
+const PEN4 = defDots({
+    jitter: 1,
+    attribs: { size: 1.5, fill: [0, 1, 0], stroke: "none" },
+});
+
+const curvePos = (
+    t: number,
+    fx: number,
+    fy: number,
+    ax: number,
+    ay: number
+) => [Math.sin(t * fx) * ax + W / 2, Math.cos(t * fy) * ay + W / 2];
+
+const canvas: HTMLCanvasElement = document.createElement("canvas");
+document.body.appendChild(canvas);
+adaptDPI(canvas, W, W);
+
+const ctx = canvas.getContext("2d")!;
+
+fromInterval(1000 / 15).subscribe({
+    next(t: number) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        draw(
+            ctx,
+            group({ stroke: "black", scale: window.devicePixelRatio || 1 }, [
+                fuzzyPoly(
+                    SHAPES.tri,
+                    { translate: [150, 150], rotate: t * 0.04 },
+                    {
+                        fill: PEN1,
+                        curveScale: 0.05,
+                        jitter: 3,
+                    }
+                ),
+                fuzzyPoly(
+                    SHAPES.star,
+                    {
+                        translate: curvePos(t, 0.02, 0.03, 100, 50),
+                    },
+                    {
+                        fill: PEN2,
+                        curveScale: 0.3,
+                    }
+                ),
+                fuzzyPoly(
+                    SHAPES.hex,
+                    {
+                        translate: curvePos(t + 100, 0.03, 0.02, 100, 50),
+                    },
+                    {
+                        fill: PEN3,
+                        curveScale: 0.1,
+                    }
+                ),
+                fuzzyPoly(
+                    SHAPES.spike,
+                    {
+                        translate: curvePos(t, 0.04, 0.03, 50, 100),
+                    },
+                    {
+                        fill: PEN4,
+                    }
+                ),
+            ])
+        );
+    },
+});
diff --git a/examples/geom-fuzz-basics/src/webpack.d.ts b/examples/geom-fuzz-basics/src/webpack.d.ts
@@ -0,0 +1,4 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.svg";
+declare module "*.json";
diff --git a/examples/geom-fuzz-basics/tsconfig.json b/examples/geom-fuzz-basics/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": ".",
+        "target": "es6",
+        "sourceMap": true
+    },
+    "include": [
+        "./src/**/*.ts"
+    ]
+}
diff --git a/examples/geom-fuzz-basics/webpack.config.js b/examples/geom-fuzz-basics/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/packages/geom-fuzz/README.md b/packages/geom-fuzz/README.md
@@ -70,9 +70,9 @@ directory are using this package.
 
 A selection:
 
-| Screenshot                                                                                                   | Description                           | Live demo                                                 | Source                                                                                 |
-| ------------------------------------------------------------------------------------------------------------ | ------------------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/geom/geom-fuzz.png" width="240"/> | geom-fuzz basic shape & fill examples | [Demo](https://demo.thi.ng/umbrella/hiccup-canvas-fuzzy/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hiccup-canvas-fuzzy) |
+| Screenshot                                                                                                   | Description                           | Live demo                                              | Source                                                                              |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------- |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/geom/geom-fuzz.png" width="240"/> | geom-fuzz basic shape & fill examples | [Demo](https://demo.thi.ng/umbrella/geom-fuzz-basics/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/geom-fuzz-basics) |
 
 ## API