Flash. AS3. Using AIR to output PNGS and final Color Correction and Manipulation in Photoshop. http://www.flickr.com/photos/natzke/1775506459/

Golly!

Holy moley! It's like Josh Davis on acid...

Yeah, he's a bit close-mouthed about the details but he seems to use bitmapdata to generate really abstracted forms from seed image photographs. Great process, much more developed conceptually than JD's work in this vein, imo, though I still prefer Davis's aesthetic.

Anyway, this is the exact solution to the problems I was having with Flash that made me give up on it.... I guess I have a bit of a learning curve ahead of me.

I'd love to know if vector exports are possible yet incorporating transparencies or if it only works in png...

Since Flash has its limitations on dimensions, I wonder if this could be ported (with ease) to .NET (since I'm a .NET d00d)... There would be a memory issue, but that is easily resolved.

Very sweet stuff!

Originally posted by: arigato Great process, much more developed conceptually than JD's work in this vein, imo, though I still prefer Davis's aesthetic.

I don't quite understand what he's talking about with the transparency... It's a flat image... Unless he's referring to each element (circle) having its own transparency...

Must research farther...

Ahh, nevermind... The example file "here is what just one layer typically looks like" didn't initially load... I see now what he's referring to...

it's basically the same idea as Sakri's bitmapdata text effects but with a transparent bg, exported from flash as png mural so he can tweak it in all in p'shop at full res. The thing is that there's no reason you couldn't do stuff that looked more pixelly should you be so inclined, just use rectangles for your generated bitmapdata instead of shape sprites, Or do both, in separate mcs or something like that. That would be cool. Of course if you use shape sprites with varying sizes and angles instead of simulating pixels you can scale up the swf to whatever print size you want in-browser, and do a series of screengrabs at the resolution you need - the main advantage to Natzke's method is that you have transparencies preserved.

I suppose another way to do this would be to simply tile mc's to get the pixel res you want (with the added advantage that you don't need AIR), but of course your BitmapData manipulations would have to be constrained or you'd get seams.

Inspiring stuff.

I wish I had a little more time at the moment to get back into this side of Flash.

FWIW I had a lot of success using vectors over bitmaps and printing to pdf via distiller.

An interesting note, I asked him about it and the concentric circle forms are generated based on what he calls "array emitters", so it's a bit more advanced than I intially expected - not sprite-based after all - an extra dash of WOW.

Started writing my own version... don't really know what technique he is using but a couple of hours and I've managed to output the following:

I'll post the code when I'm done playing around and have cleaned and packaged it up. Happy to post the uncommented mess as of now if anyone is interested.

couple more:

actually quite outstanding Arsis! Reminds me of the Flash Math Creativity stuff

Golly, colour me impressed! I'd love to see the code on that... though the uncommented mess version would probably rocket over my head like a meteor crashing into the sun.

I'm guessing the 2nd uses a seed image - are the other two as well?

PFC (pretty fucking cool)! :beer:

Thanx

You'll have to wait till Monday as I won't have time to clean up the code today.

All outputs are based on seed images and tweeking out a bunch of control variables.

Sounds like rollicking good times, can't wait to stick my dick in it!

I did a quick cleanup. Just pop it on frame 1, change the file path to your image and you're away. When I have time next I'll package it up and add some features.

// Image var imagePath:String = "test4.jpg"; // path to image var imageWidth:int = 800; // image dimensions var imageHeight:int = 800; // make the stage dimension the same

// Control variables (suugested variances) var imageResolution:int = 50; // create ribbon for every (n) pixels ( 10 - 100 ) var ribbonComplexityMax:int = 20; // max number of bEnds in ribbons ( 20 - 100 ) var ribbonComplexityMin:int = 15; // max number of bEnds in ribbons ( 10+ ) var ribbonsMax:int = 20; // max number of bAnds in ribbons ( 8 - 30 ) var ribbonsMin:int = 1; // min number of bAnds in ribbons ( 1 - ribbonsMax ) var ribbonSizeMax:int = 50; // max inner size of ribbon ( 0 - 500 ) var ribbonSizeMin:int = 0; // min inner size of ribbon ( 0 - ribbonSizeMax ) var ribbonSpreadMax:int = 2; // max amount that bAnds on a ribbon spread apart ( 1 - 20 ) var ribbonSpreadMin:int = 1; // min amount that bAnds on a ribbon spread apart ( 1 - ribbonSpreadMax ) var ribbonThick:Number = 0.5; // thickness of bAnds on ribbons ( 0.1 - 2 ) var ribbonColourStep = 2; // the pixel distance for each colour band ( 1 - 10 ) var doBlur:Boolean = true; // mmm blur... is good ( true - false ) var blurFactor:Number = 0.05; // how blury do you want it ( 0.05 - 1 ) var blurFocus:int = 1; // how quickly do you want the ribbons to be in focus ( -5 - 5 )

// no need to change these var image: DisplayObject; var imageBitmap:BitmapData; var imageLoader:Loader var imagePixelArray:Array; var imagePixelIndex:int; var imageProcessTimer:Timer; var renderBitmap:BitmapData; var renderBuffer:Sprite; var blur:BlurFilter = new flash.filters.BlurFilter(); blur.quality = 2;

// Load the image function imageLoad() { imageLoader = new Loader(); imageLoader.load( new URLRequest( imagePath ) );
imageLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, imageProcessInit ); image = addChildAt( imageLoader, 0 ); }

// initialise the processing // ignore this as it is mostly setup stuff // basically selects a grid of pixels based on the resolution setting // stuffs them into an array then randomises them function imageProcessInit( evt:Event ):void { image.width = imageWidth; image.height = imageHeight; // change the flase to ture if you want to see the seed image underneath the render renderBitmap = new BitmapData ( imageWidth, imageHeight, false, 0x333333); imageBitmap = new BitmapData ( imageWidth, imageHeight, false, 0x333333); imageBitmap.draw( imageLoader ); addChild( new Bitmap( imageBitmap ) ); addChild( new Bitmap( renderBitmap ) ); imagePixelArray = []; imagePixelIndex = 0; for(var x:int = 0; x < imageWidth; x += imageResolution ) { for(var y:int = 0; y < imageHeight; y += imageResolution ) { imagePixelArray.push( { x: x, y: y } ); } } imagePixelArray.sort( arrayRandomise ); imageProcessStart(); }

// kick start the timer ( I use a timer so I can watch it render YAY!! ) function imageProcessStart():void { imageProcessTimer = new Timer( 1, imagePixelArray.length ); imageProcessTimer.addEventListener( TimerEvent.TIMER, cellRender ); imageProcessTimer.start(); }

// Renderererer function cellRender( evt:TimerEvent ):void { var pointsArray:Array = [];

// start with a random number of points (ribbonComplexity) on a circle 
// each point is allocated a random spread amount (dis)
var points:int = Math.random() * ( ribbonComplexityMax - ribbonComplexityMin ) + ribbonComplexityMin;
for(var i:int = 0; i < points; i++ ) {
    pointsArray.push( { ang: ( 360 / points ) * i, dis: Math.random() * ribbonSpreadMax + ribbonSpreadMin } );
}

// start with a circle
// lay down a whole bunch of circles
// make them wobbly based on the ribbonComplexity coupled with point spread amount
// render them based on pixel location and colour to a buffer clip
var baseSize = Math.random() * ( ribbonSizeMax - ribbonSizeMin ) + ribbonSizeMin
var pixel:Object = imagePixelArray[ evt.target.currentCount -1 ]
renderBuffer = new Sprite();
var pixelArray = [];
var pixelArrayLength = ( ribbonsMax - ribbonsMin ) + ribbonsMin;

// Don't even begin to ask me what all this is about
// it just fell out of my head
for( var j:int = 0; j < pixelArrayLength; j++ ) {
    if(Math.random() > 0.02 ) {
        var col = imageBitmap.getPixel( ( pixel.x + j * ribbonColourStep ) % imageWidth, pixel.y );
        renderBuffer.graphics.lineStyle( ( pixelArrayLength - j ) * ribbonThick , col, 1 );
        for( var k:int = 0; k < points -1 ; k++ ) {
            var p1:Object = pointsArray[ k ];
            var p2:Object = pointsArray[ k + 1];
            var px1:int = Math.sin( p1.ang * Math.PI / 180 ) * ( baseSize + p1.dis * j ) + pixel.x;
            var py1:int = Math.cos( p1.ang * Math.PI / 180 ) * ( baseSize + p1.dis * j ) + pixel.y;
            var px2:int = Math.sin( p2.ang * Math.PI / 180 ) * ( baseSize + p2.dis * j ) + pixel.x;
            var py2:int = Math.cos( p2.ang * Math.PI / 180 ) * ( baseSize + p2.dis * j ) + pixel.y;
            var midx:int = ( px1 + px2 ) / 2;
            var midy:int = ( py1 + py2 ) / 2;
            if( k == 0 ) { 
                var tx = px1;
                var ty = py1;
                renderBuffer.graphics.moveTo(px1, py1);
            } else {
                renderBuffer.graphics.curveTo(px1, py1, midx, midy);
            }
        }
        renderBuffer.graphics.lineTo(tx, ty);
    }
}
// end brain fart

// do some bluring
if( doBlur ) {
    blur.blurX = blur.blurY = ( imagePixelArray.length - evt.target.currentCount ) * blurFactor - blurFocus;
    renderBuffer.filters = [ blur ];
}

// draw the buffer clip to our main image then get rid of it
addChild( renderBuffer );
renderBitmap.draw( renderBuffer );
removeChild( renderBuffer );

}

// little util to randomise all the points function arrayRandomise(a:Object, b:Object):Number { return ( Math.floor( Math.random( ) * 3 ) - 1 ) }

// go baby go imageLoad();

Now stick ya dick in that

Thanks for this, look like a blast! Very comprehensible too, you write pretty code.

Cool stuff I want to take a proper look when current project is done.

You're a sick fuck, Arse...

Fucking NICE!

Did a little bit more today. Added depth shading and blurring.

that really is cool.nice work.

stunning, nicely done!

Thought I'd play around with Arse's code... Here some of my flavor added to the mix...

I used an implementation of the Cubic Bezier formula and played with the numbers...

Using a random seed for drawing the rings...

Using a static seed for drawing the rings...

Using big numbers (larger scale) to see more detail of the rings...

Fun stuff!! I can play for days!

Awesome.

The bezier result looks fantastic.

wow. Ari just pointed me to this thread. i happen to have been doing very similar stuff just recently...

also, as far as the 2880 limit, i recently posted a solution to that as well... http://www.bit-101.com/blog/?p=1199