Category Archives: graphics algorithms

Gumowski/Mira Pseudo-Soundwave

Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var a:Number = 0.02;
  3. var b:Number = .9998;
  4.  
  5. var xn1:Number = 5;
  6. var yn1:Number = 0;
  7. var xn:Number, yn:Number;
  8.  
  9. var scale:Number = 10;
  10. var iterations:Number = 20000;
  11. var step:Number = stage.stageWidth / iterations;
  12.  
  13. function f(x:Number):Number{
  14.     var x2:Number = x * x;
  15.     return a * x + (2 * (1 - a) * x2) / (1 + x2);
  16. }
  17.  
  18. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(600,600,false,0xEFEFEF)))).bitmapData;
  19.  
  20. var circle = new Sprite();
  21. with(circle.graphics) beginFill(0, 0.3), drawCircle(2,2,1);
  22.  
  23. var dot:BitmapData = new BitmapData(4,4,true, 0x00000000);
  24. dot.draw(circle);
  25.  
  26. var pnt:Point = new Point();
  27.  
  28. var txt:TextField = TextField(addChild(new TextField()));
  29. txt.text = "move mouse";
  30.                                                       
  31. addEventListener(Event.ENTER_FRAME, onLoop);
  32. function onLoop(evt:Event):void {
  33.    
  34.     canvas.fillRect(canvas.rect, 0xEFEFEF);
  35.  
  36.     a = mouseY / 1000;
  37.     xn1 = mouseX / 30;
  38.     yn1 = 0;
  39.     for (var i:int = 0; i<iterations; i++){
  40.           xn = xn1;
  41.           yn = yn1;
  42.          
  43.           xn1 = b * yn + f(xn);
  44.           yn1 =  -xn + f(xn1);
  45.           pnt.x = i * step;
  46.           pnt.y = 300 + yn1 * scale;
  47.           canvas.copyPixels(dot, dot.rect, pnt, null, null, true);
  48.        
  49.     }
  50. }

Try it out:

Gumowski Mira Pseudo-soundwave - wonderfl build flash online

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

Frame Differencing

Actionscript:
  1. [SWF(width = 800, height= 600)]
  2. var sw:Number = 800;
  3. var sh:Number = 600;
  4. var pixelNum:int = sw * sh;
  5. var blurAmount:Number = 10;
  6. var pnt:Point = new Point(0,0);
  7. var rect:Rectangle = new Rectangle(0,0,sw,sh);
  8.  
  9. var canvas:BitmapData = new BitmapData(sw, sh, false, 0x000000);
  10. var buffer:BitmapData = new BitmapData(sw, sh, false, 0x000000);
  11. var feed  :BitmapData = new BitmapData(sw, sh, false, 0x000000);
  12. var prev  :BitmapData = new BitmapData(sw, sh, false, 0x000000);
  13.  
  14. var frame:Bitmap = new Bitmap(canvas, "auto", true);
  15. addChild(frame);
  16.  
  17. var cam:Camera =  Camera.getCamera();
  18. cam.setMode(sw,sh,12);
  19. var video:Video = new Video(sw, sh);
  20. video.attachCamera(cam);
  21.  
  22. cam.addEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  23.  
  24. function onActivityStart(evt:ActivityEvent):void {
  25.     addEventListener(Event.ENTER_FRAME, onRun);
  26.     cam.removeEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  27. }
  28.  
  29. function onRun(evt:Event):void{
  30.     buffer.draw(video);
  31.     feed.copyPixels(buffer, rect, pnt);
  32.     buffer.draw(prev, null, null, BlendMode.DIFFERENCE);
  33.     prev.draw(video);
  34.     canvas.copyPixels(buffer, rect, pnt);
  35. }

This snippet shows a simple method to do frame differencing with a web cam. This is useful for detecting which areas of the screen have change from frame to frame. This post assumes you pretty much know what frame differencing is.


You can view an swf file here:

This is one of those things I do a good deal but never wrapped up into a library... it's easy (for me at least) to forget exactly how to set it up from scratch.

I added an extra buffer because it's pretty common that you'll want to other things aside from just frame differencing alone, so it's nice to have it all wrapped up in a buffer BitmapData that you can use elsewhere. If speed is a real concern, you can do away with the buffer and just use the canvas instead - depending on what kind of analysis your doing on the frame differenced image it may be trickier without the buffer.

Also posted in BitmapData, Video, pixel manipulation | Tagged , , | 5 Comments

~20,000 Rollovers

Actionscript:
  1. [SWF(width = 500, height = 500, frameRate = 30)]
  2.  
  3. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
  4.  
  5. var indexCanvas:BitmapData = new BitmapData(stage.stage.stageWidth, stage.stageHeight, false,
  6.                                             0xFFFFFF);
  7. addChild(new Bitmap(canvas));
  8.  
  9. var s:Shape = new Shape();
  10.  
  11. var lineData:Array = [];
  12. var dataIndex:int = 0;
  13.  
  14. trace(0xFFFFFF - 1)
  15. var totalLines:int = 20000;
  16. var iterations:int = 9;
  17. var linesPerIter:int = totalLines / iterations;
  18.  
  19. var xp:int = stage.stageWidth / 2;
  20. var yp:int = stage.stageHeight / 2;
  21.  
  22. var stepAmt:Number = 60;
  23. var halfStepAmt:Number = stepAmt / 2;
  24.  
  25. addEventListener(Event.ENTER_FRAME, onDraw);
  26. function onDraw(evt:Event):void {
  27.      if (lineData.length <totalLines){
  28.         generateData(linesPerIter);
  29.      }else{
  30.         stage.quality = "high";
  31.         addChild(s);
  32.         s.x = 0;
  33.         s.y = 0;
  34.          
  35.         removeEventListener(Event.ENTER_FRAME, onDraw);
  36.         addEventListener(Event.ENTER_FRAME, onRun);
  37.      }
  38. }
  39.  
  40. function onRun(evt:Event):void {
  41.    var currentIndex:int = indexCanvas.getPixel(mouseX, mouseY);
  42.    var currentLine:Array = lineData[currentIndex];
  43.    
  44.    s.graphics.clear();
  45.    if (currentIndex != 0xFFFFFF){
  46.           s.graphics.lineStyle(3, 0xFF0000);
  47.           s.graphics.moveTo(currentLine[0], currentLine[1]);
  48.           s.graphics.lineTo(currentLine[2], currentLine[3]);  
  49.    }
  50. }
  51.  
  52. function generateData(num:int):void{
  53.     var rxA:int, rxB:int, ryA:int, ryB:int;
  54.     var g:Graphics = s.graphics;
  55.     for (var i:int = 0; i<num; i++){
  56.         rxA = xp;
  57.         ryA = yp;
  58.        
  59.         xp += Math.round(Math.random() * stepAmt) - halfStepAmt;
  60.         yp += Math.round(Math.random() * stepAmt) - halfStepAmt;
  61.        
  62.         if (xp> stage.stageWidth){
  63.             xp = stage.stageWidth - halfStepAmt;
  64.         }else
  65.         if (xp <0){
  66.             xp = halfStepAmt;
  67.         }
  68.         if (yp> stage.stageHeight){
  69.             yp = stage.stageHeight - halfStepAmt;
  70.         }else
  71.         if (yp <0){
  72.             yp = halfStepAmt;
  73.         }
  74.        
  75.         rxB = xp;
  76.         ryB = yp;
  77.          
  78.         lineData[dataIndex] = [rxA, ryA, rxB, ryB];            
  79.         s.x = rxA;
  80.         s.y = ryA;
  81.         var endX:Number = rxB - rxA;
  82.         var endY:Number = ryB - ryA;
  83.         var m:Matrix = s.transform.matrix;
  84.         g.clear();
  85.         g.lineStyle(1, 0x000000, 0.3);
  86.  
  87.         g.lineTo(endX, endY);
  88.         stage.quality = "high";
  89.         canvas.draw(s, m);
  90.        
  91.         g.clear();
  92.         g.lineStyle(3, dataIndex);
  93.        
  94.         g.lineTo(endX, endY);
  95.         stage.quality = "low";
  96.         indexCanvas.draw(s, m);
  97.        
  98.         dataIndex++
  99.     }
  100. }

I'm working on a data visualization that contains a long path made up of approximately one million points. There is some information associated with every two sets of coordinates that needs to be displayed when the user rolls their mouse over any part of the line.

I took a little time to think about the best way to do this and came up with a few techniques. The first one I tried seems to work nicely - this snippet is the proof of concept for that first technique. I tested this snippet with 1,000,000 xy coordinates and it works nicely. It takes a little while to draw though, so for the purposes of this demo I've just included 20,000 coordinates.

Have a look at the swf over at wonderfl.net

The way this works is by drawing lines to two different BitmapData instances. I draw anti-aliased slightly transparent lines to a BitmapData instance called "canvas" (this is added to the display list) - I then draw aliased lines to a BitmapData called "indexCanvas" (this is never added to the display list) - each aliased line uses an incremental value for its color - this incremental value is also the index for a two dimensional array containing the coordinate information for the aliased line. I use getPixel() on the "indexCanvas" and use the return value as the index for the 2D array. The data from the 2D array is used to draw a red line with the graphics class. This technique enables you to have many many rollovers and all you ever have to do is call getPixel() and use the returned color value to look up info about what you're mouse is touching.

There are a few cool ways this could be repurposed and this is really only one solution to the problem of having many many things that you need to be able to rollover... there are others that don't use BitmapData at all... I may write those up in the next couple of days.

Also posted in BitmapData, Data Structures, UI, arrays, display list, matrix, misc, pixel manipulation, return values | Tagged , , | 2 Comments

Utils3D.projectVectors() Lathe

Actionscript:
  1. [SWF(width = 500, height = 500, backgroundColor = 0x000000)]
  2. var halfWidth:Number = stage.stageWidth / 2;
  3. var halfHeight:Number = stage.stageHeight / 2;
  4. var loc:Vector.<Number>;
  5.  
  6. graphics.lineStyle(0, 0xFF0000);
  7. graphics.moveTo(halfWidth, 0);
  8. graphics.lineTo(halfWidth, stage.stageHeight);
  9. graphics.moveTo(0, halfHeight);
  10. graphics.lineTo(stage.stageWidth, halfHeight);
  11.  
  12. var line:Shape = Shape(addChild(new Shape()));
  13. line.x = halfWidth;
  14.  
  15. var idle:Function = function(){};
  16. var currentMode:Function = idle;
  17. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  18. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20. function onDown(evt:MouseEvent):void{
  21.     if (contains(frame)){
  22.         removeChild(frame);
  23.         currentMode = idle;
  24.         line.graphics.clear();
  25.         return;
  26.     }
  27.     loc = new Vector.<Number>();
  28.     line.graphics.lineStyle(0,0xFFFFFF);
  29.     line.x = halfWidth
  30.     line.y = halfHeight;
  31.     line.graphics.moveTo(line.mouseX, line.mouseY);
  32.     currentMode = captureLocs;
  33.     canvas.fillRect(canvas.rect, 0x000000);
  34. }
  35. function onUp(evt:MouseEvent):void{
  36.     if (currentMode == idle) return;
  37.     setupLathe();
  38.     currentMode = showLathe;
  39. }
  40.  
  41. function onLoop(evt:Event):void{
  42.     currentMode();
  43. }
  44. function captureLocs():void{
  45.     loc.push(line.mouseX);
  46.     loc.push(line.mouseY);
  47.     loc.push(0);
  48.     line.graphics.lineTo(line.mouseX, line.mouseY);
  49. }
  50. /**
  51.  -- Lathe Stuff:
  52. */
  53. var canvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight,false, 0x000000);
  54. var frame:Bitmap = new Bitmap(canvas);
  55. var dx:Number=0;
  56. var dy:Number=0;
  57.  var matrix:Matrix3D = new Matrix3D();
  58. var pVerts:Vector.<Number>;
  59. var uvts:Vector.<Number>;
  60. function setupLathe():void{
  61.     addChild(frame);
  62.     pVerts =  new Vector.<Number>();
  63.     uvts = new Vector.<Number>();
  64.     var nVerts:Vector.<Number> = new Vector.<Number>();
  65.     var tVerts:Vector.<Number> = new Vector.<Number>();
  66.     matrix.identity();
  67.     var step:Number = 2;
  68.     for (var i:int = 0; i <360; i+=step){
  69.         matrix.appendRotation(step,Vector3D.Y_AXIS);
  70.         matrix.transformVectors(loc, tVerts);
  71.         nVerts = nVerts.concat(tVerts);
  72.     }
  73.     loc = nVerts.concat();
  74. }
  75. function showLathe():void{
  76.     dx += (mouseX - dx)/4;
  77.     dy += (mouseY - dy)/4;
  78.     matrix.identity();
  79.     matrix.appendRotation(dy,Vector3D.X_AXIS);
  80.     matrix.appendRotation(dx,Vector3D.Y_AXIS);
  81.     matrix.appendTranslation(halfWidth, halfHeight, 0);
  82.     Utils3D.projectVectors(matrix, loc, pVerts, uvts);
  83.     canvas.lock();
  84.     canvas.fillRect(canvas.rect, 0x000000);
  85.     var leng:int = pVerts.length;
  86.     for (var i:int = 0; i<leng; i+=2){
  87.         canvas.setPixel( pVerts[i], pVerts[i + 1], 0xFFFFFF);
  88.     }
  89.     canvas.unlock();
  90. }

This snippet allows you to create 3D lathe shapes by drawing a 2D line. This is done using Utils3D.projectVectors() and Matrix.transformVectors().

Have a look at the swf here...

Also posted in 3D, BitmapData, Math, Vector, matrix, setPixel | Tagged , , | 3 Comments

Bresenham’s Circle and setVector()

Actionscript:
  1. var canvasSize:int = 400;
  2. var canvas:BitmapData = new BitmapData(canvasSize, canvasSize, false, 0xFFFFFF);
  3. addChild(new Bitmap(canvas));
  4. var size:int = canvas.width * canvas.height;
  5. var pixels:Vector.<uint> = canvas.getVector(canvas.rect);
  6.  
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8. function onLoop(evt:Event):void {
  9.      for (var i:int = 0; i<500; i++){
  10.       fillCircle(int(Math.random() * canvasSize),
  11.                       int(Math.random() * canvasSize),
  12.                       int(Math.random() * 5 + 3),
  13.                       uint(Math.random() * 0xFFFF));
  14.      }
  15.      canvas.lock();
  16.      canvas.setVector(canvas.rect, pixels);
  17.      canvas.unlock();
  18. }
  19.  
  20. function fillCircle(xp:int,yp:int, radius:int, col:uint = 0x000000):void {
  21.     var xoff:int =0;
  22.     var yoff:int = radius;
  23.     var balance:int = -radius;
  24.     while (xoff <= yoff) {
  25.          var p0:int = xp - xoff;
  26.          var p1:int = xp - yoff;
  27.          var w0:int = xoff + xoff;
  28.          var w1:int = yoff + yoff;
  29.          hLine(p0, yp + yoff, w0, col);
  30.          hLine(p0, yp - yoff, w0, col);
  31.          hLine(p1, yp + xoff, w1, col);
  32.          hLine(p1, yp - xoff, w1, col);
  33.         if ((balance += xoff++ + xoff)>= 0) {
  34.             balance-=--yoff+yoff;
  35.         }
  36.     }
  37. }
  38. function hLine(xp:int, yp:int, w:int, col:uint):void {
  39.     var index:int = xp + yp * canvasSize;
  40.     for (var i:int = 0; i <w; i++){
  41.         index++;
  42.         if (index> -1 && index <size){
  43.           pixels[index] = col;
  44.         }
  45.     }
  46. }

In the past I've posted examples of Bresenham's Circle (here and here). Both of those examples make use of setPixel(). Today's snippet demos a version of Bresenham's Circle that works with setVector().

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

Distance Line Gradient

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.

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

Distance Between Point and Line (optimized)

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.

Also posted in Math, misc | Tagged , , | 1 Comment

Distance Between Point and Line Segment

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.

Also posted in Math | Tagged , , | 3 Comments

Polygon Triangulation

Actionscript:
  1. var triangulate:Triangulate = new Triangulate();
  2.  
  3. var poly:Array=[];
  4.  
  5. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  6. function onDown(evt:MouseEvent):void {
  7.     poly.push(new Pnt(mouseX, mouseY));
  8. }
  9.  
  10. addEventListener(Event.ENTER_FRAME, onLoop);
  11. function onLoop(evt:Event):void {
  12.     var i:int;
  13.     graphics.clear();
  14.     var verts:Array=triangulate.process(poly);
  15.  
  16.     if (verts==null) {
  17.         // draw a red polygon if there is some kind of error,
  18.         // or if there are too few points on the poly
  19.         if (poly.length>1) {
  20.             graphics.lineStyle(0,0xFF0000);
  21.             graphics.moveTo(poly[0].x, poly[0].y);
  22.             for (i = 1; i<poly.length; i++) {
  23.                 graphics.lineTo(poly[i].x, poly[i].y);
  24.             }
  25.         }
  26.     }else{
  27.         // draw the triangulated polygon
  28.         var tcount:int = verts.length / 3;
  29.         graphics.lineStyle(0,0x000000);
  30.         for (i = 0; i<tcount; i++) {
  31.             var index:int = i * 3;
  32.             var p1:Pnt=verts[index];
  33.             var p2:Pnt=verts[index+1];
  34.             var p3:Pnt=verts[index+2];
  35.             graphics.moveTo(p1.x,p1.y);
  36.             graphics.lineTo(p2.x,p2.y);
  37.             graphics.lineTo(p3.x,p3.y);
  38.             graphics.lineTo(p1.x,p1.y);
  39.         }
  40.     }
  41. }

The above demo's a class that triangulates a polygon given a list of points. To test this snippet you'll need the Pnt and Triangulate Classes, which you can download or copy from below.

Polygon triangulation is useful for lots of things... I first found that I needed it back in my Director days. I wanted to be able to draw a polygon and then extrude it into 3D space - in order to do this I needed to triangulate the polygon that was drawn. Luckily there was an undocumented feature in Lingo that did the triangulation. I'll probably do an extrusion demo soon. I've been looking into this to make the QuickBox2D polygon stuff a little easier.


Take a look at the swf here

Download all source and fla here....

Here is the Triangulate class:

Actionscript:
  1. /**
  2. This code is a quick port of code written in C++ which was submitted to
  3. flipcode.com by John W. Ratcliff  // July 22, 2000
  4. See original code and more information here:
  5. http://www.flipcode.com/archives/Efficient_Polygon_Triangulation.shtml
  6.  
  7. ported to actionscript by Zevan Rosser
  8. www.actionsnippet.com
  9. */
  10.  
  11. package {
  12.    
  13.     public class Triangulate {
  14.        
  15.         private const EPSILON:Number = 0.0000000001;
  16.        
  17.         public function Triangulate(){}
  18.        
  19.         public function process(contour:Array):Array{
  20.             var result:Array = [];
  21.             var n:int = contour.length
  22.             if ( n <3 ) return null
  23.            
  24.             var verts:Array = [];
  25.            
  26.               /* we want a counter-clockwise polygon in verts */
  27.             var v:int
  28.            
  29.               if ( 0.0 <area(contour) ){
  30.                 for (v=0; v<n; v++) verts[v] = v;
  31.               }else{
  32.                 for(v=0; v<n; v++) verts[v] = (n-1)-v;
  33.               }
  34.            
  35.               var nv:int = n;
  36.            
  37.               /*  remove nv-2 vertsertices, creating 1 triangle every time */
  38.               var count:int = 2*nv;   /* error detection */
  39.              var m:int;
  40.               for(m=0, v=nv-1; nv>2; )
  41.               {
  42.                 /* if we loop, it is probably a non-simple polygon */
  43.                 if (0>= (count--)){
  44.                   //** Triangulate: ERROR - probable bad polygon!
  45.                  // trace("bad poly");
  46.                   return null;
  47.                 }
  48.            
  49.                 /* three consecutive vertices in current polygon, <u,v,w> */
  50.                 var u:int = v; if (nv <= u) u = 0;     /* previous */
  51.                 v = u+1; if (nv <= v) v = 0;     /* new v    */
  52.                 var w:int = v+1; if (nv <= w) w = 0;     /* next     */
  53.            
  54.                 if ( snip(contour,u,v,w,nv,verts)){
  55.                   var a:int,b:int,c:int,s:int,t:int;
  56.            
  57.                   /* true names of the vertices */
  58.                   a = verts[u]; b = verts[v]; c = verts[w];
  59.            
  60.                   /* output Triangle */
  61.                   result.push( contour[a] );
  62.                   result.push( contour[b] );
  63.                   result.push( contour[c] );
  64.            
  65.                   m++;
  66.            
  67.                   /* remove v from remaining polygon */
  68.                   for(s=v,t=v+1;t<nv;s++,t++) verts[s] = verts[t]; nv--;
  69.            
  70.                   /* resest error detection counter */
  71.                   count = 2 * nv;
  72.                 }
  73.               }
  74.            
  75.               return result;
  76.         }
  77.        
  78.         // calculate area of the contour polygon
  79.         public function area(contour:Array):Number{
  80.             var n:int = contour.length;
  81.             var a:Number  = 0.0;
  82.            
  83.             for(var p:int=n-1, q:int=0; q<n; p=q++){
  84.                 a += contour[p].x * contour[q].y - contour[q].x * contour[p].y;
  85.             }
  86.             return a * 0.5;
  87.         }
  88.        
  89.         // see if p is inside triangle abc
  90.         public function insideTriangle(ax:Number, ay:Number, bx:Number, by:Number, cx:Number, cy:Number,px:Number,py:Number):Boolean{
  91.                                                            
  92.               var aX:Number, aY:Number, bX:Number, bY:Number
  93.               var cX:Number, cY:Number, apx:Number, apy:Number;
  94.               var bpx:Number, bpy:Number, cpx:Number, cpy:Number;
  95.               var cCROSSap:Number, bCROSScp:Number, aCROSSbp:Number;
  96.            
  97.               aX = cx - bx;  aY = cy - by;
  98.               bX = ax - cx;  bY = ay - cy;
  99.               cX = bx - ax;  cY = by - ay;
  100.               apx= px  -ax;  apy= py - ay;
  101.               bpx= px - bx;  bpy= py - by;
  102.               cpx= px - cx;  cpy= py - cy;
  103.            
  104.               aCROSSbp = aX*bpy - aY*bpx;
  105.               cCROSSap = cX*apy - cY*apx;
  106.               bCROSScp = bX*cpy - bY*cpx;
  107.            
  108.               return ((aCROSSbp>= 0.0) && (bCROSScp>= 0.0) && (cCROSSap>= 0.0));
  109.         }
  110.        
  111.         private function snip(contour:Array, u:int, v:int, w:int, n:int, verts:Array):Boolean{
  112.               var p:int;
  113.               var ax:Number, ay:Number, bx:Number, by:Number;
  114.               var cx:Number, cy:Number, px:Number, py:Number;
  115.            
  116.                   ax = contour[verts[u]].x;
  117.                   ay = contour[verts[u]].y;
  118.                
  119.                   bx = contour[verts[v]].x;
  120.                   by = contour[verts[v]].y;
  121.                
  122.                   cx = contour[verts[w]].x;
  123.                   cy = contour[verts[w]].y;
  124.            
  125.           if ( EPSILON> (((bx-ax)*(cy-ay)) - ((by-ay)*(cx-ax))) ) return false;
  126.            
  127.               for (p=0;p<n;p++){
  128.                     if( (p == u) || (p == v) || (p == w) ) continue;
  129.                     px = contour[verts[p]].x
  130.                     py = contour[verts[p]].y
  131.                     if (insideTriangle(ax,ay,bx,by,cx,cy,px,py)) return false;
  132.               }
  133.               return true;
  134.         }
  135.     }
  136. }

... and the Pnt class:

Actionscript:
  1. // Point class, no reason to use AS3's build in Point
  2. package{
  3.     public class Pnt {
  4.         public var x:Number;
  5.         public var y:Number;
  6.         public function Pnt(x:Number, y:Number){
  7.             this.x = x;
  8.             this.y = y;
  9.         }
  10.     }
  11. }

I also found a nice description of the basic technique being employed here.

UPDATE:
This should be obvious, but I was targeting fp9 with this... thus the use of Array instead of Vector.

Also posted in 3D, Math, misc | Tagged , | 6 Comments

sine cosine Gradient

Actionscript:
  1. [SWF(width=600,height=500,frameRate=30)]
  2. var canvas:BitmapData=new BitmapData(600,500,false,0x000000);
  3. addChild(new Bitmap(canvas));
  4. var size:Number=canvas.width*canvas.height;
  5. var w:Number=canvas.width;
  6. var wd:Number=1/w;
  7. var pix:Vector.<uint> = new Vector.<uint>();
  8. var sin:Number;
  9. var cos:Number;
  10. var dx:Number=110;
  11. var dy:Number=52;
  12. addEventListener(Event.ENTER_FRAME, onLoop);
  13. function onLoop(evt:Event):void {
  14.     dx+=0.001;
  15.     canvas.lock();
  16.     for (var i:int = 0; i<size; i++) {
  17.         var xp:Number=i%w;
  18.         var yp:Number=int(i*wd);
  19.         var xx:Number=xp*0.05+dx;
  20.         var yy:Number=yp*0.05+dy;
  21.         var t:Number= (xx * yy) % 3.14159265;
  22.         //compute sine
  23.         // technique from http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/
  24.         // by Michael Baczynski
  25.         if (t<0) {
  26.             sin=1.27323954*t+.405284735*t*t;
  27.         } else {
  28.             sin=1.27323954*t-0.405284735*t*t;
  29.         }
  30.         //compute cosine: sin(t + PI/2) = cos(t)
  31.         t+=1.57079632;
  32.         if (t>3.14159265) {
  33.             t-=6.28318531;
  34.         }
  35.         if (t<0) {
  36.             cos=1.27323954*t+0.405284735*t*t;
  37.         } else {
  38.             cos=1.27323954*t-0.405284735*t*t;
  39.         }
  40.         var c:Number=sin+cos*cos*cos;
  41.         // fast math abs
  42.         c=c<0? -c:c;
  43.         c=c*140;
  44.         // math max 255
  45.         c=c>255?255:c;
  46.         pix[i]=c<<16|c<<8|c;
  47.     }
  48.     canvas.setVector(canvas.rect, pix);
  49.     canvas.unlock();
  50. }

The above snippet will animate a gradient that looks like this:

Also posted in BitmapData, Vector, pixel manipulation | 3 Comments