Determining the length and angle of a shadow using X and Y coordinates

I'm currently tackling the task of extracting data from a file generated by a software program that has the ability to add a shadow effect to text. The user interface allows you to specify an angle, length, and radius for this shadow.

https://i.stack.imgur.com/INbLn.png

When these values are set as shown in the provided screenshot, the data is stored within an XML node in the following format:

10|{1.41421356237309, -1.4142135623731}

The structure is as follows:

radius|{offsetX, offsetY}

My goal is to reverse-engineer these values back into the original angle and length, so I can include them in my parsing process. While scouring the internet, I've come across solutions for calculating offsets based on angle and length, but not the other way around.

let length = 2;
let angle = 135;
let shadowX = Math.sin(angle * (Math.PI / 180)) * length;
let shadowY = Math.cos(angle * (Math.PI / 180)) * length;

console.log(shadowX, shadowY); //1.4142135623730951 -1.414213562373095

This is where I regret not paying closer attention in my algebra classes. I am uncertain about the next steps to take in order to derive the desired values. My objective is to input the X/Y offset values and get the corresponding angle and length as output.

Answer №1

Math.atan2

The Math.atan2() function determines the angle θ in radians, measured counterclockwise between the positive x-axis and the point (x, y).

Math.hypot

To calculate the hypotenuse of a right triangle or the magnitude of a complex number, use the formula Math.sqrt(v1*v1 + v2*v2), where v1 and v2 are the lengths of the triangle's legs or the real and complex components of the number.

let length = 2;
let angle = 135;
let shadowX = Math.sin(angle * (Math.PI / 180)) * length;
let shadowY = Math.cos(angle * (Math.PI / 180)) * length;

console.log('angle', Math.atan2(shadowX, shadowY) * 180 / Math.PI)
console.log('length', Math.hypot(shadowX, shadowY))

Note:

I reversed the order of Math.atan2 (y first, x second) due to misnaming of variables shadowX and shadowY. Typically, cos is used for the x component and sin for the y component calculation.

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

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

Specify the versions of packages in your package.json file

My package.json file contains many dependencies with "*" as the version, which I have learned is not recommended. I want to update them all to their latest versions. Despite using npm-check-updates tool, it indicates that all packages are up-to-date. Can ...

Error encountered in React and Redux: Unable to read properties of undefined (specifically 'region')

Whenever a user clicks on edit, I am fetching data (an object) into a redux state and displaying it in a textarea. Here is the code snippet: const regionData = useSelector((state) => state.myReducer.userDetailList.region); The problem arises when this ...

transferring data from grails to javascript via a map

I am facing an issue with passing a Map object from my Grails controller to JavaScript. The code snippet in my controller is as follows: def scoreValue = new HashMap<String,String>(); scoreValue.put("0","poor"); scoreValue.put("1","good"); ... retu ...

Using Javascript's OnChange event to dynamically update data

Attempting to achieve a seemingly straightforward task, but encountering obstacles. The goal is to trigger a JavaScript onChange command and instantly update a radar chart when a numerical value in a form is altered. While the initial values are successful ...

HTML anchor tag failing to redirect to specified link

I need to populate the URI property from an API result into an HTML format. I attempted to achieve this by calling a function and running a loop 3 times in order to display 3 links with the URI property of each object. However, the code is not functioning ...

What is the best way to add an insert button to every row?

Take a look at the image provided. When I click on any register button, the last row is being inserted instead of the desired row. What I'm aiming for is this: when I click register, the entire selected row should be stored in a separate table. Whe ...

What is the best way to convert my MySQL data into JSON in a specific format?

I need help with outputting MySQL data into various formats below: timelist, usersex, and userage from the users table. <script type="text/javascript"> timeList = new Array(), userSex = new Array('female','male','male') ...

AngularJS: updating a module

I recently started learning AngularJS and I need some guidance on how to refresh the data in a table within a module (specifically, a list of names and post codes). Below is the script where I am trying to reload the JSON file upon clicking a button: < ...

System CSS modules do not work correctly with Reactjs, CRA, TS, and Carco when using Less

Issues have arisen with the CSS module system in my project. Below are snippets from various code files and configurations: react-app-env.d.ts, craco.config.js, CircleButtonWithMessage.module.less, CircleButtonWithMessage.tsx, as described below: //react-a ...

Inferencing partial types in Typescript

I'm completely stuck on this and can't seem to figure it out without using a second function: interface Fixed { a: number } const fn = <A, B extends {} = {}>(b: B) => { return b } fn({ a: 1 }) // { a: number } fn<Fixed>({ a: 1 } ...

Issue in Babel: The preset 'latest' could not be located in the directory even though it was installed globally

I executed a global installation of Babel using: npm install -g babel-cli npm install -g babel-preset-latest Although it is generally not recommended to install Babel globally, I find it preferable in order to maintain a clean directory structure without ...

What is the best way to line up a Material icon and header text side by side?

Currently, I am developing a web-page using Angular Material. In my <mat-table>, I decided to include a <mat-icon> next to the header text. However, upon adding the mat-icon, I noticed that the icon and text were not perfectly aligned. The icon ...

Deselect the checkbox if you are checking a different checkbox

Struggling with my code, it's hit or miss. Feeling defeated. Seeking assistance to uncheck a checkbox when another checkbox is checked. Check out the code below: JavaScript: $("#1 #checkAll").change(function() { if ($("#1 #checkAll").is(' ...

storing negative floating point numbers in an array using regular expressions in JavaScript

I am currently working on creating a regular expression that can detect both positive and negative floating point numbers of any length. My goal is to store the captured values in an array as double data type. I have attempted the following pattern: input ...

Trouble updating outside controller data while using AngularJS directive inside ng-repeat loop

I am currently working with a isolate scope directive that is being used inside an ng-repeat loop. The loop iterates over an array from the controller of the template provided below: <!DOCTYPE html> <html> <head> <link rel="sty ...

Is there a way to customize the ripple effect color on a Button?

As I'm exploring the API (v3.9.2), I have noticed a reference to TouchRippleProps for ButtonBase on https://material-ui.com/api/button-base/ The code for my button is as follows: <Button variant="text" size={"large"} ...

Tally the values entered into the text input field

I am interested in counting the number of IDs within an input of type "text" The values return like this: 1, 4, 6, etc. <input type="hidden" class="selected_ids" value="selected_ids" name="selected_ids[]" multiple="yes" id="selected_ids" /> ...

I would like to customize the Primeng switch by changing the values from boolean to 'N' or 'Y'

I integrated the primeNg p-switch component into my Angular 2 project. By default, the input switch's values are boolean. However, I would like to have the values set to 'N' or 'Y' instead of true or false. @export class MyCompone ...

Design the parent element according to the child elements

I'm currently working on a timeline project and I am facing an issue with combining different border styles for specific event times. The main challenge is to have a solid border for most of the timeline events, except for a few instances that share a ...