Yet another flag post

I’m not obsessed with flags, I swear

Published at 16:07 on Sunday 18th January 2009 by xerode

Filed under Animation, Experiments, Flash, Laboratory

Jump to page: 1 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
package net.xerode.demo {
 
	import flash.display.BlendMode;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.filters.DropShadowFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.filters.BitmapFilterQuality;
 
	import net.xerode.util.Maths;
 
	public class Perlin extends Sprite {
 
		private var flag:Sprite;
		private var bmd:BitmapData;
		private var seed:Number = 0;
		private var lifespan:uint = 0;
		private var flagData:BitmapData;
		private var salute:Sprite;
		private var result:Bitmap;
 
		private var oldFrame:BitmapData;
 
		public function Perlin( ) {
 
			trace( "Perlin demo start" );
 
			setup( );
 
		}
 
		private function setup( ):void {
 
			seed = Math.floor( Math.random( ) * 10 );
 
			// AnonFlag( ) is just the MovieClip library item that contains the flag image
			flag = new AnonFlag( );
 
			flagData = new BitmapData( flag.width, flag.height );
			flagData.draw( flag );
 
			result = new Bitmap( flagData )
 
			addChild( result );
 
			// Salute( ) is just the MovieClip library item that contains the foreground photo
			salute = new Salute( );
			salute.x = 150;
			salute.y = 35;
 
			salute.filters = new Array( new DropShadowFilter( 8, -45, 0x000000, 0.5, 32, 32 ) );
 
			addChild( salute );
 
			addEventListener( Event.ENTER_FRAME, animateFlag );
 
		}
 
		private function drawPerlin( ):void {
 
			bmd = new BitmapData( 450, 270, true, 0x00ffffff );
 
			var octaves:uint = 2;
 
			var offsets:Array = new Array( );
 
			for( var i:uint = 0; i < octaves; i++ ) {
 
				var ny:Number = Math.sin( Maths.deg2Rad( lifespan / ( stage.frameRate * 4 ) * 360 ) ) * 50;
 
				var pt:Point = new Point( ( lifespan / stage.frameRate ) * 300 * ( i / octaves ), ny );
 
				offsets.push( pt );
 
			}
 
			bmd.perlinNoise( 90, 135, octaves, seed, true, true, 7, true, offsets );  
 
			var cloned:BitmapData = bmd.clone( );
 
			bmd.applyFilter( cloned, bmd.rect, new Point( 0, 0 ), new BlurFilter( 4, 4, BitmapFilterQuality.LOW ) );
 
			var displaceX:Number = ( Math.sin( Maths.deg2Rad( lifespan / ( stage.frameRate * 1.2 ) * 360 )  ) * 5 ) + 15;
 
			var displaceY:Number = ( Math.sin( Maths.deg2Rad( lifespan / ( stage.frameRate * 0.8 ) * 360 )  ) * 5 ) + 35;
 
			flagData.lock( );
 
			// Get snapshot of flag
			flagData.draw( flag );
 
			// Merge with map for shading
			flagData.draw( bmd, null, new ColorTransform( 1, 1, 1, 0.25 ), BlendMode.HARDLIGHT );
			flagData.draw( bmd, null, new ColorTransform( 1, 1, 1, 0.5 ), BlendMode.OVERLAY );
 
			// Merge with previous frame
			if( lifespan > 0 ) {
				// flagData.draw( oldFrame, null, new ColorTransform( 1, 1, 1, 0.25 ), BlendMode.NORMAL );
			}
 
			flagData.lock( );
 
			// trace( displaceY );
			var bumpMap:DisplacementMapFilter = new DisplacementMapFilter( bmd, new Point( 0, 0 ), BitmapDataChannel.RED, BitmapDataChannel.BLUE, displaceX, displaceY, DisplacementMapFilterMode.CLAMP );
			result.filters = new Array( bumpMap );
 
			lifespan += 1;
 
			oldFrame = flagData.clone( );
 
		}
 
		private function animateFlag( e:Event ):void {
 
			drawPerlin( );
 
		}
 
	}
 
}

Jump to page: 1 2



Share or Subscribe

 

Discussion

You can leave a response or trackback from your own site

5 replies to “Yet another flag post”

You can follow any responses to this post by subscribing to the RSS 2.0 feed

  • Paulo

    18/01/09

    Dude, the cross-posting to LJ isn't working and is f***ing up friends page view (expanding it to twice its width!).

  • xerode

    18/01/09

    My bad, it wasn't supposed to cross-post. Sorry!

  • benny

    09/04/09

    Do you not provide a download link for this? I tried to rebuild it myself from your code on page 2 but where can I get your net.xerode.util.Maths class?

    Thanks.

  • xerode

    10/04/09

    The missing class just contains some maths stuff that Adobe didn't include in their Math class. The only method used in the flag code is deg2rad, which is just a method for converting degrees to radians.

  • Jules

    06/04/10

    Hello;
    I am somewhat confused as how to get this to work for me. I am having the same problem as "benny", but do not understand your response. I am a php coder, and new to AS3. I really love the flag, it is the best I have seen so far. Thanks!

Reply

Required fields are marked with an asterisk *





Recent Comments

Search

 

Feeds

 

Meta