The bit between pixels

Oct 19th, 2009

 

A little Actionscript 3.0 function to help to find those DisplayObjects in Flash which are placed on half pixels and then snap them back into place. Although you can just leave them floating on half pixels if you want!


private function displayListSnapper(container:DisplayObjectContainer, round:Boolean, debug:Boolean, indent:String = ""):void
{
var child:DisplayObject;
for (var i:uint=0; i < container.numChildren; i++)
{
child = container.getChildAt(i);

if(round == true)
{
child.x = Math.round(child.x);
child.y = Math.round(child.y);
}

if(debug == true)
{
trace(indent + "DisplayObject: " +child + ":: Name: " + child.name + " :: x:" + child.x + " :: y:" + child.y);
}

if (container.getChildAt(i) is DisplayObjectContainer)
{
roundDisplayList(DisplayObjectContainer(child), round, debug, indent + "^^^")
}
}
}

Tags: , ,

No comments

 

Facebook API: Who and your App?

Aug 25th, 2009

 

When creating a Facebook App with the Adobe Flash Facebook API, it’s pretty useful to know which of the users friends, has also added your Facebook App for scoreboards etc. A simple FacebookCall using GetAppUsers and then interpreting the returned data with GetAppUserData can yield an array of UID’s or raw XML. The code below needs a valid Facebook session.


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

private function callCompleteHandler(event:FacebookEvent):void
{
event.target.removeEventListener(FacebookEvent.COMPLETE, this.callCompleteHandler);
var appUserData:GetAppUserData = event.data as GetAppUserData;

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

Tags: , ,

No comments

 

Sequential Randomness

Aug 20th, 2009

 

Perlin Noise can be a great way of adding some sequential random movement to an animation or an effect. Originally used in the used in the 1982 film Tron Perlin Noise is a procedural texture used by 3D Artists ever since to make large textures appear more natural.

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!

Tags: , , , ,

No comments

 

Painting with Particles

Jul 29th, 2009

 

Painting with Particles is a mini Flash/ Actionscript 3 project I produced using the Flint Particle system. I came across Flint a few months ago because of its incredible smoke effects, and after a few tests I thought I would have a crack at producing something slightly different. The main reason behind creating a simple click/hold painting app was because of the interesting and unique effects you can create/ texturize with particles. Although this maybe not be evident from the examples I quickly put together below.

Painting with Particles Examples

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

Tags: , , , , ,

No comments

 

Faceflash Facebook

Jul 28th, 2009

 

So Adobe and Facebook came together a few months ago and released a full blown API for Flash/Actionscript 3, well released maybe more re-branded an existing API by Jason Crist. Anyway the API is very detailed, and as far as I aware well documented. Thought after a few weeks it’s probably worth looking into, as Facebook is still a buzzword which still holds a lot of weight.

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

var responseData:GetFriendsData = event.data as GetFriendsData;

for(var i:Number = 0; i {
this.uniIdArray.push(responseData.friends.getItemAt(i).uid);
}

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

if (!responseData || event.error)
{
trace("error ::" + this.loadCount);
this.loadFriend();
return;
}

var responseData:GetInfoData = event.data as GetInfoData;
var profileObj:ProfileObject = new ProfileObject();

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

Tags: , , , ,

No comments

 

Placing Particles

Jul 27th, 2009

 

Papervision is great but I sometimes feel that I would be a lot better off with a greater understanding of 3D Math. Therefore this post based upon an experiment I did a little while ago, with the aim of generating a sphere of particles and improving my 3D Math.

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.

Tags: , , , ,

No comments

 

lineTo Art

Jul 22nd, 2009

 

Odosketch has been around for a few days now, and has been recently made S.O.T.D by FWA. Its a great little drawing tool where people are creating really impressive sketches, and the best bit being you can watch their drawings play back. I thought I’ll have a little attempt at trying to recreate one of their brushes in Flash using Actionscript 3

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.

AbstractArt

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;

Tags: , , ,

No comments

 

Shuffle Shuffle Array

Jul 21st, 2009

 

Some projects you find yourself needing to shuffle arrays to randomise the objects within, below is a little static function for Actionscript 3 which will do the above. In order to use the function you need to do the following…

toBeShuffledArray = ArrayShuffle.shuffle(toBeShuffledArray);


public class ArrayShuffle()
{
public static function shuffle(array:Array):Array
{
var obj:*;
var ran:Number;

for(var i:Number = 0; i {
obj = array[i];
ran = Math.floor(Math.random() * array.length);
array[i] = array[ran];
array[ran] = obj;
}
return array;
}

}

Source code

Tags: , , ,

No comments

 

workspace.cleanup();

Jul 17th, 2009

 

My project workspace at home and at work is full of little experiments or mini projects which never get finished or tidied up, and consequently not seen. Therefore I’ve decided to do a little cleanup and post them up here in whatever state or standard they are.

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

Tags: , , ,

No comments

 

Papervision: Mapping 2D in 3D

Jun 14th, 2009

 

There are many ways to improve the performance of your Papervision application, and in my first blog post in a few months I’ll cover the technique of mapping a 2D sprite to an object in 3D Papervision. The main concept of this technique is two reduce the number of elements rendered in 3D to a minimum, naturally this is only applicable to certain situations. The yellow triangle below is a standard Sprite, and by clicking upon it will map the triangle to a red particle within the rotating sphere.

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

Tags: , ,

No comments

 

Fatal error: Call to undefined function akismet_counter() in /usr/local/psa/home/vhosts/chrisherring.co.uk/subdomains/blog/httpdocs/wp-content/themes/chrisherring/footer.php on line 20