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);
}


The following picture is close to what I intended to achieve, however due to the very high number of particles with the sphere Papervision struggles render it. In this case switching to Flint, and using their 3D particle system would probably be a better idea.

Time to get gritty! The block of code below creates a sphere of Particles. The for loops below increase in specified steps for latitude and longitude, unlike your normal for loop which counts from 0 to whatever in single increments this stepped process enables us to distribute the Particles at an even distance. The sine wave calculation Math.sin(lat*Math.PI/180) is important for placing the particles in a spherical shape. A positive sine wave multiplied by PI divided by 180 creates us a semi-circle, combined with a negative sine wave we get a full circle. With in the two for loops I’ve also added a random if statement so that Papervision doesn’t struggle to render a high number of Particles, but still keeps the shape of a high density particle sphere. It’s also worth noting that I’ve created a class which extends the Particle class in Paperivision called Dot, to which I’m passing the calculated x y z values, these are then stored so that the Particles can be tweened from a random x y z to form a sphere. I’ve done this only for visual reasons!


for (var lat:Number = -90; lat<90; lat+=(360/dens))
{
var radius:Number = Math.cos(lat * Math.PI / 180) * size;
var circumference:Number = (2*Math.PI*radius);
var numberOfDots:Number = Math.floor(dens*circumference)/size;

for (var long:Number = 0; long<360; long+=(360/numberOfDots))
{
if (Math.floor(Math.random()*8) == 1)
{
part = new Dot(Math.cos(long*Math.PI/180)*radius,
Math.sin(lat*Math.PI/180)*size,
Math.sin(long*Math.PI/180)*radius );
this.particleArray.push(part);
this.particleHolder.addParticle(part);
}
}
}

Click below in order to activate the Flash movie.

The following is a no flash image

In end the outcome above is close to what I intended to achieve, however the density of the dots around the latitude axis is exactly the same at the poles as the equator. I've tried to resolve the density problem but without success, mainly due to Papervision struggling to render such a high density of Particles. I'm realistically on the edge of Math skills and perhaps purchasing a 3D Math primer would be a good idea. Anyway this was an interesting experiment which I got very close to getting it right.

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;

A couple of months ago I created a couple of classes to handle xml from Twitter for a potential flash feed thingy. The classes consisted of a model class which creates business objects like tweets and user, making the data easily mangaged/accessible within a project. Using these classes I’ve just added a bit of Papervision, the text is displayed via the Text3D class which is really nice class if your project uses Helvetica and some what devoid if it doesn’t.

Flash is displayed here

Flash is displayed here

Step 1
After setting up a basic Papervision environment with a sphere, the next thing to do is add a particle to the edge of the sphere. Within Papervision its not possible to just create a new Particle, and it add it the scene, instead the Particle must be added to an instantiation of the Particles class, which acts as holding container for a Particle. It is worth noting that thousands of individual Particles can be added to the Particles container and then added to the scene to be rendered.

var material = new ParticleMaterial(0xFF3333, 1);
var particle = new Particle(material, 15);
this.particles = new Particles();
this.particles.x =-294.8020952990483;
this.particles.z = -44.981004334405526;
this.particles.y = 47.67005198611658;
this.particles.addParticle(particle);
this.sphere.addChild(this.particles);


Step 2
In order to map a 2D Sprite to a 3D object we need to calculate the 3D objects relative position in x and y to the screen. Luckily by adding the following line to the previous code block this functionally can be switched on. The method autoCalcScreenCoords is available to any class which extends DisplayObject3D, however user must be careful as extra calculations are made with the potential for a performance drop if used with out.

this.particles.autoCalcScreenCoords = true;


Step 3
The screen x and y are always calculated relative to the size of the viewport being used. I’ve added the following couple of lines of code, within the render EnterFrame only so that the 2D Sprite is always mapped to the 3D object but of course could exist elsewhere.

this.triangle.x = ( this.particles.screen.x ) + (this.viewport.width / 2);
this.triangle.y = ( this.particles.screen.y ) + (this.viewport.height / 2);

And that’s it, pretty basic stuff yet can still be very useful.

Source code

One issue that has risen is the high number of requests made to the Last FM api in order to get the country specific data. The choice was between using the 27 European Unions member states, or the 49 countries which exist geographically within Europe. For the moment I’ve gone with the later, and ignored the 1.4mb of requests needed to complete this, but due to the Last FM api there is no other way of fetching the relevant data. A consequence of this is that Europe looks far more busy and the chart below is more populated.

The above image shows the chart generated after each of the European Countries data has been collated. I was slightly frustrated that the feed from the Last FM api isn’t live or updated on daily basis, instead I believe its updated weekly. I have uploaded the above build of Mapping Music and can be viewed here.

Next
- Individual country charts
- Comparison charts
- Improve the interface
- Look into a chart timeline.

Structure
At the moment I have an xml file which contains a list of countries within the Europe, then for each country I have attributed a latitude and longitude value. This is represented in the image below with a blue dot. It is easy to notice some of the dots are not in the centre of the countries, a by product of Batch Geocoder which is rather good.

In order to collate the information from Last FM various API requests are made relating to each Country. On the edge of the image below, I have quickly displayed each Country and its most popular artist.

Next
- Add an interface of some sort
- Figure out the most popular artist in Europe.

Looping through my recent Twitter posts I search for question marks or full stops etc with a regular expression which looks like this /\!|\?|\.|\…|\*/. Upon finding a matching character I extract the preceding word, and query the Flick api for images tagged with the preceding word, then place the tagged image in the background. In order to work around the security issue which arises when using Twitter and Flash, I use php to quickly copy my json feed and parse the local copy into flash. Below are some examples