Archive for October, 2005

Particles based on Motion

Here an experiment which shows 256 particles on screen. They get actived by the motion of the user (Webcam needed). This experiment does not show the full power of the routine because there are only the particles flying around. You can (and that is the nice thing) calculate and interpolate motion vectors. I did this in Flash8 with a 160×120 px webcam image which has been transformed to 320×240 px and the user was able to punch a ball around.
The routine is not very hard to understand. You have an image of the current webcam and greyscale it. Then you substract the last image, which you stored in a BitmapData from the current. The BlendMode.DIFFERENCE uses the formula newl = abs(old - new) and is exactly what we need. When I worked with Aibo’s camera I used some screen division method. You can also use scanlines which do the job for you. I use another method to get more inaccuracy (yes). I divide the screen in for example 16×16 parts and then I look onyl vor every 2nd pixel for example. This gives good results and keeps the number of total iterations low.
Anyway you know how much motion has been recognized in a given field.
If you want to punch a ball you would look for the best motion you can find around the ball and then look for the last motion. If you use pythagoras you get the distance between theese two points which is an indicator for the strength.
I had to interpolate the points a little bit to get this working with a ball in Flash8. Now have a look at theese nice particles. The performance depends on the number of particles and their size. There are currently 256 particles on screen and they have a size of 8×8 px. All particles get a different color at runtime and they fade using a ColorTransform. This experiment is very simple if you don’t think about the particles. It is only some sort this code:

[as] search.analyze( screen );

var m: Array = search.motion;
var n: int = 0×100;
var x: int;
var y: int;

while ( –n > -1 )
{
x = n & 0xf;
y = (n & 0xff) >> 4;

if ( m[ x ][ y ] > 0 )
addParticle( x * 20 , y * 15 );
}[/as]

I have to optimize this more and more. The array where the motion gets stored could have only one dimension. But the full 320×240 px webcam gets analyzed. There are 256 particles using blendmodes and colortransforms. If you do this with one ball only you could use a higher detail level for the analyzation.

AS3 MOD Tracker

ModTrackerI became addicted to chiptunes, wanted to upload them on my server and have a nice browsing tool. The result was this mod browser. Source of this crappy PHP code can be found in my stuff.

Now ther is the ByteArray. You all probably know about the ByteArray since Tinic Uro presented an JPEG Encoder and also a PNG Encoder. I like *.mod files and I know something about the format so why not writing a “mod decoder”?

I decided to do this because I hope there will be a Sound.fromByteArray() function or something like that in the end version of Flash Player 8 or 9. It would be cool to have theese very small songs being loaded and played during a game for example.

I’ll upload the sources when each effect of a note is also displayed (there is a misty bug). Just another thing to mention here: A real ModTracker would be no problem. You could edit your songs online and share them in a community. The only problem is you can not hear them :-/

Actionscript 3 - Up to 512 Particles

Some examples of the particlesHere another particle experiment. I did this years ago in Flash7 and then made some tests with Flash8 using BitmapData, caching and especially the blendmodes.
Now it is the time to do the same thing with the power of Actionscript3. When I did the particle thing in Flash8 I was really happy about my 32fps with 50 particles on the screen. The AS3 version looks very smooth (was to lazy for a fps counter) and has about 256 particles on the screen.

The speed is proportional to the size of every particle. Using particles with the size of 128×128 px slows flash down and about 100 particles are enough on the screen. I tested this with 16×16 px small particles and increased the amount of particles to 1024 which seemd to be fast.

Don’t forget this also features runtime bitmap manipulation because every particle is only a black/white-texture. For your own testing pleasure and to have more example codes on the web I uploaded the sourcecodes.

Edit:
Set quality to low to get more speed but same look :-)
Another Version with 1600 Particles has been added to the links.

How to use Sockets in Actionscript3?

After some kind of request it might be some time to explain detailed how I used the Socket in my IRC client. First of all I will explain how to bypass the securitymodel. I wrote about this before but I think it might be usefull to have it here again.

First of all Flash does not allow you to connect to servers that are outside the so-called sandbox of your Flash application. You are of course able to extend that sandbox by using Security.loadPolicyFile( ‘http://another-server/crossdomain.xml’ ); for example. Now most servers do not have such a file only for your pleasure.
The “simple” workaround here is using a proxy which is located on your server. A proxy is something that runs on your shell and is able to forward connections to other servers. Normally a connection goes direct from client to server (Client -> Server). Using a proxy would result in Client -> Proxy -> Server. Now the proxy is located on your server. That means every user that connects to some server would use your ip which is not good. Therefore I have to say this is not a satisfying workaround but at least you can connect to any server you want.
Proxys for IRC and other applications can be found at Google. An easy proxy is Proxy which is not hard to configure. For FTP applications I would suggest you using TLSWrap.

Now having the socket of your choice installed on your shell you are ready to go. IRC and many other protocols end every command with the CRLF. The binary representation of a CRLF is 13 10. I wrote some extended Socket for IRC but this might also be usefull for FTP. You can grab the sourcecode here. It is not very hard to understand. The sendString() method accepts a String which is different from the writeUTF8Bytes function of the socket. Most protocols do not like UTF-8 and so all the characters like äöü etc. would look scary on other clients. The sendString() function puts all characters into one ByteArray and terminates the string with a CRLF. After that the command will be send using writeBytes() and flush().

Now here is a short passage of code how I connect to other an IRC server. It is of course not the full application. I will release the whole thing when flIRC is finished and the code clean and smooth.

[as]
import flash.system.Security;
import flash.events.*;
import irc.*;

private var sock: IRCSocket;

private function main(): Void
{
Security.loadPolicyFile( ‘http://proxyhost/crossdomain.xml’ );
Security.allowDomain( ‘proxyhost’ );
Security.allowDomain( ‘proxyhost:port’ );

sock = new IRCSocket();
}

private function connect(): Void
{
if ( sock.connected )
{
sock.sendString( ‘QUIT :flIRC - http://blog.je2050.de/’ );
disconnect();
return;
}

registered = false;

// this is for dynamic connection
//sock.connect( host, uint( port ));

// we use a proxy
sock.connect( ‘proxyhost’, proxyport );

sock.onSockOpen = onSockOpen;
sock.onSockRead = onSockRead;
sock.onSockError = onSockError;
}

private function onSockOpen( event: Event ): Void
{
// … do the IRC logon process here
}

private function onSockError( event: Event )
{
// this is very simple for the moment
Alert.show( ‘Unknown socket error’, ‘Error’ );
}

private function onSockRead( input: String ): Void
{
if ( input == ” ) return;

// this is a simple way to get the informations you want
var tokens: Array = input.split( ‘ ‘ );

if ( tokens[ 0 ] == ‘PING’ )
{
// you are registered on an irc server after the first ping event
// registered = true;

// just show we got the event in the status window
//addStatusMessage( ‘Ping? Pong!’ );

// send the id back to the server
sock.sendString( ‘PONG ‘ + tokens[ 1 ] );
return;
}

// … handle all other events here
}
[/as]

I hope you get the idea. It is not very hard to establish a connection. I also hope this was interesting and usefull for you. Do not be shy and post a comment if I was not able to make this plain to you.

Links:

Bumpmaps (AS3)

Another example here. Simple 2D bumpmap effect. There is just a problem with my environment map. I think it has to do with the accuracy of Number because the following returns NaN in most cases:

[as]
for ( var x: int = -0×80; x < 0x80; x++ )
{
for ( var y: int = -0x80; y < 0x80; y++ )
{
nx = x / 0x80;
ny = y / 0x80;
nz = max( 1 - sqrt(nx * nx + ny * ny) , 0 );

trace( nz );
}
}
[/as]

Oldschool tunnel (AS3)

Oldschool tunnelAnother oldschool effect done using Actionscript3. Somebody complained about the speed? It was not me :-). That demo is very fast and the best thing is that I am using again a ByteArray. Some calculations are done using shifting operators and the tunnel is only 128×128px large. I am using a second BitmapData object to scale everything up to 400×400px and this is very fast now.
The animation is done using the getTimer() so it does not depend on the framerate (which is set to 120). The texture is a simple array of colors which is generated at the start using the XOR operator. It is very nice to have a simple texture for testing and developing.

Another thing is the for vs. while battle. I did some speed tests here. while using i++ < n was slower than the for equivalent. Using --i > -1 has the same speed as for.

[as]
// the for loop (~40ms)
for ( var i: int = 0; i < 600000; i++ )
x += 1.25;

// same speed as for (~40ms)
var i: int = 600000;
while ( --i > -1 )
x += 1.25

// slower (~110ms)
var i: int = 0;
while ( i++ < 600000 )
x += 1.25
[/as]

Maybe it was me doing something wrong but this would be nice because I like the for-oneliners.

AS3 oldschool fire

Oldschool fireThis is an oldschool fire effect which I did before in Flash8 and now I wanted to get more into AS3 and see how fast it is. I tested new stuff and did some experiments with the new functions. André posted that the ByteArray would be a bad solution for best framerates. But I think it depends on what you are doing and how.
On my computer the setPixel is slower. So how to use a ByteArray? I would suggest - keeping the new GarbageCollection in mind - to create a buffer which you overwrite each frame. This is done by the following code:

[as]
private const buffer: ByteArray = new ByteArray();

private function onEnterFrame(): Void {
buffer.position = 0;
while ( … ) {

buffer.writeUnsignedInt( color );
}
}
[/as]

This is very easy. Remember that the ByteArray is a stream. That means everything you write to that stream will be appended to the end. If you set the position to 0 all the bytes will be overwritten. Drawing the buffer to a BitmapData object is also very simple. Just have a look.

[as]
buffer.position = 0;
bmp.setPixels( rect, buffer );
[/as]

If you do not set the position to 0 the setPixels call will result in a black picture. The setPixels method is explained here.

The whole fire effect is build using pixel-acces. The Flash8 version was 50×50px small. Now it is 100×100px … small. This is not very much and it is not very fast. What slows everything down are the function calls. André mentioned this also when he did his perspective texturemapping. Removing the one setPixel line resulted in a speed of 120fps. But of course it is only an Alpha. I hope they will fix such things and I am very enthusiastic!

flIRC - First Steps in Flash 8.5 and Flex

THIS IS OUT OF DATE. CHECK THE NEWER VERSION HERE

flIRCI started working on my Flash IRC Client (flIRC) some time before Flash 8.5 was released. Now two days later I want to show you the first demo of my little project and experiment. You can see a very early version here.

Ther is still a lot of work to do but you can already join channels and talk. Private messages to other users are not supported yet like a lot of events like JOIN/PART/KICK/MODE etc. Please remember Flash 8.5 is now only two days old and I never used this Flex stuff before.

The application:
I am using Flex2. This is not an AS3 only project so I have got my code in theese mxml files which is a little bit confusing at the beginning but you will like it because you can be very fast. I do not care about application states, I do not care about initializing components and all this stuff. It is very easy to use. Even the alignment of the elements can be done by Flex.

Connection:
As I wrote one day ago there is a problem with the security model of Flash. The workaround is quiet simple and has nothing to do with Flash directly. I installed a proxy on my shell and just forward every connection to irc.quakenet.org. The only problem is that the connections are not client-side only.

Macromedia should handle a socket request like using the camera. A simple dialog box would make life easier.

Other problems:
The TextArea seems to be very buggy. I wont blame Macromedia for this because it is only an Alpha. But one problem is very annoying. If you use htmlText and add a lot of text very fast (while-loop for example) then the TextArea won’t display all the text you appended to it.
The workaround is using a simple flash.util.Timer and an Array where all messages get stored. On every tick one message gets added.

Most IRC clients do not support UTF-8 encoding. The socket got a writeUTFBytes() function but all the special german characters look wrong on other clients. The solution here was using a simple byte array which gets filled by a string. Most of the communication is now located in an own class called IRCSocket.

Using textarea.vPosition = textarea.maxVPosition; worked for me in Flash 8. This does not seem to work in 8.5 so currently the text wont scroll.

Links:

THIS IS OUT OF DATE. CHECK THE NEWER VERSION HERE

Security model and Flash 8.5

As you can read in the posts before I am now developing an IRC client. I am using the Flex 2 Builder Alpha which a lot of people currently talk about. I read on a post by Mike Chambers on Flashkit that Macromedia introduces binary socket support. Great. You could discuss very long about the pros and cons of theese. But I think that is not the main problem here.

Just imagine you want to develop a FTP client which would be possible with the Socket class. You create a nice settings dialog and some nice ftp browser; file-upload etc. All that is possible with AS3. But now there comes the security model into play. An rich internet application like the FTP client could be used by a lot of people and would be very great.

Now everybody has his or her own FTP server and every server has its own ip. You get the idea what I am pointing at? The security model of Flash disallows us to develop such applications because everybody who wants to use that FTP client would need some crossdomain.xml on his server.

What are the sockets good for if you can not use them? It is nice to see Macromedia using Flickr in nearly every presentation but you may take a look here.

There is also another problem. IRC is a protocol which allows to have more than one server in the background. If you dns-lookup irc.quakenet.org you get

Looking up irc.quakenet.org…
Resolved irc.quakenet.org to 62.73.33.48
Resolved irc.quakenet.org to 82.211.16.16
Resolved irc.quakenet.org to 82.211.16.17
Resolved irc.quakenet.org to 85.236.110.226
Resolved irc.quakenet.org to 193.120.201.111
Resolved irc.quakenet.org to 193.213.112.156
Resolved irc.quakenet.org to 194.109.129.222
Resolved irc.quakenet.org to 213.131.131.155
Resolved irc.quakenet.org to 213.131.131.156
Resolved irc.quakenet.org to 217.75.98.139

Now where is Flash looking at? I think there won’t be an Apache running on irc.quakenet.org for example. And what about the routing? This is all too complicated. Why not only some alert which asks the user whether he wants to allow a connection or not?

Update:
Possible workaround: Write a program that runs on a unix server and is just a wrapper for other servers. This means if I connect to je2050.de:6667 and send for example “connect ip” the wrapper would connect to that ip and send all data back to the Flash Socket. Now you only need the evil crossdomain.xml on your own server.

Handle Socket-Data depending on CRLF

The Flex2 IRC Application is nearly finished. It is really easy to develop an application using Flex but I still don’t like it. Anyway the Socket is working very well and as I expected it is only binary data. This means you can only read bytes (numbers) from the Socket-Object.

Here is a little snippet which is very usefull for most protocols that are using the CRLF as a termination char. FTP, HTTP, IRC, POP, etc. The sockwrite() function is also very usefull.

[as] import flash.net.Socket;
import flash.util.*;
import flash.events.*;

private var sock: Socket;
private var str: String;
private function connect(): Void
{
sock.connect(host, port);
sock.addEventListener(EventType.CONNECT, onConnect);
sock.addEventListener(ProgressEventType.SOCKET_DATA, onSockRead);
}

private function sockwrite( str: String ): Void
{
sock.writeUTFBytes( str );
send();
}

private function send(): Void
{
sock.writeByte( 13 );
sock.writeByte( 10 );
sock.flush();
}

private function onSockRead(event: ProgressEvent): Void
{
while ( sock.bytesAvailable > 0 )
{
var byte: uint = sock.readUnsignedByte();
var next: uint;

if ( byte == 13 )
{
if ( sock.bytesAvailable >= 1 )
{
next = sock.readUnsignedByte();

if ( next == 10 )
{ // crlf
onSockData( str );
str = ”;
}
else
{
str += String.fromCharCode( byte );
str += String.fromCharCode( next );
}
}
}
else
str += String.fromCharCode( byte );
}
}

private function onSockData( input: String ): Void
{
/* … */
}
[/as]