Each gallery item in the applet on the previous page consists of a family of parametric curves in which both x and y coordinates depend on the parameter t and two 'constants' a and b. To create an example, you need to give formulas for x and y in terms of t, a, and b, and the ranges for x, y, t, a, and b. The applet below allows you to experiment with various formulas and ranges to find good examples.
In the applet above, you can enter an arbitrary family of parametric curves. First you enter formulas for the coordinates x(t) and y(t) in the appropriate input boxes. The formulas must be in terms of the parameter t and two 'constants' a and b. We put 'constants' in quotation marks as the values of a and b will be changing when the user drags the sliders. In fact, all of them: t, a, and b will be chaging. Thus, you need to specify ranges for each of them: tmin, tmax, anim, amax and so on. You enter these ranges in the appropriately marked input boxes. You need to enter ranges for x and y also. The ranges for x and y you choose usually in a way that makes your curves fit into the graphing board. The range boxes accept numerical entries as well as multiplies of 'pi', e.g. 2*pi, pi/2 etc. After you enter all your data, click the Enter button. When you do that, one of the curves in your family, the one corresponding to the values of a and b in the middle of their ranges, is plotted. The curve consists of all points (x(t),y(t)) on the plane corresponding to all values of t in the t-range and for the fixed values of a and b.
In the openning example:
x(t)=b*sin(3*t), y(t)=a*cos(7*t), t is between 0 and 2*pi.
As both a and b are between 2 and 10, when you click the Enter button, the following curve is plotted in the window -11, 11, and -11,11 for both x and y:
x(t)=6*sin(3*t), y(t)=6*cos(7*t), t between 0 and 2*pi.
What happens when the user drags the sliders? The values of constants a and b change and the corresponding curves are drawn without, however, erasing previous curves. More precisely, one the the previous curves is erased so the total number of graphs on the board remains 20 at all times. (You can change this setting of 20 to another integer by a simple edit to the code on the Timeline in gallery.fla file.) The color of each next curve is chosen randomly.
The current values for the constants a and b depend on the positons of the sliders' knobs. The first slider changes the value of a only: amin corresponds to the top of the slider, amax to the bottom. Similarly, the second slider changes the value of b. When the value of either constant changes, the corresponding curve is being drawn. The third slider changes both constants.
The rules that you have to follow when entering your expressions are determined by how our custom MathParser works. You will find those rules when you click the Instruction button. If you make a mistake, a message will be displayed on the board. So go ahead, experiment with various formulas and ranges. The most spectacular curves are often obtained by experimantation.
What if you find a perfect family of curves that you want to become an example in your gallery? All you need to do is to edit paramart.xml file in the package. Each example is enclosed between <plot>...</plot> tags. The openning example in the applet above is a part of our gallery and is entered as follows:
<plot func1="b*sin(3*t)" func2="a*cos(7*t)" >
<xRange min= "-11" max="11" />
<yRange min= "-11" max="11" />
<tRange min= "0" max="2*pi" />
<aRange min= "2" max="10" />
<bRange min= "2" max="10" />
</plot>
You edit a <plot>...</plot> block to reflect your example. You can delete <plot>...</plot> blocks to delete examples from you gallery, you can add them to add examples. Since gallery.swf pulls examples from paramart.xml at runtime, you don't even have to recompile gallery.fla. Just make sure that gallery.swf, the html page in which it is embedded, and your edited paramart.xml file are in the same directory. It is as simple as that.
Note: The paramart.xml, gallery.swf, and the html page in which your gallery.swf is embedded should be placed in the same directory on the server. For gallery.fla to compile, the folder of custom classes 'bkde', paramart.xml and the fla file must be in the same directory. For choose.fla to compile, the fla file and the folder of custom classes 'bkde' must be in the same directory.
Download
- Download all 'fla', 'as', xml, and pdf files corresponding to this experiment: parametric_art.zip
As we mentioned, this parametric art gallery uses several custom AS3 classes. On the next page, we give an overview describing briefly the function that each class plays in this application. You will find detailed documentation of each class in the pdf guide contained in the zip package that you can download from the link above.
On the next page: the AS3 custom classes involved.
