Detect Circular Region in JavaScript - Senior Secondary Maths Tutorial

Using the Circle Equation for Region Detection

In this tutorial, you'll learn how to detect a circular region in JavaScript using the circle equation. The equation of a circle, (x - a)² + (y - b)² = r², defines all points (x, y) that are exactly r units away from the center (a, b). This formula helps determine whether a point or moving object lies inside or outside a circular region on an HTML5 Canvas. Understanding how to check whether a point or object lies inside a circle region is useful in JavaScript geometry programming, especially for animations, canvas graphics, and collision detection.

Understanding the Circle Equation | Maths Explanation for JavaScript Kids

As already explained extensively in the How to Draw and Animate a Circle in JavaScript tutorial, the equation of a circle with centre (a, b) and radius (r) is: (x - a)² + (y - b)² = r² ;
It can be deduced that y = b ± √(r² - (x - a)²) ;
And conversely x = a ± √(r² - (y - b)²).

Hence, the boundaries of any circle lie in the range
b - √(r² - (x_external - a)²) ≤ y ≤ b + √(r² - (x_external - a)²)
and
a - √(r² - (y_external - b)²) ≤ x ≤ a + √(r² - (y_external - b)²)

In other words,
* If (x, y) satisfies this equation, the point lies on the circle.
* If (x - a)^2 + (y - b)^2 < r^2, the point is inside the circular region.
* If (x - a)^2 + (y - b)^2 > r^2, the point is outside the circle.

Algorithm to Detect Entrance into Circular Region in JavaScript

To detect when a second shape enters the circle, we use its coordinates in the circle equation to check if they fall within the upper, lower, left, and right boundaries:
That is, whether the y position of the second body lies between the top and bottom limits of the circle boundary at the x position of the second body:
y_{2nd_img}(top) > b - √(r² - (x_{2nd_img} - a)²)
and y_{2nd_img}(bottom) < b + √(r² - (x_{2nd_img} - a)²) ;
And at the same time, whether the x position of the second body lies between the left and right limits of the circle boundary at the y position of the second body:
x_{2nd_img}(left) > a - √(r² - (y_{2nd_img} - b)²)
and x_{2nd_img}(right) < a + √(r² - (y_{2nd_img} - b)²)

Figure: JavaScript circle region detection example on HTML5 canvas

Create 2 new files; On Notepad++: File, New.
Call them circular_region.html and circular_region.js.
Type out the adjoining JavaScript code for detecting the instance a travelling body crosses the boundary of a circle.

How the JavaScript Circular Region Detection Code Works

The code compares the distance of a point from the circle's centre with the radius. If the distance is smaller than or equal to the radius, the point is inside the circular region.

🟢 A green point shows it's inside the circular region.
🔴 A red point shows it's outside.

The code above demonstrates JavaScript circle collision detection, a common concept in canvas-based animations and game design. This example shows how maths meets programming - turning the circle equation into real-time JavaScript geometry detection.

Key Takeaways on Circular Region Detection in JavaScript

In this tutorial, you've learned that:

The circle equation defines a circular region mathematically.
With a few lines of JavaScript code, you can detect whether a point is inside or outside the circle.
This principle links senior secondary maths and practical JavaScript applications, preparing you for real-world coding projects.

With just a few lines of JavaScript, you've been able to check when a point enters or leaves a circular boundary - a technique useful in games, animations, and simulations. The tutorial also features a JavaScript canvas example that visualizes circle region detection in real time.

FAQs: Circle Equation and JavaScript

What is a circular region in JavaScript?

A circular region refers to the area within a circle defined by its radius on the HTML5 canvas. In JavaScript, you can detect whether a point or shape lies inside it using the circle equation.

How do you detect a circle boundary in JavaScript?

You can calculate the distance between a point and the circle's center and compare it to the radius - if the distance is less than the radius, the point is inside the circle.

Can this be used for games or simulations?

Yes! Circle region detection is common in JavaScript game development, collision detection, and animations.

Summary: Visualizing Circular Region in JavaScript

In this lesson, you've learnt how to detect a circular region in JavaScript using the circle equation from coordinate geometry: (x - a)² + (y - b)² = r².

This powerful formula helps determine whether a point or object is inside, on, or outside a circle. It connects senior secondary mathematics with JavaScript geometry programming through step-by-step examples and code.

By combining mathematics and JavaScript coding, you can easily detect when objects cross a circular boundary. This exercise strengthens your understanding of circle equations and introduces essential concepts in JavaScript graphics programming.

So! JavaScript Fun Practice Exercise - Detect Circular Region

As a fun practice exercise, try changing the values of (a), (b), (r), (x), and (y) to test different points and circle sizes. You can also extend this idea to moving body detection inside a circle, or collision detection in small games and interactive animations.

JavaScript Code for circular_region.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Circular Region</title>
    </head>
    <body>

        <h3>Detect a Second Body entering a Circle</h3>

        <canvas id="circle_region" width="600" height="450" style="border: 1px solid #000000;">
            Your browser (version) does not support canvas object; Time to update!
        </canvas>
        <button onclick="circledSquare()">Glide</button>
        <button onclick="clearTimeout(clr_obj)">Stop</button>

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

    </body>
</html>

JavaScript Animation Code for circular_region.js

I have a better version / See other versions.