Graphs on Flash - using ActionScript!

Graphs on Flash - usingActionScript!

Posted on July 9, 2006. Filed under: ActionScript, Graphics |

Ads by Google

Complex Data to Visualize
Create Hierarchical Interactive Graphs. Free Structure101g Download
www.HeadwaySoftware.com

I have been reading up on ActionScript for a few days now. I started from the very basics, and decided that I would not directly dive into it without having any prior knowledge. Made a bit of progress. I wrote my first ActionScript program today. And it worked beautifully. This gives me a lot of ideas for future programs. Hopefully learning this will aid me in learning Javascript, as I think they are similar in many aspects.

I chose a 640×480 resolution for the movie. It’s a pretty simple program, and the one that I always try if I have the power of graphics. So far I have been able to work on graphics only in Turbo C++ with the graphics.h header file that comes along with it. But then ever since I shifted to standard C++, I have not had the opportunity to use graphics in any of my programs. This program is to draw the graph of any function. In this very basic code, the function has to be changed in the source code. Here’s my code:

var s:Number=48;
var i:Number=0;
var j:Number=0;
this.createEmptyMovieClip(”graph”, 1);
graph.lineStyle(1,0×000000,100);//(pixel width,colour,alpha)
do{
j=240-s*Math.sin((i-240)/s);
graph.moveTo(i,j);
i++;
j=240-s*Math.sin((i-240)/s);
graph.lineTo(i,j);
}while(i<640);

It basically draws the sine curve on screen. The createEmptyMovieClip command is required to create an object that will call the functions that are part the object of type MovieClip, like the ones that involves graphics. I don’t know what exactly the second parameter is supposed to do. It’s called “depth” and a value of 1 worked fine for me. I haven’t understood it’s exact purpose yet.

Here’s the output that I got for the above program:

The lines are a little jagged due to resizing.

That made me real happy. At first, I didn’t get any output. But later I realised I need to call the lineStyle function to change the plot colour to black and to draw properly.

I decided to plot other functions as well, and the next one that came to my mind was the normal distribution curve. Here, I changed only one of the expressions in the code to the new formula - instead of both - by mistake. But the output was amusing:

The region between the sine curve and the normal distribution curve is shaded. This is of course because the moveTo command moves the current position indicator to a point on one curve, and the lineTo draws a line from here to a point on the other curve. This gives a nice effect to the graph.
There was no stopping me now and I just kept trying out more functions one after the other. Here’s f(x)=exp(-x/3)*sin(3x) :

Since I found this simple enough, I decided to plot Mandelbrot’s set and was wondering if ActionScript could take that fairly higher amount of intensive calculations. But I was feeling really sleepy at around this time, and I don’t know if the program did not work because I was too sleepy to debug it properly or if Flash couldn’t handle it. I think it is the former . I suppose I’ll tackle that some other day.

var s:Number=48;
var i:Number=0;
var j:Number=0;
this.createEmptyMovieClip("graph", 1);
graph.lineStyle(1,0x000000,100);//(pixel width,colour,alpha)
do{
j=240-s*Math.sin((i-240)/s)*Math.tan((i-240)/s);
graph.moveTo(i,j);
i++;
j=240-s*Math.sin((i-240)/s)*Math.tan((i-240)/s);
graph.lineTo(i,j);
}while(i<640);