Hype Clip Path (for the Vector-Tool)

“Native” … is also code :slight_smile:

In the next step this will be wrapped in an extension and offered as minified code that runs on every scene load. Much more can’t be offered at this point. The code then kind of disappears into a modular “Runtime” extension. I wish extensions could have more capabilities in the GUI itself because making them keeps the base runtime slim and one could modularize features. But in this case I would be very surprised if this doesn’t end up in the core GUI and runtime.

The extension at this point only requires to be run on scene load and looks for “[data-clip-path]” (meaning an attribute on the element) containing the classname of the vector tool outline. Simple… no coding required!

2 Likes

Looking forward to it :+1:

1 Like

↑ look at project
1.2 Fixed a bug determining if it's a SVG or Group

Experimenting with polygon sampling and also there is a nice chart from Chris Coyier:

PS: I was playing around with point generation along a path so the next update here will most likely include a polygon option instead of only the #url schema. After that a mutation observed option would be nice to update mask changes hence enabling animated masks. The later is still only an idea.

3 Likes

Example Preview:
HypeClipPath_AnimatedMasks.html

Example Download:
Download removed … is now built in since 1.7

Should now also support Adobe Illustrator path objects as mask out of the box. Next up generated Polygone masks and animation on needs basis (hence Hype MutationObserver).

5 Likes

so cool, so modular approach :slight_smile:

all in all you stress @jonathan in a very POSITIVE way :+1:

5 Likes

I hope he feels it that way too :wink:. Much appreciated feedback! I love that Hype offers the flexibility. Now we need that modularity reflected in the IDE and Beginners get the awesome Tumult Introduction with more then enough to learn and use... and Professionals and Companies can build ontop Hype and tweak/extend it to their needs.

1 Like

↑ look at project
1.3 Converted to full extension. Added new methods on hypeDocument

Oh absolutely! I love seeing the work of these -- from a developer's standpoint the extensions act as nice prototypes for what might become built-in features :smiley:. (Not to mention showing the need to making it easier to build such extensions in the first place).

3 Likes

↑ look at project
1.4 Added live preview in IDE

This is a big one and I am proud of it. Uses minimal invasive approach using Mutation Observer. Although having dedicated callbacks from the IDE would make it easier. Works great for now.

4 Likes

Pirate of the HypeScratch :wink: GREAT WORK!

2 Likes

As long as we have "safe" words :open_mouth:

1 Like

That’s going on a T-shirt! :face_with_hand_over_mouth: :joy:

:stuck_out_tongue_winking_eye:

2 Likes

↑ look at project
1.5 Fixed some preview issues (nudging, delay)

Now nudging/moving of elements (clipPath receivers and Vector tool sources) is correctly tracked in the IDE. Animations are previewed correctly but still require Hype AnimationFrame or HypeMutationObserver to be updated once exported. I like the modularity but am thinking about including a Mutation Observer for animation right out of the box (as one would expect).

i’d try so … perhaps with usage of mutationobserver users could be saved from writing js-functions?!

1 Like

↑ look at project
1.6 Fixed some preview issues (zoom)

Sidenote: I added data-clip-path-visible to this release. If it is set alongside data-clip-path the orginial vector outline stays visible in the output (including filling).

magic_mask.hype.zip (35.5 KB)

ah … not that good, but i really like the new possibilities. :slight_smile:

2 Likes

Here is another little fun experiment with Hype ClipPath. It uses Hype MutationObserver to update only when needed (when vector element is dragged). This gives you a custom and morphable searchlight type of mask. For this demo I use the path itself as a drag handle but it could be anything and then you would just update the position of the vector path with setElementProperty.

PS: Uncover the meaning and find a little old friend as a bonus :slight_smile:

Example Preview:
HypeClipPath_DraggableMask.html

Example Download:
HypeClipPath_DraggableMask.hype.zip

5 Likes

I got a little scared by clippy :slight_smile:.