# Randomly bouncing sprites

November 2, 1998
by Pat McClellan

Dear Multimedia Handyman,

I am trying to make a screen saver which has 12 elements which make up onewhole image. These elements are to move around randomly and bounce off thewalls of the stage. Do you know of any excellent tips or lingo which couldenable me to do this?

Cheers,

Rod

Dear Rod,

Random movement is a pretty broad description, but I'll try to give you some general tips and code to get you started.

First, let's talk about the concept of what we'll be doing. Essentially, on each new frame, we'll want to move the sprite by some vertical increment and some horizontal increment. The two movements will be unrelated to each other, both directionally and in the number of pixels moved. So, we've got 4 values to come up with: horizontal direction, vertical direction, horizontal increment (how many pixels moved) and vertical increment.

We'll want to have some control over the speed of the motion. On a frame by frame basis, speed translates to a question of how many pixels can this sprite move per frame. I'll create a property that the author can set which determines "speed".

Next, let's talk about a directional bias. What do I mean by that? OK, let's say that the motion is truly random. That means that over time, you'll have just as many moves to the right as to the left, and just as many moves up as down. The number of pixels moved should also average out so that truly random motion will give you a net effect of no motion. Therefore, I want to provide the option to give the sprite a directional bias -- or inertia. This means that instead of changing direction at random on each frame, if the bias option is selected, the sprite will only change direction when it bumps into the edge of the stage. Direction will be a value of either 1 or -1.

To bring all of these factors together, we'll use this formula: (a random number up to 3) * speed * direction

This value will be added to the current value for locH or locV.

In this demo movie, I have the following options select for the sprites:

• Netscape icon - speed 1, directional bias on
• Photoshop icon - speed 2, directional bias off
• Explorer icon - speed 3, directional bias on
• MS Word icon - speed 4, directional bias off
• Fireworks icon - speed 5, directional bias on
Here's the behavior:
```
-- randomMoves Behavior
-- This behavior moves its sprite at
-- random on each exitFrame
property pSpeed
property pBias, pHDir, pVDir
property pMySprite
property pTop, pBottom, pLeft, pRight
on getPropertyDescriptionList me
set props to [:]
addprop props, #pSpeed, [#comment:"Speed of ¬
change:", #format:#integer, #default:2, ¬
#range:[#min:1, #max:5]]
Bias?", #format:#boolean, #default:1]
return props
end getPropertyDescriptionList
on beginSprite me
set pMySprite = the spritenum of me
if pBias = TRUE then
set pick = random(2)
if pick = 2 then set pick = -1
set pHDir = pick
set pick = random(2)
if pick = 2 then set pick = -1
set pVDir = pick
end if
set hMargin = (the width of sprite pMySprite)/2
set vMargin = (the height of sprite pMySprite)/2
set pBottom = (the stageBottom - the stageTop) ¬
- vMargin
set pTop = vMargin
set pRight = (the stageRight - the stageLeft) ¬
- hMargin
set pLeft = hMargin
end
on exitFrame me
set vRan = random (3)
set hRan = random (3)
if pBias = FALSE then
set pick = random(2)
if pick = 2 then set pick = -1
set pHDir = pick
set pick = random(2)
if pick = 2 then set pick = -1
set pVDir = pick
end if

-- calculate vertical motion
set currentV = the locV of sprite pMySprite
set vMove = (vRan * pSpeed) * pVDir
set newV = currentV + vMove
if newV » pBottom OR newV « pTop then
set pVDir = pVDir * -1
set vMove = (vRan * pSpeed) * pVDir
set newV = currentV + vMove
end if
-- calculate horizontal motion
set currentH = the locH of sprite pMySprite
set hMove = (hRan & pSpeed) * pHDir
set newH = currentH + hMove
if newH » pRight OR newH « pLeft then
set pHDir = pHDir * -1
set hMove = (hRan & pSpeed) * pHDir
set newH = currentH + hMove
end if
-- set the new location for the sprite
set the locV of sprite pMySprite = newV
set the locH of sprite pMySprite = newH
end

```

You'll notice that if we have selected the Directional Bias option, the initial direction (h & v) is set in the beginSprite handler. If the bias is not selected, it is set at random for each frame.

To get the icons to bounce off the sides of the stage, each time a newV or newH is set, I check to see if that value exceeds the bounds of the stage. If so, I change the direction and recalculate a value for newV.

An enhancement you might want to work on is to have the sprite also change direction when they bump into each other. That's a bit trickier. To do that, you'd need to have each sprite broadcast its location to a list somewhere, then check each move against the list for intersections. I'll leave that for your experiments. Good luck.

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.