Motion of interconnected objects

Lets consider the links in a chain, if you move the 1st link, the others will move but each one in a specific manner. Chain links are interconnected objects.
I do not see a way to program that with Hype since its interface offers no element-binding tool.

I tried using javascript to compute the motion of link-2 to n from the motion of link-1 but I miss a way to synchronise the scripted animation with the curse of a Hype timeline.

I failed synchronising a script placed in “Head HTML” or in a “Widget HTML” with a Hype timeline. Is there a Hype API or some global variable I missed ?

I tried a script in “Head HTML” and set a timer using setTimeout and clearTimeout. This leads to the scripted animation being performed only once Hype has finished its own animation. No real time synchronisation again.

Any suggestion ?

https://cloud.ill.fr/index.php/s/IWZQHkgnAjubiKB
Here an example of the “Widget HTML” I tried to develop but which I failed to synchronise with a Hype timeline.

You can’t do this with Hype ( at least not yet) there will be future versions that open out the Physics API. That being said, you can place a “canvas” inside Hype and use the code you posted. Depending on what you’ve got though, Hype does have an API with methods that allow you to control Timeline’s but without any information it’s difficult to say anymore.

1 Like

@linus

As I understand it the hypeDocument is not fully loaded when scripts run in the "Head HTML" so You will not be able to access timelines with Hype's API at that point.

Also, as I understand things (i.e. read about them - not actually experimented) You are facing an issue with iFrame > Parent communications... where the recommended practice is postMessage().

Please see this thread for the discussion - it might prove illuminating in solving your issue:

Here is an example Hype project from that thread (near bottom) posted by @jangeltun:
iFrame communication.zip (220.9 KB)

Many thanks, I will dig your answers and try to build a working demo.
My impression was that I can only start/stop a Hype timeline from a script or execute scripts at predefined points of a timeline.
What I am looking for is a way to have a Hype object which, when moving, drags with him other objects i.e. both Hype and scripted objects moving simultaneously and with synchronised movements inherited (computer) one from the other. Since Hype cannot attach objects one to the other, I tried with “canvas” inside Hype but failed. I will try the suggestion of JimScott and let you know.
Here a draft of my animation (the bottom one) but with no synchronisation between the top left pane and the bottom one, just a trial and error adjustment.
<https://www.ill.eu/about-ill/contacts/public-relations/afilhol/development/draft-movies-animations/reflectometry/>

@linus

Hi Alain!

My previous post was about communicating~synchronizing~controlling the parent timeline (from an iFrame). My suggestion will not help with binding or linking elements in Hype… or maybe I have not understood your last post correctly.

Nice presentation (your link just above) - which leads me to my next question…

What are You trying to accomplish with your Hype project? What I saw was a video output with a basic animation routine.

These animations could certainly be done manually using Hype’s built-in animation capabilities - specifically using “motion paths” - which are by default synchronized with a timeline. They wouldn’t be that difficult (based on the demos you have presented); and most likely less time to create than your scripted version.

Or - are You trying to programmatically create these animations for your own particular reasons?
Which would separate your creative efforts from Hype’s built-in interface.


Attached is an example of “linkage” in Hype… a basic animation I did manually for this post in under 15 minutes utilizing “motion paths” (not perfect - e.g. the “meshing” of the gear teeth); while You won’t create 100 interlocking chain links in a free fall with this approach - the tools in Hype’s existent interface can create a variety of sophisticated “linked” animations - just not at the push of a button or a few text field entries.

Along these lines…
Whatever the scriptable “organic” API physics in Hype v4 - there will be limitations - and another round of
“I wish Hype could do this.”

Not actually sure what this “machine” is supposed to be doing!

1 Like

Hi Jim,

Thank you again for all those explanations that makes me discover unknown options of Hype. I will experiment next week.

*Nice presentation (your link just above)"
Thank you. This draft is a kind of proof of concept.

"What I saw was a video output with a basic animation routine.
No interactivity because this is a draft.

  • the motion of each object (light beam in my case) is not linear but implies some trigonometric functions and I got the impression that doing it by hand would be too difficult. I understand that I have to discover “motion paths”.
  • the final number of beams will be larger. With javascript, adding a beam is a mere extra call to a function.
  • in case of deployment in several sizes, the scripted animation will auto-adjust itself to the available space. My tests with Hype’s rescalling were often deceptive but I may have missed something.
  • my current draft is not interactive but my goal is to give user the control of motions in both the top-left and bottom pane (just a dream !).

" Or - are You trying to programmatically create these animations for your own particular reasons?"
I did that because I failed to synchronise the motions of the various beams (within the bottom pane) and still fail to synchronise motions of the top-left and bottom panes.
A drawback of my workaround is that I cannot implement a Pause button, or can I ? I know how to pause the Hype timeline but the timeline of the widget seems to Iive its own life.

"These animations could certainly be done manually using Hype’s built-in animation capabilities - specifically using “motion paths” - which are by default synchronized with a timeline."
This is very interesting. I will have a look at it next week when my grandchildren will be at school! :slight_smile:

To be honest I know very little about web programming and my javascript code is a grab of examples looted on the internet hence my difficulties in apprehending the mysteries of communications between objects, canvas, frames, etc.
.
Many thanks for your advises and your understanding.

1 Like

@linus

Here is a Hype demo using motion paths (based your previous example): Beams_JHSv1.hype.zip (54.0 KB)

Note #1
This demo is a scalable with the resizing of the web page. I have chosen to use Hype's "On Drag" event to animate the timeline rather than a "Play~Pause" type of interface - though "Play~Pause" could be easily substituted as we are working from a timeline.

Select the "Set-up"group in the Timeline layers > then view "Actions Inspector" panel > "On Drag".

Additionally, the demo is intended to show a general concept & is not intended as a full rendition of all the features You have delineated in your previous post.

Video Demo showing this "drag" interface:


Note #2
The various "background colors" (e.g. light blue & dark blue) are gathered into "groups" (folder icons) which contain various elements that are "masked". i.e. Each group has its "Content Overflow" set to "hidden" - anything outside of the group's boundaries is hidden - which is how we create the reflecting & refracting beams, which are synchronized (manually) with each individual group's light rays... just a "heads up" - will make more sense when You view the Hype project.


Note #3 -- Critical!

In the Hype interface you can select the locus point of an element to be used in a rotation:
"Metrics Inspector" panel > "Transform Origin"(at bottom)...

TransformOrign


A visual representation of sample locus points on an element:RotationPoints

Example: A setting of ("x= 0" "y=50") is what I used to created the refraction beam "Beam Refract #2" - i.e. it rotated about the left side of the "beam" rectangle (x= 0) with a (left side) vertical midpoint (y= 50) - and its "Origin (Left)" property continuously adjusted every 5 frames; additionally the opacity was also animated during this transformation (10% - 30%).

You can also use negative numbers to effect rotation around a point external to the element - think a planet (element) rotating around the Sun (external point).


Is everything clear? :open_mouth:

Thanks for being part of the Forum!

2 Likes

A few high-level and random points from looking at the demos you’ve posted:

  • Depending on your needs, you may have better results doing this all in one Hype document than widget approach. If done this way, you can just use a single timeline, and hence everything will be synchronized by default.
  • As @JimScott’s document shows, you can use the “On Drag” handler to control a timeline
  • If you were to use multiple documents/widgets, you could always pause the Hype timeline, and use the hypeDocument.goToTimeInTimeline() API to set whatever time you need. And on the flip side in the Hype document you could add a JavaScript handler to the OnDrag event and get the position to send/bind to other widgets. This setup of course requires a bit of code!
  • For flexible layout, you may want to add items to a group and use the “Zoom Contents” check box flexible layout option with a proportional scaling behavior to get everything in the group to scale together

Thank you again for all your suggestions and the demo of JimScott. I am not sure I understand everything right now but I will experiment in the following days. I have other scientific animations in project and thus I badly need a better understanding of both the animation mechanisms and the power of scripts.
If I make any progress I will show you the result for advice and criticism. Thank you again for your responsiveness. I do appreciate all the efforts you make to help non expert Hype users. Hype is great !

1 Like