Animating a Sprite in a Circle

Date: Fri, 23 May 1997 00:27:33 +0000
From: jbaker@mail.mailbox.co.uk (julian baker)
Subject: New Shock Tip

I checked the archives and found you had plenty but here's another answer to that often asked question.

Seems a bit simpler than the listed stuff, and I've added a un-shocked movie on the page at out site to go with it, (also I've finally added the "fields in thousands of colours" movie to the corresponding page

Don't know whether you're shopping for tips but thought I'd send it in.

love Jules, keep the faith.

Circular Sprite animation in lingo
Without getting your old school text books here's a simple script to get you started:


  set the loch of sprite n = origX + radius * sin(the ticks/5.0)
  set the locv of sprite n = origY + radius * cos(the ticks/5.0)

eg:


  set the loch of sprite n = 64 + 60 * sin(the ticks/15.0)
  set the locv of sprite n = 64 + 60 * cos(the ticks/15.0)

Change n to your sprite channel, origX and origY are the locH and locV respectively of the centre point of the circular path, radius is the distance away from the centre (setting diffirent amounts for h and v will make an oval), altering the final figure (50.0, it must be a floating point) will change the speed of rotation.

The equation requires an ever increasing number to 'drive' it, in this example the ticks is used, however this can cause problems when the user interacts, causing the sprite to 'jump' (by dragging a miaw, entering a repeat loop, etc), so it's safer to use a global counter that you increment with the animation.

By using only the loch or locv half of the code with an incrementing animation for the other axis, it's possible to make sine waves, eg:


  set the loch of sprite n = the loch of sprite n + 1
  set the locv of sprite n = 64 + 60 * cos(the ticks/15.0)

Visit: http://www.mailbox.co.uk/flatearth Look in Zone 2 for shockwave and lingo tips where your'll find this tip and others along with a downloadable shockwave movie (.dir) allowing you to alter the parameters of the above equation.

  Flat Earth Communications        "Don't ask for the meaning,
  www.mailbox.co.uk/flatearth      ask for the use"
  jbaker@mail.mailbox.co.uk        ludwig wittgenstein

>hr>

Date:    Wed, 27 Sep 1995 18:16:00 PDT
From:    Matt Anderson <matthew_anderson@mindlink.bc.ca>
Subject: Circular Lingo animations - compiled

I want to thank Eric Dodson, Jeff Patterson, Michael Bashista, Mark Andrade, Glenn Picher, Dan Gorman, and any others who responded to my inquiry regarding animating a sprite in a circle using Lingo. They came up with some very interesting and useful code, which I'm including here.

on CirclePath  -- Mark Andrade

  put the locH of sprite 1 into cx
  put the locV of sprite 1 into cv
  set radius = 50
  repeat with angle = 1 to 360
    set the locH of sprite 1 to cx+cos(angle*3.14/180)*radius
    set the locV of sprite 1 to cv+sin(angle*3.14/180)*radius
    updatestage
  end repeat
end CirclePath


on moveInCircle   -- Eric Dodson

   puppetSprite 1, TRUE

--get the current position, here you would probably want the center of
--the sprite
  put  the locH of sprite 1 into centerX
  put  the locV of sprite 1 into centerY

--store the radius
  put 100 into radius

--8 would be the number of steps
  repeat with i = 1 to 8
    put pi()*i/4.0 into radians

    set  newX = centerX + radius * sin(radians)
    set  newY = centerY + radius * cos(radians)

    set the locH of sprite 1 to newX
    set the locV of sprite 1 to newY
    updatestage
end exitFrame

Ok, here's what to remember, cos() and sin() are functions that accept radians as the arguments. Radians are different than degrees. There are 2*pi radians in a circle. When one is dealing with sin() and cos(), they have to remember that these functions deal with unit circles, that is radius 1, so sin(pi/4) = .7071 .If you want to have a circle with a different radius, you'll need to multiply the result of sin() by the radius, that result gets you the x "offset" from the center point of the circle, just add that to the x coordinate of the center point and you have the x position at that location on the circle. Cos (Cosine) does the same for the y coordinate.

What's nice here is that sin() and cos() will return the appropriate negative number to "add" to the center coordinates.

Remember, I just used the locH and locV, not the center point for the sprite, you'll need to take that into consideration.

I wrote a handler that lets you click on a sprite and pick it up, moving it along a circular path:

on mouseDown  --Glenn Picher

  repeat while the stillDown
    put the mouseH into mx
    put the mouseV into my
    put mx - 320 into xAtMouse
    put my - 240 into yAtMouse
    if xAtMouse <> 0 then
      --there's a valid "triangle" to figure out the angle using arctangent
      put atan(float(abs(yAtMouse))/float(abs(xAtMouse))) into angleAtMouse
      if angleAtMouse = 0 then
        --it's a horizontal line
        set yAtCircle to 0
        set xAtCircle to 100 * (xAtMouse/abs(xAtMouse)) --set proper direction
      else
        --it's a true triangle
        set yAtCircle to sin(angleAtMouse) * 100.0 * (yAtMouse/abs(yAtMouse))
        set xAtCircle to cos(angleAtMouse) * 100.0 * (xAtMouse/abs(xAtMouse))
      end if
    else
      --it's a vertical line
      put 0 into xAtCircle
      if yAtMouse <> 0 then
        set yAtCircle to 100 * (yAtMouse/abs(yAtMouse))
      else
        --brute force to avoid divide by zero error
        put 100 into yAtCircle
      end if
    end if

    set the loch of sprite (the clickOn) to 320 + xAtCircle
    set the locv of sprite (the clickOn) to 240 + yAtCircle
    updatestage
  end repeat
end

The following script will revolve a sprite in the path of a hypotrochoid, which is a sort of cursive clover shape. For interesting results, set trails on for the sprite, set the ink to reverse, and smoke a big fat doobie (haven't tried the doobie yet, but it seems like a natural). If somebody like this, please send a thank you note off the list.

on exitFrame

  puppetSprite 1, TRUE

  put the locH of sprite 1 into centerX
  put the locV of sprite 1 into centerY
  put 1.0 into m
  set the floatprecision to 4
  repeat with k = 1 to 10
    repeat with j= 1 to 200
      put float(j/16.0) into m
      set newX = centerX + 10*(6*cos(m) + 5*cos(3*m)) set newY = centerY +
      10*(6*sin(m) - 5*sin(3*m)) put newX, newY
      set the locH of sprite 1 to newX
      set the locV of sprite 1 to newY

      updatestage
    end repeat
  end repeat
end exitFrame

Date:    Thu, 21 Sep 1995 05:27:20 -0700
From:    Dan Gorman <gormand@NETCOM.COM>
Subject: Re: Circular Lingo anim help?

The real magic here is to use something called "parametric equations." Start with the ellipse (x/r1)^2 + (y/r2)^2 = 1 and introduce a new variable "t" which has a domain of [0,2*pi].

Given that (cos t)^2 + (sin t)^2 = 1, we can make the leap..

  (x/r1)^2 + (y/r2)^2 = (cos t)^2 + (sin t)^2

Now we can make both x and y functions of t:

  (x(t)/r1)^2 = (cos t)^2
  (y(t)/r2)^2 = (sin t)^2

  x(t) = r1 * cos(t)
  y(t) = r2 * sin(t)

To animate, all we need to do is cycle t through 0..(2*pi) by some amenable interval. If we really want speed things up, pre-calculate cos(t) and sin(t) (or even r1*cos(t) and r2*sin(t) for that matter) for each step of t and shove'em in a list.

Ok, this works fine for the center at (0,0).. what about the center at (cx,cy)? Don't blink:

  x(t) = (r1 * cos(t)) + cx
  y(t) = (r2 * sin(t)) + cy

Note: To make this work for circles, r1=r2=r

This more elegant?