Making Bitmap Art with Flash CS3 and WikiPedia

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

WaterMelon

ARTWORK 2 : CYTRUS

CYTRUS

ARTWORK 3 : ADDEND

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

10 responses to “Making Bitmap Art with Flash CS3 and WikiPedia

  1. Daryl 29 July , 2007 at 3:34 am

    Watermelon looks yummy πŸ™‚

    lol

  2. wim 30 July , 2007 at 4:59 pm

    Koen,

    This is great man!
    And remember, you are an artist once you call yourself one πŸ™‚

    Keep it up dude!

  3. Koen 30 July , 2007 at 9:20 pm

    @wim, sure I am an artist πŸ˜‰

  4. Peter 31 July , 2007 at 10:13 am

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

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

  6. polyGeek 27 August , 2007 at 10:01 pm

    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–;

  7. polyGeek 27 August , 2007 at 10:04 pm

    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);”.

  8. Koen 28 August , 2007 at 7:26 am

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

  9. polyGeek 29 August , 2007 at 4:12 pm

    @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.

  10. Wendell Medious 11 June , 2010 at 3:05 pm

    Looks like your doing a good job with this blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s