Detect a Point Inside a Quadratic Region Using JavaScript | Senior Secondary Maths Tutorial
Understanding the Quadratic Region Concept | Maths Explanation for JavaScript Kids
In this tutorial, you'll learn how to detect the region under a quadratic curve using JavaScript.
The curve is defined by the equation y = a x² + b x + c, and we'll use the discriminant method to find
when a point or object lies within the quadratic region. This concept helps students connect
algebraic reasoning with programming and visualization using the HTML5 canvas.
What is a Quadratic Region? | Maths Explanation for JavaScript Kids
A quadratic region in JavaScript represents the area bounded by a quadratic curve.
Every quadratic equation has two x-values (roots) for any given y - except at its turning point (maximum or minimum).
We can use these roots as boundaries for region detection.
More technically, a quadratic region is the area defined by a quadratic inequality such as
y ≤ ax² + bx + c.
This concept is useful in computer graphics, physics simulations, and
quadratic curve collision detection (JS) projects.
Checking the Boundaries of a Quadratic Curve in JavaScript
To visualize the region under a quadratic curve, we'll use JavaScript to calculate the upper and lower limits dynamically.
This makes it possible to detect when an object (like a moving ball) enters or exits the quadratic region.
As discussed in the Animating along a Straight Line in JavaScript tutorial,
any quadratic equation always have two roots for any value of y (except at it's maximum or minimum point).
All we need to do is use these two roots (x values) as boundaries for our check.
y = ax2 + bx + c
ax2 + bx + (c-y) = 0
Figure: Visualizing quadratic curve region in JavaScript and an object trajectory passing through it on HTML5 canvas.
JavaScript Code Example: Detecting Entrance into a Quadratic Region
To check for when our ball enters the quadratic curve, we will continually check the x position
of the ball against the x position gotten using the quadratic equation at the same y position
as that of the ball.
We'll designate the coordinates of the ball as (xb, yb),
and those of the curve as (xq, yq).
Figure: Detecting and visualizing the quadratic region on an HTML5 canvas using JavaScript.
To detect a point inside a parabola using JavaScript,
you can compare its coordinates to the quadratic curve.
We'll determine whether a moving ball lies within this region by solving
for x using the quadratic formula.
If y is less than or equal to the value of the quadratic equation,
the point lies within the region.
Create 2 new files; On Notepad++: File, New.
Call them quadratic_region.html and quadratic_region.js.
Type out the adjoining JavaScript code for detecting the instance a travelling
body crosses the boundary of a quadratic curve.
Summary: Detecting Quadratic Boundaries with JavaScript
In this senior secondary JavaScript math tutorial, you've learnt how to
identify whether a moving point lies inside a quadratic region.
We've used simple algebra and the JavaScript canvas to visualize and
draw the quadratic region bounded by a parabolic curve.
Formula Recap:
The general form of a quadratic equation is y = a x² + b x + c.
To find the region under the curve, we can rearrange this equation to get
a x² + b x + (c - y) = 0 and use the discriminant D = b² - 4a(c - y).
For any given y-value, if D is positive, the quadratic crosses that y-level at two x-values.
The region between these two x-values represents the quadratic region.
y = ax² + bx + c
⟹ ax² + bx + (c - y) = 0
⟹ x = (-b ± √(b² - 4a(c - y))) / 2a
Thus, the quadratic region boundaries are: (-b - √(b² - 4a(c - y))) / 2a ≤ x ≤ (-b + √(b² - 4a(c - y))) / 2a
Understanding how to compute and visualize quadratic regions in JavaScript
bridges mathematical theory and practical coding.
It helps students apply concepts from coordinate geometry in a real-world programming context.
Applying the Line Region Detection Logic in JavaScript
This tutorial teaches you to:
Compute the region under a quadratic function in JavaScript
Use real-time region detection to track an object's position
Apply mathematical concepts like discriminants and boundaries in interactive graphics
To determine if a point lies inside a quadratic region,
we've used a JavaScript quadratic region detection function.
This approach is often used in interactive canvas demos and
collision detection algorithms.
So! JavaScript Fun Practice Exercise - Detect Quadratic curve Boundary
As a fun practice exercise, try experimenting with different coefficients (a, b, and c)
to see how the quadratic region changes shape.
You can also animate a point moving across the screen to test when it enters or exits the region on the HTML5 canvas.
Experiment with different equations and visualize how region boundaries change dynamically in JavaScript.
This is a great way to explore the relationship between algebra and geometry in senior secondary mathematics.
<h3>Detect a Second Body entering a Quadratic Region</h3>
<canvasid="quad_region"width="600"height="450"style="border: 1px solid #000000;">
Your browser (version) does not support canvas object; Time to update! </canvas> <buttononclick="doGlide()">Glide</button> <buttononclick="clearTimeout(clr_obj)">Stop</button>
<scriptsrc="QuadraticRegion.js"></script>
</body> </html>
JavaScript Animation Code for quadratic_region.js
var canvas = document.getElementById("quad_region"); var context = canvas.getContext("2d");
context.fillStyle ="#888888"; // color for our moving body(circle)
// coordinates for the ball(circle) var x_ball =50; var y_ball =150; var radius =40; // draw the circle
context.beginPath();
context.arc(x_ball, y_ball, radius, 0, 2*Math.PI);
context.fill();
//quadratic coordinates var xq_start =200; var yq_start =50; var xq_min =350; var yq_min =300; var xq_stop =500;
var a =(yq_start - yq_min)/Math.pow((xq_start - xq_min), 2); var b =-2* a * xq_min; var c = yq_min + a *Math.pow(xq_min, 2);
//draw quadratic curve var x = xq_start; var y = yq_start; for(; x < xq_stop; x +=1){ // redraw dot
y = a * x * x + b * x + c;
context.beginPath();
context.arc(x, y, 1, 0, 2*Math.PI);
context.fill(); }
var discriminant =Math.sqrt(b * b -4* a *(c - y_ball)); var xq_lb; var xq_ub; if(a <0){// a is negative
xq_lb =(-b + discriminant) / (2* a); // upper boundary
xq_ub =(-b - discriminant) / (2* a); // lower boundary }else{
xq_lb =(-b - discriminant) / (2* a); // lower boundary
xq_ub =(-b + discriminant) / (2* a); // upper boundary }
var clr_obj; function doGlide(){ // condition for continuing motion if(x_ball <=540){
context.clearRect(x_ball - radius -10, y_ball - radius, 80, 80); // erase previous circle if((x_ball - radius <= xq_lb && x_ball + radius >= xq_lb) ||(x_ball - radius <= xq_ub && x_ball + radius >= xq_ub)){
context.fillStyle ="#ff0000"; // trespaaing color for our moving body(circle) }else if(x_ball - radius >= xq_lb && x_ball + radius <= xq_ub){
context.fillStyle ="#00ff00"; // zone color for our moving body(circle) }else{
context.fillStyle ="#888888"; // out of zone color for our moving body(circle) } // redraw circle
context.beginPath();
context.arc(x_ball, y_ball, radius, 0, 2*Math.PI);
context.fill();
