The Math and ActionScript of Curves: Drawing Quadratic and Cubic Curves

We see lines used in a lot of scenarios; curves are also used but 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.

---

Final Result Preview

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.

And here’s another demo, using cubic curves, without the gradients:

---

Step 1: Curves

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). \[f(x) = Ax^2 + Bx + C\ ... (eq\ 1)\] \[g(x) = Ax^3 + Bx^2 + Cx + D\ ... (eq\ 2)\] 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.

---

Step 2: Graphing Curves

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.

• Left graph is using Cartesian coordinate space
• Right graph is using Flash coordinate space

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.

---

Step 3: Quadratic Coefficients

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. [...]
Read more: The Math and ActionScript of Curves: Drawing Quadratic and Cubic Curves