## Making Bitmap Art with Flash CS3 and WikiPedia

28 July , 2007

Posted by on **Today I felt like a real bitmap artist (cool!) π **.

Yeah, I was making some real artwork **using Flash and WikiPedia**. I was reading through an article about **Bresenham’s line algorithm**. That is an algorithm that determines which points in an n-dimensional raster should be plotted in order to form a close approximation to a straight line between two given points. Through a minor expansion, the original algorithm for lines can also be used to draw circles. Also this can be done with simple arithmetic operations.

That’s what I have done to dynamically draw some artwork in BitmapData objects. You can see at the bottom of this post the foundation of the code so you can easily extend the code to make your own artwork. I played a bit with it in combination with Adobe Kuler (for good color combinations) and let the algorithm run for 500 cycles, wich is also part of the artwork.

Here are actually 3 results using Kuler for color combinations:

**ARTWORK 1 : WATERMELON**

**ARTWORK 2 : CYTRUS**

**ARTWORK 3 : ADDEND**

**If you want to have a look at the foundation of the code, here it is …:**

// inpiration: http://en.wikipedia.org/wiki/Bresenham’s_line_algorithm

var myBitmap:Bitmap = new Bitmap();

var myImage:BitmapData = new BitmapData(400,400,true,0xFFFFFFFF);

myBitmap.filters = [new BlurFilter(4, 2, BitmapFilterQuality.HIGH)];

var plotColorArray:Array = [0xFF000000,0xFF333333,0xFFFF358B,0xFF01B0F0,0xFFAEEE00]

var plotColor:uint = 0xFFFFFFFF;

myBitmap.bitmapData = myImage;

addChild(myBitmap);var x0:int = stage.stageWidth/2;

var y0:int = stage.stageHeight/2;

var radius:int = 1;var timer:Timer = new Timer(20,500);

timer.addEventListener(TimerEvent.TIMER,drawCircle);

timer.start();function drawCircle(evt:TimerEvent) {

if (radius>stage.stageWidth/4) {

radius =Math.random()*(stage.stageWidth/2);

plotColor = plotColorArray[Math.floor(Math.random()*5+1)]

}

var f : int = 1-radius;

var ddF_x :int= 0;

var ddF_y:int = -(Math.random()*1+1)*radius;

var x:int =0;

var y:int = radius;

//

myImage.setPixel(x0,y0+radius,plotColor);

myImage.setPixel(x0,y0-radius,plotColor);

myImage.setPixel(x0+radius,y0,plotColor);

myImage.setPixel(x0-radius,y0,plotColor);

while (x<y) {

if (f>=0) {

y- -;

ddF_y +=2;

f+=ddF_y;

}

x++;

ddF_x +=2;

f+=ddF_x +1;

myImage.setPixel(x0+x,y0+y,plotColor);

myImage.setPixel(x0-x,y0+y,plotColor);

myImage.setPixel(x0+x,y0-y,plotColor);

myImage.setPixel(x0-x,y0-y,plotColor);

//

myImage.setPixel(x0+y,y0+x,plotColor);

myImage.setPixel(x0-y,y0+x,plotColor);

myImage.setPixel(x0+y,y0-x,plotColor);

myImage.setPixel(x0-y,y0-x,plotColor);

}

radius +=5;}

Feel free to let me know if you made something based on this algorithm. Or maybe you want a big version in your living room… ;-).

Happy coding !!

Advertisements

Watermelon looks yummy π

lol

Koen,

This is great man!

And remember, you are an artist once you call yourself one π

Keep it up dude!

@wim, sure I am an artist π

its beautiful Koen! I could sure go for some watermelon right now π

Pingback: » Blog Archive » Links: Mathematical themes with Actionscript polyGeek.com

Cool work. I love this stuff.

There’s a typo in the while loop.

while (x=0) {

yβ;

ddF_y +=2;

f+=ddF_y;

}

The line with the “y-;”

should be

y–;

In reference to above: the TextField editor prevents someone from typing “MinusMinus” together. It truncates that to “Minus”.

So that line should be: “y(with two minus signs and not just one);”.

@polyGeek: indeed, have to look for another layout scheme; this sucks on “code design” π

@Koen, Yep. I’ve had that problem myself. I went through two different WP plugins to do code display and neither of them worked very well so I wrote my own – very basic one – in Flash.

Looks like your doing a good job with this blog.