# AS Quiz # 12

Today’s quiz is not multiple choice. Instead, use your choice of the Graphics class or BitmapData to write a function that generates the below image:

Your function need not take any arguments, it need only return a display object containing the above image.

[EDIT] Solutions:

The solutions that have been posted in the comments so far are REALLY nice - they’re all worth checking out… and I think everyone posted their code to wonderfl so you can see the result without needing to open flash….

My two solutions:
The first solution is a variation on an example from the book I wrote with Rich Shupe:
First Solution

The next solution is actually in an old post from this site - it uses setPixel and HSV - RGB conversion:
Second Solution

Thanks to everyone who posted solutions so far - I’m surprised again by how many people participate in this format of quiz.

1. Posted January 26, 2010 at 1:10 pm | Permalink

quick & dirty

var bmp:Bitmap = Bitmap( addChild( new Bitmap( new BitmapData( 6, 2, false, 0×000000 ), ‘auto’, true ) ) );
bmp.scaleY = ( bmp.scaleX = 50 ) * 2.55;
var i:int = 6;
while( i– )bmp.bitmapData.setPixel( i, 1, ( ( i 4 ) ? 1:0 ) * 0xFF < 0 && i < 4 ) ? 1:0 ) * 0xFF < 2 && i < 6 ? 1:0 ) * 0xFF );

2. Posted January 26, 2010 at 1:21 pm | Permalink

wow very nice solution

3. Posted January 26, 2010 at 2:27 pm | Permalink

Here’s the not so quick, but exact version:

public function getColorMap( width:int = 256, height:int = 256 ):BitmapData
{
var ba:ByteArray = new ByteArray();
var i:int = width * height * 4;
while( i > 0 )
{
var hue:Number = ( ( (i >> 2) % width ) / ( width - 1 ) ) * 2 * Math.PI;
var brightness:Number = ( (i >> 2) / width ) / ( height - 1 );
ba[--i] = brightness * 127.5 * (Math.cos( hue + Math.PI * 2 / 3 ) + 1 );
ba[--i] = brightness * 127.5 * (Math.cos( hue + Math.PI * 4 / 3 ) + 1 );
ba[--i] = brightness * 127.5 * (Math.cos( hue ) + 1 );
ba[--i] = 0xff;
}

var bm:BitmapData = new BitmapData( width, height );
bm.setPixels( bm.rect, ba );
return bm;
}

4. Posted January 26, 2010 at 2:47 pm | Permalink

very nice… both of these comments are more interesting than the two solutions I have ready to post tomorrow

5. Posted January 27, 2010 at 1:51 am | Permalink

//for lazy guys only

private function tick(e:Event):void
{
var dDay:Date = new Date(2010,0,28);
var today:Date = new Date();
if(today.getTime()>=dDay.getTime()){
removeEventListener(Event.ENTER_FRAME,tick);
}
}

6. Posted January 27, 2010 at 2:44 am | Permalink

Funny how many different approaches are possible, I’ve done one with color math in the past but now I have just noticed it can be done even without a line of math!
I think this is the quickest and the DIRTIEST solution. Some linear interpolation artifacts, however almost the real thing.

const w:uint=301, h:uint=309, R:uint=0xFF0000, G:uint=0×00ff00, B:uint=0×0000ff;
var m:Matrix=new Matrix();
graphics.drawRect(0,0,w,h);
m.rotate(Math.PI/2);
graphics.drawRect(0,0,w,h);

7. Posted January 27, 2010 at 3:21 am | Permalink

wow. amazing solutions!

@quasimondo how did you come about that solution? is this common “colour picker generation logic”?

btw… slight bug if you draw a small one, 100×100 or there abouts, you get a few incorrect pixels at the base of the graphic.

8. Posted January 27, 2010 at 4:42 am | Permalink

This is the way hue works - typically it is mapped on a circle and each component red/green/blue is offset by 120° (a third of a full circle) whilst blending into its neighbors. In this case the 360° are mapped to the width of the rect whilst the brightness is mapped to the height.

There might be some overflow errors cause by rounding - didn’t limit the range to 0-255.

9. Posted January 27, 2010 at 10:04 am | Permalink

@Panta … nicely done…

10. Posted January 27, 2010 at 12:05 pm | Permalink

/* Did I miss some deadline, anyway, here’s my version with with graphics.beginBitmapFill :
FP10 because of .setVector
*/

var gradient:BitmapData = new BitmapData(7, 2);

0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000,
0xFFFF0000, 0xFFFFFF00, 0xFF00FF00, 0xFF00FFFF, 0xFF0000FF, 0xFFFF00FF, 0xFFFF0000 ]));

this.graphics.drawRect(0, 0, 300, 300);

11. Posted January 27, 2010 at 12:10 pm | Permalink

@Pixelero very nice… you didn’t miss any deadline… I just always post my answer the day after the quiz question…. people can still keep submitting their solutions…

12. Posted January 27, 2010 at 11:58 pm | Permalink

Panta rox! Yeah.

13. Posted January 29, 2010 at 4:24 am | Permalink

@panta - nifty … however adding:

before:
m.rotate(Math.PI/2);

ensures the brightness gradient is the correct dimensions

14. Posted January 29, 2010 at 5:44 am | Permalink

@Rauri - yep, almost forgot the image is not perfectly square