home.social
Sign in Create account

#howtothing — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #howtothing, aggregated by home.social.

  1. Karsten Schmidt @[email protected] ·

    Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.

    I think it's also another great, if minimal, example to illustrate how otherwise completely separate thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.

    Calculators:
    demo.thi.ng/umbrella/darkroom-

    Source code:
    codeberg.org/thi.ng/umbrella/s

    The attached images show the source code of the entire main app (UI root) and one of the calculators...

    Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶

    codeberg.org/thi.ng/umbrella#h

    #ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource

    #howtothing #thingumbrella #darkroom #calculator #tool #reactive
  2. Karsten Schmidt @[email protected] ·

    Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.

    I think it's also another great, if minimal, example to illustrate how otherwise completely separate thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.

    Calculators:
    demo.thi.ng/umbrella/darkroom-

    Source code:
    codeberg.org/thi.ng/umbrella/s

    The attached images show the source code of the entire main app (UI root) and one of the calculators...

    Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶

    codeberg.org/thi.ng/umbrella#h

    #ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource

    #howtothing #thingumbrella #darkroom #calculator #tool #reactive
  3. Karsten Schmidt @[email protected] ·

    Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.

    I think it's also another great, if minimal, example to illustrate how otherwise completely separate thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.

    Calculators:
    demo.thi.ng/umbrella/darkroom-

    Source code:
    codeberg.org/thi.ng/umbrella/s

    The attached images show the source code of the entire main app (UI root) and one of the calculators...

    Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶

    codeberg.org/thi.ng/umbrella#h

    #ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource

    #howtothing #thingumbrella #darkroom #calculator #tool #reactive
  4. Karsten Schmidt @[email protected] ·

    Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.

    I think it's also another great, if minimal, example to illustrate how otherwise completely separate thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.

    Calculators:
    demo.thi.ng/umbrella/darkroom-

    Source code:
    codeberg.org/thi.ng/umbrella/s

    The attached images show the source code of the entire main app (UI root) and one of the calculators...

    Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶

    codeberg.org/thi.ng/umbrella#h

    #ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource

    #opensource #javascript #typescript #webdev #ui #reactive
  5. Karsten Schmidt @[email protected] ·

    Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.

    I think it's also another great, if minimal, example to illustrate how otherwise completely separate thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.

    Calculators:
    demo.thi.ng/umbrella/darkroom-

    Source code:
    codeberg.org/thi.ng/umbrella/s

    The attached images show the source code of the entire main app (UI root) and one of the calculators...

    Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶

    codeberg.org/thi.ng/umbrella#h

    #ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource

    #howtothing #thingumbrella #darkroom #calculator #tool #reactive
  6. Ralf Barkow @rgb ·

    @khinsen @toxi See "Output of Function toDot"

    #federatedwiki #howtothing
  7. Ralf Barkow @rgb ·

    @toxi Many thanks, Karsten! See wiki.ralfbarkow.ch/view/howtot

    #federatedwiki #howtothing
  8. Karsten Schmidt @[email protected] ·

    A short overview of end-of-2023 state of thi.ng(s) (thi.ng/umbrella only!):

    96 releases done in 2023 (i.e. every 3.6 days on average)

    188 projects/packages (+12 this year)
    151 example projects (+32 this year)

    3,865 source files
    144,432 lines of code
    54,155 docs/comments (37% or 2.66 lines of code-to-comment ratio)
    198,587 total SLOC

    Readme files (for all 188 packages):

    49,580 total words
    189,978 lines

    A lot of activity this year was spent on adding/improving documentation & creating new examples to illustrate general usage patterns. From August till October I published 30 chapters of #HowToThing aka heavily commented code examples & mini-tutorials, incl. ~20 new example projects which are now part of the monorepo. Just like the overall project scope, these chapters covered anything from audio synthesis, data transformations, DSLs, geometry, generative art/design, GIS, image processing, Mastodon client, reactive UIs (NOT using React!), shaders, other visualizations and more... Check out the hashtag to view them (full list is also part of the thi.ng/umbrella readme).

    #ThingUmbrella #OpenSource #Gratitude #ProjectStatistics #YearInReview #IndyDev #Fundraising

    2/3

    #howtothing #thingumbrella #opensource #gratitude #projectstatistics #yearinreview
  9. Karsten Schmidt @[email protected] ·

    Just updated the procedural text generator tool (from the most recent #HowToThing example[1]) to allow storing/loading source template text via the URL hash fragment. That means one can now share small procedural stories/texts like this (hoping Mastodon allows longish URLs):

    demo.thi.ng/umbrella/procedura==

    [1] For context/reference: mastodon.thi.ng/@toxi/11134707

    #ThingUmbrella #ProcGen #TextGeneration #NaNoGenMo

    #howtothing #thingumbrella #procgen #textgeneration #nanogenmo
  10. Karsten Schmidt @[email protected] ·

    #HowToThing #Epilogue #LongRead: After 66 days of addressing 30 wildly varied use cases and building ~20 new example projects of varying complexity to illustrate how #ThingUmbrella libraries can be used & combined, I'm taking a break to concentrate on other important thi.ngs...

    With this overall selection I tried shining a light on common architectural patterns, but also some underexposed, yet interesting niche topics. Since there were many different techniques involved, it's natural not everything resonated with everyone. That's fine! Though, my hope always is that readers take an interest in a wide range of topics, and so many of these new examples were purposefully multi-faceted and hopefully provided insights for at least some parts, plus (in)directly communicated a core essence of the larger project:

    Only individual packages (or small clusters) are designed & optimized for a set of particular use cases. At large, though, thi.ng explicitly does NOT offer any such guidance or even opinion. All I can offer are possibilities, nudges and cross-references, how these constructs & techniques can be (and have been) useful and/or the theory underpinning them. For some topics, thi.ng libs provide multiple approaches to achieve certain goals. This again is by design (not lack of it!) and stems from hard-learned experience, showing that many (esp. larger) projects highly benefit from more nuanced (sometimes conflicting approaches) compared to popular defacto "catch-all" framework solutions. To avid users (incl. myself) this approach has become a somewhat unique offering and advantage, yet in itself seems to be the hardest and most confusing aspect of the entire project to communicate to newcomers.

    So seeing this list of new projects together, to me really is a celebration (and confirmation/testament) of the overall #BottomUpDesign #ThingUmbrella approach (which I've been building on since ~2006): From the wide spectrum/flexibility of use cases, the expressiveness, concision, the data-first approach, the undogmatic mix of complementary paradigms, the separation of concerns, no hidden magic state, only minimal build tooling requirements (a bundler is optional, but recommended for tree shaking, no more) — these are all aspects I think are key to building better (incl. more maintainable & reason-able) software. IMO they are worth embracing & exposing more people to and this is what I've partially attempted to do with this series of posts...

    ICYMI here's a summary of the 10 most recent posts (full list in the thi.ng/umbrella readme). Many of those examples have more comments than code...

    021: Iterative animated polygon subdivision & heat map viz
    mastodon.thi.ng/@toxi/11122194

    022: Quasi-random voronoi lattice generator
    mastodon.thi.ng/@toxi/11124441

    023: Tag-based Jaccard similarity ranking using bitfields
    mastodon.thi.ng/@toxi/11125696

    024: 2.5D hidden line visualization of DEM files
    mastodon.thi.ng/@toxi/11126950

    025: Transforming & plotting 10k data points using SIMD
    mastodon.thi.ng/@toxi/11128326

    026: Shader meta-programming to generate 16 animated function plots
    mastodon.thi.ng/@toxi/11129584

    027: Flocking sim w/ neighborhood queries to visualize proximity
    mastodon.thi.ng/@toxi/11130843

    028: Randomized, space-filling, nested 2D grid layout generator
    mastodon.thi.ng/@toxi/11132456

    029: Forth-like DSL & livecoding playground for 2D geometry
    mastodon.thi.ng/@toxi/11133502

    030: Procedural text generation via custom DSL & parse grammar
    mastodon.thi.ng/@toxi/11134707

    #ThingUmbrella #OpenSource #TypeScript #JavaScript #Tutorial

    #howtothing #epilogue #longread #thingumbrella #bottomupdesign #opensource
  11. Karsten Schmidt @[email protected] ·

    #HowToThing #030 — Procedural, rule-based & stochastic text generation using a custom DSL, parse grammar (via thi.ng/parse) and abstract syntax tree transformation (via thi.ng/defmulti).

    Since it's #NaNoWriMo & #NaNoGenMo [1], I'm closing out this first season of 30 #HowToThing's with a related topic & maybe someone even finds it useful/interesting... 😉🤷‍♂️

    This example is in principle inspired by @galaxykate's oldie & goodie #Tracery, but is using a super simple custom text format instead of JSON to define variables and template text. Variables are expanded recursively and I've also added features like dynamic, indirect pointer-like variable lookups to derive variables based on current values (useful for conditionals & context-specific expansions), hidden assignments, chainable modifiers... I've included 5 different "story" templates (incl. comments) showing various features. Just press "regenerate" to create new random variations...

    Similar to the previous #HowToThing, I'm hoping this example also shows that approaching use cases like this via small domain-specific languages with proper grammar rules, does not require much ceremony and is often more amenable to change during prototyping (and later also more maintainable!) than just regex bashing approaches...

    The parser grammar itself is explained in the thi.ng/parse readme. As usual, the grammar was created/prototyped with the Parser Playground[2], which we developed from scratch during the first thi.ng livestream[3] (2.5h video)...

    Demo (example project #145):
    demo.thi.ng/umbrella/procedura

    Source code:
    github.com/thi-ng/umbrella/tre

    If you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):

    github.com/thi-ng/umbrella/dis

    [1] github.com/NaNoGenMo/2023/
    [2] demo.thi.ng/umbrella/parse-pla
    [3] youtube.com/watch?v=mXp92s_VP4

    #ThingUmbrella #NaNoWriMo2023 #NaNoGenMo2023 #ProcGen #Generative #TextGeneration #Ngram #TypeScript #JavaScript #Tutorial

    #nanogenmo2023 #howtothing #nanowrimo #nanogenmo #tracery #thingumbrella
  12. Karsten Schmidt @[email protected] ·

    #HowToThing #029 — One for the #Forth friends: Minimal livecoding playground for animated 2D geometry generation (incl. SVG export) using a Forth-like DSL (domain-specific language) based on thi.ng/pointfree, thi.ng/pointfree-lang and various geometry related operations using thi.ng/geom. A short screen recording is included to demonstrate overall usage. This is a cutdown version of a prototype tool, originally from 2019...

    Even though the language is "Forthy", the underlying thi.ng/pointfree implementation does _not_ use a VM, but instead compiles words to vanilla JavaScript using normal functional composition (or reductions) and each word is passing data & state via a single shared stack context object (with the usual dual data & return stacks and an environment object with var bindings). The language supports quotations, local variables, combinators etc.

    I _highly_ recommend consulting the detailed readme docs for the above packages to familiarize yourself with the basic principles & language features/syntax. If you do have some prior #Forth knowledge, many aspects should feel familiar (apart from the geometry DSL terms)...

    Also worth pointing out that the editor/interpreter in this small example is not super forgiving re: error handling and might easily crash when live coding. The point of this demo is not about providing great UX, but to illustrate how the basic thi.ng/pointfree language infrastructure can be easily extended/adapted/integrated...

    Demo:
    demo.thi.ng/umbrella/pointfree

    Source code:
    github.com/thi-ng/umbrella/tre

    (Note: The source code of the actual language bindings for the geometry operations is not shown here, but available in the `lang.ts` file, linked above...)

    #Forth #Pointfree #Concatenative #Programming #Geometry #Graphics #SVG #GenerativeArt #GenerativeDesign #TypeScript #JavaScript #ThingUmbrella

    #howtothing #forth #pointfree #concatenative #programming #geometry
  13. Karsten Schmidt @[email protected] ·

    #HowToThing #028 — Randomized, space-filling, nested 2D grid layout generator using thi.ng/layout & thi.ng/transducers

    Already gave a glimpse of this yesterday[1]. This example uses the new `StackedLayout` generator to create random multi-column base layouts and allocate cells of varying sizes (column/row spans). Depending on size, each cell also has a probability to produce nested child layouts in its place (up to 4 levels). The example also shows how the layout gen can be queried to determine & allocate any remaining empty space(s) at the bottom of each nesting level (since it's highly likely that there's such)... The result is a completely space-filling grid layout (which the new thi.ng website will likely be based on too, obviously with some of the more sane/usable/responsive configurations...)

    Demo (reload for random config):
    demo.thi.ng/umbrella/layout-gr

    Source code:
    github.com/thi-ng/umbrella/blo

    If you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):

    github.com/thi-ng/umbrella/dis

    Ps. It's also #ReleaseMonday — check main thi.ng/umbrella readme for latest updates/changelogs... 🚀

    [1] mastodon.thi.ng/@toxi/11131735

    #ThingUmbrella #Grid #Layout #GenerativeDesign #GenerativeArt #TypeScript #JavaScript #GUI #Frontend #Tutorial

    #howtothing #releasemonday #thingumbrella #grid #layout #generativedesign
  14. Karsten Schmidt @[email protected] ·

    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

    #howtothing #generativedesign #generativeart #layout #algorithm #debugart
  15. Karsten Schmidt @[email protected] ·

    #HowToThing #024 — 2.5D hidden line DEM heightmap visualization featuring: image pre-filtering (customizable gaussian blur), bicubic subpixel image sampling, timesliced geometry generation and hidden line clipping, canvas drawing & SVG export from the same source geometry etc. All in ~85 lines of code (rest is comments & imports)

    For the #GIS crowd: The attached images are of DEMs sourced from USGS (earthexplorer.usgs.gov/) and are showing regions near/around two of my fave mountains[1]: Mt St. Helens (WA), Mt. Jefferson (OR), plus Amargosa Valley (NV) north-east of Death Valley

    Demo:
    demo.thi.ng/umbrella/geom-terr

    Source code:
    github.com/thi-ng/umbrella/tre

    If you have any questions about this topic or packages used here, please reply here or use the discussion forum (or issue tracker):

    github.com/thi-ng/umbrella/dis

    I hope this (and other parts) of this ongoing #HowToThing series are interesting & educational. If so, please consider boosting to increase reach and/or supporting my #OpenSource work via GitHub or Patreon. Thank you very much in advance!

    github.com/sponsors/postspecta
    patreon.com/thing_umbrella

    #ThingUmbrella #GIS #DEM #Heightmap #DataViz #ImageProcessing #SVG #Geometry #GenerativeArt #TypeScript #JavaScript #Tutorial

    [1] cc/ @andrewbriscoe: "your" mountains too...

    #howtothing #gis #thingumbrella #dem #heightmap #dataviz
  16. Karsten Schmidt @[email protected] ·

    #HowToThing #024 — 2.5D hidden line DEM heightmap visualization featuring: image pre-filtering (customizable gaussian blur), bicubic subpixel image sampling, timesliced geometry generation and hidden line clipping, canvas drawing & SVG export from the same source geometry etc. All in ~85 lines of code (rest is comments & imports)

    For the #GIS crowd: The attached images are of DEMs sourced from USGS (earthexplorer.usgs.gov/) and are showing regions near/around two of my fave mountains[1]: Mt St. Helens (WA), Mt. Jefferson (OR), plus Amargosa Valley (NV) north-east of Death Valley

    Demo:
    demo.thi.ng/umbrella/geom-terr

    Source code:
    github.com/thi-ng/umbrella/tre

    If you have any questions about this topic or packages used here, please reply here or use the discussion forum (or issue tracker):

    github.com/thi-ng/umbrella/dis

    I hope this (and other parts) of this ongoing #HowToThing series are interesting & educational. If so, please consider boosting to increase reach and/or supporting my #OpenSource work via GitHub or Patreon. Thank you very much in advance!

    github.com/sponsors/postspecta
    patreon.com/thing_umbrella

    #ThingUmbrella #GIS #DEM #Heightmap #DataViz #ImageProcessing #SVG #Geometry #GenerativeArt #TypeScript #JavaScript #Tutorial

    [1] cc/ @andrewbriscoe: "your" mountains too...

    #opensource #howtothing #gis #thingumbrella #dem #heightmap
  17. Karsten Schmidt @[email protected] ·

    #HowToThing #024 — 2.5D hidden line DEM heightmap visualization featuring: image pre-filtering (customizable gaussian blur), bicubic subpixel image sampling, timesliced geometry generation and hidden line clipping, canvas drawing & SVG export from the same source geometry etc. All in ~85 lines of code (rest is comments & imports)

    For the #GIS crowd: The attached images are of DEMs sourced from USGS (earthexplorer.usgs.gov/) and are showing regions near/around two of my fave mountains[1]: Mt St. Helens (WA), Mt. Jefferson (OR), plus Amargosa Valley (NV) north-east of Death Valley

    Demo:
    demo.thi.ng/umbrella/geom-terr

    Source code:
    github.com/thi-ng/umbrella/tre

    If you have any questions about this topic or packages used here, please reply here or use the discussion forum (or issue tracker):

    github.com/thi-ng/umbrella/dis

    I hope this (and other parts) of this ongoing #HowToThing series are interesting & educational. If so, please consider boosting to increase reach and/or supporting my #OpenSource work via GitHub or Patreon. Thank you very much in advance!

    github.com/sponsors/postspecta
    patreon.com/thing_umbrella

    #ThingUmbrella #GIS #DEM #Heightmap #DataViz #ImageProcessing #SVG #Geometry #GenerativeArt #TypeScript #JavaScript #Tutorial

    [1] cc/ @andrewbriscoe: "your" mountains too...

    #howtothing #gis #thingumbrella #dem #heightmap #dataviz
  18. Karsten Schmidt @[email protected] ·

    #HowToThing #024 — 2.5D hidden line DEM heightmap visualization featuring: image pre-filtering (customizable gaussian blur), bicubic subpixel image sampling, timesliced geometry generation and hidden line clipping, canvas drawing & SVG export from the same source geometry etc. All in ~85 lines of code (rest is comments & imports)

    For the #GIS crowd: The attached images are of DEMs sourced from USGS (earthexplorer.usgs.gov/) and are showing regions near/around two of my fave mountains[1]: Mt St. Helens (WA), Mt. Jefferson (OR), plus Amargosa Valley (NV) north-east of Death Valley

    Demo:
    demo.thi.ng/umbrella/geom-terr

    Source code:
    github.com/thi-ng/umbrella/tre

    If you have any questions about this topic or packages used here, please reply here or use the discussion forum (or issue tracker):

    github.com/thi-ng/umbrella/dis

    I hope this (and other parts) of this ongoing #HowToThing series are interesting & educational. If so, please consider boosting to increase reach and/or supporting my #OpenSource work via GitHub or Patreon. Thank you very much in advance!

    github.com/sponsors/postspecta
    patreon.com/thing_umbrella

    #ThingUmbrella #GIS #DEM #Heightmap #DataViz #ImageProcessing #SVG #Geometry #GenerativeArt #TypeScript #JavaScript #Tutorial

    [1] cc/ @andrewbriscoe: "your" mountains too...

    #opensource #tutorial #javascript #typescript #generativeart #geometry
  19. Karsten Schmidt @[email protected] ·

    #HowToThing #024 — 2.5D hidden line DEM heightmap visualization featuring: image pre-filtering (customizable gaussian blur), bicubic subpixel image sampling, timesliced geometry generation and hidden line clipping, canvas drawing & SVG export from the same source geometry etc. All in ~85 lines of code (rest is comments & imports)

    For the #GIS crowd: The attached images are of DEMs sourced from USGS (earthexplorer.usgs.gov/) and are showing regions near/around two of my fave mountains[1]: Mt St. Helens (WA), Mt. Jefferson (OR), plus Amargosa Valley (NV) north-east of Death Valley

    Demo:
    demo.thi.ng/umbrella/geom-terr

    Source code:
    github.com/thi-ng/umbrella/tre

    If you have any questions about this topic or packages used here, please reply here or use the discussion forum (or issue tracker):

    github.com/thi-ng/umbrella/dis

    I hope this (and other parts) of this ongoing #HowToThing series are interesting & educational. If so, please consider boosting to increase reach and/or supporting my #OpenSource work via GitHub or Patreon. Thank you very much in advance!

    github.com/sponsors/postspecta
    patreon.com/thing_umbrella

    #ThingUmbrella #GIS #DEM #Heightmap #DataViz #ImageProcessing #SVG #Geometry #GenerativeArt #TypeScript #JavaScript #Tutorial

    [1] cc/ @andrewbriscoe: "your" mountains too...

    #howtothing #gis #thingumbrella #dem #heightmap #dataviz
  20. Karsten Schmidt @[email protected] ·

    #HowToThing #023 — Responsive & reactive image gallery with tag-based Jaccard similarity ranking/filtering using thi.ng/bitfield, thi.ng/rstream & thi.ng/rdom

    A quite common comment about #ThingUmbrella is that people often have little idea what some of the ~185 packages are even good/intended for and/or how to synthesize solutions from these small, individual building blocks. IMHO this is less about these packages themselves and more down to existing blank spots about the underlying concepts, algorithms and their potential role/utility in a larger problem domain... So I very much hope this new example is also useful in this respect!

    Alas, the full code for this got pretty long and contains a lot more UI stuff. I'm intending to develop this further for the new homepage to browse all ~135 #ThingUmbrella examples (and maybe even for parts of the thi.ng website itself)... For those of you interested in more "advanced" thi.ng/rdom examples, do check it out!

    Background info:
    en.wikipedia.org/wiki/Jaccard_

    Demo:
    demo.thi.ng/umbrella/related-i

    Full source code:
    github.com/thi-ng/umbrella/tre

    The important parts re: using compact binary encoding, bitfields & Jaccard similarity to find related items are here:

    github.com/thi-ng/umbrella/blo

    #ThingUmbrella #Tagging #Statistics #Similarity #Ranking #Bitfield #TypeScript #JavaScript #UI #Frontend #Reactive #Tutorial

    #howtothing #thingumbrella #tagging #statistics #similarity #ranking
  21. Karsten Schmidt @[email protected] ·

    #HowToThing #023 — Responsive & reactive image gallery with tag-based Jaccard similarity ranking/filtering using thi.ng/bitfield, thi.ng/rstream & thi.ng/rdom

    A quite common comment about #ThingUmbrella is that people often have little idea what some of the ~185 packages are even good/intended for and/or how to synthesize solutions from these small, individual building blocks. IMHO this is less about these packages themselves and more down to existing blank spots about the underlying concepts, algorithms and their potential role/utility in a larger problem domain... So I very much hope this new example is also useful in this respect!

    Alas, the full code for this got pretty long and contains a lot more UI stuff. I'm intending to develop this further for the new homepage to browse all ~135 #ThingUmbrella examples (and maybe even for parts of the thi.ng website itself)... For those of you interested in more "advanced" thi.ng/rdom examples, do check it out!

    Background info:
    en.wikipedia.org/wiki/Jaccard_

    Demo:
    demo.thi.ng/umbrella/related-i

    Full source code:
    github.com/thi-ng/umbrella/tre

    The important parts re: using compact binary encoding, bitfields & Jaccard similarity to find related items are here:

    github.com/thi-ng/umbrella/blo

    #ThingUmbrella #Tagging #Statistics #Similarity #Ranking #Bitfield #TypeScript #JavaScript #UI #Frontend #Reactive #Tutorial

    #howtothing #thingumbrella #tagging #statistics #similarity #ranking
  22. Karsten Schmidt @[email protected] ·

    #HowToThing #023 — Responsive & reactive image gallery with tag-based Jaccard similarity ranking/filtering using thi.ng/bitfield, thi.ng/rstream & thi.ng/rdom

    A quite common comment about #ThingUmbrella is that people often have little idea what some of the ~185 packages are even good/intended for and/or how to synthesize solutions from these small, individual building blocks. IMHO this is less about these packages themselves and more down to existing blank spots about the underlying concepts, algorithms and their potential role/utility in a larger problem domain... So I very much hope this new example is also useful in this respect!

    Alas, the full code for this got pretty long and contains a lot more UI stuff. I'm intending to develop this further for the new homepage to browse all ~135 #ThingUmbrella examples (and maybe even for parts of the thi.ng website itself)... For those of you interested in more "advanced" thi.ng/rdom examples, do check it out!

    Background info:
    en.wikipedia.org/wiki/Jaccard_

    Demo:
    demo.thi.ng/umbrella/related-i

    Full source code:
    github.com/thi-ng/umbrella/tre

    The important parts re: using compact binary encoding, bitfields & Jaccard similarity to find related items are here:

    github.com/thi-ng/umbrella/blo

    #ThingUmbrella #Tagging #Statistics #Similarity #Ranking #Bitfield #TypeScript #JavaScript #UI #Frontend #Reactive #Tutorial

    #howtothing #thingumbrella #tagging #statistics #similarity #ranking
  23. Karsten Schmidt @[email protected] ·

    #HowToThing #023 — Responsive & reactive image gallery with tag-based Jaccard similarity ranking/filtering using thi.ng/bitfield, thi.ng/rstream & thi.ng/rdom

    A quite common comment about #ThingUmbrella is that people often have little idea what some of the ~185 packages are even good/intended for and/or how to synthesize solutions from these small, individual building blocks. IMHO this is less about these packages themselves and more down to existing blank spots about the underlying concepts, algorithms and their potential role/utility in a larger problem domain... So I very much hope this new example is also useful in this respect!

    Alas, the full code for this got pretty long and contains a lot more UI stuff. I'm intending to develop this further for the new homepage to browse all ~135 #ThingUmbrella examples (and maybe even for parts of the thi.ng website itself)... For those of you interested in more "advanced" thi.ng/rdom examples, do check it out!

    Background info:
    en.wikipedia.org/wiki/Jaccard_

    Demo:
    demo.thi.ng/umbrella/related-i

    Full source code:
    github.com/thi-ng/umbrella/tre

    The important parts re: using compact binary encoding, bitfields & Jaccard similarity to find related items are here:

    github.com/thi-ng/umbrella/blo

    #ThingUmbrella #Tagging #Statistics #Similarity #Ranking #Bitfield #TypeScript #JavaScript #UI #Frontend #Reactive #Tutorial

    #tutorial #reactive #frontend #ui #javascript #typescript
  24. Karsten Schmidt @[email protected] ·

    #HowToThing #023 — Responsive & reactive image gallery with tag-based Jaccard similarity ranking/filtering using thi.ng/bitfield, thi.ng/rstream & thi.ng/rdom

    A quite common comment about #ThingUmbrella is that people often have little idea what some of the ~185 packages are even good/intended for and/or how to synthesize solutions from these small, individual building blocks. IMHO this is less about these packages themselves and more down to existing blank spots about the underlying concepts, algorithms and their potential role/utility in a larger problem domain... So I very much hope this new example is also useful in this respect!

    Alas, the full code for this got pretty long and contains a lot more UI stuff. I'm intending to develop this further for the new homepage to browse all ~135 #ThingUmbrella examples (and maybe even for parts of the thi.ng website itself)... For those of you interested in more "advanced" thi.ng/rdom examples, do check it out!

    Background info:
    en.wikipedia.org/wiki/Jaccard_

    Demo:
    demo.thi.ng/umbrella/related-i

    Full source code:
    github.com/thi-ng/umbrella/tre

    The important parts re: using compact binary encoding, bitfields & Jaccard similarity to find related items are here:

    github.com/thi-ng/umbrella/blo

    #ThingUmbrella #Tagging #Statistics #Similarity #Ranking #Bitfield #TypeScript #JavaScript #UI #Frontend #Reactive #Tutorial

    #howtothing #thingumbrella #tagging #statistics #similarity #ranking
  25. Karsten Schmidt @[email protected] ·

    #HowToThing #022 — Quasi-random lattice generator using thi.ng/lowdisc and thi.ng/geom-voronoi

    These infinite and parametric low-discrepancy sequence generators can be used to produce n-dimensional samples/points and are useful for a whole range of graphics (and more generally sampling related) topics and generative design techniques. The example also shows basic usage of the 2D Delaunay/Voronoi mesh, incl. obtaining cells which can be automatically clipped against a user-provided convex boundary polygon.

    Demo (reload to randomize):
    demo.thi.ng/umbrella/quasi-lat

    Source (more comments than code 😎):
    github.com/thi-ng/umbrella/tre

    Further reading:
    extremelearning.com.au/unreaso
    en.wikipedia.org/wiki/Low-disc

    #ThingUmbrella #Voronoi #Quasicrystal #Generative #Graphics #LowDiscrepancy #Sampling #Geometry #TypeScript #JavaScript #Tutorial

    #howtothing #thingumbrella #voronoi #quasicrystal #generative #graphics
  26. Karsten Schmidt @[email protected] ·

    #HowToThing #021 — Iterative animated convex polygon subdivision and heat map visualization (using poly area as metric)

    The main aspect of this example is to show various thi.ng/geom shape types, operations & conversions to solve the problem of iteratively dividing convex polygons, whilst considering some aesthetic and geometric constraints. E.g. using the polygon/polyline sampler from thi.ng/geom-resample to query the poly boundary, finding & splitting the longest edge, using ray casting to find the opposite split point on the boundary, adding & constraining random variance...

    The second part deals with applying this subdivision iteratively, assigning shape colors based on area, animating the whole process and drawing everything to a canvas...

    There's a lot to take in here, but all is commented & hope it's not too much for one example! (Please do let me know!)

    Demo:
    demo.thi.ng/umbrella/poly-subd

    Source code:
    github.com/thi-ng/umbrella/blo

    The attached animations illustrate the varying split positions (and resulting aspect ratios) and increasing random variance/jitter...

    #ThingUmbrella #GenerativeArt #Geometry #Polygon #Subdivision #TypeScript #JavaScript #Tutorial

    #howtothing #thingumbrella #generativeart #geometry #polygon #subdivision
  27. Karsten Schmidt @[email protected] ·

    #HowToThing #008 — CSV parsing & filtering into structured data via thi.ng/csv and creating a multi-plot data visualization via thi.ng/viz (along with a range of other helpful packages for various side aspects).

    The attached visualization shows a lin-log plot of new COVID cases between March 2020 - Dec 2021:

    - Daily world total as line plot
    - UK (red) and USA (blue) cases as interleaved bar plots

    (All data from: ourworldindata.org/coronavirus)

    Full source code:
    gist.github.com/postspectacula

    #ThingUmbrella #Transducers #TypeScript #JavaScript #DataViz #CSV #SVG #Tutorial

    #howtothing #thingumbrella #transducers #typescript #javascript #dataviz
  28. Karsten Schmidt @[email protected] ·

    #HowToThing #003 Tracking multiple key states and extracting high-level commands from key sequences via thi.ng/rstream & thi.ng/transducers-fsm. The key sequences are stored as a trie and matched via a transducer-based finite state machine.

    Btw. The new example #125 of the thi.ng/umbrella monorepo shows an extended version of this approach...

    Demo:
    demo.thi.ng/umbrella/rdom-key-

    Source:
    github.com/thi-ng/umbrella/tre

    #ThingUmbrella #TypeScript #JavaScript #FSM #Transducers #Tutorial

    #howtothing #thingumbrella #typescript #fsm #javascript #transducers
  29. Karsten Schmidt @[email protected] ·

    Announcing #HowToThing, small code snippets illustrating useful patterns and use cases for various libraries/projects in the thi.ng ecosystem/anti-framework...

    #HowToThing #001:
    Build a FPS counter with moving average w/ thi.ng/transducers

    Source code in alt text

    (Ps. Have been trying to start similar stuff in the past on the birdsite, but let's see if I can control my attention and be more consistent this time... If you have any topic requests, please reply below [or via DM])

    #ThingUmbrella #TypeScript #JavaScript #FunctionalProgramming #Transducers #Tutorial

    #howtothing #thingumbrella #typescript #functionalprogramming #transducers #javascript