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...
Since I've just been asked again why some of the https://thi.ng/umbrella examples in the repo are not working when copy/pasting the source code into a new (external, I assume) project — there could be several reasons...
The default branch of the repo is develop and usually does contain code which hasn't been released yet (as library/package). If in doubt, please switch to the main branch which contains the state as of the most recent release cycle...
Related to #1, there could be breaking API changes on the develop branch (as is the case for the current major undertaking of thi.ng/geom v8.0.0) and some of the examples are already using the new/upcoming API...
Rare, but possible, I've forgotten to declare dependencies for an example and you might encounter broken imports. Since 2022 I've got a custom tool to verify imports and exports of all packages and examples (and which is run prior to each release), so this shouldn't happen anymore...
Personally, I'm only using a bundler setup/workflow (@vite) and had zero problems in the past few years. However, some people using ESM imports directly have been encountering weird issues with some transpilation features of JS CDNs (e.g. skypack) in the past, but these shouldn't happen with more modern ones like https://esm.run.
Finally, all packages have a generally uniform readme structure, incl. "install/import instructions". For examples, there're also these wiki pages:
Congrats to @andrewrk & team to the new Zig v0.13.0 release! So exciting! 🚀🤩
Thankfully there were only very minor changes to be done on my end this time around, and I've just updated the build file & readme for https://thi.ng/wasm-api to be compatible with this new Zig version (the older build files are still kept around for those who might need it...). Also tested all the bundled examples, all working fine!
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..
Other people have also done this in photoshop, but i don't know of anybody who has done it quite like this, so imma show this off: Ultra-widescreen EGA composition in SCI0 compatible commands. The canvas is 665 x 190, with a small stitched area to help transition the two screens… no post-processing trickery. I interleaved the left and right side drawing screens with the appropriate matrix transformations, and... behold... ultra-wide EGA.
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 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...)
Es scheint so, als müsste ich mich bei der TypeScript Entwicklung auf @deno_land konzentrieren. Sicherlich, noch mit JSR genutzt, mittlerweile ein Ersatz für @nodejs professionell.
»Deno 1.44 lernt den Umgang mit privaten npm-Registries:
Das Minor Release kann mit privaten npm-Registries sowie gRPC-Verbindungen umgehen und erhöht nochmals die Kompatibilität mit Node.js.«
pro tip: learning this the hard way, if you're trying to fix linter issues based on ouput with #python or #typescript start fixing from the bottom of the output because if you start on the top then all of your changes will effect the downstream line number references.
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)
Good intro to using #TypeScript in the form of JSDoc tags: https://alexharri.com/blog/jsdoc-as-an-alternative-typescript-syntax - I've been using this recently in one small-ish project (#Bluesky thread reader) and I think I like it. I can run a typecheck when I want, but I don't need a build phase, don't need to install the npm package on the server, it's still just JS that a browser can open as is.
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:
We are excited about React Compiler, aren't we? I just remembered that my first OSS library in JavaScript was a JS-to-JS compiler! Funny how things come around.
🤓 This is gonna be a extremely nerdy toot, but my most favorite piece of code I ever wrote is a small TypeScript library complete with unit tests that makes it super simple to filter a list of domain names by various criteria.