-
-
Notifications
You must be signed in to change notification settings - Fork 144
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feature/geom-complex-paths' into develop
* feature/geom-complex-paths: (38 commits) refactor(geom): update centroid() for complexpoly feat(geom-poly-utils): add complexCenterOfWeight2() feat(examples): add rdom-klist example project, update readmes feat(geom): add complexPolygonFromPath() docs(geom): update readme test(geom): add tests build(geom): update pkg exports refactor(geom-sdf): add/update asSDF() impls for ComplexPoly & Path refactor(geom-axidraw): update asAxiDraw() impls feat(geom): add centroid() & convexHull() impl for Path docs(geom): add/update docstrings feat(geom): add pointInside() impl for Polyline feat(geom-isec): add pointInSegments() for polylines/polygons feat(geom): add closestPoint() impl for Path refactor(geom): update/simplify asPath() impls feat(geom): update pathFromCubics() to auto-create sub-paths if needed feat(geom): add/update asCubic() impls for complex poly & path refactor(geom): update area() impl for Path feat(geom): add arcLength() for Path, refactor complexpoly impl docs: regen readmes (examples) ...
- Loading branch information
Showing
66 changed files
with
1,673 additions
and
358 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # geom-complex-poly | ||
|
|
||
|  | ||
|
|
||
| [Live demo](http://demo.thi.ng/umbrella/geom-complex-poly/) | ||
|
|
||
| ## Developing & building | ||
|
|
||
| Please refer to the instructions on the wiki: | ||
|
|
||
| - [Development](https://github.com/thi-ng/umbrella/wiki/Development-mode-for-examples-using-thi.ng-meta%E2%80%90css) | ||
| - [Production build](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions) | ||
|
|
||
| ## Authors | ||
|
|
||
| - Karsten Schmidt | ||
|
|
||
| ## License | ||
|
|
||
| © 2024 Karsten Schmidt // Apache Software License 2.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "tables": {}, | ||
| "vars": {}, | ||
| "decls": [], | ||
| "specs": [], | ||
| "templates": [] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // list of CSS class names to force-include in generated CSS | ||
| // (one class per line, basic wildcards supported) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| // thi.ng/meta-css stylesheet | ||
| // see package readme for more details/usage | ||
| // use `yarn css:build` or `yarn css:watch` to transpile to CSS | ||
| // also see component-specific *.mcss files in /src folder | ||
|
|
||
| // (optional) variable declarations | ||
| :root { | ||
| // color1=#fff | ||
| } | ||
|
|
||
| body { system-sans-serif ma3 } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <link | ||
| rel="icon" | ||
| href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>' | ||
| /> | ||
| <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-complex-poly · @thi.ng/umbrella</title> | ||
| <link href="/css/style.css" rel="stylesheet" /> | ||
| <script> | ||
| window.goatcounter = { path: (p) => location.host + p }; | ||
| </script> | ||
| <script | ||
| data-goatcounter="https://thing.goatcounter.com/count" | ||
| async | ||
| src="//gc.zgo.at/count.js" | ||
| ></script> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <div> | ||
| <a | ||
| class="link" | ||
| href="https://github.com/thi-ng/umbrella/tree/develop/examples/geom-complex-poly" | ||
| >Source code</a | ||
| > | ||
| </div> | ||
| <script type="module" src="/src/index.ts"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| { | ||
| "name": "@example/geom-complex-poly", | ||
| "version": "0.0.1", | ||
| "private": true, | ||
| "description": "Shape conversions & operations using polygons with holes", | ||
| "repository": "https://github.com/thi-ng/umbrella", | ||
| "author": "Karsten Schmidt <k+npm@thi.ng>", | ||
| "license": "Apache-2.0", | ||
| "scripts": { | ||
| "start": "yarn css:build && yarn start:only", | ||
| "start:only": "vite --host --open", | ||
| "css:watch": "../../node_modules/.bin/metacss develop --bundle --watch --pretty --out-specs css/framework.json --out-css css/style.css --force @css/includes.txt ../../packages/meta-css/specs/*.mcss.json css/*.mcss.json css/*.mcss", | ||
| "css:build": "../../node_modules/.bin/metacss develop --bundle --out-specs css/framework.json --out-css css/style.css --force @css/includes.txt ../../packages/meta-css/specs/*.mcss.json css/*.mcss.json css/*.mcss", | ||
| "build": "yarn css:build && tsc && vite build --base='./'", | ||
| "preview": "vite preview --host --open" | ||
| }, | ||
| "devDependencies": { | ||
| "@thi.ng/meta-css": "workspace:^", | ||
| "typescript": "^5.4.3", | ||
| "vite": "^5.2.6" | ||
| }, | ||
| "dependencies": { | ||
| "@thi.ng/canvas": "workspace:^", | ||
| "@thi.ng/color": "workspace:^", | ||
| "@thi.ng/geom": "workspace:^", | ||
| "@thi.ng/geom-accel": "workspace:^", | ||
| "@thi.ng/geom-api": "workspace:^", | ||
| "@thi.ng/hiccup-canvas": "workspace:^", | ||
| "@thi.ng/math": "workspace:^", | ||
| "@thi.ng/poisson": "workspace:^", | ||
| "@thi.ng/transducers": "workspace:^" | ||
| }, | ||
| "browser": { | ||
| "process": false | ||
| }, | ||
| "thi.ng": { | ||
| "readme": [ | ||
| "canvas", | ||
| "color", | ||
| "geom", | ||
| "hiccup-canvas", | ||
| "poisson", | ||
| "transducers" | ||
| ], | ||
| "screenshot": "examples/geom-complex-poly.png" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| import { adaptiveCanvas2d } from "@thi.ng/canvas"; | ||
| import { COSINE_GRADIENTS, cosineColor } from "@thi.ng/color"; | ||
| import { | ||
| SUBDIV_CHAIKIN_CLOSED, | ||
| asPath, | ||
| asPolygon, | ||
| complexPolygon, | ||
| group, | ||
| pathFromSvg, | ||
| pointInside, | ||
| points, | ||
| proximity, | ||
| scatter, | ||
| simplify, | ||
| star, | ||
| subdivCurve, | ||
| text, | ||
| vertices, | ||
| withAttribs, | ||
| } from "@thi.ng/geom"; | ||
| import { KdTreeSet } from "@thi.ng/geom-accel"; | ||
| import type { IHiccupShape } from "@thi.ng/geom-api"; | ||
| import { draw } from "@thi.ng/hiccup-canvas"; | ||
| import { fitClamped } from "@thi.ng/math"; | ||
| import { samplePoisson } from "@thi.ng/poisson"; | ||
| import { filter, range2d } from "@thi.ng/transducers"; | ||
|
|
||
| const W = 300; | ||
| const R = W / 2; | ||
| const R2 = R / 4; | ||
| const COLW = W + 150; | ||
|
|
||
| // 8-sided star polygon | ||
| const A = star(R, 8, [1, 1 / 2]); | ||
|
|
||
| // plus-shaped polygon from SVG path | ||
| const B = asPolygon( | ||
| pathFromSvg(`M-10,${R2}H10V10H${R2}V-10H10V${-R2}H-10V-10H${-R2}V10H-10z`), | ||
| { num: 1 } | ||
| )[0]; | ||
|
|
||
| // complex polygon with A as outer shell and B as hole | ||
| const C = complexPolygon(A, [B]); | ||
|
|
||
| // subdivided version for future ref | ||
| const D = subdivCurve(C, SUBDIV_CHAIKIN_CLOSED, 3); | ||
|
|
||
| // create different shape variations | ||
| const SHAPES: [IHiccupShape, string][] = [ | ||
| [A, "original"], | ||
| [C, "with hole"], | ||
| [subdivCurve(C, SUBDIV_CHAIKIN_CLOSED, 1), "subdiv x1"], | ||
| [subdivCurve(C, SUBDIV_CHAIKIN_CLOSED, 2), "subdiv x2"], | ||
| [D, "subdiv x3"], | ||
| [subdivCurve(C, SUBDIV_CHAIKIN_CLOSED, 4), "subdiv x4"], | ||
| [ | ||
| asPath(C, { | ||
| breakPoints: false, | ||
| scale: 1, | ||
| }), | ||
| "asPath()", | ||
| ], | ||
| [asPath(C, { breakPoints: true }), "asPath()"], | ||
| [ | ||
| points(vertices(C, { dist: 5 }), { size: 2, shape: "circle" }), | ||
| "vertices (dist: 5)", | ||
| ], | ||
| [ | ||
| points(vertices(D, { dist: 5 }), { | ||
| size: 2, | ||
| shape: "circle", | ||
| }), | ||
| "subdiv vertices", | ||
| ], | ||
| [ | ||
| points(vertices(simplify(D, 1)), { | ||
| size: 2, | ||
| shape: "circle", | ||
| }), | ||
| "simplified vertices", | ||
| ], | ||
| [ | ||
| points( | ||
| filter( | ||
| (p) => pointInside(C, p), | ||
| range2d(-200, 200, -200, 200, 5, 5) | ||
| ), | ||
| { | ||
| size: 2, | ||
| shape: "circle", | ||
| } | ||
| ), | ||
| "pointInside()", | ||
| ], | ||
| [ | ||
| points(scatter(C, 1000), { | ||
| size: 2, | ||
| shape: "circle", | ||
| }), | ||
| "scatter()", | ||
| ], | ||
| [ | ||
| points( | ||
| samplePoisson({ | ||
| density: (p) => fitClamped(proximity(D, p)!, 0, 50, 2, 10), | ||
| points: () => scatter(D, 1)![0], | ||
| index: new KdTreeSet(2), | ||
| max: 2000, | ||
| }), | ||
| { | ||
| size: 2, | ||
| shape: "circle", | ||
| } | ||
| ), | ||
| "poisson samples", | ||
| ], | ||
| ]; | ||
|
|
||
| // color gradient preset | ||
| const GRAD = COSINE_GRADIENTS["blue-magenta-orange"]; | ||
|
|
||
| // create canvas, compute size for 2-column layout | ||
| const { ctx } = adaptiveCanvas2d( | ||
| COLW * 2, | ||
| Math.ceil(SHAPES.length / 2) * W, | ||
| document.body | ||
| ); | ||
|
|
||
| // draw all shapes & labels in 2-column layout | ||
| draw( | ||
| ctx, | ||
| group( | ||
| { | ||
| fill: "black", | ||
| font: "1rem sans-serif", | ||
| baseline: "middle", | ||
| scale: window.devicePixelRatio, | ||
| }, | ||
| SHAPES.map(([shape, label], i) => | ||
| group( | ||
| { | ||
| translate: [(i & 1) * COLW + R, (i >> 1) * W + R], | ||
| }, | ||
| [ | ||
| withAttribs( | ||
| shape, | ||
| { fill: cosineColor(GRAD, i / (SHAPES.length - 1)) }, | ||
| false | ||
| ), | ||
| text([R + 10, 0], label), | ||
| ] | ||
| ) | ||
| ) | ||
| ) | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /// <reference types="vite/client" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "extends": "../tsconfig.json", | ||
| "include": ["src/**/*"], | ||
| "compilerOptions": { | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default { | ||
| build: { target: "esnext" }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.