Monthly Archives: June 2009

Distance Line Gradient

By Zevan | June 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600,height=500,frameRate=30)]
  2. var canvas:BitmapData=new BitmapData(400,400,false,0x000000);
  3. addChild(new Bitmap(canvas));
  4.  
  5. var size:Number=canvas.width*canvas.height;
  6. var w:Number=canvas.width;
  7. var pix:Vector.<uint> = new Vector.<uint>(size);
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10. function onLoop(evt:Event):void {
  11.     canvas.lock();
  12.        
  13.     var i:int = size;
  14.     var x1:Number=mouseX;
  15.     var y1:Number=mouseY;
  16.     var x2:Number=250;
  17.     var y2:Number=250;
  18.     var dx:Number=x2-x1;
  19.     var dy:Number=y2-y1;
  20.     var denom:Number =  1/(dx * dx + dy * dy);
  21.     if (dx==0&&dy==0) {
  22.             x2+=1;
  23.             y2+=1;
  24.             dx=dy=1;
  25.     }
  26.  
  27.     while( --i> -1 ){
  28.         var xp:int= i % w;
  29.         var yp:int = i / w;
  30.         var u:Number = ((xp - x1) * dx + (yp - y1) * dy) * denom;
  31.  
  32.         var closestX:Number;
  33.         var closestY:Number;
  34.         if (u<0) {
  35.             closestX=x1;
  36.             closestY=y1;
  37.         } else if (u> 1) {
  38.             closestX=x2;
  39.             closestY=y2;
  40.         } else {
  41.             closestX=x1+u*dx;
  42.             closestY=y1+u*dy;
  43.         }
  44.         var dfx:Number=closestX-xp;
  45.         var dfy:Number=closestY-yp;
  46.         var d:Number=255-Math.sqrt(dfx*dfx+dfy*dfy);
  47.         if (d<0) d=0;
  48.          pix[i]=uint(d);
  49.     }
  50.     canvas.setVector(canvas.rect, pix);
  51.     canvas.unlock();
  52. }

This didn't come out as interesting as I thought it would for some reason - just used the technique from the last two posts to draw a gradient. Event though it's visually boring, it does show how I went about inlining the function from yesterday... so I figured I'd post it.

Posted in BitmapData, Vector, graphics algorithms | Tagged , , | Leave a comment

Distance Between Point and Line (optimized)

By Zevan | June 4, 2009
CLICK HERE TO COPY
Actionscript:
  1. /**
  2. Original function by Pieter Iserbyt:
  3. http://local.wasp.uwa.edu.au/~pbourke/geometry/pointline/DistancePoint.java
  4. from Paul Bourke's website:
  5. http://local.wasp.uwa.edu.au/~pbourke/geometry/pointline/
  6. */
  7. function pointToLineDist(x1:Number, y1:Number, x2:Number, y2:Number,x3:Number, y3:Number):Number {
  8.     var dx:Number=x2-x1;
  9.     var dy:Number=y2-y1;
  10.     if (dx==0&&dy==0) {
  11.         x2+=1;
  12.         y2+=1;
  13.         dx=dy=1;
  14.     }
  15.     var u:Number = ((x3 - x1) * dx + (y3 - y1) * dy) / (dx * dx + dy * dy);
  16.  
  17.     var closestX:Number;
  18.     var closestY:Number;
  19.     if (u<0) {
  20.         closestX=x1;
  21.         closestY=y1;
  22.     } else if (u> 1) {
  23.         closestX=x2;
  24.         closestY=y2;
  25.     } else {
  26.         closestX=x1+u*dx;
  27.         closestY=y1+u*dy;
  28.     }
  29.     dx=closestX-x3;
  30.     dy=closestY-y3;
  31.     return Math.sqrt(dx * dx +  dy * dy);
  32. }
  33.  
  34. /**
  35. Test out the function
  36. */
  37.  
  38. var dotA:Sprite = dot(100, 100);
  39. var dotB:Sprite = dot(200, 200);
  40. var dotC:Sprite = dot(150, 100, 0x0000FF);
  41. var txt:TextField = TextField(dotC.addChild(new TextField()));
  42. with(txt) x = 5, y = 5, autoSize = "left", selectable = false, mouseEnabled = false;
  43.  
  44. addEventListener(Event.ENTER_FRAME, onLoop);
  45. function onLoop(evt:Event):void {
  46.     graphics.clear();
  47.     graphics.lineStyle(0,0x000000);
  48.     graphics.moveTo(dotA.x, dotA.y);
  49.     graphics.lineTo(dotB.x, dotB.y);
  50.     txt.text = pointToLineDist(dotA.x, dotA.y, dotB.x, dotB.y, dotC.x, dotC.y).toFixed(2);
  51. }
  52.  
  53. // draggable dot
  54. function dot(xp:Number, yp:Number, col:uint = 0xFF0000, rad:Number=4):Sprite {
  55.     var s:Sprite = Sprite(addChild(new Sprite));
  56.     s.x = xp;
  57.     s.y = yp;
  58.     with(s.graphics) beginFill(col), drawCircle(0,0,rad);
  59.     s.buttonMode = true;
  60.     s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
  61.     return s;
  62. }
  63. function onDrag(evt:MouseEvent):void { evt.currentTarget.startDrag() }
  64. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  65. function onUp(evt:MouseEvent):void{stopDrag() }

This is the same as yesterdays post about the distance between a point and a line segment. I just took a few minutes to optimize the function - it runs close to 3X faster now. For more info see yesterdays post.

Posted in Math, graphics algorithms, misc | Tagged , , | 1 Comment

Distance Between Point and Line Segment

By Zevan | June 3, 2009
CLICK HERE TO COPY
Actionscript:
  1. /**
  2. Original function by Pieter Iserbyt:
  3. http://local.wasp.uwa.edu.au/~pbourke/geometry/pointline/DistancePoint.java
  4. from Paul Bourke's website:
  5. http://local.wasp.uwa.edu.au/~pbourke/geometry/pointline/
  6. */
  7. function pointToLineDistance(p1:Sprite, p2:Sprite, p3:Sprite):Number {
  8.     var xDelta:Number = p2.x - p1.x;
  9.     var yDelta:Number = p2.y - p1.y;
  10.     if ((xDelta == 0) && (yDelta == 0)) {
  11.         // p1 and p2 cannot be the same point
  12.         p2.x += 1;
  13.         p2.y += 1;
  14.         xDelta = 1;
  15.             yDelta = 1;
  16.     }
  17.     var u:Number = ((p3.x - p1.x) * xDelta + (p3.y - p1.y) * yDelta) / (xDelta * xDelta + yDelta * yDelta);
  18.     var closestPoint:Point;
  19.     if (u <0) {
  20.         closestPoint = new Point(p1.x, p1.y);
  21.     } else if (u> 1) {
  22.         closestPoint = new Point(p2.x, p2.y);
  23.     } else {
  24.         closestPoint = new Point(p1.x + u * xDelta, p1.y + u * yDelta);
  25.     }
  26.     return Point.distance(closestPoint, new Point(p3.x, p3.y));
  27. }
  28.  
  29. /**
  30. Test out the function
  31. */
  32.  
  33. var dotA:Sprite = dot(100, 100);
  34. var dotB:Sprite = dot(200, 200);
  35. var dotC:Sprite = dot(150, 100, 0x0000FF);
  36. var txt:TextField = TextField(dotC.addChild(new TextField()));
  37. with(txt) x = 5, y = 5, autoSize = "left", selectable = false, mouseEnabled = false;
  38.  
  39. addEventListener(Event.ENTER_FRAME, onLoop);
  40. function onLoop(evt:Event):void {
  41.     graphics.clear();
  42.     graphics.lineStyle(0,0x000000);
  43.     graphics.moveTo(dotA.x, dotA.y);
  44.     graphics.lineTo(dotB.x, dotB.y);
  45.     txt.text = pointToLineDistance(dotA, dotB, dotC).toFixed(2);
  46. }
  47.  
  48. // draggable dot
  49. function dot(xp:Number, yp:Number, col:uint = 0xFF0000, rad:Number=4):Sprite {
  50.     var s:Sprite = Sprite(addChild(new Sprite));
  51.     s.x = xp;
  52.     s.y = yp;
  53.     with(s.graphics) beginFill(col), drawCircle(0,0,rad);
  54.     s.buttonMode = true;
  55.     s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
  56.     return s;
  57. }
  58. function onDrag(evt:MouseEvent):void { evt.currentTarget.startDrag() }
  59. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  60. function onUp(evt:MouseEvent):void{stopDrag() }

Last night I was working late and found myself in need of a way to calculate the distance between a point and a line. After a quick google search I found myself once again on Paul Bourke's extremely useful website. I was in a rush, so I just quickly ported the java code (by Pieter Iserbyt) and wrote this test snippet to make sure it works.

This code could be optimized a bit, but it works nicely.

I needed this for a commercial project, but as I was porting the code I thought of an interesting way to use this code to draw a gradient - may write and post that tomorrow.

Posted in Math, graphics algorithms | Tagged , , | 5 Comments

Calculate Slope of a Line

By Zevan | June 2, 2009
CLICK HERE TO COPY
Actionscript:
  1. // calculate the slope of a line
  2. function calculateSlope(x1:Number, y1:Number, x2:Number, y2:Number):Number {
  3.         // rise over run
  4.     var s:Number = (y1 - y2) / (x1 - x2);
  5.     /*if (x1==x2) {
  6.         // slope is Infinity or -Infinity
  7.     }*/
  8.     return s;
  9. }
  10.  
  11. /**
  12.  Test it out
  13. */
  14. function draw(x1:Number, y1:Number, x2:Number, y2:Number):void {
  15.     graphics.moveTo(x1, y1);
  16.     graphics.lineTo(x2, y2)
  17.     var txt:TextField =TextField(addChild(new TextField()));
  18.     txt.text = calculateSlope(x1, y1, x2, y2).toFixed(2);
  19.     txt.x = x2, txt.y = y2;
  20. }
  21.  
  22. graphics.lineStyle(0,0xFF0000);
  23. draw (100, 100, 200, 200);
  24.  
  25. draw(100, 100, 200, 150);
  26.  
  27. draw(100, 100, 200, 100);
  28.  
  29. draw(100, 100, 99, 200);

This snippet shows how to calculate the slope of a line ... It demos the function by drawing a few lines and showing the corresponding slope of each.

It will draw this:

If (x1 == x2), the slope will be -Infinity or Infinity... depending on where you're using this calculation you may want to reset the s variable to something else, return null etc... I commented it out for simplicity.

Posted in Math, misc | Tagged , , | Leave a comment