jooGraphFunction

Plots mathematical functions into smooth Bézier curves. While specialized software do exist they tend make segmented graphs. Sometimes the convenience of being in one package and having well behaved smooth curves is desirable. Simply, some shapes are much easier to express in mathematical form than draw accurately by hand.

Image 1: Example functions (jump to tutorials)

The Interface

Image 2: Main dialog

The main dialog consists of two sections the functions and plotting range information

Parametric Function:

x:

Function of x axis. X axis in illustrator is the horizontal increasing to the right.

y:

Function of y axis. Y axis in illustrator is the vertical. Newer Illustrators use the web/GUI convention and increasing value moves downward in the scene.

Range:

min:

Minimum value of variable t to use. This defines the start of the plot range.

max:

Maximum value of variable t to use. This defines the end of the plot range.

step:

The sampling interval at which the control points will be spaced. They start from min and end sampling when max is reached or exceeded.

Preview:: Draw the plot on screen while editing. Note: It will only update once you change fields to keep the program responsive.
Copy:: Commit the current state as a path into Illustrator.
Ok:: Commit the current state as a path into Illustrator and exit dialog.

Archimedean_Spiral

Using jooGraphFunctionDialog is pretty simple, but requires some mathematical knowledge to utilize well. Let us discuss how to draw a archimedean spiral. First let us see what Wikipedia has to say about the subject. Wikipedia lists the formula for the spiral as \(r = a + b * \theta\). This is in polar formulation, no problem let us just formulate it in Cartesian parametric form. By replacing r with \(sin(t)\) for x and \(cos(t)\) for y. Then we replace \(\theta\) by \(t\) and we get:

\begin{equation*} \begin{cases} x = (a + b * t)*\sin(t)\\ y = (a + b * t)*\cos(t) \end{cases} \end{equation*}

Don't worry if you didn't understand a thing. You can use the formula even without understanding it. Now let us type this into our dialog, by substituting \(a\) with 20 and \(b\) with 1 we get:

\begin{equation*} \begin{cases} x = (20 + 1 * t)*\sin(t)\\ y = (20 + 1 * t)*\cos(t) \end{cases} \end{equation*}

Now just you just type those values into the dialog box under x and y.

Image 2: Formula typed into the dialog

There is some additional offset added to the formula so that the center of the graph does not reside on the corner of the page. The plot range has also been defined so that it plots s suitable spiral. Max should be PI * 2 * number of desired revolutions. You can now experiment by changing the values 20, 1 and the number in max value. Please note that the script uses radians instead of degrees as angular unit.

Sine_Wave

You may have noticed that the functions jooGraphFunctionDialog plots are distinctly different form the basic function graphing you did in school. They only had one function and the other axis was implied. You can do the same in jooGraphFunctionDialog by putting one of the axes to any scaled t value. Let us plot in the range of 0 to 4 * pi:

\begin{equation*} \begin{cases} x = 10*t\\ y = 10*\sin(t) \end{cases} \end{equation*}

Image 2: Sine wave

Orthographic_Helix

Image 3: A Orthographic helix

In a more advanced demonstration plotting in a transformed basis such orthographic is also possible. While the technical term basis sounds very fancy, what you actually do is just change the coordinate system so that its hands no longer point in normal directions. One can easily measure this information form illustrator itself. Here is a example on how you make a helix.

A helix is simply a circle that has a constantly growing z value and can be mathematically described as:

\begin{equation*} \begin{cases} x = r*\cos(t)\\ y = r*\sin(t)\\ z = p*t \end{cases} \end{equation*}

Where \(r\) is the radius of the helix and \(p\) is its pitch, or how much the helix raises in each turn. Unfortunately this formula has three separate axes while our program only has two. So we need to project it into the 2D realm.

While projection sounds very technical, and it is, it has a easy visual interpretation in orthographic and axonometric views. Basically you just want to express your coordinates as new coordinates so you move x units in the respective arrow directions.

To do this you need to move x time the fraction of our Cartesian bases and this in turn you could either measure from the screen, or type in as formula. Lets do the measuring as it is more intuitive.

Image 4: The coordinate axes of a arthographic drawing

So what you need to do is take each of the old coordinates and multiply it with the respective dimnesnion in your new dimension direction or as a formula:

\begin{equation*} \begin{cases} x = +0.86605*x_{old} -0.86605*y_{old} + 0*z_{old}\\ y = -0.5*x_{old} -0.5*y_{old} + 1*z_{old} \end{cases} \end{equation*}

Which gets you the final formulation after substitution:

\begin{equation*} \begin{cases} x = +0.86605*r*\cos(t) -0.86605*r*\sin(t)\\ y = -0.5*r*\cos(t) -0.5*r*\sin(t) + p \end{cases} \end{equation*}

We can now finally ready to graph the function. I will add a scaling factor so that the image better fits my drawing on screen. And finally this is what we get. You can use the max field to control how many times the spiral rotates around.

img/jooGraphFunctionorthoBasisSpiral.png

Image 4: Final graphing, note the scale multiplier in front.

That's it. If you understood anything that I said then you can give yourself a pat on the back you now know more graphic related math than the many a engineer. You can now go and make the archimedean spiral orthographic or explore the Wikipedia for some other useful functions.