Simple Animation with View/Draw

Author: Carl Read
This example requires REBOL/View
Return to REBOL Cookbook

Animating the various shapes you can add to a REBOL face with View's Draw dialect is quite simple using a feel function and a few variables. (Feel is used to check for window events.)

As an example, we'll start with a layout that displays three circles in a horizontal row on a black box...

    rebol []
    view layout [
        box 400x400 black effect [
            draw [
                circle 100x200 50
                circle 200x200 50
                circle 300x200 50
            ]
        ]
    ]

To make the animation of these circles possible, we'll first add two variables, POS and SIZE. These we'll use in each circle's arguments to allow us to later change their position and radius. Our script now looks like this...

    rebol []
    pos: 0x0
    size: 0
    view layout [
        box 400x400 black effect [
            draw [
                circle 100x200 + pos 50 - size
                circle 200x200 + pos 50 + size
                circle 300x200 + pos 50 - size
            ]
        ]
    ]

If you run that it'll still look like the first script and won't be animated. However, with POS and SIZE now part of the circles' arguments, when the face is updated using SHOW any changes to POS or SIZE will be reflected in the circles' positions or sizes.

As mentioned above, we'll use a feel function to animate these circles. Two events will be responded to - a timed event to smoothly alter the size and vertical position of the circles and the press of a cursor key to allow the user to change the direction the circles are moving.

So, here's our final, animated script...

    rebol []
    pos: 0x0
    size: 0
    inc: 1
    dir: 2
    view layout [
        b: box 400x400 black "cursor keys for up or down" effect [
            draw [
                circle 100x200 + pos 50 - size
                circle 200x200 + pos 50 + size
                circle 300x200 + pos 50 - size
            ]
        ] rate 30 feel [
            engage: func [face action event][
                switch action [
                    time [
                        size: size + inc
                        pos/y: pos/y - dir
                        if size < -49 [inc: 1]
                        if size > 49 [inc: -1]
                        if pos/y < -200 [dir: -2]
                        if pos/y > 199 [dir: 2]
                        show face
                    ]
                    key [
                        if event/key = 'up [dir: 2]
                        if event/key = 'down [dir: -2]
                    ]
                ]
            ]
        ]
        do [focus b] ; Needed for key events to be recognised.
    ]

You'll notice two extra variables have been added - INC and DIR. These are either positive or negative and control whether the size of the circles are increasing or decreasing and their direction of movement.

Then, (apart from a bit of self-explanatory text), the FEEL block has been added to the face's definition. First, the RATE 30 ensures the engage function is called 30 times a second (if your computer is up to it.) That's the TIME event the SWITCH function responds to, it first changing the size and position of the circles and then changing INC and DIR if the circles have reached the limits set for them. The changes to the circles are then SHOWn.

SWITCH also checks for the cursor keys being pressed, setting the circles' directions if up or down are pressed. No SHOW is really needed here, given one is hit 30 times a second by the TIME event.

And that's it. Of course, this method of changing Draw values on the fly can be used on colors, points, transparences and so on.

For more about the Draw dialect: http://www.rebol.com/docs/draw.html And for more about Feel: http://www.rebol.com/how-to/feel.html