Perspective view of a rotating wheel

Using JavaScript with Hype
1

I wanted to show a rotating wheel with an oblique view.
I failed to produce that directly with Hype and thus I used javascript.
<http://alain.filhol1.perso.sfr.fr/HTML5/Chopper/chopperJS.html>
the Hype files are here
<http://alain.filhol1.perso.sfr.fr/HTML5/Chopper/AF-Chopper-Sources.zip

The main trick in the javascript code is the line:

elem.style.WebkitTransform = "translate("+c_left+"px,"+c_top+"px) scale("+c_xScale+",1.0) rotate("+degrees+"deg)";

with “Translate” “Scale” “Rotate” being performed one after the other at each time step.
i.e: at each step the circle is rotated, then deformed to an ellipse, then translated
Note that the order is important here and, even if this is odd, I got the impression that they are executed from the right to the left.

My questions is:
Is it possible to do the same thing directly with Hype, i.e. without using javascript ?
As far as I can see:
Hype does not makes it possible to change the order of actions
Hype will not repeat the actions at each step

Thank you for your help.

2

To rotate the circle on the Z axis, use record to set a 360 degree rotation period
To also rotate it a bit on the Y axis, add it to a group, and rotate that group on the Y axis. (Rotating an element on the Z and Y axis would not give you what you need)

You can then use timeline actions to handle the chop (run on a separate timeline) and the loop (just repeat the current scene’s Main Timeline:

chopper.zip (33.8 KB)

2 Likes
3

I know Daniel’s already answered this but this was something I worked on when you posted this but forgot to upload it.

It’s as Daniel says. putting the object in a group means you can animate the spin and then transform the group so that it has perspective. Also I’ve added an animation that reduces the “tube” down as it is cut.

wheelCutter.hypetemplate.zip (114.0 KB)

2 Likes