Function Grapher Demystified Step 2

Transcription

1 Function Grapher Demystified Step 2 MathDL Flash Forum Learning Center Functions Grapher Demystified by Barbara Kaskosz and Doug Ensley In Step 2, we show how to draw the graphs of two predefined functions, e x and sin(x) in a predefined range x and y from -10 to 10. We examine the wrapping at infinity effect and the need for masking. Open fdg_step2.fla file and got to Control Test Movie to see how the file you are about to create will look in the end: Close the movie; close fgd_step2.fla file. Open fgd_step1.fla and save it under a new name, say, your_step2.fla. We will begin where we left off in Step 1 of this tutorial. We already have two buttons with instance names butexp and butsin and a movie clip with the instance name mcboard. First, we want to create static text labels for the xy-range values: xmin=-10, xmax=10, and so on. Since we are going to have several static text boxes, it is convenient to create a separate Text layer and place all the static text there. Click on Board layer to select it and then on the little icon Insert Layer. (We went over this process in Step 1.) Name the new layer "Text": 1

2 With the layer "Text" selected, select the Text tool, select Static Text, the desired font, size, and color in the Properties panel, click under the lower left corner of mcboard, and type "xmin=-10". Go back to the Arrow tool. The static text box you have just created is still selected, the Properties panel open. While the box is selected, you can still change its properties via the Properties panel. You can create the remaining three range labels by repeating the same process. It is faster, though, to duplicate and edit the box you have just created. To duplicate the xmin, select it, press the "Alt" key, and drag the xmin box to the position you want the duplicate box to be. With the "Alt" key pressed, the original box stays in place and its duplicate is created at a new position. Release the "Alt" key. Select the duplicate, select the Text tool and edit text to read "xmax=10". Similarly, create "ymin=-10" and "ymax=10" labels. 2

3 Make sure that they are all Static text boxes. Make sure (through the Info panel) that their registration points are at the upper left corner, and their XY coordinates in the Properties panel are whole numbers. To finish with the text, select the title "Function Grapher ". Change Step 1 to Step 2 using the Text tool: Go back to the Arrow tool. While the title box is selected, go to Edit Cut. Select the Text layer. Go to Edit Paste in Place and click on it: The title box reappears. It is now located in the Text layer together with all other static text. Now we will create a RESET button. Open the Library window, select one of the buttons, and duplicate it as described in Step 1. Give the duplicate the name "resetbtn". Drag the duplicate onto the Stage and edit the duplicate so the label reads "RESET". (This process is also described in Step 1.) Give the new button the instance name "butreset": 3

4 We have created all the user interface elements that we need in this step. Now it is time to write the code that will graph the x-, y- axes and the graphs of the two functions. As is customary, we will attach our code to Frame 1 (the only one) of the empty layer called Scripts. Select the layer and open the Actions panel: You can increase its size by dragging up the upper portion of its border. We will type our script in the Actions panel. If line numbers do not show, click on the tiny icon in the upper right corner of the Actions panel and check "View Line Numbers" in the dropdown menu: 4

5 If you like, you can try to type the code from scratch. We want the xy-axes to be drawn in our predefined range. We want the butexp and butsin buttons to draw the graphs of the corresponding functions. All the graphs should be located inside mcboard. The RESET button should erase the graphs of functions but leave the axes. In this guide, instead of recreating the whole script from scratch, we will copy and paste the code from fgd_step2.fla and look carefully at all steps. Open the fgd_step2.fla file. Select the Scripts layer and open the Actions panel. Highlight the script in the Action panels, go to Edit Copy. Close the file. In the file your _step2.fla, select the Scripts layer and open the Actions panel. Click inside it and go to Edit Paste in Center. Now we have the script typed in for us. We will look at its elements, but before we do that, let's see what the script that we pasted does. Test the movie and click the exponential button. This is what you see: 5

6 The graph goes outside the graphing board. Of course, the values of the exponential exceed the range value 10. Click on the sine button; the graph of sine appears. The RESET button erases the graphs of functions, but leaves the axes. Everything is the way we wanted, except for the graph of the exponential spilling outside the board. To solve the issue of a graph appearing outside a designated graphing board, we need the technique called masking. Close the swf file and go back to your_step2.fla. Select the layer Board and add a new layer above it. Name the new layer Mask. With the layer selected, rightclick on it. A dialog box appears describing the properties of the layer: 6

7 Click the radio button next to Mask. Click OK. Our layer Mask becomes now a masking layer and appearance in the Timeline changes accordingly. Next, we will make the Board layer into a masked layer. Select Board layer and right-click on it: Select "Masked" and click OK. The appearance of the layer changes: 7

8 indicating a masking and a masked layers. Select Mask layer. Go to View Magnification 50% to see the whole mcboard. Select the Rectangle tool, choose empty stroke and any color for the fill. Draw a square which covers exactly the mcboard clip. (You can force the Rectangle tool to draw a square by holding the Shift key while dragging the mouse.) A shape drawn in a masking layer becomes a window through which a masked layer is seen. Make sure that the position of the rectangle coincides with the position of the mcboard clip. Ideally, the sizes of both should be the same but practically, if you create masks by hand (rather than programmatically), you may have to add a pixel here and there to make sure that everything you want shows through the mask. In this case, we choose the size of the rectangle to be 321 by 321. Make the Mask layer invisible by clicking on the dot in the column headed by an eye: (Just to create a more pleasing environment to work with. Visibility of layers does not matter in the compiled movie.) Test movie. Click all the buttons. Everything seems to work fine. The 8

9 graph of the exponential is now confined to the board. Close the swf file and go back to your_step2.fla. Let's now decipher the script. Select the Scripts layer and open the Actions panel. At the beginning of the script, we create four variables in which the values of the range are stored: As you see, the key words of ActionScript appear in blue. It helps the programmer to avoid spelling errors and to inadvertently choose names for variables or functions which may conflict with ActionScript reserved words. ActionScript 2 allows for "typing" variables; that is, declaring their datatype at the time of declaring a variable. Our first variable is called nxmin and it stores a number. Its initial value is -10. This value will not change in this step, so we could hard-wire the value -10 and the other range values without creating the corresponding variables. However, it will be easier to modify the script, if we store the range values in variables. Typing, that is, declaring datatype of variables as well as functions' parameters and return values is optional in ActionScript 2. You don't have to do it if it bothers you. Typing helps in detecting program errors at the compile time. The compiler will warn you about any type-mismatches. Typing will not cause any error messages at runtime as at runtime all variables are typed dynamically. If you are beginning to like Flash already, and you think you may want continue serious development in Flash, it is a good idea to get used to datatype declarations. In the upcoming ActionScript 3, typing is no longer optional and type checking is performed at compile time as well as at runtime. The code in fgd_step2.fla file is commented in great detail. In this guide, we will focus only on the parts that may require additional explanation. Let's look at lines 21, 30, 32: var mcaxes=mcboard.createemptymovieclip("axes",0); 9

10 var mcexpgraph=mcboard.createemptymovieclip("expgraph",1); var mcsingraph=mcboard.createemptymovieclip("singraph",2); We are creating dynamically three new movie clips, all contained in mcboard. We will graph the axes and the two graphs in those movie clips. When you draw dynamically and runtime, it is best to put each drawing in a separate movie clip. The MovieClip.createEmptyMovieClip(...) method returns a reference to the created clip. It is convenient to store the reference in a variable. The other option is to refer later to the created clip as, for example, mcboard["axes"] or mcboard.axes. Lines 50-65: function xtopix(a:number):number { var xconv:number=nsize/(nxmax-nxmin); return (a-nxmin)*xconv; function ytopix(a:number):number { var yconv:number=nsize/(nymax-nymin); return nymax*yconv-a*yconv; (The variable nsize created before stores the size of mcboard, nsize=320.) The function xtopix converts a functional value, "a", that is, a value "a" in the range -10, 10, to the corresponding x value in pixels relative to mcboard. The function ytopix converts the corresponding functional value for y, that is, y=e x or y=sin(x), to its pixel equivalent. (To be completely precise, we need conversion into pixels relative to the movie clips mcexpgraph, mcsingraph, and mcaxes. However, the MovieClip.createEmptyMovieClip(.) method aligns the registration point of the new clip where with registration point of the parent clip.) The registration point of mcboard, located in the upper left corner (that is where we decided to place it when we created the clip), corresponds to the point x=0, y=0 in pixels. Because of the way that Flash understands coordinates, the pixel xy-coordinate system in mcboard looks as follows: 10

11 The picture explains the conversion formulas in xtopix and ytopix. The next function, drawaxes(), draws two black lines in the clip mcaxes: function drawaxes(): Void { var yzero:number; var xzero:number; mcaxes.clear(); mcaxes.linestyle(1,0x000000,100); yzero=ytopix(0); xzero=xtopix(0); mcaxes.moveto(0, yzero); mcaxes.lineto(nsize,yzero); mcaxes.moveto(xzero,0); mcaxes.lineto(xzero,nsize); Since the range is fixed, the local variables xzero and yzero have fixed values 160, 160. Again, to make the script easier to adapt later, we don't hard-wire these values, but rather calculate them using the conversion functions: ytopix(0), xtopix(0). On line 40, we call the function draw Axes: drawaxes(); 11

12 to have the movie open with the axes drawn. Next, let's look at the function drawexp which draws the graph of the exponential. The comments in the script should explain how we produce the graph. We divide the x-range into npoints subintervals (npoints=320), calculate first the functional and then the pixel values of all points on the graph corresponding to the endpoints of the subintervals, and, finally, join the points by short lineal elements. The only mysterious part is the isdrawable test that we apply to the endpoints of the lineal elements before drawing it: function drawexp():void { var pixarray:array=[]; var i:number; var xstep:number=(nxmax-nxmin)/npoints; //Clearing the previous drawing. mcexpgraph.clear(); for(i=0;i<=npoints;i++){ /* Preparing the array of points (each point is itself a two-element array) which will be joined by lineal elements to produce the graph. */ pixarray[i]=[]; pixarray[i]=[xtopix(nxmin+xstep*i),ytopix(math.exp(nxmin+xstep*i))]; mcexpgraph.linestyle(1,0xff0000,100); for(i=0;i<npoints;i++){ test /* Drawing the lineal elements comprising the graph. The isdrawable is necessary to avoid the wrapping up effect. */ if(isdrawable(pixarray[i][1]) && isdrawable(pixarray[i+1][1])){ mcexpgraph.moveto(pixarray[i][0],pixarray[i][1]); mcexpgraph.lineto(pixarray[i+1][0],pixarray[i+1][1]); Let us see what will happen without the isdrawable test. Delete lines 132 and 138. Test the movie and click the exponential button. 12

13 Test the movie and click the exponential button. This is what you see in Flash MX 2004: The graph is masked properly and confined within the graphing board, but the strange vertical lines are appearing. This is the effect which we will call "wrapping at infinity". It is common when graphing functions, and not at all not unique to Flash or ActionScript. In Flash 8 the effect is even more pronounced. All you see is a red board: This is what happens when you try to graph lines between points whose distance in pixels from your graphing board is too large. Go back to the fla file and restore the isdrawable test. 13

14 The isdrawable function checks if the endpoints of a lineal element to be drawn are numbers and then checks if their pixel values do not fall outside -5000, 5000 range. function isdrawable(a):boolean { if((typeof a)!="number" isnan(a)!isfinite(a)){ return false; if(math.abs(a)>=5000){ return false; return true; In this step, our values are all obtained from the values of the natural exponential at consecutive points, Math.exp(nXmin+xstep*i), converted to pixels. Hence, we don't need the first part of the test in this step. Later, though, when we draw graphs of arbitrary functions, we will want to make sure that nothing is drawn if the values of our function are not defined or infinite, for example, ln(-2), ln(0). The allowable pixel range, -5000, 5000, is somewhat arbitrary. It is sufficiently small to prevent wrapping at infinity, but large enough not to cut off too much from the graphs of functions which may change rapidly between consecutive values of x as in the case of vertical asymptotes. You can experiment with ranges other than -5000, We are ready to proceed to Step 3 of this tutorial. 14