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 
-- copyright © 1998 ZZP Online, LLC
-- 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]]
  addprop props, #pBias, [#comment:"Directional ¬
    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.