We see lines used in a lot of scenarios. Curves are also used, although perhaps not as frequently - but that doesn't undermine their importance! In this tutorial we shall take a closer look at curves, particularly the quadratic and cubic curve, along with some of their commonly used mathematical features.
Let's take a look at the final result we will be working towards. Drag the red dots and see the gradients change in position. Quadratic and cubic will be featured in each of these sections. So let's first look at the equation of curves.
These equations are written in polynomial form, starting with the term of highest degree. The first one is quadratic equation highest degree is 2 ; the second is cubic equation highest degree is 3. Note that A, B, C and D are real numbers. So now that we are aquainted with it, let's try to visualise it. Graphing curves will be our next attempt.
First, let's graph a quadratic curve. I'm sure all readers have graphed quadratic curve in high school math class, but just to refresh your memory, I present graphs below. They are placed side by side to ease comparison.
The obvious difference is the inverted y-axis on Flash coordinate space. They look simple overall, right? Okay, now we're ready to plot onto Flash coordinate space. To position quadratic curves at the right spot, we need to understand their corresponding equations. The curve drawn is really dependant on the equation's coefficients for the case of quadratic, those are A, B and C.
I've included a Flash presentation below so you can easily tweak these coefficients and get immediate feedback. To study the effects of individual coefficients on the overall curve, I suggest following the steps below to experiment with the Flash presentation above. Another interesting observation is that throughout the second and third steps of the above, the point of inflection i.
To Create and Edit Equation Curves
You quickly see that positioning a curve is somewhat difficult. The equation used is impractical if we want to, say, locate the coordinates of the lowest point on a curve. It's still a quadratic equation, but it's taken another form. Now we can easily control the minimum and maximum points on the curve.
Create 2D Equation Curves
In the previous Flash presentation, click on button "Approach 1" on the top right and play with the new values. Nonetheless, it's still a difficult task to make the curve pass through a given set of points.
We'd have to rigorously pre-calculate on paper before translating it to code.
Fortunately, there is a better solution. But before going through it, let's have a look at the ActionScript implementation as of now.
[DesignModeler] Equation Driven Curve - URGENT
Here are the equations written as ActionScript functions check Graphing. And here's an implementation of the drawing method using Graphics. Just a note that all curves in this article are drawn in similar fashion. Take a look at this tutorial. Suppose we're given three points that the quadratic curve must cross through; how do we form the corresponding equation?
More specifically, how can we determine the coefficient values of the equation? Linear algebra comes to the rescue. Let's analyse this problem. Since all three coordinates given are lying on the same curve, they must each satisfy this equation, with the same coefficients as the equation of the curve that we are looking for.
Let's write this down in equation form. Of course we can use simultaneous equations instead, but I prefer using matrices because it's simpler. Editor's note: as long as you understand matrices , that is!
parametric equation driven a curve
We'll get the inverse of K and multiply by the J matrix to get L. After we have successfully solved for A, B, C, we'll just substitute into the quadratic equation. Thus, we'll have a quadratic curve that passes through all three points.
As mentioned in the previous step, we need to perform a 3x3 matrix inversion and multiplication.
Draw equation based curve hfss tutorial pdf
ActionScript's flash. Of course, we have a choice to utilise flash. Matrix3D , class but I prefer the Coral library because I can pry into these custom classes and examine what's happening under the hood. I personally find this very useful whenever at doubt on proper use of commands even after reading the API documentation.
So download and place the unzipped Coral files into your project source folder. Here's a sample of the result. Try to reposition the red dots and see the quadratic curve redrawn to cross through all three points.
The following ActionScript is just to enable mouse controls on the little dots. The core lies in the redraw function. I've highlighted the matrix operations and the quadratic function for the redraw process.
So you can see that the matrix K was initialised and inverted before being appended onto matrix J.
The append function multiplies the current matrix, J, with the input matrix, K, placed to its left. Another noteworthy detail is that we don't utilise all the rows and columns in K and J matrices.
However since matrix inversion can only happen with a square matrix, we need to fill in the 4th row, 4th column element of K with 1. There's no need to do this for J because we don't need its inversion in our calculation.
Thus, you can see all the other elements are 0 except for the first column. When you compare this curve to that of quadratic, you will notice that it is steeper, and that a portion of the curve is below the x-axis. One half is mirrored vertically, compared to a quadratic.
I've included the following Flash presentation to let you experiment with the coefficients of a cubic equation. Try tweaking the value of A from positive to negative and observe the difference in the curve produced. Again, it's difficult to position the cubic curve according to a set of points it crosses through. Once again, we refer to linear algebra for an alternative. We know from Step 6 that the coefficients of a quadratic equation can be calculated based on three given points, and the curve drawn from it will cross through those points.
A similar approach can be performed with any four given points to obtain a cubic equation:. Now we will utilise all elements in the 4x4 matrix for Q and the whole first column for P. Then Q is inversed and applied to P. Again, we set up the mouse controls to allow dragging of those points.
Re: example of using equation based surface/curve in hfss
When any of those points are being dragged, recalculation and redrawing of the curve constantly happen. Finally, let's look at the product. Click and move the red dots to see cubic curve drawn to pass through all those points. We just gone through drawing polynomials of degree 2 and 3 quadratic and cubic. From our experience, we can predict that calculation for polynomial of degree 4 quintic will require five points, which will require 5x5 matrix, and so on for polynomials of even higher degrees.
Unfortunately, Coral and flash. Matrix3D only allow for 4x4 matrices, so you'll have write your own class if the need does come. It's seldom required in games, though. Let's try to apply our knowledge to divide regions on our stage. This requires some revision of equation inequalities.
Check out the image below. It's not hard to grasp this concept. In fact, you have already experimented on this in Step 11 as you tweaked the coefficients of the cubic formula.
Imagine, in the coordinate system, that there is an infinite number of curves, all differentiated by just a slight change in D:. So here's the sample of output for quadratic curve.
You can try to move the red dot around and see the regions coloured. Here's the important ActionScript snippet. How about some tweaks to change the color across different curves? Again, mouse click on the red dots and see the gradient changes across the screen.
First of all we'll want to find out the maximum and minimum offset from the original curve. So that all for the drawing of curves. Next up, finding roots of a quadratic and cubic curve. Thanks for reading. Do share if you see some real life applications that takes advantage of this tutorial.