Determine the radius using three given points

I am in need of determining the radius at the corners of a rectangle based on some given data points along the curve. The image below provides a visual representation:

https://i.stack.imgur.com/7FHq0.png

How can I calculate the radius using these specific coordinates? Below is the dataset available for calculation:

middleY: 321.4
middleX: 272.625
top: 301
bottom: 341.8
left: 193
right: 352.25
0: x: 331.85, y: 301
1: x: 346.25, y: 306.95
2: x: 352.25, y: 321.4
3: x: 352.25, y: 341.8
4: x: 213.4, y: 301
5: x: 193, y: 341.8
6: x: 193, y: 321.4
7: x: 198.95, y: 306.95

The data has been organized into respective corners (where top corners are curved and bottom ones are not):

    {
      "topLeft": [
        { "x": 213.4, "y": 301 },
        { "x": 193,"y": 321.4 },
        { "x": 198.95,"y": 306.95 }
      ],
      "topRight": [
        { "x": 331.85,"y": 301 },
        { "x": 346.25,"y": 306.95 },
        { "x": 352.25,"y": 321.4 }
      ],
      "bottomLeft": [
        { "x": 193,"y": 341.8 }
      ],
      "bottomRight": [
        { "x": 352.25,"y": 341.8 }
      ]
    }

My goal is to determine the radius at the top left and right corners. I have come across the formula for calculating curvature radii, but I am unsure how to implement it as my mathematical background is limited. :/

For this task, I am utilizing JavaScript; however, understanding the algorithm itself is more crucial than the programming language used.

Answer №1

This response takes into consideration the feedback provided by other users on this topic.

When looking at the image displayed, the corner radius can be determined by comparing the coordinates of the points highlighted in red.

In this context, ordinate refers to one of the values in a coordinate pair (x, y). Therefore, if you have points (x_0, y_0), (x_1, y_1), the corner radius

r = | x_0 - x_1 | = | y_0 - y_1 |
where | · | represents the absolute value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript libraries are not required when using the .append function to add HTML elements

Currently, I am attempting to utilize $.ajax in order to retrieve an html string from a php file and append it to the current html div. Oddly enough, when I use php echo, everything functions properly. However, when I attempt to load dynamically using $.lo ...

Potential issue of excessive memory usage in node.js when running an Express server with PM2

Currently, I am focusing on a specific aspect of a suite of services designed to work in conjunction with an app/platform. The particular area that requires assistance is related to a vanilla express server used to provide our client app (a react app). We ...

HTML - Using Tables to Add and Edit Rows

Take a look at this demo on JSFiddle for my project: Demo jsfiddle I'm currently in the process of creating a table with various functionalities. The function "sortTable" is responsible for sorting the table and it's functioning as expected. T ...

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

Encountering an Issue with NextJS on GAE: EROFS Error indicating a read-only file system

Trying to deploy a customized Next.js application into Google App Engine has hit a snag. The project runs smoothly locally and on Google Cloud Platform CLI, but upon successful deployment using gcloud app deploy, an error arises when opening the app. 2020 ...

Looking to add some movement to your website? Learn how to make an image track your mouse pointer in a specific section of your webpage

I'm just starting out with web design and javascript, so please be patient. My goal is to have an image follow the mouse pointer only when it's within a specific section of my website. I've managed to make the image track the mouse cursor ...

Instructions for adding and deleting input text boxes on an ASP.NET master page

*I am currently facing an issue with adding and removing input textboxes for a CV form using ASP.NET in a master page. Whenever I click on the icon, it doesn't seem to work as intended. The idea is to have a textbox and an icon "+" to add more textbox ...

Issues with nested array filtering in JS/Angular causing unexpected outcomes

I am faced with a particular scenario where I need to make three HTTP requests to a REST API. Once the data is loaded, I have to perform post-processing on the client side. Here's what I have: An array of "brands" An array of "materials" An array o ...

Exploring the beauty of semicolons within ES6

In my understanding, semicolons were supposed to be outdated with the introduction of ES6. However, I stumbled upon this today: Doesn't seem to work as expected: let i = 0 [0, 1, 2, 3, 4, 5, 6].forEach(item => console.log(item)) But it works wh ...

React JS alterations in circular word cloud

I have a unique project with a dynamic word cloud feature displaying random words. My goal is to customize the code so that the word cloud can showcase specific words from a list of my selection, like: let WordList = ['Apple', 'Banana' ...

What could be causing my function to execute thrice?

I cannot seem to figure out why my tag cloud is causing the required function to run multiple times instead of just once when I click on a tag. This issue persists whether using jQuery or plain JavaScript. What am I missing? The code I have is very simple, ...

Sending data between two elements when a jQuery event is triggered

As a JavaScript beginner, I am facing an issue where I need to push data from an h1 tag to a textarea. My website is built using WooCommerce and when a visitor clicks on a product, a chat box with the product title opens. Currently, I have successfully p ...

What is the best way to utilize regex to replace two elements simultaneously?

I am facing a challenge with manipulating a string of characters by adding span tags to highlight specific words and change their color. While I have successfully implemented the changes for one pattern using regex, I'm struggling to do the same for a ...

Fade one element on top of another using Framer Motion

Looking to smoothly transition between fading out one div and fading in another using Framer Motion, but facing issues with immediate rendering causing objects to jump around. Example code snippet: const [short, setShort] = useState(false); return ( ...

When using mongoose, is it possible to add a new item and retrieve the updated array in one endpoint?

My API endpoint for the post operation query using mongoose is not returning the updated array after adding a new item. I have been struggling with this issue for 3 days without any success. Any help would be greatly appreciated. router.post("/:spot ...

Retrieving information from an Express.js API using React.js. Postman requests are successfully communicating with the API

Hey there, I'm facing a little issue and could use some help. I have an Express application that is working perfectly with requests from Postman (adding, deleting, etc.). Now, I want to connect my client side (React.js) with the existing API using the ...

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

Detach attention from TextField select component in Material UI and React through manual means

When I create a select input using the TextField component from Material-UI library, I need to manually remove focus after an option is selected. I attempted to achieve this by using a reference to the TextField with the 'inputRef' prop. However, ...

jPlayer calculates the "duration" as 1,440 minutes on iOs devices for all mp3 files

My homemade webpage is designed for playing mp3s and viewing pdfs. I'm using jPlayer v 2.9.2 to play the mp3s, which works fine on PC but encounters issues on iPhone. The duration values are incorrect, showing "1439:59" remaining for all files, causin ...

When decoding a JWT, it may return the value of "[object Object]"

Having some trouble decoding a JSON web token that's being sent to my REST API server. I can't seem to access the _id property within the web token. Below is the code I'm currently using: jwt.verify(token, process.env.TOKEN_SECRET, { comp ...