js前端可视化 | 单位平面向量旋转的数学原理与计算

2024-05-15 20:50:22

一、平面向量旋转原理：

如上图所示，我们用坐标系表示向量，已知原始向量A=(x1, x2)，旋转β角度后得到向量B=(x2, y2)，现在我们要求出向量B的坐标值。

此处我们设向量的长度R = 1；
根据三角函数公式，我们得出：
cosα = x1 / R = x1 / 1 = x1; （邻边比斜边）
sinα = y1 / R = y1 / 1 = y2; （对边比斜边）

下面先回顾三角函数两角和差公式：
cos(α+β)=cosα·cosβ-sinα·sinβ （余余正正，符号反）
cos(α-β)=cosα·cosβ+sinα·sinβ

sin(α±β)=sinα·cosβ±cosα·sinβ （正余余正，符号同）

旋转后的向量角度等于 α+β
因此：=>
cos(α+β)= x2 / R = x2;
sin(α+β) = y2 / R = y2;

=> cos(α+β) = cosα·cosβ-sinα·sinβ = x2;
sin(α+β) = sinα·cosβ + cosα·sinβ = y2;

得出 => x2 = x1 * cosβ - y1 * sinβ;
y2 = y1 * cosβ + x1 * sinβ;

最后我们可以得出向量B = (x1 * cosβ - y1 * sinβ, y1 * cosβ + x1 * sinβ)

二、js平面向量旋转代码示例：

let x1 = 1, y1 = 0;
let x2 = null, y2 = null;//dir : 旋转角度
function rotate(dir)
{x2 = x1 * Math.cos(dir) - y1 * Math.sin(dir);    y2 = y1 * Math.cos(dir) + x1 * Math.sin(dir);
}rotate(Math.PI/4);
console.log(x2, y2);

js前端可视化 | 单位平面向量旋转的数学原理与计算相关推荐

【视频】向量自回归VAR数学原理及R软件经济数据脉冲响应分析实例
最近我们被客户要求撰写关于向量自回归VAR的研究报告,包括一些图形和统计输出. 向量自回归 (VAR) 是一种用于多变量时间序列分析的统计模型,尤其是在变量具有相互影响关系的时间序列中,本视频中我们介 ...
java 平面向量_【JS图形学基础】平面向量的计算和运用实例
平面向量的计算和运用实例相关概念有向线段:具有方向的线段叫做有向线段,以A为起点,B为终点的有向线段记作或AB: 向量的模:有向线段AB的长度叫做向量的模,记作|AB|: 零向量:长度等于0的向 ...
【JS图形学基础】平面向量的计算和运用实例
平面向量的计算和运用实例相关概念有向线段:具有方向的线段叫做有向线段,以A为起点,B为终点的有向线段记作或AB: 向量的模:有向线段AB的长度叫做向量的模,记作|AB|: 零向量:长度等于0的向 ...
通过平面向量角度认知世界
通过这几天对平面向量的研究,我是越来越有兴趣了,因为平面向量让我开拓眼界,给我一个新的认知角度来看待世界,"问题是最好的老师",我讲通过自己提出问题,来进行解决和总结,让自己对平面 ...
高中数学必修4知识点：第二章平面向量（复习必备）图文
大家好,昨天分享高中数学必修4第一章知识点,今天继续分享高中数学必修4知识点第二章平面向量,平面向量是中数学必修4难点,有哪些知识点需要学习巩固,老师整理好高中数学必修4平面向量知识点,希望对大家有帮 ...
前端 js 文件大小转换/单位换算
前端 js 文件大小转换/单位换算 /*** 文件大小转换/单位换算* @param size* @param pointLength* @param units* @returns {*}*/ fu ...
PHP密码问题陈婷代码_登录中利用JS前端加密PHP后端解密保证数据非明文传输的安全方法...
为什么要研究这个呢,因为我所在单位的信息管理部门在监控系统上发现有大量的明文账号(身份证号)和密码在传输,被告知这很不安全,索性就直接解决这个问题,利用JS前端加密PHP后端再加密来解决这个问题,保证 ...
一份小白前端可视化学习指南——附思维导图
一份小白前端可视化学习指南--附思维导图前言因为群里粉丝一直要求我写一篇「可视化入门指南」,今天他来了.其实说起前端可视化,大家所能想到的就是各种图表,大屏.这种看着贼炫酷,而笔者呢工作也一直从事 ...
绕任一向量旋转矩阵计算思考与实现
欢迎关注更多精彩关注我,学习常用算法与数据结构,一题多解,降维打击. 问题提出如图所示,在空间中有一向量A,问点O绕A方向逆时针旋转角度α的矩阵如何表示. 问题分析问题化规直接去构造一个矩阵是 ...

最新文章

热门文章