Actionscript Debugging Working in GEDIT (Sort of...)

In my previous post I described how to write a shell script for Gedit under linux that would compile an actionscript/mxml project. I have come up with a reasonably good method for outputting trace statements to the Gedit console. Here is the script that I use to do it:

#!/bin/sh

EHOME=`echo $HOME | sed "s/#/\#/"`
DIR=$GEDIT_CURRENT_DOCUMENT_DIR
FILE=$GEDIT_CURRENT_DOCUMENT_NAME
EXT='swf'

echo "Compiling: " $GEDIT_CURRENT_DOCUMENT_PATH
echo '--------------------'

SWF=${FILE%as}${EXT}

cd ${DIR%${FILE}} > /dev/stderr

export PATH=/home/experimentalized/developer/sdks/flex_sdk/bin:$PATH
mxmlc -debug=true -static-link-runtime-shared-libraries=true ${FILE}
gnome-open ${SWF}

echo "Waiting for Flash Player to connect"
sleep 4

OUTPUTDIR=/home/experimentalized/.macromedia/Flash_Player/Logs/flashlog.txt

TOTALLINES=`sed -n '$=' ${OUTPUTDIR}`
LINE=1
CURRENT=`sed -n "${LINE}{p;q}" ${OUTPUTDIR}`

while [ "true" ]
do 
 if ps ax | grep -v grep | grep flashplayerdebugger > /dev/null
 then
  TOTALLINES=`sed -n '$=' ${OUTPUTDIR}`
  if [ "$TOTALLINES" -ge "$LINE" ]; then
   CURRENT=`sed -n "${LINE}{p;q}" ${OUTPUTDIR}`
   LINE=$(( $LINE + 1 ))
   echo ${CURRENT}
  fi
 else
  break
 fi
done

exit 0

 The script initially does the same as the one in the previous post, but sets -debug to true. When the flash debug player runs it outputs data to a log file. This file is called flashlog.txt and is stored in ~/.macromedia/Flash_Player/Logs/ by default on linux. The script runs through lines in the trace output and echos them to the console one at a time. When it notices that the flash player is closed, it exits and when it reaches the last available line it stops tracing. It does in fact work (although there is a bit of latency as debugger writes to file -> is read by script isn't instantaneous). It may not be great for things like ENTER_FRAME events, and current mouse position, but it is enough for me. Just install it in the same way as I did in the previous post and set a key-shortcut like control-alt-d for debugging.

I think I'm finally happy with my flash setup on Linux which is great (although code completion isn't there so I may take a look into that). Here are some screenshots:

Compiling Flash from GEDIT

In the previous post I discussed an option for developing flash on Linux, using the free flex sdk, and free software. The main problem I found was that every time I wanted to compile and run a file, I had to type some commands in the terminal. I'm pretty lazy when it comes to programming and I'm sure most of you agree that it helps to get everything working as fast as possible.

To solve the issue I wrote a simple shell script which compiles and runs .as files, just like adobe flash does. This tutorial is for Linux users, if you're using windows I'd suggest using something like flashDevelop, which should do all of this for you anyway, if you're using Mac OS and can run Gedit from the terminal, it is an option but probable isn't ideal.

So first off, if you haven't got it yet install Gedit and follow my previous tutorial  at:

http://experimentalized.blogspot.com/2010/11/developing-flash-on-linux.html.

Once everything is set up head into Gedit and go to Menu > Edit > Preferences > Plugins and enable the "External Tools" plugin. If you don't have it you'll have to install it.

Exit Preferences and go to Menu > Tools > Manage External Tools...

Click the icon with a green +, to create your own 'tool'. The idea is that when you run the tool, a shell script runs mxmlc on your currently open document, and then opens the generated swf in the flash debug player.

In your new tool copy and paste the following

#!/bin/sh

EHOME=`echo $HOME | sed "s/#/\#/"`
DIR=$GEDIT_CURRENT_DOCUMENT_DIR
FILE=$GEDIT_CURRENT_DOCUMENT_NAME
EXT='swf'

echo "Compiling: " $GEDIT_CURRENT_DOCUMENT_PATH
echo '--------------------'

SWF=${FILE%as}${EXT}

cd ${DIR%${FILE}} > /dev/stderr

export PATH=PATH_TO_FLEX_SDK/bin:$PATH
mxmlc ${FILE}
gnome-open ${SWF}

replacing PATH_TO_FLEX_SDK with the complete path to your flex sdk (which you may have set up in the previous tutorial). If you haven't installed gnome-open use sudo apt-get install gnome-open in a terminal window.

You can set up a shortcut key to run the script. Then go back to your project class and run the command! If everything has worked you should see a window with your newly compiled swf running inside it!

There are a few problems with the script currently. Firstly the mxmlc compiler compiles to your src directory (wherever the actionscript file is). Second, there is still no debugging, which is a real shame. Gedit allows stdout to be displayed in the editor, so I am thinking of a way of displaying trace arguments right in Gedit. This would be an ideal solution to free and simple flash editing.

Here are some images showing Gedit compiling flash:

Developing Flash on Linux

I recently bought a new net-book, and having no patience whatsoever with Windows 7 Starter, I decided to install Ubuntu. The OS works fantastically with only 1Gb of RAM and as a first time Linux user I was really impressed with the ease of use and customisability of Ubuntu. Clearly as a flash developer I needed a way to develop flash, to at least a basic level (I wasn't after full debugging or any fancy features, just a way to compile some apps and to allow me to work on the train or in front of the TV)!

I decided to keep it simple; just a text editor with command-line compiling and testing.

So here is how I did it:

1. Install the flex sdk:

The free SDK is downloadable from adobe ( http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 ), I downloaded 4.5 to try out some of the new features, but you can choose the build that meets your requirements. Save the library somewhere to your local disk (I chose /home/USER/developer/sdks/flex_sdk). The next step is to enable the terminal to access the executables in the flex_sdk which will build your programs.

Open a new terminal and type sudo nano ~/.bashrc (you may be asked to enter your password) and add the line:

export PATH=/home/USER/developer/sdks/flex_sdk/bin:$PATH

to your bashrc file. To test it has worked restart the terminal type "which mxmlc",  it should echo the path you just provided.

2. Download the Flash 10.1 Debugger for Linux:

Download the Debugger and install it using:

$ cd /tmp
$ wget http://fpdownload.macromedia.com/get/flashplayer/current/install_flash_player_10_linux.tar.gz
$ tar -zxvf install_flash_player_10_linux.tar.gz
$ cd install_flash_player_10_linux
$ ./flashplayer-installer

in your terminal.

Hopefully you'll have a functioning debugger now. Check it works by finding an swf, setting all swfs to open with the flash player, and run gnome-open file.swf, and the debugger should open in the flash player.

Failing this just use the flash for Firefox plugin.

3. Install AS3 and MXML language files for Gedit:

If you don't have Gedit, get it, its a great little text editor, and for me at least it does everything I need to (at least for editing AS3 files). Download the MXML and AS3 files from http://conic.se/blog/posts/8/ and copy them into ~/.local/share/gtksourceview-2.0/language-specs/. When you run Gedit you should be able to switch to the correct syntax highlighting for each language.


Finally put all three together. Create a directory containing the actionscript library you want to compile, and in your command line run mxmlc test.as. If you've followed the steps you should have created an swf. Finally run the swf using gnome-open test.swf.

Here are a few screenshots of the system in action:

 

 Good luck developing AS3 in Linux

Some Beautiful Transparency Renders in ASTrace

My raytracing project has been on hold for a while as I have been fixing minor bugs and not really creating anything new. I am rewriting some features of the raytracer completely from scratch which will hopefully improve performance and clarity of the code. I will implement features such as bounding spheres for intersection tests, as well as possible octrees or similar to improve performance for large numbers of objects. Once the engine is working fully in flash I will port it to alchemy, and hopefully with those performance boosts the engine will be ready for distribution.

Here are a few renders showing transparency and reflection that I created last night. Both are the same scene with different sky boxes applied. You can download the full size images (2200 by 1600px) by right clicking and saving as:

Soft Shadows in ASTrace

Here is a nice example of fully antialiased soft shadows. The source light uses about 20 seed points spread out using a pseudo-random function, to produce reasonable effects.

Improved Supersampling and Antialiasing

I decided to improve the supersampling/antialiasing methods in my raytracer. Previously I applied a blur filter to the image after upsizing and then returned the image to its original size. This is not a very realistic or accurate antialiasing method so I decided to add some real supersampling to the raytracer. The two images below both have the same resolution, but the image on the right appears more realistic with fewer jagged edges. This is achieved by firing multiple rays for each pixel, and based on their relative position, calculate their contribution to the colour of that pixel. The obvious downside to this method is a largely increased rendering time, proportional to the number of rays per pixel. This means that 16 rays per pixel takes 16 times longer than a single ray. Quality definitely comes at a computational price. I think randomising the rays may improve the antialiased image quality, instead of firing them across a uniform grid and I will look into that.

The next updates are likely to be cloud maps and a sun object (infinite directional lighting).

Perlin Texturing in ASTrace

I've added simplex noise volumetric texturing to ASTrace. I found this nice little Simplex noise class by Sjeiti and implemented it in the library. Simplex is slightly faster than Perlin noise in 3 and 4 dimensions so it is ideal to use as a volumetric texture for primitives in the tracer, here are a few examples:

As an extension I decided to create an animation using 4-dimensional simplex noise, just click on the image to launch it. I am planning on implementing a cloud sphere, and this would be ideal for animations of clouds:

Material Properties

Choosing the right material to represent a particular object is important when producing realistic 3D graphics. Factors like refractive index, specularity, and reflectivity all affect how we perceive an object both in the real world and on screen, so ideally the real world case should be simulated as closely as possible in its computer based counterpart. The three images below show how differing physical features completely change the appearance of a scene. In the top image the sphere is 100% reflective, in the second it is partly transmissive and partly reflective and in the last image, the sphere is fully transmissive with a refractive index of around 1.08. I am pleased with the results I am getting from the raytracer, but adding more features increases the render time dramatically, especially for large numbers of objects. I am looking into porting the library to C++ for use in alchemy, which would show a dramatic increase in speed, possibly rendering scenes like the one below in real time. Till then here is the library.

ASTrace Pre Release

Although the library is nowhere near complete, I thought I would release a beta to see what you think. At this stage feedback would be really useful, including any suggestions you might have about extensions to the project. I should note that there is no documentation as of yet, this will be coming as soon as I manage to get asdoc to run properly. There should be plenty of scope for you to play around with the library, it'd be great if you could send me some of your renders.

Here is a link to the library: ASTRACE

and here are some of my favourite renders using the library:

Some more ray tracer features

Here are a few more demos of new raytracer features:

Water (with transparency and reflection):

Environment and Texture Mapping:

Fog - Linear, Square and Exponential decay

Visible Lights (ideal for rendering sunlight, lamps etc):

Soft Lighting (one soft light with 10 seeds - therefore only noticable on some shadows):

Triangular Faces:

Transparency (with refraction, internal reflection etc):

A few more features are on their way (including UV mapping, environment mapping, and Fresnel shaders) and once those features are finished I will release the library.

Reflective Recursion

With the exception of refraction, which I am not yet happy with (total internal reflection problems), the raytracer is coming together fantastically. This is my favourite render so far featuring diffuse and specular reflections with 2 pass antialiasing. The image was rendered at 2200x1600 and cropped to give the final image:

Not bad for flash, about 30 minutes render time.

Once mathematical problems with internal reflection are fixed I will be releasing the library under an open source license, let me know if you have any last minute requests!

Below is a similar image but rendered to 3300x2400 pixels in about 90 minutes:

New Ray Tracer Features

I mentioned a short while ago that I was creating a brand new ray tracer for actionscript 3. It is beginning to take shape and I thought I'd run through a quick feature list:

• Objects: spheres, planes, boxes - triangular meshes in the pipeline
• Materials - reflective, transparent, bitmap
• Unlimited reflection and refraction (within reason)
• Direction lighting (multiple light points)
• Phong shading
• Camera with 6 degrees of freedom
• Sky object - simple sky rendering
• Save output as .JPG, .PNG or .BMP
• Render progress
• Color lights
• Soft lighting
• Low resolution real-time rendering (for small numbers of objects/lights)
• Antialiasing and effects
• Anaglyph rendering

No doubt the feature list will grow and let me know if you have any requests. I would really like to have curved surface and formula collisions as part of the package, so I'll try to get this working then release the library under the name ASTrace. Currently the first below (10 spheres, 1100x800 resolution, 1 light) renders in about 10 seconds which I am very happy with, and the second scene (30 spheres, 1100x800, 1 light, 10 reflections) in about 150 seconds - not so good, but not bad.

I will post demos up as I make them, here is one showing reflection and planes. It looks like there is something wrong with the reflections despite the render looking fantastic, so I will look into that (100 seconds, 1100x800):

Another nice demo, still haven't fixed the reflection problem though:

A new example with the reflection problem ironed out (50 spheres, 2200x1600, about 15 minutes):

An example showing antialiasing and plane/sphere reflection:

Underwater Scene

Just created quite a nice little underwater scene, with bubbles and lighting. Just need to add some fish! I've been finding it quite relaxing just to watch. It is completely dynamically resizable just like the cloud background I made a few months ago. Click to launch it.

Conway's Game Of Life using Pixelbender

Couldn't resist trying to create a pixelbender filter for use in the Game of Life. In an article a few years ago I created a simple Life application. Pixelbender has the potential to massively increase the speed of calculations such as those used in Life, the results are obvious. On top of this the simplicity within flash is fantastic, to advance the game you simply need to apply a filter to a bitmapData object. Click to launch the app:

Experimentalized - New Look

Just updated my homepage, check it out here.

Real Time Regional Differencing

I little while ago I produced a method for extracting interesting regions from images which I called regional differencing (see post). I have optimised the code, and it now runs in real time. It works very well as a simple edge detector with the ability to produce much thinner lines than the Sobel detector, notice in the image below the maximum line thickness is one pixel. The algorithm works by comparing more and less pixelated versions of an image to find local differences compared to a local mean.

To improve the algorithm I switched from the RGB colour space to NUV as this improved results (albeit reducing performance marginally). The detector doesn't quite have the quality of something like the Canny detector, but it requires a lot less processing which in flash is very important!

Anyway check out the demo by clicking on the link below, the slider changes the pixel size of the comparison bitmap, with some interesting results. The default settings use a size of 2 pixels producing lines of a maximum one pixel thick.

Visual Human Interfaces

Making human interfaces intuitive, simple and accurate is a huge challenge. Some of the biggest challenges lie in the field of motion and gesture detection. Analysing visual data in real time can be very processor intensive.

This is a fairly simple implementation of an interface which has the ability to track on screen button presses and swipes (it is part of an ongoing research project):

Click to launch a demo video:

Crossfade Using Pixelbender

I am currently doing some work for a client which involves background subtraction. I have been getting into using pixel bender to calculate filters in flash for a while now, but doing some research I found there is actually huge scope for using pixel bender to carry out other calculations (see this article).

The following example uses pixel bender as a part of the background subtraction process. Consecutive frames from the webcam are blended with all previous frames. The eventual result is to produce a good estimate of the background pixels. The example uses the blendShader property of a display object with blend mode set to BlendMode.SHADER, and a custom Pixelbender shader that mixes pixels. Check it out (click to launch):

Ray Tracing Library AS3

About a year ago I wrote a ray tracer. I've decided to the same thing again, building from the ground up, and taking a completely OOP approach - which I didn't do before. I was very pleased with previous results, but given the lack of structure implementing certain features became a real headache, and a lot of code had to be rewritten each time I wanted to make a small change.

At the same time I will try to speed up the engine, try to stick to bitwise operators and vectors whenever possible. With any luck it'll be up and running in the next few weeks, but I will keep you updated along the way.

Here are some screenshots from the previous ray tracer: