We all love the sky. We make millions of pictures of it, because it different every second. It is inspirational, every time you look at is, whenever it is day or night. Inspired by the sky, which is a little bit gray in Holland right right now, I created these images. I actually love the color palette, there is a little winter and some spring feeling in it.
I did something different this time; there are some typographic elements added. Just a few words that describe the feeling I have when looking at it.. What do you think about adding text to it?
Created with actionscript. Render size: 10.000×10.000 px.
Feeling creative; created a new serie with wild but odd colors. It has a happy abstract smoke-like feeling. It is hard to create good ribbons, but now I have find out a new way I kinda like. When I was experimenting with my ‘curved series’ (previous post), I already had the engine. But in this serie I left the borders, left the fade and added better movement and connection between the lines. It’s getting better every time. The curves and movements are based on a perlin noise. It took a lot of time till I get these four. The engine was right, but I have to deal with randomness. Mostly it doesn’t work and sometimes it does and now I have this:
I’ve created this one at 6000 x 6000 px. What do you think of it? if you are interested in buying one, please contact me info[at]stroep.nl.
noiseColor is the colorvalue of getPixel() from the perlin noise.
Some curves with gradient fills and 2 different stroke sizes. I found in the Matrix-class a createGradientBox() function, witch actually is a very cool and handy function. The colors are based on photos with cool colors, this gives a nice natural look.
I was working on a fur engine for images just for fun, inspired by a post on Andre Michelle’s blog. Yes, his engine looks better, but with mines you can create your own images. This is a funny way to create more detailed images. I’m happy with the application I created.
Since today you can see and use it.
The idea is very simple; Add a link to an image (jpg/png/gif) and the engine will create a furry image for you It automatically saves your hairy image, so you can send it to your friends or set it as desktop.
I’ve created a new video, and this one isn’t rendered like I said in the previous post (using flash > export movie > .mov), but I used the ImageSaver class every frame. I added an event listener to the class. So I started rendering frame 1. When frame 1 is completed, I call the save function. The ImageSaver class saves the images and dispatches an Event. When this Event.COMPLETE is being dispatched, I just render another frame. After rendering I call the save function again and wait till the Event.COMPLETE is being dispatched again. etcetera. Well, I think I’ve got my own mini-render engine. It works perfect for creating sequences of images (or just videos which use a lot of CPU or cannot be displayed at real-time). While rendering I counted the frames and stopped saving after 1000 frames.
So, now we can render more heavy effects and create videos, right? In this video 1000 images are rendered by actionscript, using additive blending and a BlurFilter. The movements are based on a Perlin noise. Not very heavy, but when running it in the FlashPlayer, I’ve cannot reach more than 11fps. The full version is 800×600 with transparency, 30fps.
Single image:
Video output: Yes, this video is created with actionscript
I used Premiere to merge all those images into a video.
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. 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: .. 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. 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 make santa jump!? I created a MovieClip with some motion (100 frames) and used the seed as input for the gotoAndStop() function.
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.
Jacob: Hi,
@Matt_W: Is there any posibility to see this code ? It would save my life ;) My mail: fenris85 at gmail.com . Thanks in advance !
Robert: It should be noted that Steven's method ONLY WORKS FOR INTEGERS! It's dangerous to use that method on :Number as those include floating point which a
Mark Knol: @Solenoid Cool you made a javascript performance test, nice to see this applies to actionscript ánd javascript.
Solenoid: Did a test for you: http://jsperf.com/absolute-value-speed/Steven Sacks's bitwise method wins hands down.PS: copy-paste from this website cont
Generative art – The sky isn’t the limit (2)
Well, I think I’ve got my own mini-render engine. It works perfect for creating sequences of images (or just videos which use a lot of CPU or cannot be displayed at real-time). While rendering I counted the frames and stopped saving after 1000 frames.
I created a MovieClip with some motion (100 frames) and used the seed as input for the gotoAndStop() function. 
