Jumping water animation

Tips & Tricks
1

This is another masking item.

The water arc was created in Photoshop (rather hastily, and without any transparency in the water itself) using interior and exterior shadows within a hoop-shaped mask. A bit of variation was created using the wave distortion filter. The group of layers was duped and the mask was cropped to a 90º arc with rounded ends. The build stages are seen in the series of grouped layers in the Photoshop file.

Import the water arc and set the offset, then keyframe the rotation. Group it to itself and drag the width of the group to contain the full 180º arc and set the overflow to hidden. Drop in a couple of ovals for the two holes. Rotate this to match the perspective. Position the entire group so the left hole is where you want it. If you need to relocate the second hole, do so by moving it on the horizontal axis only. Now resize the water arc to match.

Rotate the group to line up with your photo and test it. Now dupe the water arc, group it to itself, then reduce the brightness, contrast, and opacity. This will be the shadow. Rotate this group forward to lay the shadow at the desired angle. (Note that the angle alters the thickness in the center. If you were doing this for a serious project, you would need to distort the height in Hype to compensate.)

Group everything but the background. To create an additional instance, dupe the whole thing, position it so that the left hole is where you want it, then move the right hole and scale as above. Use the same scale with the water shadow. Note that you will also need to scale the hole as well.

Offset each instance by a few frames and set a timeline action to loop the animation.

Note that Hype does not have a “multiply” feature and, with this image, the darkening of the tiles to the right reduces the effect of the shadow. It is best to have a ground surface of an even tone. Otherwise, you can animate the opacity of the shadow so that it is more opaque towards the end of the arc. In this animation I have set the opacity of the shadow to change from 30% to 80%.

JumpingWaterStream.zip (2.6 MB)

11 Likes
2

I previewed the document before reading your post, and definitely had to dig in to figure out how you did it :slight_smile:. The shadow was also a nice touch I didn’t immediately notice but added a lot to the realism.

Here’s an Animated GIF export so others can see it in action easily:

JumpingWater@2x.gif1200×800 1.17 MB

1 Like
3

A tough problem that I did not address was that this type of water jet has more of an arc to it. What I used was a quarter-round circle. This could be done by reducing the relative width, but it would make the stream appear to change proportions as it reaches and passes the peak.