After writing this post of using perlin noise, I’ll did some more experiments making cool things. I draw lines using Perlin noise as input. Check this out:
I was also experimenting/figuring out how to convert a actionscript generated movie to video. I never knew it was possible (or that easy) with the Flash CS3 (maybe because I never tried). Just choose file > export movie > and choose .mov extension. The video isn’t smooth, because (when I save it) it is not really rendering, it’s just like an invisible screencapture, I guess. So I can’t use more heavy CPU things. Thats a pity.
But maybe I could use my ImageSaver Class to create a movie-sequence by saving frame by frame as PNG.
Perlin noise? What is that? Well, if you are using PhotoShop, you should know the ‘clouds’-effect. That is Perlin noise. You could used it with Actionscript too. [kml_flashembed movie="http://projects.stroep.nl/perlinTest/example0.swf" height="180" width="420" scalemode="showall" /]Example of how Perlin noise looks like
What could we do with Perlin noise? Well, we could use it as random factor in movements.
For example: when we need a nice transition of rainbow colors, Perlin noise is an anwer. Let’s visualize that in a movie: [kml_flashembed movie="http://projects.stroep.nl/perlinTest/example1.swf" height="180" width="420" scalemode="showall" /].. and this is the code. It’s not very hard, just take a look at it.
var xPos = 0; // new bitmadata named noise var noise:BitmapData = new BitmapData(900, 10); // create some fractal perlin noise noise.perlinNoise(50, 3, 3, Math.random()*100, true, true); // add it to the stage this.addChild(new Bitmap( noise ));
// create shape var shape = new Shape(); shape.filters = [new GlowFilter(0xFFFFFF), new GlowFilter(0)]; this.addChild( shape );
// add enterframe event this.addEventListener( Event.ENTER_FRAME, update ); function update(e:Event ):void{ // move xPos every frame 1px to the left. (When reached the the width of noise, set to zero) xPos = ( xPos > noise.width) ? 0 : xPos + 1; // get the color of the noise using the xpos. varcolor:uint = noise.getPixel( xPos,0);
//clear previous rectangle, we don’t like 100% CPU shape.graphics.clear(); // Use the colors & draw a rectangle! shape.graphics.beginFill(color, 1); shape.graphics.drawRect(40, 40, 470, 200); }
This is what happens: We create a counter called xPos. Every frame it’s moving more to the right. We use the getPixel(x:xPos, y:0)-function to get the color value of the Perlin noise. This color value is used to draw a rectangle using graphics.drawRect()
Okay, pretty simple eh..? Well, make it better! Let’s create a moving bar, a catchy useless item for every website. More darkness means larger bars, more light means smaller bars.[kml_flashembed movie="http://projects.stroep.nl/perlinTest/example2.swf" height="180" width="420" scalemode="showAll" /]You can copy/paste this code into a new flash document on the timeline.
var xPos = 0; // new bitmadata named noise var noise:BitmapData = new BitmapData(900, 10); // create some fractal perlin noise noise.perlinNoise(50, 3, 3, Math.random()*100, true, true); // add it to the stage this.addChild(new Bitmap( noise ));
// create shape for(var i:int = 0; i < 15 ; i++ ) { var shape = new Shape(); shape.name = "shape"+i; this.addChild( shape ); } // add enterframe event this.addEventListener( Event.ENTER_FRAME, update ); function update(e:Event ):void{ // move xPos every frame 1px to the left. (When reached the the width of noise, set to zero) xPos = ( xPos > noise.width) ? 0 : xPos + 1;
for(var i:int = 0; i < 15 ; i++ ) { // get the color of the noise using the xpos. varcolor:uint = noise.getPixel( xPos+(i*2),0); var shape = this.getChildByName("shape" + i ); //clear previous rectangle, we don’t like 100% CPU shape.graphics.clear(); // Use the colors & draw a rectangle! shape.graphics.beginFill(color, 0.7); var calculation:Number = (360000000/color); shape.graphics.drawRect(20+ (i*25) , 40+ calculation, 24, 10-calculation );
} }
or create circle movements like this:[kml_flashembed movie="http://projects.stroep.nl/perlinTest/example3.swf" height="180" width="420" scalemode="showall" /]..the code:
..or make santa jump!? I created a MovieClip with some motion (100 frames) and used the seed as input for the gotoAndStop() function. [kml_flashembed movie="http://projects.stroep.nl/perlinTest/example4.swf" height="180" width="420" scalemode="showall" /]
santaMc.gotoAndStop(int(100/(totalColors/color)))
Conclusion; we should use Perlin noise more as random factor. Try to create your own way on how to use it. Tip of the day: Make things less static, add some random movement with Perlin Noise.
It took a while to get the right feeling, but I’m very happy with the results. Generated with actionscript, colorized with Photoshop. Orginal render size is 4800×4800 px. It’s full of details!
Sometimes I don’t know what to think of generative art. I don’t know if these images I created could be called (or what ‘they’ called) art, or if they are just some other renders. Sometimes it feels nothing more than lines, colors. Some people who see it really love it, but at some moments I don’t know how to think about it.
But take a look at it, they have so many details (see the big sizes if you have a flickr account). I cannot count the lines, but can have a endless watch to see if there’s a message in it. A secret sign or something else I didn’t coded. How can such useless lines be that interesting? I don’t get it..
A lot of people ask me how to create this images. If you don’t want to learn to code, just freak out with photoshop. First, when you really want to this: learn a coding-language, like actionscript. Download a nice actionscript-editor, like FlashDevelop. This makes coding more easily & comfortable. You also could learn processing. I don’t know a lot about it, but I’ve seen wonderful things created with it.
I just had an idea for a new generative render, so I started a some simple line tests. I calculated a motion-path. Around this path are moving multiple other sprites, that’s why we see a chain-like-line. Click to see high-res larger images (1200×1200 px)
That looked nice to me. I modified the code, to add some colors to it and make a better composition. The first 2 are some test with color and borderwidth, so you could see the process.
I’m kinda happy with this result. Maybe I generate a 10.000×10.000 render of this one, so I could print it at large format.
I’m experimenting with AIR, because I heard saving a ByteArray ( for example encoded PNG or JPG ) should be quite simple. You don’t need PHP or another serverside script for this, just write directly on you disk. Well, just check it out.
See this example of how to get it work. The image will be save on the same directory as your AIR application.
// use adobe’s encoder to create a byteArray var jpgEncoder:JPGEncoder = new JPGEncoder(60); var byteArray:ByteArray = jpgEncoder.encode( bitmapData );
// set an filename var filename:String = "cool-image.jpg";
// get current path var file:File = File.applicationDirectory.resolvePath( filename );
// get the native path var wr:File = new File( file.nativePath);
// create filestream var stream:FileStream = new FileStream();
// open/create the file, set the filemode to write in order to save. stream.open( wr , FileMode.WRITE);
// write your byteArray into the file. stream.writeBytes( byteArray, 0, byteArray.length);
// close the file. stream.close();
// That’s it.
Is that it? This would be a boring post if I stopped right now I experimented to create a colorful cool wallpaper using AS3 only and save it using AIR. If you don’t got AIR or just don’t want to use it, I recommend using my ImageSave class.
This is my code to create this wallpaper: Feel free to play with the code, but post a link to your experiment / wallpaper here.
publicclass Main extendsSprite { publicfunction Main():void { var bitmapData:BitmapData = new BitmapData (1280, 1024, false, 0×000000 );
// create colorful radial lines var shape:Shape = new Shape(); shape.graphics.moveTo((bitmapData.width/2), (bitmapData.height/2)) for(var i:Number = 0; i < 1900; i++) { // create some weird colors using sinus shape.graphics.lineStyle(30, (Math.sin( i * 9) * i / 200) * 0xffffff, 0.4); // do some weird sin/cos moves shape.graphics.lineTo((bitmapData.width/2) + (Math.sin( i/3)*i/2), (bitmapData.height/2) + (Math.cos( i/3)*i/2)); } // add it multiple times using other blendmodes, isn’t that what we do all the time in PhotoShop? bitmapData.draw( shape, null, null, BlendMode.NORMAL); bitmapData.draw( shape, null, null, BlendMode.ADD); bitmapData.draw( shape, null, null, BlendMode.MULTIPLY); bitmapData.draw( shape, null, null, BlendMode.OVERLAY); // cool! filters! Add some blur to our lines to make a nice blurry background bitmapData.applyFilter( bitmapData, bitmapData.rect, new Point() , new BlurFilter(40, 40, 5));
// create colorful radial lines var anotherShape:Shape = new Shape(); anotherShape.graphics.moveTo((bitmapData.width/2), (bitmapData.height/2)); for(var j:Number = 0; j < 1900; j++) { // create some weird lines with weird sizes var lineWidth:Number = 50 – ((j / 50) >> 0); varcolor:Number = (Math.sin( j ) * j / 200) * 0xFFFFFF anotherShape.graphics.lineStyle( lineWidth, color, 0.2, false, LineScaleMode.NORMAL, CapsStyle.SQUARE, JointStyle.MITER); anotherShape.graphics.lineTo((bitmapData.width/2) + (Math.sin( j/3)*j/2), (bitmapData.height/2) + (Math.cos( j/4)*j/2)); } // cool! filters! Add some blur to our lines to make a little blurry bitmapData.applyFilter( bitmapData, bitmapData.rect, new Point() , new BlurFilter(5, 5, 5)); // blendmode ADD is awesome bitmapData.draw( anotherShape, null, null, BlendMode.OVERLAY);
// create some text vartextfield:TextField = newTextField(); textfield.antiAliasType = AntiAliasType.NORMAL; textfield.htmlText = "<font face=’Arial’ color=’#FFFFFF’ size=’60′>FUN WITH BITMAPDATA</font> <br/> <font face=’verdana’ color=’#FFFFFF’ size=’20′><B>CREATE YOUR OWN WALLPAPER WITH FLASH</b></font>"; textfield.autoSize = TextFieldAutoSize.LEFT;
// cool! filters! Add blur to your text textfield.filters = [new BlurFilter(20,20,3)]
// draw textfield into bitmapdata, and use a matrix to set its position to center screen bitmapData.draw(textfield, new Matrix(1, 0, 0, 1, (bitmapData.width/2) – (textfield.textWidth/2) ,(bitmapData.height/2) – (textfield.textHeight/2)), null, BlendMode.ADD);
// reset the filters, just add DropShadow textfield.filters = [new DropShadowFilter(0, 45, 0, 0.3, 5, 5, 2, 5)]
// draw textfield again bitmapData.draw(textfield, new Matrix(1, 0, 0, 1, (bitmapData.width/2) – (textfield.textWidth/2) ,(bitmapData.height/2) – (textfield.textHeight/2)));
// show the bitmapData, just add it to the stage, using the Bitmap Class this.addChild(new Bitmap ( bitmapData ))
// use adobe’s encoder to create a byteArray var jpgEncoder:JPGEncoder = new JPGEncoder(60); var byteArray:ByteArray = jpgEncoder.encode( bitmapData );
// set an filename var filename:String = "cool-wallpaper.jpg";
// get current path var file:File = File.applicationDirectory.resolvePath( filename );
// get the native path var wr:File = new File( file.nativePath);
// create filestream var stream:FileStream = new FileStream();
// open/create the file, set the filemode to write; because we are going to save stream.open( wr , FileMode.WRITE);
// write your byteArray into the file. stream.writeBytes( byteArray, 0, byteArray.length);
Jackson Dunstan: This is a good way to program for the keyboard by polling rather than by events. Just be sure to keep in mind that a lot of keyboards won't do more th
I created a MovieClip with some motion (100 frames) and used the seed as input for the gotoAndStop() function. [kml_flashembed movie="http://projects.stroep.nl/perlinTest/example4.swf" height="180" width="420" scalemode="showall" /]
All Posts