Creating Ripples with Imaging Lingo

December 13, 2000
by Gary Rosenzweig

Here's what Lingo programmers do when they are bored. The following behavior, when attached to a frame, lets the user create ripples across the Stage. They can click once for a single ripple, or click and drag to create multiple ripples. You can try it yourself in this sample movie.

A sample Director 8 movie is available for download in Mac or Windows format.

The cool thing about this movie is that it requires no Cast members except for one frame behavior. This behavior will use Imaging Lingo to create the circles you see. When the player clicks down, an item is added to the pRipples list, with the mouse location as the center of the circle and 0 as the radius. Then, as each frame begins, the radius of each circle is expanded by five pixels. The draw command is used to draw the circle onto the Stage.

The behavior draws directly onto the Stage's image, so the pixels aren't really permanent. I am trying to grab the Stage as it appears before the circles are drawn, and then replace that image when the frame is done. I hope the effect is that other objects can animate along with the ripples. You can test it yourself and see. The code starts by setting the pRipples list to an empty list.

property pRipples, pOldImage, pPressed

on beginSprite me
pRipples = []
end

Each time the player clicks, a new ripple is added, and the pPressed property is set to TRUE.

-- on click, add a new ripple

on mouseDown me
addRipple(me)
pPressed = TRUE
end

When the player lifts up the mouse, the pPressed property is set back to FALSE.

-- stop adding ripples
on mouseUp me
pPressed = FALSE
end

on mouseUpOutside me
pPressed = FALSE
end

Adding a new ripple is as simple as adding an item to the pRipples list.

-- add a new ripple to the list
on addRipple me
add pRipples, [#loc: the mouseLoc, #radius: 0]
end

When the frame begins, before it is drawn on to the screen, the prepareFrame handler will add any new ripples if the mouse button is still down. It will then call expandRipples to draw all of the ripples.

on prepareFrame me

  -- add a new ripple
  if pPressed then
    addRipple(me)
  end if

-- draw all ripples and increase their radius
expandRipples(me)

end

The behavior will store the image of the Stage in pOldImage for safekeeping. It will then loop through all of the ripples in the list and draw each one with the draw command. It sets the color of the ripple to a gray, starting with black when the ripple is small, and going to white when the ripple is 255 pixels in radius. At that time, the ripple will be removed from the array.

on expandRipples me

-- remember what the stage looks like
pOldImage = duplicate((the stage).image)

  -- loop through all ripples
  repeat with i = pRipples.count down to 1

    -- get the info for this ripple
    loc = pRipples[i].loc
    radius = pRipples[i].radius

    -- determine the rect
    r = rect(loc,loc) + rect(-radius,-radius,radius,radius)

    -- set the color according to the radius
    color = rgb(radius,radius,radius)

    -- draw it
    (the stage).image.draw(r, [#shapeType: #oval, #color: color])

    -- expand the radius
    pRipples[i].radius = pRipples[i].radius + 5

    -- see if the ripple is too big
    if pRipples[i].radius > 255 then
      deleteAt pRipples, i
    end if

  end repeat

end

When the frame is done, the Stage is returned to its original image. This should help other animations to draw properly.

on exitFrame me

  -- before the frame ends, replace the Stage with the original
  (the stage).image.copyPixels(pOldImage,pOldImage.rect,pOldImage.rect)
  go to the frame

end

That's all there is to it. You might want to adjust the color of the ripple if your background is not all white. You can also adjust the speed at which the ripple expands. Making this smaller, and the tempo of the movie faster, will make the ripples smoother.

Gary Rosenzweig's two most recent books are: "Special Edition Using Director 8" -- The most comprehensive guide to Director ever, including tons of examples and demo movies. It's suitable for novices and experts alike. "Advanced Lingo for Games" -- How to make games with Director 7 and 8. This book comes complete with full source code for more than 20 complete games. More information about these books can be found at http://clevermedia.com/resources/bookstore/. They can be purchased there, or in your local bookstore.

Gary Rosenzweig is the Chief Engineer, founder, and owner of CleverMedia, a game and multimedia development company in Denver, Colorado. He is the author of ten books on Macromedia Director and Flash, including his latest, Special Edition Using Director MX.