Yes, it’s a late addition to that library. The dancing text demo uses the “weighted exclusion” feature of the VMPrint engine, which essentially creates an object composed of horizontal bars. However, the engine also offers another mode that constructs exclusion objects by combining primitive shapes like circles and polygons. This “stick” demo demonstrates that. In doing so, I added a small set of APIs to allow programmatic control over these primitive parts, which essentially turns this into a rudimentary rigging system. I’m uncertain about its practicality in real-world applications, but it was interesting to observe.
I’m glad that you’re trying the Layoutmaster library in your projects. You can also feed it video with a predominantly white background (or any other solid color). Additionally, the video can contain multiple objects, and the algorithm treats them uniformly.
Nice work! Haven’t seen anything like this before. It makes me happy that people do stuff like this. Small experiments often open up big new design ideas.
Thank you! This can make it quite easy to create demos like those “dragon swimming through text” animations that became popular recently. I had no idea what other real-world applications we could use it for, but it was fun to be able to do it, LOL.
I have no idea what this is about. I see no stick figure or anything interactive, when I open this on my iPhone. I’d does say Idle below the reset button though. To make things worse, if you scroll down, you can’t scroll back to page top. I assume the main area intercepts the touch events, blocking scrolling…
I did not make the demo specifically for mobile browsers, but it does work rather well on my iPhone 16e with Safari and Chrome. I also tried it on my Pixel 10 and did not encounter any issues. The library itself is tiny ~250K so it should load right away.
LOL sorry my bad. Should have been more specific. It’s a demo of my layout library. The stick figure is made with a few primitives to form a so-called exclusion assembly which causes texts to flow around them. But what’s unique about it is that these primitive parts can be controlled independently via programmatic control. This turns them into a little rig essentially. I thought it was funny and could be even useful so I shared it.
It's strange that happened. I had no issue loading it on my iPhone 16e in Safari or Chrome... Could it be somehow your browser prevent Javascript from loading?
Quite neat! Seems like a very fun library. This demo is very similar to what was posted as well:
https://cosmiciron.github.io/layoutmaster/dancing-text.html
Can see how this could make a few useful "splash" pages on projects I'm working on now. Just need to prep a video with a proper green screen.
---
Definitely have to attribute this to some of the better web APIs that have become standardize over the last 10 years.
While we aren't close to replicating the ease of flash, modern animation techniques have closed the gap considerably.
Also anything to move away from greensock is always a plus in my book.
Yes, it’s a late addition to that library. The dancing text demo uses the “weighted exclusion” feature of the VMPrint engine, which essentially creates an object composed of horizontal bars. However, the engine also offers another mode that constructs exclusion objects by combining primitive shapes like circles and polygons. This “stick” demo demonstrates that. In doing so, I added a small set of APIs to allow programmatic control over these primitive parts, which essentially turns this into a rudimentary rigging system. I’m uncertain about its practicality in real-world applications, but it was interesting to observe.
I’m glad that you’re trying the Layoutmaster library in your projects. You can also feed it video with a predominantly white background (or any other solid color). Additionally, the video can contain multiple objects, and the algorithm treats them uniformly.
Nice work! Haven’t seen anything like this before. It makes me happy that people do stuff like this. Small experiments often open up big new design ideas.
Thank you! This can make it quite easy to create demos like those “dragon swimming through text” animations that became popular recently. I had no idea what other real-world applications we could use it for, but it was fun to be able to do it, LOL.
I have no idea what this is about. I see no stick figure or anything interactive, when I open this on my iPhone. I’d does say Idle below the reset button though. To make things worse, if you scroll down, you can’t scroll back to page top. I assume the main area intercepts the touch events, blocking scrolling…
Whenever a web page doesn't work I try a different browser. You can do that on an iPhone right?
I did not make the demo specifically for mobile browsers, but it does work rather well on my iPhone 16e with Safari and Chrome. I also tried it on my Pixel 10 and did not encounter any issues. The library itself is tiny ~250K so it should load right away.
It kills drag scroll over the flow text on my android
iPhones have different browsers, but they don't have different browser engines. It's WebKit or nothing.
LOL sorry my bad. Should have been more specific. It’s a demo of my layout library. The stick figure is made with a few primitives to form a so-called exclusion assembly which causes texts to flow around them. But what’s unique about it is that these primitive parts can be controlled independently via programmatic control. This turns them into a little rig essentially. I thought it was funny and could be even useful so I shared it.
It's strange that happened. I had no issue loading it on my iPhone 16e in Safari or Chrome... Could it be somehow your browser prevent Javascript from loading?
It works on my Android phone with Vivaldi, though I need to be careful because the text doesn't allow me to scroll
You can use primitive exclusion assemblies to create a rig and programmatically control it to animate a layout in Layoutmaster.
Context: this is a demo of a deterministic layout calculation library https://github.com/cosmiciron/layoutmaster#dancing-text (not affiliated, I was just confused so saving you a click)
Thanks for the help and clarification.