Skewing an elipse

July 23, 2000
by Pat McClellan

Dear Multimedia Handyman,

I had built a script to make a sprite move in an ellipse, and I want to change its axis to get the ellipse to slant on an angle. I've included the script I used for the elliptical motion. Can you help?

on enterframe

  angle = angle + 5
  sprite(ch).locH = radiusX*cos(angle*pi()/180) + orgH
  sprite(ch).locV = radiusY*sin(angle*pi()/180) + orgV

end

every frame add 5 degrees to the angle ch = spriteNum

(orgH, orgV ) is the center point
radiusX is the MAX radius
radiusY is the MIN radius

Michael

Dear Michael,

This is a fun challenge, and it took me a while to figure out how to approach it. I'm sure there are some geometry gurus out there who think it's pretty simple, but it wasn't for me! I tried to figure out a way simply to rotate the orientation of the ellipse by degrees. For example, I wanted to be able to say "take this ellipse and rotate it clockwise by 10 degrees." I think the way to do it is to calculate where the loc would be without rotation, then offset that; unfortunately, I couldn't figure out how to calculate that offset. So, I cheated.

My approach isn't really a rotation control, but rather a horizontal skewing control. It will allow you to get the sprite motion you're seeking, but you might have to play with it a bit to figure out the right settings. Here's the demo:

D7 download for Mac or Windows.

Here's how I modified your code to induce the skewing. I added a skewHfactor that takes the vertical infomation (the sin calculation) and applies it inversely to the horizontal location. In plain language: let's say you want a positive horizontal skew (pulled to the right). When the sprite is above the origin point, the sin of the angle is negative. If the ellipse is to be skewed to the right, then that means you have to add a positive value to the locH. So, if you multiply the sin of the angle by negative 1 and add that to the locH, you get the skew.

That sounds complicated, but it can all be done in a single line of code:

skewHfactor = skewH*(-1)*sin(angle*pi()/180)

Here's the whole handler. I wanted smoother motion, so I have the angle change in two degree increments. For debugging purposes, I also added a line of code that normalizes the angle value so it always stays between 0 and 360.

on enterframe me

angle = angle + 2
if angle > 360 then angle = angle - 360

  newH = orgH + radiusX*cos(angle*pi()/180)
  newV = orgV + radiusY*sin(angle*pi()/180)
  skewHfactor = skewH*(-1)*sin(angle*pi()/180)

sprite(me.spriteNum).loch = newH + skewHfactor
sprite(me.spriteNum).locV = newV

end

I also added a behavior that changes the color of the sprite, just so you can see it moving when it's repeating a path.

I'm sorry I couldn't come up with a rotational control. Perhaps some of our readers will contribute the insight and code to accomplish that. Please post your ideas and comments in the DOUGthreads forum for this column.

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.