Category Archives: motion

Pendulums

By Zevan | April 19, 2009
CLICK HERE TO COPY
Actionscript:
  1. var mouseSpeedX:Number = 0;
  2. var prevX:Number = 0;
  3.  
  4. var pends:Array = new Array();
  5. for (var i:int = 0; i<10; i++){
  6.        pends.push(makePendulum(100+ i * 40, 100, 15, 100 + i * 10));
  7. }
  8.  
  9. addEventListener(Event.ENTER_FRAME, onRun);
  10. function onRun(evt:Event):void {
  11.        // mouseSpeed
  12.        mouseSpeedX = prevX - mouseX;
  13.        prevX = mouseX;
  14.  
  15.        for (var i:int = 0; i<pends.length; i++) pends[i]();
  16. }
  17.  
  18. function makePendulum(xp:Number, yp:Number, rad:Number, leng:Number):Function {
  19.        var rot:Number = 0;
  20.        var rotDest :Number = 0;
  21.        var rotVel:Number = 0
  22.        var string:Shape = Shape(addChild(new Shape()));
  23.        var ball:Sprite = Sprite(addChild(new Sprite()));
  24.        ball.buttonMode = true;
  25.        with(ball.graphics) beginFill(0xFF0000), drawCircle(0,leng, rad);
  26.        ball.x = xp;
  27.        ball.y = yp;
  28.        string.x = ball.x;
  29.        string.y = ball.y;
  30.        ball.addEventListener(MouseEvent.ROLL_OVER,function(){
  31.              rotDest = mouseSpeedX;
  32.        });
  33.        return function(){
  34.            // force rotDest back to 0
  35.            rotDest *= .8;
  36.                // elasticity (hooke's)
  37.                rotVel += (-1.9 * (rot - rotDest) - rotVel) / 4;
  38.                rot += rotVel
  39.                ball.rotation = rot;
  40.                // draw string:
  41.                string.graphics.clear();
  42.                string.graphics.lineStyle(0,0);
  43.                var pnt:Point = ball.localToGlobal(new Point(0, leng))
  44.                string.graphics.curveTo(0, leng / 2, pnt.x - ball.x, pnt.y-ball.y);
  45.   }
  46. }

This is a variation on something I wrote in response to a student question. It creates a few pendulums that can be pushed with the mouse.

Posted in motion | Tagged , | 5 Comments

Slider Navigation

By Zevan | April 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. var thumbNum:Number = 20;
  2. var spacing:Number = 10;
  3. var thumbs:MovieClip = new MovieClip();
  4. addChild(thumbs);
  5. for (var i:int = 0; i<thumbNum; i++){
  6.     var t:MovieClip = new MovieClip();
  7.     with(t.graphics) beginFill(0x666666), drawRect(0,0,100,50);
  8.     t.x = i * (t.width + spacing);
  9.     t.y = 5;
  10.     t.buttonMode = true;
  11.     thumbs.addChild(t);
  12. }
  13. var minX:Number = stage.stageWidth - thumbs.width - spacing;
  14. var destX:Number = thumbs.x = spacing;
  15. var velX:Number = 10;
  16. var stageThird:Number =  stage.stageWidth / 3;
  17. var right:Number = stageThird * 2;
  18. var left:Number  = stageThird;
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20. function onLoop(evt:Event):void {
  21.     if (mouseX> right){
  22.        destX -= velX;
  23.     }
  24.     if (mouseX <left){
  25.         destX += velX;
  26.     }
  27.     if (destX <minX){
  28.         destX = minX;
  29.     }
  30.     if (destX> spacing){
  31.         destX = spacing;
  32.     }
  33.     thumbs.x += (destX - thumbs.x) /4;
  34. }

This snippet shows a technique for a common type of navigation.

Also posted in UI | Tagged , | Leave a comment

Hippopede

By Zevan | March 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. x=stage.stageWidth/2;
  2. y=stage.stageHeight/2;
  3. var xp:Number = 0, yp:Number = 0;
  4. var r:Number = 0, t:Number = 0;
  5. var speed:Number=.1;
  6.  
  7. var range:Number=.2;
  8. var b:Number = 20;
  9. var a:Number = b * range;
  10. var orbit:Number = 2 * Math.PI + speed;
  11.  
  12. graphics.lineStyle(0,0x000000);
  13.  
  14. addEventListener(Event.ENTER_FRAME, onLoop);
  15. function onLoop(evt:Event):void {
  16.     var sin:Number=Math.sin(t);
  17.     r =  Math.sqrt(4 * b * (a - b * (sin * sin)));
  18.     xp= r * Math.cos(t);
  19.     yp= r * sin;
  20.    
  21.     if (t==0) {
  22.         graphics.moveTo(xp, yp);
  23.     } else {
  24.         graphics.lineTo(xp, yp);
  25.     }
  26.  
  27.     t += speed;
  28.    
  29.     if (t> orbit) {
  30.         range += .5;
  31.         a= b * range;
  32.         t= 0;
  33.     }
  34. }

The above draws a Hippopede

Also posted in Graphics, Math | Tagged , | Leave a comment

Fermat’s Spiral

By Zevan | March 29, 2009
CLICK HERE TO COPY
Actionscript:
  1. x = stage.stageWidth / 2;
  2. y = stage.stageHeight / 2;
  3.  
  4. var xp:Number = 0, yp:Number = 0;
  5. var r:Number = 0, t:Number = 0;
  6. var speed:Number = .07;
  7. var scale:Number = 20;
  8.  
  9. var plot0:Shape = Shape(addChild(new Shape()));
  10. var plot1:Shape = Shape(addChild(new Shape()));
  11. plot0.graphics.lineStyle(0,0x000000);
  12. plot1.graphics.lineStyle(0,0x000000);
  13.  
  14. addEventListener(Event.ENTER_FRAME, onLoop);
  15. function onLoop(evt:Event):void {
  16.      r =  scale * Math.sqrt(t);
  17.      xp =  r * Math.cos(t);
  18.      yp =  r * Math.sin(t);
  19.      t += speed;
  20.      
  21.     plot0.graphics.lineTo(xp, yp);
  22.     plot1.graphics.lineTo(-xp, -yp);
  23. }

This snippet draws Fermat's Spiral.

Also posted in Graphics, Math | Tagged , | Leave a comment