About

Labels

slider

Recent

Navigation

Get horizontal and vertical componenets of angle using Javascript


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,
Vx=(V)(Cosθ)
and
Vy=(V)(Sinθ)
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;

Demo 

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

Muhammad Hamza

Themelet provides the best in market today. We work hard to make the clean, modern and SEO friendly blogger templates.

Post A Comment:

0 comments: