private function getAppUsers():void
{
var call:FacebookCall = facebook.post(new GetAppUsers());
call.addEventListener(FacebookEvent.COMPLETE, this.callCompleteHandler);
}

trace(appUserData + " :: uids : " + appUserData.uids)
trace(appUserData + " :: RawResult : " + appUserData.rawResult)
}


Although we’ve not going to start texturing large areas, what we can produce in Flash with Perlin Noise is controlled and sequential randomness. Don’t laugh. The first thing to do is generate a Perlin Noise image with the following line of AS3 code.


var pNoise:BitmapData = new BitmapData( 550, 75);
pNoise.perlinNoise( 100, 80, 9, Math.random()*100, true, true )
addChild(new Bitmap(pNoise));


The above code generates a Perlin Nose image like this.

The next step is to get the pixel colour at 0, 0 on the Perlin Noise image, and convert it into a number. We can slowly move across the Perlin Noise image generating numbers which will form a pattern similar to this 0.62, 0.64, 0.66, 0.7, 0.66, 0.60, 0.58. The numerical pattern changes as the coloured clouds merge into each other, and due to this the pattern is sequential and coloured clouds controls the randomness. Therefore no anomalies are produced.

Below I’ve created a little Flash movie which draws a pixel line based upon the Perlin Noise. I’ve then multiplied this 4 times changing the colour and the result resembles a mountain stage in the Tour De France.

Flash is displayed here

Perlin Noise for controlled and sequential randomness!

There a few little bugs with the build below and I’ve had to take a couple of features out for this post. The spray paint effect which followed the users mouse movement didn’t make the cut and I’m yet to get the color management right due to hex code to uint conversion issue. For once I haven’t really got much to say about Painting with Particles, other then have a Paint!

Flash is displayed here

Just a quick example of the actionscript code used to create a Fill emitter

public static function get fill():Emitter2D
{
var emitter:Emitter2D;
emitter = new Emitter2D();
emitter.counter = new Steady(10000);
emitter.addInitializer( new ColorInit(ComponentManager.colour1, ComponentManager.colour2) );
emitter.addInitializer( new Position( new DiscZone( new Point( AppConstants.APP_WIDTH/2, AppConstants.APP_HEIGHT/2), AppConstants.APP_WIDTH ) ) );
emitter.addAction( new BoundingBox(0, 0, AppConstants.APP_WIDTH, AppConstants.APP_HEIGHT ) );
return emitter;
}


Related links
- Flint Particle System blog
- Getting started with Flint Particle System

In my opinion there are two types of application which will use the Facebook Flash API, the first being get and display apps. These are applications which get a users data and display information, think of the Last FM widget which display your top songs. Secondly an applications which take advantage of Facebook’s networking ability like Connect Red Bull. No doubt there are probably more types of application but there’s nothing like making a wide sweeping statement!

Anyway I’m just going mention a couple of things, about this little get and display application I’ve quickly made which gathers list of the users friends and displays specific information. Below I have briefly listed the various steps in the process to get this information, as you can see the process is unlike other API’s which after making a call send you back an xml document of information. For instance twitter will give a xml document containing all your friends information. Instead with the Facebook API you make request for a friends list, get a list of unique id’s in return and then have to make individual user queries on the unique id’s. I imagine I’ve completely missed something here, but I may be right if this is the case it’s probably due to the scale of Facebook, the data available and the potentially security risk. Making individual user queries also means the amount of being data requested is smaller i.e you receive only what ask for.

   1. User logins into Facebook
   2. User confirms login
   3. Start Facebook session
   4. Fetch users friends with users unique id
   5. Receive unique id of users friends
   6. Fetch specific data for each of the users friends
   7. Receive data for each of the users friends
   8. Repeat 6 and 7 till complete
   9. Do whatever.

The little application I’ve produced, just displays a selected number of the Facebook user friends and some basic information name, picture, DOB, about me. Perhaps next time I’ll try some networking and add some error handling. Here’s the application.

Flash is displayed here

And now some actionscript code.

By this stage the user has initialized the Facebook session by logging into Facebook, then confirmed they have done so and I have Completed a FriendList Request. Below I’m pushing all the unique id’s into an array, so they’re slightly more accessible then shuffling the array so I have a random order of friends each time.

private function getFriendsInfoResponse(event:FacebookEvent):void
{
event.target.removeEventListener(FacebookEvent.COMPLETE, this.getFriendsInfoResponse);

ArrayShuffle.shuffle(this.uniIdArray);
this.loadFriend();
}


Simple load request of a user's data by via a unique id.


private function loadFriend():void
{
var call:FacebookCall = facebook.post(new GetInfo([this.uniIdArray[this.loadCount]], ['uid', first_name', 'last_name', 'pic_small', 'about_me', 'birthday']));
call.addEventListener(FacebookEvent.COMPLETE, this.getFriendInfoResponse);
}


I've created an ProfileObject class, which consists of various getters and setters for the requested data. And I know I've declared variables halfway into a function, but the first few lines handle errors.


private function getFriendInfoResponse(event:FacebookEvent):void
{
event.target.removeEventListener(FacebookEvent.COMPLETE, this.getFriendInfoResponse);

profileObj.uid = responseData.userCollection.getItemAt(0).uid;
profileObj.firstName = responseData.userCollection.getItemAt(0).first_name;
profileObj.lastName = responseData.userCollection.getItemAt(0).last_name;
profileObj.profilePic = responseData.userCollection.getItemAt(0).pic_small;
profileObj.aboutMe = responseData.userCollection.getItemAt(0).about_me;
profileObj.brithday = responseData.userCollection.getItemAt(0).birthday;
this.profileArray.push(profileObj);
}


I found the most important thing to do is store the previous x and y positions of shape, so the next time the user moves the mouse, the shape being drawn starts from the last shape added. Coupled with a basic acceleration calculation, alpha channel + canvas texture and you are close to what has been produced for Odosketch. Conqusently some of the shapes created when your graphics.lineTo calculations are slightly out, produce abstract results like the following.

Click below in order to activate the Flash movie, and then click again to change brush colour.

Flash is displayed here

Always find the following line of actionscript code to be quite funny, like when do you need a random colour other then situations like these!?!

Math.random()*0xFFFFFF;