Karsten SchmidtA short screen recording of the second prototype mentioned earlier (also an early WIP version with still quite a few obvious visual issues)...
#DebugArt #PreViz #3D #Mesh #Wireframe #Agents #AlgorithmicArt #Video #ScreenCapture
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...
Demo (reload for new variation):
https://demo.thi.ng/umbrella/geom-webgl-basics/
Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/geom-webgl-basics/src/index.ts
#ThingUmbrella #WebGL #SVG #Geometry #Tessellation #Triangulation #DebugArt #TypeScript #Typography #Polygon
#ThingUmbrella
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)...
#ThingUmbrella #WebGL #SVG #Geometry #Tessellation #Triangulation #DebugArt #TypeScript #Typography #Polygon
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..
[1] https://en.wikipedia.org/wiki/Polygon_triangulation
#ThingUmbrella #WebGL #Geometry #Tessellation #DebugArt #TypeScript #Gems
As usual, deep in the blurry spectrum between outright and intended utility (aka layout algorithm), dataviz (tree depth) and art. I love them all, and as so often, the extrema are just a tiny param change away from each other! Pushing toward art territory often a great way to uncover issues and debug an algorithm. E.g. I had originally issues with propagating size changes of nested cells back up to their parent/ancestors (solved now)...
(Ps. also a teaser for next #HowToThing... probably out tomorrow)
#GenerativeDesign #GenerativeArt #Layout #Algorithm #DebugArt #Grid #Dataviz #ThingUmbrella #TypeScript
Here's a screen recording of repeatedly reloading the same version 14 times... Watch the blueish bubble! There's indeed some (subtle!) variation after doing 10 reloads (which then repeats twice more before reverting again), but still not sure yet why...
#DebugArt literally!
thomas ⛰ vandenbergsometimes the camera goes underground or inside an object an Lumen gives you these beautiful abstract paintings
