Creating Ripples with Imaging Lingo

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.