5.3 Putting a bounce into the Reflections style

The Reflections style that comes with muvee Reveal, by design, does not react much to the music track. We’ll use that as an opportunity and make pictures bounce to music. In the process, you’ll learn about animating effect parameters and how to access information about the music track and use that information to determine an effect’s behaviour.

This tutorial needs you to be familiar with Getting Started. We’ll also be getting into some depth coding up effect animations in muSE, so it helps to familiarize yourself with (at least) the basics of muSE in A Gentle Introduction to muSE.

5.3.1 STAGE 1 : Preparation

Style: S10000_ReflectionsWithABounce_Stage1

Launch muvee Reveal, add some pictures to the media panel and select your Reflections with a bounce style.

5.3.2 STAGE 2 : Flight check

Style: S10000_ReflectionsWithABounce_Stage2

In order to bounce the pictures, we need to move it up and down in a specific pattern. We therefore need to use the Translate effect on the pictures, animating the y parameter to do the bounce.

We first do a simple exercise to make sure we can translate pictures correctly - we just move the pictures from the reflecting floor by a fixed amount. Keeping in mind that positive values of y give you upward movement and negative values give you downward movement, we apply a Translate effect on the pictures with a y value of 0.2.

We want to apply the translation to each picture *before* it is placed on the reflecting surface and the paraphernalia (stars, circles, etc.) get added. We therefore need to look for muvee-segment-effect and insert the translation at the segment level.

Segment level effects

• From the muveeStyleBrowser, open your style’s "data.scm" file by right clicking on your style and selecting Edit data.scm. For the rest of the tutorial, you can keep muvee Reveal and your text editor for the "data.scm" file open simultaneously.

• Locate the definition point of muvee-segment-effect in the "data.scm" file.

The captions-fx specifies how to place a picture’s captions on it and the reflection-and-polygons-fx specifies that the picture together with it caption text has to be reflected on a shiny surface and should have some sprites moving about on the floor.

• Add a bounce definition and insert it into the effect-stack as shown below -

  ; ---- Add the following definition ----

  (define bounce

  (effect "Translate" (A)

  (param "y" 0.2)))

  ; --------------------------------------

  (define muvee-segment-effect

  (effect-stack

  reflection-and-polygons-fx

  captions-fx ; <<-- Remove )) from this line.

  bounce)) ; <<-- Add this line.

• Save your "data.scm" file and click the play button in muvee Reveal while holding down the Shift key. Notice that the picture now floats above the floor instead of sitting on it. So "Translate" works just as it should.

The location of bounce in the effect-stack

(You will need to add some caption text for a picture to tell the difference between placing bounce before and after captions-fx.)

You’ve now got the basic stuff in place. Further on, we’ll focus on exactly how to generate the bounce that we’re looking for.

5.3.3 STAGE 3 : The elementary bounce

Style: S10000_ReflectionsWithABounce_Stage3

If you plot the height of a bouncing object against time, it will look like the following graph -

The bounce-anim function generates one bounce of height height starting from absolute time start and ending at absolute time stop in steps of dt. The time parameter is just to keep track of progress over the animation.

If you tried that out, you’d have found the bounce to be really slow. Lets speed it up by doing many bounces for each picture -

(define bounce

(effect "Translate" (A)

(param "y" 0.0

(bounce-anim 0.2 (progress 0.0) (progress 0.1) (progress 0.0) 1/20)

(bounce-anim 0.2 (progress 0.1) (progress 0.2) (progress 0.1) 1/20)

(bounce-anim 0.2 (progress 0.2) (progress 0.3) (progress 0.2) 1/20)

(bounce-anim 0.2 (progress 0.3) (progress 0.4) (progress 0.3) 1/20)

(bounce-anim 0.2 (progress 0.4) (progress 0.5) (progress 0.4) 1/20)

(bounce-anim 0.2 (progress 0.5) (progress 0.6) (progress 0.5) 1/20)

(bounce-anim 0.2 (progress 0.6) (progress 0.7) (progress 0.6) 1/20)

(bounce-anim 0.2 (progress 0.7) (progress 0.8) (progress 0.7) 1/20)

(bounce-anim 0.2 (progress 0.8) (progress 0.9) (progress 0.8) 1/20))))

We’re now able to generate multiple bounces for each picture, with the bounce points at the time of our choice. Now, all that’s left is to align the times to appropriate events in the music track.

5.3.4 Interlude: Cut hints

When muvee Reveal analyzes a music file, it detects events such as drum hits. For each such detected event, it records a time-value pair, where the time says when the event occurred and the value (in the range 0.0 to 1.0) says how strong the event is. The events based on broad spectrum analysis of the music data are called cut hints. You can access this data in a style using the cut-hints function. Although cut hints are computed per music file, the cut-hints function consolidates the hints for all the music files used in the muvee’s music track.

Within an effect expression, you can use the start and stop implicit parameters to access the time interval during which the effect will be active. You can therefore extract the cut hints using - (cut-hints start stop).

5.3.5 STAGE 4 : Bouncing to events in the music track.

Style: S10000_ReflectionsWithABounce_Stage4

We want to generate one bounce between every two consecutive cut hints within a picture’s presentation interval. That way, the bounce point will synchronize with the cut hint. But in order to get cut-hints, we need a music track. So go ahead and add some music now. For lack of a better suggestion, you can add the sample music that comes with muvee Reveal which you can find in your "Music" folder. Make sure you put in about 15 pictures for every minute of music that you add.

(define (bounce-to-hints height start stop hints dt)

(case hints

(()

(bounce-anim height start stop start dt))

(((t . v) . hints*)

(bounce-anim height start t start dt)

(bounce-to-hints height t stop hints* dt))))

Make some muvees with different music tracks and watch the pictures bounce to the beat points.

5.3.6 STAGE 5 : Selecting better bounce points

Style: S10000_ReflectionsWithABounce_Stage5

At the end of stage 4, you’ll notice that on some occasions there may be too many bounces or the bounces may be too close to each other for taste. In this stage, we’ll work on selecting a nice set of bounce points for each picture.

(define (select-strongest-hints hints N)

(let ((strongest-to-weakest (sort hints (fn ((t . v)) (- v))))

(N-strongest (take N strongest-to-weakest))

(time-order (sort N-strongest first)))

time-order))

(define bounce

(effect "Translate" (A)

(param "y" 0.0

(bounce-to-hints

0.2

start

stop

(select-strongest-hints (cut-hints start stop) 12)

1/20))))

5.3.7 STAGE 6 : Generating a better bounce

Style: S10000_ReflectionsWithABounce_Stage6

The bounce we have at this point is not very physical. For one thing, the bounce speed seems to vary from one bounce to the next whereas natural objects don’t do that. For natural objects, the bounce duration will be longer only if it bounces higher. The solution to this is therefore quite simple. We make the height of the bounce proportionate to its duration.

Change the definition of bounce-to-hints to -

(define (dur->height start stop)

(math (stop - start) / 5.0))

(define (bounce-to-hints start stop hints dt)

(case hints

(()

(bounce-anim (dur->height start stop) start stop start dt))

(((t . v) . hints*)

(bounce-anim (dur->height start t) start t start dt)

(bounce-to-hints t stop hints* dt))))

.. and the definition of bounce will have to now drop the height parameter to bounce-to-hints.

(define bounce

(effect "Translate" (A)

(param "y" 0.0

(bounce-to-hints

start

stop

(select-strongest-hints (cut-hints start stop) 12)

1/20))))

5.3.8 Beyond