Animated Bubble Background

by Gary Rosenzweig

I know I've been writing a lot about Imaging Lingo recently. I use it a lot in my work, so it makes sense to write about it. The question is: is this what people want to read about? Use the "Discuss Article" button above to suggest topics for future columns. The topics have to be something that I can write about in a few pages, and they should be useful to many readers.

This week I was asked by a client to make a unique background for a game's title page. It consisted of expanding circles of a single color filling the background, and then expanding circles of another color filling in over that, and so on. You can see this background in action right here:

A sample movie is available for download in Mac or PC format.

I thought this was a pretty interesting effect, and I liked the idea of a background being animated rather than static. Also, this is a way of using Imaging Lingo that I hadn't thought of before. While this could have been done with sprites in previous versions of Director, in Director 8 this can be done with a simple behavior. Here is that behavior. It takes a list of colors, in this case only two, and switches between them. You could easily add more colors to the list. The behavior sits on a bitmap sprite and draws the circles over that bitmap. It will add a new circle at a random spot every 1/20th of a second until there are 20 circles. Each circle continues to expand until the first one is about 1/3 the screen width. This is roughly when the screen is full. Then the whole process starts over again with the next color in the list.

property pColor, pColorList
property pCircleList
property pNextCircleTime
property pImage


on beginSprite me

  -- colors to use
  pColorList = [rgb("FFFF00"),rgb("FF9900")]
  pColor = 1

  -- make pointer to this sprite's image
  pImage = sprite(me.spriteNum).member.image

  -- start off with first color
  pImage.fill(pImage.rect,pColorList[pColor])

  -- start filling with second color
  startNewColor(me)

end


on startNewColor me

  -- next color
  pColor = pColor + 1
  if pColor > pColorList.count then pColor = 1

  -- start circle list fresh
  pCircleList = []

  -- add first circle
  addCircle(me)

end


on addCircle me

  -- only allow 20 circles
  if pCircleList.count >= 20 then exit

  -- start next circle in 50 ms
  pNextCircleTime = the milliseconds + 50

  -- pick random spot for center
  x = random(pImage.width)
  y = random(pImage.height)

  -- add circle to list
  add pCircleList, [x,y,0]

end


on expandCircles me

  -- loop through circles and draw them
  repeat with i = 1 to pCircleList.count
    
    -- get location and radius
    x = pCircleList[i][1]
    y = pCircleList[i][2]
    r = pCircleList[i][3]
    
    -- draw circle
    pImage.fill(rect(x-r,y-r,x+r,y+r),[#shapeType: #oval, #color: pColorList[pColor]])
    
    -- expand circle
    pCircleList[i][3] = r + 3
  end repeat

  -- if first circle is greater than 1/3 the width of screen
  if pCircleList[1][3] > pImage.width/3 then
    -- assume screen is filled and start with new color
    startNewColor(me)
  end if

end


on exitFrame me

  -- add new circle if it is time
  if the milliseconds >= pNextCircleTime then
    addCircle(me)
  end if

  -- expand all circles
  expandCircles(me)

end