Three Color Triangle

/*
*       Petri Leskinen, Finland
*       25 October 2009
*       pixelero.wordpress.com
*
*       Actionscript 3.0, Flash CS3, Flash Player 10
*
*       threeColorTriangle
*       draws a triangle with a gradient fill of three colors for each vertex
*       using graphics.drawTriangles and a BitmapData of size 2x2
*/
function threeColorTriangle(
      point0:Point, color0:uint,
      point1:Point, color1:uint,
      point2:Point, color2:uint):void {

      //      create a  bitmap of size 2x2 pixels
      var bmd:BitmapData = new BitmapData(2,2,true);
      //      copy colors to bitmap
      //      the fourth color is average of color1 and color2
      bmd.setVector(bmd.rect,
              Vector.<uint>([color0,color1,color2,
                                         (color1+color2)>>1
                                         ]));

      //      draw triangle
      this.graphics.beginBitmapFill(bmd,null,false,true /* =smooth */ );
      this.graphics.drawTriangles(
              // x,y -coordinates
              Vector.<Number>([
                      point0.x,point0.y,
                      point1.x,point1.y,
                      point2.x,point2.y]),
              // indices
              Vector.<int>([0,1,2]),
              // texture coordinates
              Vector.<Number>([0,0, 1,0, 0,1])
              );
}


// demo, let's draw some of these on the stage
randomize();
function randomize():void {
      this.graphics.clear();

      for (var i:int = 0;i<128;i++) {
              //      pick some random colors
              var color0:uint = 0xFFFFFFFF;
              var color1:uint = 0xFFFFFF*Math.random() | 0xFF000000;
              var color2:uint = 0xFFFFFF*Math.random() | 0xFF000000;

              //      random points 
var point0:Point = new Point(Math.random()*stage.stageWidth,
            Math.random()*stage.stageHeight);
var point1:Point = new Point(point0.x+200*(Math.random()-Math.random()),
            point0.y+200*(Math.random()-Math.random()));
var point2:Point = new Point(point0.x+200*(Math.random()-Math.random()),
            point0.y+200*(Math.random()-Math.random()));

        threeColorTriangle(point0, color0, point1, color1, point2,  color2);
      }
}

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 2×2. This is the simplest case, it can easily be extended to four colors or maybe to use a larger 3×3, 4×4 etc… bitmap.

Here’s a still…