Example #167, and the very first example showing basic usage of the new https://thi.ng/geom-webgl interop package (still unreleased): Parsing a SVG path, sampling it with uniform vertex density (configurable), converting it into a complex polygon (w/ holes) and then into WebGL buffers (w/ vertex color option enabled), randomizing colors via probabilistic color theme, and — finally — drawing it all...
Testing/debugging the dynamic tessellation feature of the upcoming thi.ng/geom-webgl interop package... This will provide a single polymorphic function to convert https://thi.ng/geom shapes into WebGL binary data & model/attribute specs, with lots of options for memory layout, indexing, instancing and other advanced usage...
By default (and as shown here), polygons are tessellated via ear cutting[1], but users have a choice of 9 other algorithm presets (or their own custom ones), incl. iterative application of multiple tessellation strategies..
As part of the work on the upcoming thi.ng/geom-webgl package, today I've also been completely rewriting all tessellators in https://thi.ng/geom-tessellate and extending the package with more features, incl. an adapted version of https://github.com/mapbox/earcut to handle complex polygons (with holes, but can also be combined/nested with all the other tessellators, incl. the non-triangular ones)...
Instead of producing an array of faces (each itself an vertex array), all tessellators are now producing/populating/adding to a single tessellation, consisting of a vertex array and another array of face vertex IDs. This makes the result much more flexible for a number of use cases, incl. WebGL/WebGPU conversion.
Very happy with how the new API for both packages is turning out. The last image shows the source code for generating a single frame of the "SB" anim, starting with parsing two SVG paths, grouping & fitting them into a target bounding rect, then tessellating the entire group, rebuilding a new group from the resulting triangles, and finally serializing everything to SVG. For WebGL, there'll be a single asWebGLModel() function which performs shape tessellation automatically behind the scenes (fully configurable, though)...
A 6-fold mandala of a poppy seed capsule, an 8-fold mandala of goldfish and a 16-fold mandala of reflections on water mixed together into a square (p1) kaleidoscope.
My recording function still drops parts of the recorded video so I have to guess the correct length for a perfect loop. But after 17 tries, this one seems to be good.
Added a convolution kernel filtering operator for polygons/polylines to https://thi.ng/geom, incl. some useful preset kernels: box filter, triangle, gaussian, all with configurable size...
The image shows effects of various kernel sizes & iterations. Unlike with subdivision smoothing, here each version has the exact same number of vertices, only their positions are impacted: orange = box, magenta = triangle, blue = gaussian
(For now the operator is only implemented for polygons (also w/ holes) & polylines, but can be extended to other shape types...)
Current status: Updating the https://thi.ng/geom readme to give a better overview of the full extensive API, ahead of the v8 release (soon)... Attached are screenshots of three sections of the readme showing:
list of 32 shape types (both 2D and 3D)
list of 54 polymorphic functions/operations to manipulate/convert/analyze shapes & shape hierarchies
list of additional 40 shape creation functions
Still to come: Documenting the bundled preset implementations of:
vertex convolution kernels (3)
curve subdivision strategies (8)
polygon/polyline to bezier conversion strategies (3)
polygon tessellators (9)
(...and how most of these can be combined & applied iteratively. Some of the recent/existing examples are already hinting at the potential...)
Added a new[1] configurable curve subdivision kernel for https://thi.ng/geom to (iteratively) subdivide polygons/polylines with displacement, allowing for super compact code, infinite variation, and beautiful results like shown...
[1] Actually been using this approach since 2010, initially for 3D mesh subdivisions (3rd image)
So many new and improved features (+ new shape types) coming to https://thi.ng/geom (more about those soon) — for now a new tiny example to show point classification (inside/boundary/outside) for polygons:
꧁⚠️꧂ New 10.5.5 #tiling just dropped!
It's based on chunks of 4 10gons(it is inspired by ðe cairo 5gon tiling),
moving to 1 of ðe 5 closest 10gons takes 2 steps wiðin ðe chunk & 3 when leaving
ðere's also ðese quirky 5gon worms inside ðe rest of ðe structure 🥴 (unfortunately ðey have an 11θ 5gon ruining ðe symmetry)