Blogger Ever

Get horizontal and vertical componenets of angle using Javascript

Its not difficult to get components of a vector using calculator and many of us our familiar about that. But this is something web-style calculation of X and Y components of a point.

Recently when I made the CSS3 box-shadow generator I tried to make something new and make it possible for user to select angle and it will generate horizontal and vertical distance from it. From my Physics classes I get to know some basics formula to generate components from a vector.
Check out the image below:

Lets take the distance as V, Vx as horizontal distance and Vy as vertical distance. θ is the angle which will be using in further process.

According to formula,
Lets calculate them simultaneously, Vx need distance and θ value to return value. So taking distance as 100 (pixels) and θ as 45 degrees.
var distance=100;
var theta=45;

Conversion of radians into degrees

The Javascript function of Cos and Sin returns the values of radians so if we'll going to put theta in them, I will get wrong answer. To convert that:
Math.PI * (theta / 180);

Finalizing values

I've calculated every required values.
var distance = 100,
    theta = 45,
    sinfun = Math.sin(Math.PI * (theta / 180))*distance,
    cosfun = Math.cos(Math.PI * (theta / 180))*distance;


See the Pen dPyEGx by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.