Updated flIRC to work with Flex 2 Beta 2 again.
Enjoy.
Archive for the 'de.je2050.*' Category
Page 2 of 3
Here an implementation of the holy Retinex-filter. The idea behind it is splitting up the digital image into two parts. The luminance and the reflection image. With both parts you can for example increase the brightness without loosing color information. The retinex filter creates images that look more like the reality which is very interesting if you use a camera.
Imagine this in real-time on a webcam. All your problems with the scene appereance would be kicked away since you could level all images to the same brightness. EyeToy-like games could be played at night without even turning the light on.
This is a conversion from the MSCR (multiscale retinex with color restoration) implementation in gimp-2.3.7.
Have a look at the example picture and /as3/ip/filter/rgb/Retinex.as.
Just a quick note on auto-levels. You may know about that function in various graphics software like Photoshop. There was a simple question about how to implement auto-levels in Flash (especially AS3).
Therefore I googled around searching for an algorithm that fits my needs but I had no success. There was also no article in my beloved image-processign bible. What I found out is that the levels is about brightness, contrast and midtones. I am just using brightness and contrast here. You can find the whole source in /as3/ip/img/Image.as in my file-browser.
Now about the auto-levels with are not as good as the Photoshop results but it is a fast way to do it in Flash.
[as]
//– create an image
var img: Image = new Image( width, height );
img.setType( Image.IMAGE_GRAY );
img.loadBitmapData( bmp );
//– grayscale auto-levels
var a: int = img.getAvgValue();
img.adjustBrightness( Math.exp( (0×80 – a) / 0×80 ) * 0×10 );
img.adjustContrast( Math.exp( (0×80 – a) / 0×80 ) );
[/as]
I am sorry for that period of absence. I hope that I can manage to write more frequently in the comming next months but I still have to pass my A-levels. There are also some other projects I still have to finish and my new car wants to get ready for the comming summer ;-) I worked the last weeks some time on this piece of Actionscript3. This is not only just another particle-example like all the others. What I wanted to create was an extensible particle system which could create nearly every effect like ParticleIllusion does it.
My source of inspiration was “Designing an Extensible Particle System using C++ and Templates” which is an article about extensible particle systems in C++. Since Flash is still not able to handle templates I had to think about other possibilities. An easy way to simulate templates is using interfaces and dataholder classes. But this is also a loss of performance. Not the best solution. A new language that handles templates is haXe. All what I can say is that haXe got a lot of very nice things like the templates, enums, etc. but I wanted to create this particle system for AS3 projects. This is one of the reasons why I used AS3 instead of haXe. Another reason is that I really like the Flex2 environment with all the nice code hints and so on.
The particle system is build up on the Policy Pattern. You can read about that in the article I talked about. The policy pattern allows you to combine effects in lots of ways. Most attributes of a particle have their own policy. One for the color, one for the position, for the velocity etc. Theese policies tell the particle how to behave. An easy example is the LifeAction which tells the particle to decrease the life value with a given speed.
The basis of my particle system is of course the smallest unit: a particle. Particles stay inside a ParticleGroup which handles memory management and emits particles at a given position. ParticleGroups can be attached to a ParticleTimeline or a ParticleSystem. A timeline is something that allows you to create a special effect. You are able to create a simple explosion on frame one for example and then show the blast wave after some frames. The nice thing is that you only have to emit this effect once and do not care about any memory management or objects.
Then there are the ParticleSystems which render all particles. A ParticleSystem can use textures or simple pixels. It can be additive (BlendMode.ADD) or whatever you like. Some systems I already created are additive and simple pixel systems. The same for textured systems.
The last thing is about policies. You can create combined policies. For example the ForceFieldAction uses a forcefield to set the velocity. You could combine this policy with the GravityAction which adds gravity to your particle. There are a lof of possibilities. The next thing which has to be done are more policies to allow a huge set of effects and also more ParticleSystems. The timelines also needs the ability to emit particles for a given interval. Physics would also be nice. But the goal is an editor that allows you to create nice effects for easy use.
Some shots:
Two examples:
- Fireworks (Timeline, Textured System)
- “PerlinForce” (Additive Pixel System, ForceField based on PerlinNoise)
This time a pixelscroller in Actionscript3.
I hope you know Zelda from the good old SNES. Maybe you do not, but there are two worlds, the light- and the darkworld. As Link you are able to switch between these two worlds using a teleporter.
Now what about Flash and two worlds?
This is just a quick result of a bored evening but you can see what is possible. The world is 2048×2048 px large and has 128×128 tiles with a size of 16×16 px. This makes it easy to imagine what huge chunks of data Flash has to manage and I think the speed is ok. Of course the 640×480 px version could be faster.
I also made a test while working on the tile engine with a Mario-Level. The speed at 640×480 px was ok (!) so with Flash 8.5 you are able to build nice tile engines that run with a high framerate at 640×480 px.
Press your left mouse button to switch between both worlds.
By the way I found an old bug. I am not sure if it really is a bug but this is annoying since Flash5. You have two listeners. One for onKeyDown and one for onKeyUp. Now you have an array of boolean values which shows you if a key is pressed or not. Something like function onKeyDown( event: KeyboardEvent ): Void { isKeyDown[ event.keyCode ] = true; } and the same with false for onKeyUp. Now if you press two keys at the same time and you release one and then the other there won’t be any event for the second onKeyUp.
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.
I 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 :-/
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:
THIS IS OUT OF DATE. CHECK THE NEWER VERSION HERE
I 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
According to the list classes I have some binary and AVL trees. They work the same way like the list but they have got some more functions like find() and a sorted trace() to debug the data. There is also an experiment which shows the difference between both kinds of trees.
[as]import de.je2050.util.tree.Root;
import de.je2050.util.tree.AVLRoot;
import de.je2050.util.data.*;
var bintree: Root = new Root( new NumberData( 50 ) );
var avltree: AVLRoot = new AVLRoot( new NumberData( 50 ) );
for ( var i: Number = 0; i < 10; i++ )
{
var n: Number = random( 100 );
bintree.insert( new NumberData( n ) );
avltree.insert( new NumberData( n ) );
}
// because both trace methods sort the output automatically you wont see any difference
// but the find function of the avl would be much faster
trace( 'bintree' );
bintree.trace();
trace( 'avltree' );
avltree.trace();[/as]