Solving Cubic Equations and Animating along Polynomial Curves in JavaScript

Using Polynomial equations in JavaScript

In this JavaScript polynomial equation tutorial, you'll learn how to model and animate a moving object along a cubic curve using mathematical formulas. This hands-on project demonstrates how to solve polynomial equations and translate them into visual motion-ideal for senior secondary students learning both math and coding.

Understanding Polynomial and Cubic Equations | Maths Explanation for JavaScript Kids

A polynomial equation expresses a relationship involving powers of a variable. For a cubic curve, the general form is:
y = ax³ + bx² + cx + d;
Here, a, b, c, and d are constants. Every third-degree polynomial equation has both a maximum and a minimum point. These turning points are useful in generating smooth motion when graphing or animating curves with JavaScript.

Figure: Graph of cubic equation and polynomial curve in JavaScript

Deriving the Equation of a Cubic Curve | Maths Explanation for JavaScript Kids

To generate a cubic equation, all we will need are the maximum and minimum points of the curve.

y = ax³ + bx² + cx + d ----- (eqn 0)

By differentiating y = ax³ + bx² + cx + d, we get dy/dx = 3ax² + 2bx + c. Setting the derivative equal to zero at both the maximum and minimum points allows us to calculate a, b, c, and d.

^dy/_dx = y^I = 3ax² + 2bx + c
At maximum point, y^I = 0
y^I|_{(x = x_max)} = 0
3ax_max² + 2bx_max + c = 0 ----- (eqn 1)
At minimum point, y^I = 0
y^I|_{(x = x_min)} = 0 ----- (eqn 2)
3ax_min² + 2bx_min + c = 0
Subtracting both derived equations
y^I|_{(x = x_max)} - y^I|_{(x = x_min)}
⇒ 3a(x_max² - x_min²) + 2b(x_max - x_min) = 0
2b(x_max - x_min) = -3a(x_max² - x_min²)

b =	-3a(x_max - x_min)(x_max + x_min)
	2(x_max - x_min)

b = -³/₂a(x_max + x_min)

Substituting b in (eqn 1)
3ax_max² + 2bx_max + c = 0
3ax_max² + 2(^-3a/₂)(x_max + x_min)x_max + c = 0
3ax_max² - 3ax_max(x_max + x_min) + c = 0
3ax_max² - 3ax_max² - 3ax_maxx_min + c = 0
c = 3ax_maxx_min

From the general equation(eqn 0)
y = ax³ + bx² + cx + d
y_max = ax_max³ + bx_max² + cx_max + d
Substituting for b & c
⇒ y_max = ax_max³ - ³/₂a(x_max + x_min)x_max² + 3ax_maxx_minx_max + d
y_max = ax_max³ - ³/₂ax_max³ - ³/₂ax_max²x_min + 3ax_max²x_min + d
y_max = ¹/₂[2ax_max³ - 3ax_max³ - 3ax_max²x_min + 6ax_max²x_min + 2d]
y_max = ¹/₂[ -ax_max³ + 3ax_max²x_min + 2d]
2y_max = -a(x_max - 3ax_min)x_max² + 2d
2d = 2y_max + a(x_max - 3ax_min)x_max²
d = y_max + ^a/₂(x_max - 3ax_min)x_max²

From the general equation(eqn 0)
y = ax³ + bx² + cx + d
y_max = ax_max³ + bx_max² + cx_max + d
y_min = ax_min³ + bx_min² + cx_min + d
Subtracting both derived equations
y_max - y_min = a(x_max³ - x_min³) + b(x_max² - x_min²) + c(x_max - x_min)
y_max - y_min = (x_max - x_min)[a(x_max² + x_maxx_min + x_min²) + b(x_max + x_min) + c]
Substituting for b & c
y_max - y_min = (x_max - x_min)[a(x_max² + x_maxx_min + x_min²) - ^3a/₂(x_max + x_min)² + 3ax_maxx_min]
y_max - y_min = a(x_max - x_min)[x_max² + x_maxx_min + x_min² - ³/₂(x_max² + 2x_maxx_min + x_min²) + 3x_maxx_min]
2(y_max - y_min) = a(x_max - x_min)[2x_max² + 2x_maxx_min + 2x_min² - 3(x_max² + 2x_maxx_min + x_min²) + 6x_maxx_min]
2(y_max - y_min) = a(x_max - x_min)(2x_max² + 2x_maxx_min + 2x_min² - 3x_max² - 6x_maxx_min - 6x_min² + 6x_maxx_min)
2(y_max - y_min) = a(x_max - x_min)(-x_max² + 2x_maxx_min - x_min²)
2(y_max - y_min) = -a(x_max - x_min)(x_max² - 2x_maxx_min + x_min²)
2(y_max - y_min) = -a(x_max - x_min)(x_max - x_min)²
2(y_max - y_min) = -a(x_max - x_min)³

Hence:

a =	-2(y_max - y_min)
	(x_max - x_min)³

b = -³/₂a(x_max + x_min)
c = 3ax_maxx_min
&
d = y_max + ^a/₂(x_max - 3ax_min)x_max²

These formulas form the mathematical basis of our JavaScript polynomial solver.

Generating and Animating along a Cubic Polynomial Curve in JavaScript

Once we determine the constants, we can implement a JavaScript cubic equation solver to animate motion along the curve. The following example shows how to code a polynomial equation in JavaScript using simple variables and HTML5 canvas graphics.

To animate an object along a polynomial curve, increment x continuously and compute its corresponding y value using the cubic polynomial equation.

This JavaScript code allows you to visualize the trajectory of a polynomial equation by plotting the curve dynamically on an HTML5 canvas. The roots of the polynomial equation and the coefficients determine the shape and symmetry of the curve.

Create 2 new files; On Notepad++: File, New.
Call them cubic_path.html and cubic_path.js.
Type out the adjoining JavaScript code for animating an image body through the path of a cubic / polynomial curve.

Key Takeaways on Cubic Path Animation in JavaScript

In this tutorial, you learned how to:

Understand and derive cubic polynomial equations
Find coefficients from maximum and minimum points
Implement a polynomial equation solver using JavaScript
Animate an object along a polynomial curve

By combining algebraic reasoning with code, senior secondary students can see how mathematics powers real-world applications like animation, computer graphics, and game design.

Applications of Polynomial Equations JavaScript Programming and STEM Education

Polynomial equations are used in:

Data modeling and curve fitting
Graphics programming for drawing smooth curves
Physics simulations and motion paths
Machine learning and optimization problems

Learning how to solve polynomial equations in JavaScript provides a strong foundation for both mathematics and computational thinking.

Summary: Visualizing Polynomial Equations in JavaScript

Polynomial equations are powerful tools for generating smooth, curved motion in graphics and animations. In this tutorial, you've learnt how to solve polynomial equations in JavaScript, understand the mathematics of cubic curves, and create a simple animation that moves an image body along a polynomial equation path.

This interactive JavaScript polynomial solver visually demonstrates how mathematical equations can be represented as real motion on a graph. It's a simple yet powerful example of combining coding and mathematics for educational purposes.

So! JavaScript Fun Practice Exercise - Animate along Cubic Path

As a fun practice exercise, try modifying the values of xmax, xmin, ymax, and ymin to observe how they affect the polynomial equation graph. You can also:

Write a function to calculate the roots of the polynomial.
Compare your results with a quadratic equation solver.
Build a reusable polynomial equation solver in JavaScript.

JavaScript Animation Code for cubic_path.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Cubic Track</title>
    </head>
    <body>

        <h3>Move in the Trajectory of a Cubic Curve</h3>

        <canvas id="cube_path" width="600" height="450" style="border: 1px solid #000000;">
            Your browser (version) does not support canvas object; Time to update!
        </canvas>
        <button onclick="moveCubic()">Move</button>

        <script src="CubicPath.js"></script>

    </body>
</html>

JavaScript Animation Code for cubic_path.js

I have a better version / See other versions.