Three Color Triangle

Actionscript:
  1. /*
  2. *       Petri Leskinen, Finland
  3. *       25 October 2009
  4. *       pixelero.wordpress.com
  5. *
  6. *       Actionscript 3.0, Flash CS3, Flash Player 10
  7. *
  8. *       threeColorTriangle
  9. *       draws a triangle with a gradient fill of three colors for each vertex
  10. *       using graphics.drawTriangles and a BitmapData of size 2x2
  11. */
  12. function threeColorTriangle(
  13.       point0:Point, color0:uint,
  14.       point1:Point, color1:uint,
  15.       point2:Point, color2:uint):void {
  16.  
  17.       //      create a  bitmap of size 2x2 pixels
  18.       var bmd:BitmapData = new BitmapData(2,2,true);
  19.       //      copy colors to bitmap
  20.       //      the fourth color is average of color1 and color2
  21.       bmd.setVector(bmd.rect,
  22.               Vector.<uint>([color0,color1,color2,
  23.                                          (color1+color2)>>1
  24.                                          ]));
  25.  
  26.       //      draw triangle
  27.       this.graphics.beginBitmapFill(bmd,null,false,true /* =smooth */ );
  28.       this.graphics.drawTriangles(
  29.               // x,y -coordinates
  30.               Vector.<Number>([
  31.                       point0.x,point0.y,
  32.                       point1.x,point1.y,
  33.                       point2.x,point2.y]),
  34.               // indices
  35.               Vector.<int>([0,1,2]),
  36.               // texture coordinates
  37.               Vector.<Number>([0,0, 1,0, 0,1])
  38.               );
  39. }
  40.  
  41.  
  42. // demo, let's draw some of these on the stage
  43. randomize();
  44. function randomize():void {
  45.       this.graphics.clear();
  46.  
  47.       for (var i:int = 0;i<128;i++) {
  48.               //      pick some random colors
  49.               var color0:uint = 0xFFFFFFFF;
  50.               var color1:uint = 0xFFFFFF*Math.random() | 0xFF000000;
  51.               var color2:uint = 0xFFFFFF*Math.random() | 0xFF000000;
  52.  
  53.               //      random points
  54. var point0:Point = new Point(Math.random()*stage.stageWidth,
  55.             Math.random()*stage.stageHeight);
  56. var point1:Point = new Point(point0.x+200*(Math.random()-Math.random()),
  57.             point0.y+200*(Math.random()-Math.random()));
  58. var point2:Point = new Point(point0.x+200*(Math.random()-Math.random()),
  59.             point0.y+200*(Math.random()-Math.random()));
  60.  
  61.         threeColorTriangle(point0, color0, point1, color1, point2,  color2);
  62.       }
  63. }

This snippet is by Petri Leskinen (pixelero). It draws a triangle with a gradient fill of three colors for each vertex using Graphics.drawTriangles and a BitmapData of size 2x2. This is the simplest case, it can easily be extended to four colors or maybe to use a larger 3x3, 4x4 etc... bitmap.

Here's a still...

This entry was posted in Graphics, Vector and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

5 Comments

  1. Posted October 27, 2009 at 4:13 pm | Permalink

    more at http://en.nicoptere.net/?p=537

    btw, how could it be “easily be extended” ? you would need to triangulate polys, and that gives multiple options that you have to chose from somehow.

  2. Posted October 30, 2009 at 7:12 pm | Permalink

    We used this method two years ago in Alternativa3D 3.0 but have decided to refuse it since color interpolation on sides differs and joints are visible.

  3. Posted October 30, 2009 at 7:58 pm | Permalink

    @anton thats interesting… makes sense when you think about it. Amazing job on Alternativa3D by the way - really inspiring work.

  4. Posted November 9, 2009 at 2:54 pm | Permalink

    I must admit, that is a good snippet! well done.

  5. Posted February 25, 2011 at 3:25 am | Permalink

    category: super code!
    awesome sauce!
    great work!

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*