feat(examples): add porter-duff example, add missing webpack config f…

…iles
thi-ng · Jul 29, 2019 · 8a3a992 · 8a3a992
1 parent b2c1fa0
commit 8a3a992
Show file tree

Hide file tree

Showing 14 changed files with 304 additions and 0 deletions.
diff --git a/examples/pixel-basics/webpack.config.js b/examples/pixel-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/examples/poly-spline/webpack.config.js b/examples/poly-spline/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/porter-duff/.gitignore b/examples/porter-duff/.gitignore
@@ -0,0 +1,5 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
diff --git a/examples/porter-duff/README.md b/examples/porter-duff/README.md
@@ -0,0 +1,13 @@
+# porter-duff
+
+[Live demo](http://demo.thi.ng/umbrella/porter-duff/)
+
+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; 2019 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/porter-duff/assets/plus.png b/examples/porter-duff/assets/plus.png
diff --git a/examples/porter-duff/assets/ring.png b/examples/porter-duff/assets/ring.png
diff --git a/examples/porter-duff/index.html b/examples/porter-duff/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>porter-duff</title>
+        <link
+            href="https://unpkg.com/tachyons@4/css/tachyons.min.css"
+            rel="stylesheet"
+        />
+        <style></style>
+    </head>
+    <body class="sans-serif bg-moon-gray ma2">
+        <div id="app"></div>
+        <div>
+            <a
+                class="link"
+                href="https://github.com/thi-ng/umbrella/tree/master/examples/porter-duff"
+                >Source code</a
+            >
+        </div>
+        <script type="text/javascript" src="./src/index.ts"></script>
+    </body>
+</html>
diff --git a/examples/porter-duff/package.json b/examples/porter-duff/package.json
@@ -0,0 +1,30 @@
+{
+    "name": "porter-duff",
+    "version": "0.0.1",
+    "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.3",
+        "terser": "^3.17.0",
+        "typescript": "^3.4.1"
+    },
+    "dependencies": {
+        "@thi.ng/pixel": "latest",
+        "@thi.ng/porter-duff": "latest",
+        "@thi.ng/rstream": "latest",
+        "@thi.ng/transducers-hdom": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    }
+}
diff --git a/examples/porter-duff/src/index.ts b/examples/porter-duff/src/index.ts
@@ -0,0 +1,82 @@
+import {
+    ABGR8888,
+    canvas2d,
+    imagePromise,
+    PackedBuffer
+} from "@thi.ng/pixel";
+import {
+    DEST_ATOP_I,
+    DEST_I,
+    DEST_IN_I,
+    DEST_OUT_I,
+    DEST_OVER_I,
+    PLUS_I,
+    SRC_ATOP_I,
+    SRC_I,
+    SRC_IN_I,
+    SRC_OUT_I,
+    SRC_OVER_I,
+    XOR_I
+} from "@thi.ng/porter-duff";
+import IMG2 from "../assets/plus.png";
+import IMG from "../assets/ring.png";
+
+const MODES: any = {
+    SRC: SRC_I,
+    DEST: DEST_I,
+    SRC_OVER: SRC_OVER_I,
+    DEST_OVER: DEST_OVER_I,
+    SRC_IN: SRC_IN_I,
+    DEST_IN: DEST_IN_I,
+    SRC_OUT: SRC_OUT_I,
+    DEST_OUT: DEST_OUT_I,
+    SRC_ATOP: SRC_ATOP_I,
+    DEST_ATOP: DEST_ATOP_I,
+    XOR: XOR_I,
+    PLUS: PLUS_I
+};
+
+const IDS = Object.keys(MODES);
+
+Promise.all([IMG, IMG2].map(imagePromise))
+    .then(([circle, plus]) => {
+        const srcBuf = PackedBuffer.fromImage(circle, ABGR8888).premultiply();
+        const destBuf = PackedBuffer.fromImage(plus, ABGR8888).premultiply();
+
+        const ctx = canvas2d(destBuf.width * 4, (destBuf.height + 20) * 3);
+        document.getElementById("app")!.appendChild(ctx.canvas);
+
+        const res = PackedBuffer.fromCanvas(ctx.canvas);
+
+        for (let y = 0, i = 0; y < 3; y++) {
+            for (let x = 0; x < 4; x++, i++) {
+                const dx = x * destBuf.width;
+                const dy = y * (destBuf.height + 20);
+                destBuf.blit(res, { dx, dy });
+                srcBuf.blend(MODES[IDS[i]], res, { dx, dy });
+            }
+        }
+
+        res.postmultiply();
+        res.blitCanvas(ctx.canvas);
+
+        ctx.ctx.fillStyle = "black";
+        ctx.ctx.font = "12px Arial";
+        ctx.ctx.textAlign = "center";
+
+        for (let y = 0, i = 0; y < 3; y++) {
+            for (let x = 0; x < 4; x++, i++) {
+                ctx.ctx.fillText(
+                    IDS[i],
+                    (x + 0.5) * destBuf.width,
+                    (y + 1) * (destBuf.height + 20) - 6
+                );
+            }
+        }
+    })
+    .catch((e) => console.log(e));
+
+if (process.env.NODE_ENV !== "production") {
+    const hot = (<any>module).hot;
+    hot && hot.dispose(() => {});
+}
diff --git a/examples/porter-duff/tsconfig.json b/examples/porter-duff/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": ".",
+        "target": "es6",
+        "sourceMap": true
+    },
+    "include": [
+        "./src/**/*.ts"
+    ]
+}
diff --git a/examples/porter-duff/webpack.config.js b/examples/porter-duff/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/rotating-voronoi/webpack.config.js b/examples/rotating-voronoi/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/scenegraph-image/webpack.config.js b/examples/scenegraph-image/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/scenegraph/webpack.config.js b/examples/scenegraph/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
+    }
+};