javascript - 我的 Javascript 游戏的坐标 - 基于 Angular ,我什么时候使用 Sin Cos 和 Tan?

标签 javascript math html canvas

JavaScript 坐标 Sin、Cos 或 Tan? 我正在尝试在网络浏览器中学习一些用于游戏开发的基本三 Angular 函数。我知道 soh cah toa 规则等。我知道我们也在 -1 和 1 之间工作。

不过我很困惑,我需要根据 Angular 分别计算出 x 和 y 坐标。

这是我必须计算出 x 和 y Angular 方向的方法,它确实有效(感谢 Loktar)。

velY = -Math.cos(angle * Math.PI / 180) * thrust;
velX = Math.sin(angle * Math.PI / 180) * thrust;

据我了解,我正在根据一个小公式找到 x 和 y 的余弦值,以将我的 Angular 变量转换为弧度。

但是,为什么需要对 x 使用 cos 而对 y 使用 sin? tan从哪里来?这与圆的 4 个象限有关吗?

当我只给出一个 Angular 并且我需要使用 x,y 算出该 Angular 在圆上的位置时,我如何知道何时使用 sin cos 或 tan?

任何简单的图表或解释都会非常有帮助!

谢谢

最佳答案

基本定义(来自您的三 Angular 函数书):

cos ϴ = x/h, sin ϴ = y/h

描述 x、y 和 H 的免费 ASCII 艺术:

         _
         /\  assume we're going this way 
        /
       /|
      / |
  h  /  |
    /   |  Y
   /    |
  /ϴ    |
 +-------
    X

一个向量可以拆分为两个向量的和。 (您可以在图中将此视为 H 米向东北与向东 X 米和向北 Y 米相同)

在这种情况下,H 对应于您当前的推力。您想要找到该推力的 X 和 Y 分量。

因为 cos ϴ = X/H(余弦的基本定义),我们可以说(通过简单的代数)

X = H * cos ϴ

但是,ϴ 被假定为弧度度量。如果您使用的是度数,则必须乘以 Math.PI/180 才能获得正确的值。因此,你有

ϴ = angle * Math.PI / 180

我们很接近!现在我们经典的余弦定义公式(当翻译成我们的术语时)看起来像

cos (angle * Math.PI / 180) = X / H

H 是我们的推力矢量,X 只是我们推力矢量的水平部分。

“现在,等一下,”你说。 “那我为什么要用余弦来计算垂直速度?我觉得你的坐标轴好像翻转了。”是啊。这是标准的几何方向—— Angular 是从 --------> 直接向右逆时针旋转测量的。你的轴被翻转是因为你将你的 Angular 存储为“时钟 Angular ”,即 0 度是在 12:00。为了使用标准几何方程,我们必须镜像整个宇宙,以便翻转 X 轴和 Y 轴。幸运的是,做到这一点的数学方法只是简单地交换方程式中所有的 X 和 Y。

standard 'math' coordinate system
            _
             /\  
            /
           /|
          / |       angles increase counterclockwise
      h  /  |
        /   |  Y
       /    |
      /ϴ    |
     +----------- (zero degrees starts here)
  (0,0)  X       


your coordinate system

  (zero degrees starts here)
       ^
       |   angles increase clockwise
       |   /
       |  /
       |ϴ/
       |/
       +

最后,余弦为什么有负数?因为这里是笛卡尔系统,我们在其中进行数学运算

 ^ y-axis
 |
 |
 +----> x-axis

这是您要绘制的笛卡尔系统(可能是 Canvas )

+------> x-axis
|
|
v y-axis

由于 y 轴朝向另一个方向,您将所有 y 值乘以负 1 以获得正确的方向

关于javascript - 我的 Javascript 游戏的坐标 - 基于 Angular ,我什么时候使用 Sin Cos 和 Tan?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5027950/

相关文章:

javascript - Parse.com 从其他类 Cloud Code 中的子查询获取用户

python - 计算两条曲线之间的面积

ruby - 如何从特定点获取对角线值?

javascript - 有什么方法可以在纯Javascript中仅循环更新 <div> 内容吗?

javascript - 使用\b 元字符与不使用它的结果相同

javascript - javascript 数组方法(map、forEach、reduce 等)的迭代顺序是否确定?

javascript - 为什么复制功能在 setTimeout 中不起作用?

go - 如何在 gonum 中将矩阵与向量相乘?

html - 关于 "CSS Centering an Unordered List"的意见

android - 将特定表解析为字符串数组 Jsoup