Category Archives: motion

Point.polar() Stars

By Zevan | January 23, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=700, height=400, backgroundColor=0x000000, frameRate=30)]
  2.  
  3. var points:Array = new Array();
  4. var index:int = -1;
  5. function polar(thetaInc:Number, radius:Number):Point{
  6.     index++;
  7.     if (!points[index]) points[index] = 0;
  8.     return Point.polar(radius, points[index] += thetaInc)
  9. }
  10. ///////////////////////////////////////////////////
  11. // test it out:
  12.  
  13. var canvas:BitmapData = new BitmapData(700, 400, false, 0xFFFFFF);
  14.  
  15. addChild(new Bitmap(canvas, "auto", true));
  16.  
  17. var p0:Point = new Point(200, 200);
  18. var p1:Point = new Point(500, 200);
  19.  
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.    
  23.     var rad:Point = polar(.05, 4);
  24.      
  25.     for (var i:int= 0; i<100; i++){
  26.        
  27.         // reset index;
  28.         index = -1;
  29.        
  30.         p0 = p0.add(polar(.025, 2).add(polar(-.05,rad.x)));
  31.         canvas.setPixel(p0.x, p0.y, 0x000000);
  32.        
  33.         p1 = p1.add(polar(.025, 2).add(polar(-.05,rad.x).add(polar(.1, rad.y))));
  34.         canvas.setPixel(p1.x, p1.y, 0x000000);
  35.     }
  36. }

This is pretty much the same as yesterdays... I just changed the way I use the polar() function to draw two more shapes:

Also posted in BitmapData, setPixel | Tagged , | Leave a comment

Playing with Curves Point.polar()

By Zevan | January 22, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600, height=500, backgroundColor=0x000000, frameRate=30)]
  2. var points:Array = new Array();
  3. var index:int = -1;
  4. function polar(thetaInc:Number, radius:Number):Point{
  5.     index++;
  6.     if (!points[index]) points[index] = 0;
  7.     return Point.polar(radius, points[index] += thetaInc);
  8. }
  9. ///////////////////////////////////////////////////
  10. // test it out:
  11.  
  12. var canvas:BitmapData = new BitmapData(600, 500, false, 0xFFFFFF);
  13.  
  14. addChild(new Bitmap(canvas, "auto", true));
  15.  
  16. var p0:Point = new Point(80, 100);
  17. var p1:Point = new Point(270, 100);
  18. var p2:Point = new Point(480, 40);
  19. var p3:Point = new Point(170, 180);
  20. var p4:Point = new Point(430, 300);
  21.  
  22. addEventListener(Event.ENTER_FRAME, onLoop);
  23. function onLoop(evt:Event):void {
  24.     for (var i:int= 0; i<100; i++){
  25.        
  26.         // reset index;
  27.         index = -1;
  28.        
  29.         p0 = p0.add(polar(.2, 4).add(polar(-.4,2).add(polar(.05, 1))));
  30.         canvas.setPixel(p0.x, p0.y, 0x000000);
  31.    
  32.         p1 = p1.add(polar(.1, 2).add(polar(-.2, 2).add(polar(.03, 1).add(polar(-.01,.5)))));
  33.         canvas.setPixel(p1.x, p1.y, 0x000000);
  34.      
  35.         p2 = p2.add(polar(.08, 3 ).add(polar(-.2, -12).add(polar(2, 10))));
  36.         canvas.setPixel(p2.x, p2.y, 0x000000);
  37.      
  38.         p3 = p3.add(polar(.08, 7).add(polar(-.2, -12).add(polar(2, 11))));
  39.         canvas.setPixel(p3.x, p3.y, 0x000000);
  40.        
  41.         p4 = p4.add(polar(.025, 2).add(polar(-.05,1)));
  42.         canvas.setPixel(p4.x, p4.y, 0x000000);
  43.     }
  44. }

The polar() function is the real trick here... the rest of the code just uses it to draw this:

The Point.polar() function is just a conversion from polar to cartesian coords:

CLICK HERE TO COPY
Actionscript:
  1. x = radius * Math.cos(theta);
  2. y = radius * Math.sin(theta);

Also posted in setPixel | Tagged , | Leave a comment

Jumping on a 2D Circle

By Zevan | January 13, 2009
CLICK HERE TO COPY
Actionscript:
  1. var circle:Shape = Shape(addChild(new Shape()));
  2. with(circle.graphics) beginFill(0xCCCCCC), drawCircle(0,0,100);
  3. circle.x = stage.stageWidth / 2;
  4. circle.y = stage.stageHeight / 2;
  5.  
  6. var charWorld:MovieClip = MovieClip(addChild(new MovieClip()));
  7. charWorld.x = circle.x ;
  8. charWorld.y = circle.y - 100 - 10
  9. charWorld.thetaSpeed = 0;
  10. charWorld.theta  = -Math.PI / 2;
  11.  
  12. var char:MovieClip = MovieClip(charWorld.addChild(new MovieClip))
  13. with(char.graphics) beginFill(0x000000), drawRect(-10,-10,10,10);
  14. char.posY = 0;
  15. char.velY = 0;
  16.  
  17. addEventListener(Event.ENTER_FRAME, onRunChar);
  18. function onRunChar(evt:Event):void {
  19.    
  20.     char.velY += 1;
  21.     char.posY += char.velY;
  22.    
  23.     charWorld.thetaSpeed *= .6;
  24.     charWorld.theta += charWorld.thetaSpeed;
  25.    
  26.     if (key[Keyboard.UP]){
  27.         if (char.y == 0){
  28.           char.velY = -10;
  29.         }
  30.     }
  31.    
  32.     if (key[Keyboard.RIGHT]){
  33.         charWorld.thetaSpeed = .1;
  34.     }
  35.    
  36.     if (key[Keyboard.LEFT]){
  37.         charWorld.thetaSpeed = -.1;
  38.     }
  39.    
  40.     if (char.posY> 0){
  41.         char.posY = 0;
  42.     }
  43.    
  44.     char.y = char.posY;
  45.    
  46.     charWorld.x = circle.x + 100 * Math.cos(charWorld.theta);
  47.     charWorld.y = circle.y + 100 * Math.sin(charWorld.theta);
  48.     charWorld.rotation = Math.atan2(circle.y- charWorld.y, circle.x - charWorld.x) / Math.PI * 180 - 90;
  49. }
  50.  
  51. var key:Object = new Object();
  52. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  53. stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
  54. function onKeyPressed(evt:KeyboardEvent):void {
  55.     key[evt.keyCode] = true;
  56.     key.keyCode = evt.keyCode;
  57. }
  58.  
  59. function onKeyReleased(evt:KeyboardEvent):void {
  60.     key[evt.keyCode] = false
  61. }

For some reason I felt like posting the swf.... have a look here.

This is one that's been kicking around in my head for awhile - finally got around to writing it. It creates a circle and a small black box. The box walks and jumps on the circle with key input (left arrow, right arrow and up arrow).

There's an odd trick going on here. Basically, the box (or char) movieClip is nested inside another clip. Within this clip (charWorld) the box moves on the y axis (jumping/up key). The charWorld clip orbits around the circle and rotates toward the center of the circle - sine/cosine are used for the orbit so the left and the right keys control the speed of theta.

Also posted in misc | Tagged , | Leave a comment

Matrix.transformPoint()

By Zevan | January 1, 2009
CLICK HERE TO COPY
Actionscript:
  1. var circle:Shape = Shape(addChild(new Shape()));
  2. with(circle.graphics) beginFill(0x00000), drawCircle(0,0,10);
  3.  
  4. var point:Point = new Point();
  5. var trans:Matrix = new Matrix();
  6. trans.rotate(Math.PI);
  7. trans.scale(.5, .5);
  8. trans.tx = stage.stageWidth / 2;
  9. trans.ty = stage.stageHeight / 2;
  10.  
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12.  
  13. function onLoop(evt:Event):void {
  14.     point.x = mouseX - trans.tx;
  15.     point.y = mouseY - trans.ty;
  16.    
  17.     point = trans.transformPoint(point);
  18.    
  19.     circle.x = point.x;
  20.     circle.y = point.y;
  21. }

If you don't feel like rolling your own transformations Matrix.transformPoint() is a very powerful method. It simply applies the tranformations of a given matrix to a Point. The above example scales rotates and translates a point which is then used to position a circle Shape.

Matrix.transformPoint() is well suited for creating orbiting behavior:

CLICK HERE TO COPY
Actionscript:
  1. var circle:Shape = Shape(addChild(new Shape()));
  2. with(circle.graphics) beginFill(0x00000), drawCircle(0,0,10);
  3.  
  4. var point:Point = new Point(100,0);
  5. var trans:Matrix = new Matrix();
  6.  trans.rotate(.1);
  7.  trans.scale(.99,.99);
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10.  
  11. function onLoop(evt:Event):void {
  12.      
  13.       point = trans.transformPoint(point);
  14.      
  15.       circle.x = point.x + stage.stageWidth / 2;
  16.       circle.y = point.y + stage.stageHeight / 2;
  17. }

This code will cause the circle Shape to move in a spiral formation.

Also posted in misc | Tagged , , | Leave a comment