Obtain the rotated coordinates for the top and left positions

I am trying to determine the rotation of a specific point in terms of its top and left positions. It's proving to be quite complex as it involves knowing the original top and left coordinates, applying scaling, and then calculating the rotation.

Currently, my approach is as follows: (original left: -350, original top: -10, f1_scale: 0.544444, rotation angle: -30deg)

function sin(x) {
  return Math.sin(x / 180 * Math.PI);
}

function cos(x) {
  return Math.cos(x / 180 * Math.PI);
}

function rotate(x, y, a) {
  var x2 = cos(a) * x - sin(a) * y;
  var y2 = sin(a) * x - cos(a) * y;
  return [x2, y2];
}

var scaledLeft = -350 * f1_scale;
var scaledTop = -10 * f1_scale;

var rotateOut = rotate(scaledLeft, scaledTop,-30);

While this code successfully rotates the left (x) coordinate, the y coordinate seems to be inaccurate.

If anyone can spot the mistake in my approach or has experience with this kind of calculation, I would greatly appreciate any insights.

Thank you for your help.

Answer №1

To grasp the concept fully, it is imperative to have a strong understanding of the mathematical principles underlying it. Start by examining the image provided at this link http://example.com/image, where:

  1. (x0, y0) represent the coordinates of the starting point
  2. (x1, y1) signify the coordinates after rotation
  3. (p, q) denote the coordinates of the point of rotation

In order to determine (x1, y1), one must possess knowledge of the values of (p, q), as well as (x0, y0) and the angle a. By applying fundamental geometric concepts, the following equations arise:

sin(a)( q - y0 ) = q - y1
y1 = q - sin(a)( q - y0 )

and

cos(a)( p - x0 ) = p - x1
x1 = p - cos(a)( p - x0 )

Alternatively, Pythagoras' theorem can be employed for calculating the second value.

Once these principles are comprehended, translating them into code should not pose any significant challenge.

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

directive unit testing unable to access isolatedScope as it is not recognized as a valid

Currently, I am in the process of conducting unit tests on a directive that was previously created. For my initial test, I simply want to verify a specific variable within the scope of the directive. However, whenever I attempt to execute the method isola ...

Passing data between Vue.js components effortlessly without relying on events

At the moment, I am utilizing Laravel Nova. It's worth noting that it operates using vue.js. I've created a personalized vue component which requires the ability to modify data inside another component. This specific component is located in the ...

Is it possible to remove a specific directory from the webpack build configuration in a vue-cli-3 setup?

After spending 3 hours adding the line: exclude: ['./src/assets/sass'] in 20 different places, I am seeking guidance on where it should actually be placed. Below is my current setup for the css-loader (util.js): 'use strict' const path ...

PHP: variables malfunctioning post implementation of "if" statement

Recently, I encountered a strange issue while working on a database processor. After processing the login information, the variables containing the data seemed to disappear and any subsequent actions within the "if" statement, which verified the login info ...

The JavaScript syntax dollar sign

I am currently studying a JavaScript source code and it's my first time writing JavaScript. I find some of the syntax confusing. <script id="source" language="javascript" type="text/javascript"> $(function () { window.onload=function() ...

Stop submission of form using react by implementing e.preventDefault();

Having trouble figuring this out.... Which event should I use to bind a function call for e.preventDefault(); when someone clicks enter in the input tag? Currently experiencing an unwanted refresh. I just want to trigger another function when the enter k ...

ways to disrupt a timeout

I am attempting to incorporate a functionality similar to this example: https://www.w3schools.com/jsref/met_win_cleartimeout.asp On my personal website: If you enter certain characters in the input field, select one of them, and then pause for 5 seconds, ...

Connect Angular Material by chaining together md-select elements from arrays and array of form inputs

I am encountering a challenge with combining chains in Angular Material. I aim to transition from this linked solution on jsfiddle to using md-select and md-option in Material. How should it function? It's quite simple. Here's the scenario: Se ...

Using ngFor in Angular 6 to create a table with rowspan functionality

Check out this functional code snippet Desire for the table layout: <table class="table table-bordered "> <thead> <tr id="first"> <th id="table-header"> <font color="white">No.</font> </th> <th id="table-hea ...

How can I display a popup window within an iframe on a separate full page?

I am facing an issue while creating an HTML table using AngularJS with a popup. The problem is that I want the popup window, which shows a graph, to open up on the entire page instead of in a specific div. My desired output should look like this: https://i ...

Sometimes, Express may return the message "not found" on and off

After working with express for many years, I find myself a bit out of practice with TypeScript - and it seems like my eyesight is failing me! This is the first time I've encountered this issue, so I must be missing something... My current dilemma is ...

Is there a way to determine the names of the functions that are being called?

I'm working on mastering Google Development Tools. Is there a way to determine which specific functions, especially those in Javascript, are needed before a page can load successfully? ...

A function is unable to update a global variable

I have been working on a form that allows users to set the hour, with JavaScript validation in place to ensure there is input in the form. Initially, the global variable "userInputHours" is set to 0. Within the function "validation()", when the user meets ...

Creating custom database query templates in Electron JS

Currently in the process of utilizing ElectronJS for the creation of a basic CRUD system that establishes a connection with an online database (MySQL is used to access data from the database). I have successfully logged the retrieved data to the console, ...

How should a value be correctly retrieved from a separate function?

Let's say there is a function: function name(){ var first_name = "mike"; } The goal is to pass the value of first_name to another function. One way to do this is: function name(){ var first_name = "mike"; getName(first_name); } But what if y ...

Guide to importing a Kotlin/JS generated module into a separate npm-dependent project

I am interested in developing a JavaScript library using Kotlin Multiplatform (such as the project found here, which includes a websocket server and a JavaScript client). My goal is to build this library as an npm package and then import it into my Vue pro ...

A guide on arranging the JSON array within an AngularJS controller

Can someone assist me with sorting the JSON list provided below in the controller and then displaying it in the view? The orderBy filter only sorts one level, but I need it to sort recursively for all children. Input: R2 -->S4 ------>T5 ------> ...

The function res.sendFile() does not display files on the browser

For the past few days, I've been facing a challenge. Does anyone have any suggestions? When I click on a login button, I authenticate the user, generate a token, store it in cookies, and then use it in the headers of a request to display the homepage. ...

Updating a nested subarray using Node.js with the MongoDB API

I am currently in the process of developing a backend API using Node.js/Express and MongoDB for managing student records. I am facing difficulty with updating a sub-field within the data structure. Below is the code snippet from my Student.js file located ...

How can you condense an if/else statement in JavaScript into one line?

When searching the DOM using $(current_form).find('input').data('option'), the result can either be undefined or a string of options like 'x|y|z'. To handle this, I typically split the string by calling split('|') to ...