Scientific Graphing with Flex

Anyone who has ever asked me "Why would you want to use a player based solution instead of AJAX?" has likely gotten an ear-full of talk about real-time drawing of vector graphics and the bitmap manipulation APIs. These capabilities are truly what differentiate Flash/Flex and Silverlight(WPF/e) from AJAX and DHTML solutions. They open up entirely new realms of possibilities for your applications. The vector drawing and image manipulation capabilities lay the foundation for rich experiences. These capabilities enable everything from rich charting, tweens and animations, to video playback. In essence, they provide the gateway to the next level of interactivity, analytical power, and engaging experiences.

Let's take a simple piece of code in AS3, and build upon that:

var g : Graphics = this.graphics;
g.moveTo( 25, 25 );
g.lineTo( 25, 50 );

This example is about as basic as you can get. It simply draws a line from the point (25,25) to the point (25,50). Despite the simplicity of this code, it is extremely powerful. The feature-rich charting capabilities of the Flex framework rely heavily upon code that originates from this basic scenario. It all boils down to being able to draw vector graphics at run time. Even better, you have the power to build custom graphing or charting components yourself; you are not limited to what is provided by the Flex framework.

Last night, I randomly had the idea... "I wonder how hard it would be to create a scientific graphing component in Flex...". Back in high school, the TI-82 was an indispensable tool if you wanted to pass algebra, trigonometry, and calculus classes. I have always been fascinated by geometry and graphing, so this is just a natural progression for me. In a matter of hours this morning it had come to life. The great part is that this entire application was built in less than 250 lines of code (including whitespace).



You can check it out here:

• http://www.cynergysystems.com/blogs/blogs/andrew.trice/graphing/main.html

In the bottom right corner, there is a text area where you can enter equations. You can have it display multiple at a time. You just need to enter the "x-side" of the equation. For example, to graph the equation y=x, you would just need to enter "x". To graph the equation y=x*x, you would just enter "x*x". Here are the rules:

• Use the operators "+", "-", "*", "/"
• You can use parentheses "(" and ")"
• You can use math functions such as (but not limited to) "Math.sin(x)", "Math.cos(x)", and "Math.sqrt(x)".

There are a few bugs in there, but hey, I just threw this together this morning. It's not quite as robust as my trusty TI-82; this is just to show what can be done using a player-based runtime. I believe that this is a perfect of example of what you can do to create rich applications. The Flash platform enables us to quickly and easily build powerful real-time analytical tools to meet our business needs... Talk about a competitive advantage.

New Article in WDDJ

My new article on "ColdFusion, Binary Data, and Flex" has been published in Web Designer & Developer's Journal. Be sure to check it out, I'm on page 12. You can view the source here. Enjoy!

(DisplacementMapFilter && WebCam) == (Tons O' Fun!)

I threw this experiment together out of pure boredom while traveling... and what a great idea that was. :) I have spent way too much time sitting here making funny pictures using my webcam and the DisplacementMapFilter object. You can make people look fat, look thin, look distorted... it is like a fun-house mirror through the web. Here is a preview video to start with, and then we'll get into how it works.


Or, you can interact with it here: (Requires a webcam)

• Launch Application

As usual, I started this experiment by building off of some older experiments. I started with my CameraStream and PaintCanvas components. The PaintCanvas component allows you to draw on a canvas using the mouse. It is really just a simple paint program. The CameraStream component allows you to easily drop a web cam video stream into a Flex application. Where this gets really interesting is how the two components interact with each other.

Basically, There are 2 drawing modes for the application:

• Displacement Mode
• Drawing Mode

Drawing Mode allows you to draw over top of the camera. In this mode, the functionality of the PaintCanvas component is simply layered on top of the Camera Stream. Displacement Mode allows you to distort the Camera Stream image using the mouse as an input device (using a DisplacementMapFilter filter). It uses the bitmap image from the PaintCanvas as the source input for the DisplacementMapFilter on the camera stream. Sounds confusing, but it really isn't. Whenever the PaintCanvas is updated, I update the filter too.

displacementBitmap = getBitmapData( paintCanvas );
var displacementMapFilter : DisplacementMapFilter = 
   new DisplacementMapFilter( 
      displacementBitmap, new Point(0,0), 
      2, 4, displacex.value, displacey.value, 
      DisplacementMapFilterMode.CLAMP );
videoContainer.filters = [ displacementMapFilter ]

I also added some sliders to allow you to adjust the parameters used in the displacement. The blur parameters affect a blur filter that is on the paintCanvas. The displacement parameters allow you to adjust the amount of displacement in the X and Y directions. The color modifies the drawing color (FYI: different colors are affected more by the displacement. Read up on displacementMapFilters for a further understanding.) The thickness parameter adjusts the thickness of the line drawn on the PaintCanvas component.

There is some great information on DisplacementMapFilters here:

• DisplacementMapFilter API Refference
• Grant Skinner's WebCam Goo (with source)
• Psyark’s DisplacementMapFilter Tutorial

Or, you can interact with my application here: (Requires a webcam)

• Launch Application

I'm also working on porting this to Apollo so that you can directly save the images as jpgs on your client machine. Feel free to contact me with any questions/comments at andrew.trice[ at ]cynergysystems.com.
Enjoy!