Hey gang - sadly been out of prototyping for awhile, but happily back in again.
I am trying to simulate dragging two nodes on either side of a 4-pt spline, and I’d like the spline to follow the two objects.
I know how to grab the info on the current object, but not how to drive the curve points to match the knots.
Any hints or links?
Enormous thanks in advance, and stay safe in this scary time.
drag_test.hype.zip (17.4 KB)
-Peter
Some approaches come to mind:
a)
You could start playing around and try to manipulate the SVG cornerpints but that is a lot of work and Hype doesn’t provide an interface for that.
b)
You can also just scale the bounding box of the “wire”. In that case you would set the wire to a 100px by 100px box initially and then scale base on the distance of the two drag elements. There is an option in SVG to preserve line width when sacaled instead of squashing it.
c)
You could animate the line (linear ease) going up and down and limit the dragging to one axis (y hence top). Then you could convert the drag position to the timeline offset using a factor like 1 sec = 60 px.
Hi Max - thanks for taking a look. I was about to go with b (go atan2!) and stick with linear curves. Not ideal, but hopefully in the future we can attach things better. Cheers
Here is the idea b but using only regular HTML rectangles and the border attribute:
demo:
Lines-PureHype.html
download:
Lines-PureHype.hype.zip
Er, yeah, that works nicely 
Thank you for going above and beyond!
Hey gang - Thanks to Max, here’s the final project. Making one script per wire was a bit irksome, but this is entirely why I love this software - and the forum.
drag.hype.zip (97.6 KB)
that may have happened because you just duplicated the code for each 
... where it'll need some refactoring to make generic code from the given example (-> which indeed is great @MaxZieb) 
Beyond my ken, and too much to ask of forum members. Max has already done yeoman’s duty here.
Hype inhabits this strange space between Design apps (like Sketch) in which all the data is relatively closed off from the user (ie, apply an expression to distribute points -> cannot be done) and other apps like 3D apps (Maya, Houdini, Cinema4D) in which it can be done easily, or at least, inherently within its design. This in-between position skews the definition of what is Expected because the app is so powerful and yet things like linking positions of two elements cannot be done without coding. This is why I used the word Irksome. To be clear: Max’s solution was a total success for me, and extremely appreciated.
Very cool document. (And yes, this is a great example why data binding with math equations would be a nice boon to Hype’s interaction model.)
