Predicting the future with Mystic Mark – Part I
Using the new gradient features for effect

by Mark Waddingham

Predicting the future with Mystic Mark - Part I

Introduction

One of the new features in Revolution 3.0 is the ability to fill objects with different kinds of gradient. Indeed, Revolution now supports 7 different kinds of gradient together with all the usual options you'd expect from them: arbitrary list of colors to interpolate between, 2d transformation, repetition, wrapping etc. Indeed, here are some examples of gradients produced in Revolution:

For those of you who can't wait to tell what might be happening to you tomorrow, or even in the next hour, you can access the stack by bring up the Message Box and executing:

go stack URL "http://www.runrev.com/newsletter/september/issue56/runrev_crystal_ball.rev"

Do remember to state your question out loud before clicking the Predict! button though - everyone knows the predictive powers won't work otherwise!

Inspiration

This stack is composed of a collection of radial gradient fills, with different sets of colors, all transformed in different ways. For something so simple, it really is remarkably effective. Indeed, the visual effect is achieved by layering the following graphic objects from bottom to top:

• Back Shadow - a circular radial gradient from black to white

• Under Shadow - an elliptical radial gradient from black to white

• Backdrop - a solid blue colored circle

• Glow 1, Glow 2, ..., Glow 5 - a colletion of partially transparent radial gradients all with different colors and transformations

• Hilight - a subtle white and partially transparent elliptical gradient

I was set to wondering what would the effect would be if the Glow gradients were animated...

Application

The result of these wonderings was the RunRev Crystal Ball - a little program that claims to predict the future in a visually pleasing manner.

The function of the program is quite straight-forward. Clicking the predict button causes the following chain of events:

• The current 'answer' is faded out and the glows begin to fade in and speed up

• The glows reach full opacity and speed and continue to move for a randomly determined length of time.

• After this length of time, a prediction is made and the label is updated.

• Finally, the glows fade out and slow down while the label fades in.

All of this is driven by a standard Revolution pending message system and the functionality is all present in the card script. I won't go into any more detail about this script now as this will be the subject of subsequent articles.

Customization

The way the animation is implemented allows a certain amount of customization without altering the script in any way. The best way to see what is going on in the first instance is to (temporarily!) remove some of the glows that are jumping around.

To do this, open up the Application Browser and take a look at the list of objects on the Main card of stack RunRev Crystal Ball. In the object list you will see the five Glow objects - named Glow 1, Glow 2, Glow 3, Glow 4 and Glow 5. These are the objects that are being animated when you click Predict!.

What we want to do is to focus on the action of one of them - this is easily achieved by hiding all but one. You can do this by clicking on the tick in the 'visiblity' column - do this for all the Glows apart from Glow 3:

Indeed, this motion is entirely controlled by 3 custom properties which are set on each Glow object and you are free to change these to whatever you wish.

To try this, return to the Application Browser and right click on Glow 3, and choose to bring up the Property Inspector. Navigate to the Custom Properties pane and you should see something like this:

• uOrigin determines the central point around which the Glow moves

• uStart determines the starting point 'at time zero' - mainly this is used to determine how far away from the central point the Glow should remain

• uSpeed determines how fast the Glow should move

Indeed, try changing one for yourself. Select uSpeed and enter the value -0.05 in the Property Contents field. If you then return to the Crystal Ball stack and click Predict! you should see the effect immediately - the Glow moves much more slowly than it previously did.

Psychedelia

Apart from adjusting the custom properties described above for each Glow you are also free to adjust the gradients in any way you choose too. For example, a some what psychedelic effect is really easy to achieve.

First of all revert the stack to the original version - just Close and Remove Stack From Memory... (an option in the File menu) and then reissue the Message Box command:

go stack URL "http://www.runrev.com/newsletter/september/issue56/runrev_crystal_ball.rev"

Now return to the Application Browser, and bring up the Property Inspector for Glow 3 again. This time, however, navigate to the Gradients pane.

Then configure it as follows:

• Choose Conical from the Type drop-down

• Enter 30 into the Repeat field

• Check both Mirror and Wrap

  
  

This should result in something like this:

Next time

In this article I've given a brief overview of the RunRev Crystal Ball stack and explained how the animation can be customized by just using the Property Inspector. Even the relatively small number of parameters that can be adjusted through this can give a huge variety of effects!

In the next part I'll be delving deeper into the stack, taking it apart and showing how the animation effect is implemented using an application of some simple geometry.

Have fun predicting!