Looking at the surface shown in the image, I have three angles (a, b, and c) and I am trying to determine the coordinates (x, y, z) for two normal vectors associated with it.
One of these vectors is parallel to the surface, while the other one is perpendicular to it.
Both vectors are directed outwards from the origin point (0, 0, 0).
If anyone could offer assistance, it would be greatly appreciated. Thank you!
Utilizing only basic rotations allows you to easily apply the formulas for each rotation:
The sequence of operations involves multiplying these matrices for the desired rotation. The order is crucial, but given that angles are obtained from a gyroscopic device, we can assume a standard sequence: roll (around x-axis, denoted as a or gamma), pitch (around y-axis, denoted as b or beta), and finally yaw (around z-axis, denoted as c or alpha).
Below is the comprehensive matrix formula indicating the order in which the three rotations should be executed, as outlined at .
To rotate your vectors, simply multiply them by this matrix R (with your vector represented as a column vector on the right-hand side), and your task is complete.
Therefore, your JavaScript code for the matrix would be as follows:
var ca = Math.cos(a), sa = Math.sin(a);
var cb = Math.cos(b), sb = Math.sin(b);
var cc = Math.cos(c), sc = Math.sin(c);
var mat = [[cc*cb, cc*sb*sa-sc*ca, cc*sb*ca+sc*sa],
[sc*cb, sc*sb*sa+cc*ca, sc*sb*ca-cc*sa],
[-sb, cb*sa, cb*ca]];
// x represents any vector you wish to rotate
var x = [/* value on x axis */, /* value on y axis */, /* value on z axis */];
// resulting value of x after rotation
var rot_x = [mat[0][0]*x[0]+mat[0][1]*x[1]+mat[0][2]*x[2],
mat[1][0]*x[0]+mat[1][1]*x[1]+mat[1][2]*x[2],
mat[2][0]*x[0]+mat[2][1]*x[1]+mat[2][2]*x[2]];
By examining the general formula, you'll notice that when rotating the vectors of the standard basis, the first column of the matrix corresponds to [1,0,0], the second column to [0,1,0], and the third column to [0,0,1] - simplifying the process. However, the mentioned formula is more universal and effective in all scenarios.
Solution:
[x1] = [cos(theta)cos(phi)]
[y1] = [sin(phi)cos(theta)]
[z1] = [-sin(theta)]
[x2] = [sin(theta)cos(alpha)cos(phi) + sin(alpha)sin(phi)]
[y2] = [sin(theta)sin(phi)cos(alpha) - sin(alpha)cos(phi)]
[z2] = [cos(alpha)cos(theta)]
where theta=rotation around x-axis, phi=rotation around y-axis and alpha=rotation around z-axis.
Bonus Answer:
If (x3,y3,z3) is a different vector ON the plane perpendicular to (x1,y1,z1), then it takes this form:
[x3] = [sin(phi)sin(theta)cos(alpha) - sin(alpha)cos(theta)]
[y3] = [sin(phi)sin(theta)sin(alpha) + cos(alpha)cos(theta)]
[z3] = [sin(phi)cos(theta)]
Detailed Explanation:
(I am referencing UK matrix definitions, which may differ from US conventions where matrices are typically read backwards. The results remain consistent, only the explanation varies.)
Imagine your initial plane being flat on a table, representing the x-y plane. The z-axis extends perpendicularly out of the page. By rotating a degrees around the x-axis, b degrees around the y-axis, and c degrees around the z-axis, you can visualize the transformation.
Consider the vectors (x1,y1,z1) as (1,0,0) rotated by angles a,b,c in sequence. Similarly, (x2,y2,z2) represents (0,0,1) under rotations a,b,c respectively. To obtain another vector within the same plane orthogonal to (x1,y1,z1), apply the rotation transformations on (0,1,0).
The following matrices depict rotations around the x-axis, y-axis, and z-axis, with c indicating cosine of the angle and s depicting sine of the angle:
[1 0 0]
[0 c -s]
[0 s c]
[c 0 s]
[0 1 0]
[-s 0 c]
[c -s 0]
[s c 0]
[0 0 1]
To complete the transformation, sequentially apply these matrices (reverse order for US convention):
Final matrix = [cos(c) -sin(c) 0] [cos(b) 0 sin(b)] [ 1 0 0 ]
[sin(c) cos(c) 0] [ 0 1 0 ] [ 0 cos(a) -sin(a)]
[0 0 1] [-sin(b) 0 cos(b)] [ 0 sin(a) cos(a)]
= [cos(b)cos(c) (sin(a)sin(b)cos(c) - sin(c)cos(a)) (sin(b)cos(a)cos(c) + sin(a)sin(c))]
[(sin(c)cos(b)) (sin(a)sin(b)sin(c) + cos(a)cos(c)) (sin(b)sin(c)cos(a) - sin(a)cos(c))]
[-sin(b) (sin(a)cos(b)) (cos(a)cos(b))]
Multiplying this resultant matrix by the vectors yields the solutions presented above.
Hi, I need help figuring out how to recreate this image using only CSS for the font and style. I attempted it with this code on JSFIDDLE: JSFIDDLE CSS *{ font-family: 'Asap', sans-serif; font-size:130px; color:#444; ...
Struggling to add a class or id to an HTML element for styling. Here's the code snippet: $('<li/>').append($('<p>', {html: val.title}), $('<p>', {html: 'Posted on ' + split[0]}) Tried the fol ...
In my AngularJS version 1 application with Ecmascript 6, I have a requirement to display a string where one part is in normal weight and the other part is bold. For instance, consider the following scenarios: Will start now Will start in 6 minutes Will ...
While I am incorporating Nightmare actions in my script, a question arises regarding the use of the wait function within the evaluate_now function. How can I utilize the wait function within the evaluate_now function? I am aware that I can simply use the ...
Currently, I am facing a somewhat awkward predicament where I have a function in main.js that requires an array that is populated in second.js... In simple terms, the function in main.js is designed to be reusable: function chug() { p1.innerHTML = st ...
Sorry for the inconvenience of asking for help with finding an issue in my code, but I'm facing challenges while learning React. I am attempting to pass a variable named hashRoute to a component in react. However, every time I try to access the prop ...
I have scoured the internet high and low in search of a solution to this issue. I've even delved into different extensions to try and figure out how it can be accomplished. What is the most straightforward method to add a functionality to my extension ...
My dilemma involves a table featuring images and checkboxes. I've been attempting to activate a submit button once any checkbox in the table is checked. Here's a snippet of my table setup: <form action="/slideShowPage" method="GET"> &l ...
$.each ( columns, function ( index, value ){ var td = document.createElement('td'); var text = document.createTextNode( data.attr( value ) ); td.appendChild(text); tr.appendChild(td); }); I am working with the data object and a s ...
Is there a way to replicate the movement of Three.js OrbitControl without having to click and drag, instead just having the camera follow mouse movement? I attempted to recreate it on my own, but found it to be too complex due to the camera moving on thre ...
When I upload my files using multer_upload.single('sample_fieldname'), retrieving the data is straightforward with req.file.*. However, how can I access this same data when utilizing multer with multiple files? For example, with multer_upload.fie ...
I currently have two tokens, an accesstoken and a refreshtoken, in the authorization section. The accesstoken is located in the front while the refreshtoken is in the back. I successfully obtained the accesstoken, but now I need to filter out the refresht ...
Struggling with JavaScript once again and feeling frustrated! Can someone please assist me? I am currently working on a basic chat application that retrieves content from a text file using an AJAX request. The content refreshes every few seconds, scrollin ...
Currently, I am working on a web page that contains various charts. My focus right now is on developing a simple loader as shown below: <div *ngIf="loading === true; else elseBlock" class="container"> <div class="grid-pulse la-3x"> </di ...
I'm currently working on implementing AngularJS Infinite Scroll without using jQuery. My goal is to display the first 3 data items when the page loads and then load the next 3 data items from a JSON array object as the user scrolls. The issue I am fac ...
I am in the process of creating a website that allows users to write JavaScript code using the Monaco editor. I have developed custom JavaScript libraries for them and want to enable auto-completion for these libraries. The custom libraries are written in ...
As a Node.js novice, I am delving into the realm of coding two nested try/catch blocks with retry logic. My goal is to have the inner try/catch block send any caught errors to the outer catch block, where I will increment a retry count by 1. Once this co ...
This datetime barChart is causing me some trouble. Interestingly, when I try to replicate the issue in a fiddle (check here), everything functions as expected. Please note that the data takes about 30 seconds to load from github. Below is the code for the ...
Can anyone assist with converting PHP to JavaScript (Node.js)? $key = crypt($key, $salt); I am currently in the process of rewriting a PHP script using Node.js, and I have encountered an issue with generating hash signatures similar to the ones created b ...
When searching for a date of birth in the frontend using AngularJS, the request is being sent with a different date of birth to the backend in Spring. I am sending the date of birth in the following format: Sun Aug 15 1999 00:00:00 GMT+0530 (India Standa ...